{
  "5 分钟上手 ECharts": {
    "desc": "<h2 id=\"-echarts\">获取 ECharts</h2>\n<p>你可以通过以下几种方式获取 Apache ECharts<sup>TM</sup>。</p>\n<ul>\n<li><p>从 <a href=\"https://echarts.apache.org/zh/download.html\" target=\"_blank\">Apache ECharts 官网下载界面</a> 获取官方源码包后构建。</p>\n</li>\n<li><p>在 ECharts 的 <a href=\"https://github.com/apache/echarts/releases\" target=\"_blank\">GitHub</a> 获取。</p>\n</li>\n<li><p>通过 npm 获取 echarts，<code class=\"codespan\">npm install echarts --save</code>，详见“<a href=\"tutorial.html#%E5%9C%A8%20webpack%20%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts\" target=\"_blank\">在 webpack 中使用 echarts</a>”</p>\n</li>\n<li><p>通过 <a href=\"https://www.jsdelivr.com/package/npm/echarts\" target=\"_blank\">jsDelivr</a> 等 CDN 引入</p>\n</li>\n</ul>\n<h2 id=\"-echarts\">引入 ECharts</h2>\n<p>通过标签方式直接引入构建好的 echarts 文件</p>\n<pre><code class=\"lang-html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;utf-8&quot;&gt;\n    &lt;!-- 引入 ECharts 文件 --&gt;\n    &lt;script src=&quot;echarts.min.js&quot;&gt;&lt;/script&gt;\n&lt;/head&gt;\n&lt;/html&gt;\n</code></pre>\n<h2 id=\"-\">绘制一个简单的图表</h2>\n<p>在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。</p>\n<pre><code>&lt;body&gt;\n    &lt;!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --&gt;\n    &lt;div id=&quot;main&quot; style=&quot;width: 600px;height:400px;&quot;&gt;&lt;/div&gt;\n&lt;/body&gt;\n</code></pre><p>然后就可以通过 <a href=\"api.html#echarts.init\" target=\"_blank\">echarts.init</a> 方法初始化一个 echarts 实例并通过 <a href=\"api.html#echartsInstance.setOption\" target=\"_blank\">setOption</a> 方法生成一个简单的柱状图，下面是完整代码。</p>\n<pre><code class=\"lang-html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;utf-8&quot;&gt;\n    &lt;title&gt;ECharts&lt;/title&gt;\n    &lt;!-- 引入 echarts.js --&gt;\n    &lt;script src=&quot;echarts.min.js&quot;&gt;&lt;/script&gt;\n&lt;/head&gt;\n&lt;body&gt;\n    &lt;!-- 为ECharts准备一个具备大小（宽高）的Dom --&gt;\n    &lt;div id=&quot;main&quot; style=&quot;width: 600px;height:400px;&quot;&gt;&lt;/div&gt;\n    &lt;script type=&quot;text/javascript&quot;&gt;\n        // 基于准备好的dom，初始化echarts实例\n        var myChart = echarts.init(document.getElementById(&#39;main&#39;));\n\n        // 指定图表的配置项和数据\n        var option = {\n            title: {\n                text: &#39;ECharts 入门示例&#39;\n            },\n            tooltip: {},\n            legend: {\n                data:[&#39;销量&#39;]\n            },\n            xAxis: {\n                data: [&quot;衬衫&quot;,&quot;羊毛衫&quot;,&quot;雪纺衫&quot;,&quot;裤子&quot;,&quot;高跟鞋&quot;,&quot;袜子&quot;]\n            },\n            yAxis: {},\n            series: [{\n                name: &#39;销量&#39;,\n                type: &#39;bar&#39;,\n                data: [5, 20, 36, 10, 10, 20]\n            }]\n        };\n\n        // 使用刚指定的配置项和数据显示图表。\n        myChart.setOption(option);\n    &lt;/script&gt;\n&lt;/body&gt;\n&lt;/html&gt;\n</code></pre>\n<p>这样你的第一个图表就诞生了！</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/getting-started&reset=1&edit=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n<p>你也可以直接进入 <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/getting-started\" target=\"_blank\">ECharts Gallery</a> 中查看编辑示例</p>\n"
  },
  "ECharts 5 新特性": {
    "desc": "<p>数据可视化在过去的几年中得到了长足的发展。开发者对于可视化产品的期待不再是简单的图表创建工具，而在交互、性能、数据处理等方面有了更高级的需求。</p>\n<p>Apache ECharts 始终致力于让开发者以更方便的方式创造灵活丰富的可视化作品。在最新推出的 Apache ECharts 5，我们着力加强了图表的叙事能力，让开发者可以以更简单的方式，讲述数据背后的故事。</p>\n<p><img src=\"documents/asset/img/feature-v5/echarts-5.png\" width=\"800px\" /></p>\n<p>“表·达”是 Apache ECharts 5 的核心，通过五大模块、十五项特性的全面升级，围绕可视化作品的叙事表达能力，让图“表”更能传“达”数据背后的故事，帮助开发者更轻松地创造满足各种场景需求的可视化作品。</p>\n<h2 id=\"-\">动态叙事</h2>\n<p>动画对于人类认知的重要性不言而喻。在之前的作品中，我们会通过初始化动画和过渡动画帮助用户理解数据变换之间的联系，让图表的出现和变换显得不那么生硬。这次，我们更是大幅度增强了我们的动画叙事能力，。希望能够进一步发挥动画对于用户认知的帮助作用，借助图表的动态叙事功能，帮助用户更容易理解图表背后表达的故事。</p>\n<h4 id=\"-\">动态排序图</h4>\n<p>Apache ECharts 5 新增支持动态排序柱状图（bar-racing）以及动态排序折线图（line-racing），帮助开发者方便地创建带有时序性的图表，展现数据随着时间维度上的变化，讲述数据的演变过程。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-race-country&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-race&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n\n<p>动态排序图展现了不同的类目随着时间在排名上的衍变。而开发者只需要通过几行简单的配置项就可以在 ECharts 中开启这样的效果。</p>\n<h4 id=\"-\">自定义系列动画</h4>\n<p>除了动态排序图，Apache ECharts 5 在自定义系列中提供了更加丰富强大的动画效果，支持标签数值文本的插值动画，图形的形变（morph）、分裂（separate）、合并（combine）等效果的过渡动画。</p>\n<p>想象一下，用这些动态效果，你可以创造出多么令人称奇的可视化作品！</p>\n<h2 id=\"-\">视觉设计</h2>\n<p>视觉设计的作用并不仅仅是为了让图表更好看，更重要的是，符合可视化原理的设计可以帮用户更快速地理解图表想表达的内容，并且尽可能消除不良设计带来的误解。</p>\n<h4 id=\"-\">默认设计</h4>\n<p>我们发现，有很大一部分开发者使用了 ECharts 默认的主题样式，因而设计优雅、符合可视化原理的默认主题设计是非常重要的。在 Apache ECharts 5 中，我们重新设计了默认的主题样式，针对不同的系列和组件分别做了优化调整。以主题色为例，我们考量了颜色之间的区分度、与背景色的对比度、相邻颜色的和谐度等因素，并且确保色觉辨识障碍人士也能清楚地区分数据。</p>\n<p><img src=\"documents/asset/img/feature-v5/theme-color.png\" width=\"400px\" /></p>\n<p>我们以最常用的柱状图为例，来看看新版本浅色主题和深色主题的样式：</p>\n<p><img src=\"documents/asset/img/feature-v5/new-theme-light.png\" width=\"500px\" />\n<img src=\"documents/asset/img/feature-v5/new-theme-dark.png\" width=\"500px\" /></p>\n<p>对于数据区域缩放，时间轴等交互组件，我们也设计了全新的样式并且提供了更好的交互体验：</p>\n<p><img src=\"documents/asset/img/feature-v5/dataZoom.png\" width=\"500px\" /></p>\n<p><img src=\"documents/asset/img/feature-v5/timeline.png\" width=\"500px\" /></p>\n<h4 id=\"-\">标签</h4>\n<p>标签是图表中的核心元素之一，清晰而明确的标签可以帮助用户对数据有更准确的理解。Apache ECharts 5 提供了多种新的标签功能，让密集的标签能清晰显示、准确表意。</p>\n<p>Apache ECharts 5 可以通过一个配置项开启自动隐藏重叠的标签。对于超出显示区域的标签，可以选择自动截断或者换行。密集的饼图标签，现在有了更美观的自动排布。</p>\n<p>这些功能可以帮助避免文字过于密集影响可读性。并且，无需开发者编写额外的代码就能默认生效，大大简化了开发者的开发成本。</p>\n<p>我们也提供了多个配置项来让开发者主动控制标签的布局策略，例如标签拖动、整体显示在画布边缘，用引导线和图形元素连接，并且仍可联动高亮表达关联关系。</p>\n<p>新的标签功能可以让你在移动端这样局限的空间内也可以有很优雅的标签展示：</p>\n<p><img src=\"documents/asset/img/feature-v5/pie-label.png\" height=\"150px\" />\n<img src=\"documents/asset/img/feature-v5/pie-label-2.png\" height=\"150px\" /></p>\n<h4 id=\"-\">时间轴</h4>\n<p>Apache ECharts 5 带来了适于表达时间标签刻度的时间轴。时间轴的默认设计更突出重要的信息，并且提供了更灵活的定制化能力，让开发者根据不同的需求定制时间轴的标签内容。</p>\n<p>首先，时间轴不再如之前般绝对平均分割，而是选取年、月、日、整点这类更有意义的点来展示，并且能同时显示不同层级的刻度。标签的 <code class=\"codespan\">formatter</code> 支持了时间模版（例如 <code class=\"codespan\">{yyyy}-{MM}-{dd}</code>），并且可以为不同时间粒度的标签指定不同的 <code class=\"codespan\">formatter</code>，结合已有的富文本标签，可以定制出醒目而多样的时间效果。</p>\n<p>不同的 dataZoom 粒度下时间刻度的显示：</p>\n<p><img src=\"documents/asset/img/feature-v5/time-axis.png\" width=\"600px\" /></p>\n<p><img src=\"documents/asset/img/feature-v5/time-axis-2.png\" width=\"600px\" /></p>\n<h4 id=\"-\">提示框</h4>\n<p>提示框（Tooltip）是一种最常用的可视化组件，可以帮助用户交互式地了解数据的详细信息。在 Apache ECharts 5 中，我们对提示框的样式进行了优化，通过对字体样式，颜色的调整，指向图形的箭头，跟随图形颜色的边框色等功能，让提示框的默认展示优雅又清晰。并且改进了富文本的渲染逻辑，确保显示效果与 HTML 方式一致，让用户在不同场景下可以选择不同的技术方案实现同样的效果。</p>\n<p><img src=\"documents/asset/img/feature-v5/new-tooltip.png\" height=\"200px\" />\n<img src=\"documents/asset/img/feature-v5/new-tooltip-2.png\" height=\"200px\" /></p>\n<p>除此之外，我们这次也加上了提示框内的列表按照数值大小或者类目顺序排序的功能。</p>\n<h4 id=\"-\">仪表盘</h4>\n<p>我们看到社区用户创建了很多酷炫的仪表盘图表，但是他们的配置方式往往比较复杂而取巧。因此，我们对仪表盘的功能作了全面升级，支持了图片或者矢量路径绘制指针、也支持了锚点（anchor）配置项、进度条（progress）、圆角效果等等配置项。</p>\n<p>不同样式的仪表盘指针：</p>\n<p><img src=\"documents/asset/img/feature-v5/gauge-pointer.png\" width=\"600px\" /></p>\n<p>这些升级，不仅可以让开发者用更简单的配置项实现酷炫的效果，而且带来了更丰富的定制能力。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=gauge-clock&edit=1&reset=1\" width=\"600\" height=\"600\" ></iframe>\n\n\n<h4 id=\"-\">扇形圆角</h4>\n<p>圆角可以带来更美观而柔和的视觉，也能够赋予更多的创造力。Apache ECharts 5 支持了饼图、旭日图、矩形树图的扇形圆角。可不要小看了简单的圆角配置项，合理地搭配其他的效果，就可以形成更具个性的的可视化作品。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-borderRadius&edit=1&reset=1\" width=\"400\" height=\"400\" ></iframe>\n\n\n\n\n<h2 id=\"-\">交互能力</h2>\n<p>可视化作品的交互能力帮助用户探索了解作品，加深对于图表主旨的理解。</p>\n<h4 id=\"-\">状态管理</h4>\n<p>在 ECharts 4 中有高亮（emphasis）和普通（normal）两个交互的状态，在鼠标移到图形上的时候会进入高亮状态以区分该数据，开发者可以分别设置这两个状态的颜色，阴影等样式。</p>\n<p>这次在 Apache ECharts 5 中，我们在原先的鼠标 hover 高亮的基础上，新增加了<strong>淡出</strong>其它非相关元素的效果，从而可以达到聚焦目标数据的目的。</p>\n<p>比如在这个<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category-stack\" target=\"_blank\">柱状图</a>的例子中，鼠标移到一个系列上的时候，其它非相关的系列就会淡出，从而可以更清晰的突出聚焦系列中数据的对比。在关系图，树图，旭日图，桑基等更复杂数据结构的图上，也可以通过淡出非相关元素来观察数据之间的联系。而且颜色，阴影等在高亮（emphasis）中可以设置的样式，现在也可以在淡出（blur）状态中设置了。</p>\n<p>除此之外，我们为所有系列还添加了<strong>点击选中</strong>这个之前只有在饼图、地图等少数系列中才能开启的交互，开发者可以设置为单选或多选模式，并且通过监听 <code class=\"codespan\">selectchanged</code> 事件获取到选中的所有图形然后进行更进一步的处理。与高亮和淡出一样，选中的样式也可以在 <code class=\"codespan\">select</code> 中配置。</p>\n<h4 id=\"-\">性能提升</h4>\n<h5 id=\"-\">脏矩形渲染</h5>\n<p>Apache ECharts 5 新支持了脏矩形渲染，解决只有局部变化的场景下的性能瓶颈。在使用 Canvas 渲染器时，脏矩形渲染技术探测并只更新视图变化的部分，而不是任何变动都引起画布完全重绘。这能在一些特殊场景下帮助提高渲染帧率，例如在图形很多时候，鼠标频繁触发一些图形高亮的场景。以往这类场景，会使用额外的 Canvas 层以优化性能，但是这种方式不是所有场景都通用，而且对于复杂的样式的效果并不理想。脏矩形渲染很好地同时满足了性能和显示正确。</p>\n<p>脏矩形的可视化演示，红色框选部分为该帧重绘区域：</p>\n<p><img src=\"documents/asset/img/feature-v5/dirty-rect.gif\" width=\"500px\" /></p>\n<p>大家在新的示例页面选择开启脏矩形优化就可以看到该效果。</p>\n<h5 id=\"-\">实时时序数据的折线图性能优化</h5>\n<p>除此之外，海量数据下折线图的性能也有了大幅度的性能提升。我们经常碰到大量的实时时序数据的高性能绘制的需求，这些数据可能需要几百或者几十毫秒更新一次。</p>\n<p>Apache ECharts 5 对这些场景下的 CPU 消耗、内存占用、初始化时间都进行了深度的优化，使得百万量级的数据也能做到实时的更新（每次更新耗时少于 30ms），甚至对于千万级的数据，也可以在 1s 内渲染完，并且保持很小的内存占用以及流畅的提示框（tooltip）等交互。</p>\n<h2 id=\"-\">开发体验</h2>\n<p>我们希望如此强大的可视化工具可以被更多开发者以更简单的方式使用，因而开发者的开发体验也是我们非常关注的方面。</p>\n<h4 id=\"-\">数据集</h4>\n<p>ECharts 5 加强了数据集的数据转换能力，让开发者可以使用简单的方式实现常用的数据处理，如：数据过滤（filter）、排序（sort）、聚合（aggregate）、直方图（histogram）、简单聚类（clustering）、回归线计算（regression）等。开发者可以用统一的声明式方式来使用这些功能，可以方便地实现常用的数据操作。</p>\n<h4 id=\"-\">国际化</h4>\n<p>ECharts 原有的国际化方案，采用的是根据不同的语言参数打包出不同的部署文件的形式。​这种方式，使动态的语言和静态的代码包绑定在一起，使用的时候只能通过重新加载不同语言版本的 ECharts 代码来达到切换语言的目的。</p>\n<p>因此，从 Apache ECharts 5 开始，动态的语言包和静态的代码包分离开。切换语言的时候，只需要加载相应语言包​，通过类似挂载主题的方式，使用 <code class=\"codespan\">registerLocale</code> 函数挂载语言包对象​，重新初始化后就完成了语言的切换​。</p>\n<pre><code class=\"lang-js\">// import the lang object and set when init​\necharts.registerLocale(&#39;DE&#39;, lang);​\necharts.init(DomElement, null, {​\n   locale: &#39;DE&#39;​\n});\n</code></pre>\n<h4 id=\"typescript-\">TypeScript 重构</h4>\n<p>在近 8 年的时间里，Apache ECharts 已经发展成一个非常复杂的可视化库了，为了续可以更安全高效的进行重构和新功能的开发，我们在 Apache ECharts 5 的开发之初，使用 TypeScript 对代码进行了重写，TypeScript 所带来的强类型让我们更有信心地在 ECharts 5 开发的时候对代码进行大刀阔斧的重构以实现更多令人激动人心的特性。</p>\n<p>对于开发者，我们也可以从 TypeScript 代码直接生成更好更符合代码的<code class=\"codespan\">DTS</code>类型描述文件。在此之前，ECharts 的类型描述文件一直是由社区开发者帮我们维护并发布到<a href=\"https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/echarts\" target=\"_blank\">DefinityTyped</a>，这个有着不小的工作量，非常感谢大家的贡献。</p>\n<p>除此之外，如果开发者的组件是按需引入的，我们还提供了一个 <code class=\"codespan\">ComposeOption</code> 类型方法，可以组合出一个只包含了引入组件的配置项类型，可以带来更严格的类型检查，帮助你提前检测到未引入的组件类型。</p>\n<h2 id=\"-\">可访问性</h2>\n<p>Apache ECharts 一直非常重视无障碍设计，我们希望让视觉障碍人士也能平等了解图表传递的信息。并且也希望图表的开发者能以极低的开发成本实现这一点，因而有利于让开发者更愿意为视觉障碍人士提供支持。</p>\n<p>在上一个大版本中，我们支持了根据不同的图表类型和数据自动一键智能生成图表描述的功能，帮助开发者非常方便地支持图表的 DOM 描述信息。在 ECharts 5 中，我们也做了更多提高可访问性的设计，帮助视觉障碍人士更好地理解图表内容。</p>\n<h4 id=\"-\">主题配色</h4>\n<p>我们在设计新版默认主题样式的时候，将无障碍设计作为一个重要的考量依据，对颜色的明度和色值都进行反复测试，帮助视觉辨识障碍用户清楚地识别图表数据。​</p>\n<p>并且，针对有更进一步无障碍需求的开发者，我们还提供了特殊的高对比度主题，以更高对比度颜色的主题将数据作进一步区分。</p>\n<h4 id=\"-\">贴花图案</h4>\n<p>ECharts 5 还新增提供了贴花的功能，用图案辅助颜色表达，进一步帮助用户区分数据。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/aria-decal-simple&edit=1&reset=1\" width=\"600\" height=\"350\" ></iframe>\n\n\n<p>此外，贴花图案还能在一些其他的场景下提供帮助，比如：在报纸、书籍之类只有单色或者非常少的颜色的印刷品中，帮助更好地区分数据；用图形元素方便用户对数据产生更直观的理解等。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/aria-decal-newspaper&edit=1&reset=1\" width=\"600\" height=\"350\" ></iframe>\n\n\n\n\n<h2 id=\"-\">小结</h2>\n<p>除了以上介绍的功能，Apache ECharts 还在非常多的细节中做了改进，帮助开发者更轻松地创建默认好用、配置灵活的图表，用图表讲述数据背后的故事。</p>\n<p>感谢所有使用过 ECharts，甚至参与过社区贡献的开发者，正是你们才使得 Apache ECharts 5 成为可能。我们会以更大的热情投入到未来的开发中，Apache ECharts 也会以更大的诚意和大家在 6 相见！</p>\n"
  },
  "ECharts 5 升级指南": {
    "desc": "<p>本指南面向那些希望将 echarts 4.x（以下简称 <code class=\"codespan\">v4</code>）升级到 echarts 5.x（以下简称 <code class=\"codespan\">v5</code>）的用户。大家可以在 <a href=\"tutorial.html#ECharts%205%20新特性\" target=\"_blank\">ECharts 5 新特性</a> 中了解这次<code class=\"codespan\">v5</code>带来了哪些值得升级的新特性。在绝大多数情况下，开发者用不着为这个升级做什么额外的事，因为 echarts 一直尽可能地保持 API 的稳定和向后兼容。但是，<code class=\"codespan\">v5</code> 仍然带来了一些非兼容改动，需要特别关注。此外，在一些情况下，<code class=\"codespan\">v5</code> 提供了更好的 API 用来取代之前的 API，这些被取代的 API 将不再被推荐使用（当然，我们尽量兼容了这些改动）。我们会在这篇文档里尽量详尽得解释这些改动。</p>\n<p>因为我们在 <code class=\"codespan\">v5.0.1</code> 增加了新的<a href=\"tutorial.html#%E5%9C%A8%E6%89%93%E5%8C%85%E7%8E%AF%E5%A2%83%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts\" target=\"_blank\">按需引入接口</a>，所以本文档基于 <code class=\"codespan\">v5.0.1</code> 或者更高的版本。</p>\n<h2 id=\"-\">非兼容性改变</h2>\n<h4 id=\"-theme-\">默认主题（theme）</h4>\n<p>首先是默认主题的改动，<code class=\"codespan\">v5</code> 在配色等主题设计上做了很多的优化来达到更好的视觉效果。如果大家依旧想保留旧版本的颜色，可以手动声明颜色，如下：</p>\n<pre><code class=\"lang-js\">chart.setOption({\n    color: [\n        &#39;#c23531&#39;, &#39;#2f4554&#39;, &#39;#61a0a8&#39;, &#39;#d48265&#39;, &#39;#91c7ae&#39;, &#39;#749f83&#39;,\n        &#39;#ca8622&#39;, &#39;#bda29a&#39;, &#39;#6e7074&#39;, &#39;#546570&#39;, &#39;#c4ccd3&#39;\n    ],\n    // ...\n});\n</code></pre>\n<p>或者，做一个简单的 <code class=\"codespan\">v4</code> 主题：</p>\n<pre><code class=\"lang-js\">var themeEC4 = {\n    color: [\n        &#39;#c23531&#39;, &#39;#2f4554&#39;, &#39;#61a0a8&#39;, &#39;#d48265&#39;, &#39;#91c7ae&#39;, &#39;#749f83&#39;,\n        &#39;#ca8622&#39;, &#39;#bda29a&#39;, &#39;#6e7074&#39;, &#39;#546570&#39;, &#39;#c4ccd3&#39;\n    ]\n};\nvar chart = echarts.init(dom, themeEC4);\nchart.setOption(/* ... */);\n</code></pre>\n<h4 id=\"-echarts\">引用 ECharts</h4>\n<h5 id=\"-default-exports-\">去除 default exports 的支持</h5>\n<p>如果使用者在 <code class=\"codespan\">v4</code> 中这样引用了 echarts：</p>\n<pre><code class=\"lang-js\">import echarts from &#39;echarts&#39;;\n// 或者按需引入\nimport echarts from &#39;echarts/lib/echarts&#39;;\n</code></pre>\n<p>这两种方式，<code class=\"codespan\">v5</code> 中不再支持了。</p>\n<p>使用者需要如下更改代码解决这个问题：</p>\n<pre><code class=\"lang-js\">import * as echarts from &#39;echarts&#39;;\n// 按需引入\nimport * as echarts from &#39;echarts/lib/echarts&#39;;\n</code></pre>\n<h5 id=\"-\">按需引入</h5>\n<p>在 5.0.1 中，我们引入了新的<a href=\"tutorial.html#%E5%9C%A8%E6%89%93%E5%8C%85%E7%8E%AF%E5%A2%83%E4%B8%AD%E4%BD%BF%E7%94%A8%20ECharts\" target=\"_blank\">按需引入接口</a></p>\n<pre><code class=\"lang-js\">import * as echarts from &#39;echarts/core&#39;;\nimport { BarChart } from &#39;echarts/charts&#39;;\nimport { GridComponent } from &#39;echarts/components&#39;;\n// 注意，新的接口中默认不再包含 Canvas 渲染器，需要显示引入，如果需要使用 SVG 渲染模式则使用 SVGRenderer\nimport { CanvasRenderer } from &#39;echarts/renderers&#39;;\n\necharts.use([BarChart, GridComponent, CanvasRenderer]);\n</code></pre>\n<p>如果之前是使用<code class=\"codespan\">import &#39;echarts/lib/chart/bar&#39;</code>引入，新的接口对应的是<code class=\"codespan\">import {BarChart} from &#39;echarts/charts&#39;</code>;</p>\n<p>为了方便大家了解自己的配置项需要引入哪些模块，我们新的示例编辑页面添加了生成按需引入代码的功能，大家可以在示例编辑页的<code class=\"codespan\">完整代码</code>标签下选中按需引入后查看需要引入的模块以及相关代码。</p>\n<p>在大部分情况下，我们都推荐大家尽可能用这套新的按需引入接口，它可以最大程度的利用打包工具 tree-shaking 的能力，并且可以有效解决命名空间冲突的问题而且防止了内部结构的暴露。如果你依旧在使用 CommonJS 的模块写法，之前的方式我们也依旧是支持的：</p>\n<pre><code class=\"lang-js\">const echarts = require(&#39;echarts/lib/echarts&#39;);\nrequire(&#39;echarts/lib/chart/bar&#39;);\nrequire(&#39;echarts/lib/component/grid&#39;);\n</code></pre>\n<p>其次，因为我们的源代码已使用 TypeScript 重写，<code class=\"codespan\">v5</code> 将不再支持从 <code class=\"codespan\">echarts/src</code> 引用文件，需要改为从<code class=\"codespan\">echarts/lib</code>引入。</p>\n<h5 id=\"-\">依赖调整</h5>\n<blockquote>\n<p>注意：该部分只针对为了保证较小的打包体积而是用按需引入接口的开发者，如果是全量引入的不需要关注</p>\n</blockquote>\n<p>为了保证 tree-shaking 后的体积足够小，我们去除了一些之前会默认被打包进来的依赖。比如前面提到的在使用新的按需引入接口的时候，<code class=\"codespan\">CanvasRenderer</code>将不再被默认引入，这样可以保证只需要使用 SVG 渲染模式的时候不会把不需要的 Canvas 渲染代码也一起打包进来，除此之外，还有下面这些依赖的改动：</p>\n<ul>\n<li>在使用折线图，柱状图中不再默认引入直角坐标系组件，因此之前使用下面的引入方式<pre><code class=\"lang-js\">const echarts = require(&#39;echarts/lib/echarts&#39;);\nrequire(&#39;echarts/lib/chart/bar&#39;);\nrequire(&#39;echarts/lib/chart/line&#39;);\n</code></pre>\n需要再单独引入<code class=\"codespan\">grid</code>组件<pre><code class=\"lang-js\">require(&#39;echarts/lib/component/grid&#39;);\n</code></pre>\n</li>\n</ul>\n<p>参考 issue：<a href=\"https://github.com/apache/echarts/issues/14080\" target=\"_blank\">#14080</a>, <a href=\"https://github.com/apache/echarts/issues/13764\" target=\"_blank\">#13764</a></p>\n<ul>\n<li>默认不再引入<code class=\"codespan\">aria</code>组件，如果需要的话可以手动引入。<pre><code class=\"lang-js\">import { AriaComponent } from &#39;echarts/components&#39;;\necharts.use(AriaComponent);\n</code></pre>\n或者：<pre><code class=\"lang-js\">require(&#39;echarts/lib/component/aria&#39;);\n</code></pre>\n</li>\n</ul>\n<h4 id=\"-geojson\">去除内置的 geoJSON</h4>\n<p><code class=\"codespan\">v5</code> 移除了内置的 geoJSON（原先在 <code class=\"codespan\">echarts/map</code> 文件夹下）。这些 geoJSON 文件本就一直来源于第三方。如果使用者仍然需要他们，可以去从老版本中得到，或者自己寻找更合适的数据然后通过 registerMap 接口注册到 ECharts 中。</p>\n<h4 id=\"-\">浏览器兼容性</h4>\n<p><code class=\"codespan\">v5</code> 不再支持 IE8 浏览器。我们不再继续维护和升级之前的 <a href=\"https://github.com/ecomfe/zrender/tree/4.3.2/src/vml\" target=\"_blank\">VML 渲染器</a> 来着实现 IE8 的兼容。如果使用者确实有很强的需求，那么欢迎提 pull request 来升级 VML 渲染器，或者单独维护一个第三方 VML 渲染器，我们从 <code class=\"codespan\">v5.0.1</code> 开始支持注册独立的渲染器了。</p>\n<h4 id=\"echarts-\">ECharts 配置项调整</h4>\n<h5 id=\"-\">视觉样式设置的优先级改变</h5>\n<p><code class=\"codespan\">v5</code> 对调了 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap 组件</a> 和 <a href=\"option.html#series-scatter.itemStyle\" target=\"_blank\">itemStyle</a> | <a href=\"option.html#series-scatter.lineStyle\" target=\"_blank\">lineStyle</a> | <a href=\"option.html#series-scatter.areaStyle\" target=\"_blank\">areaStyle</a> 的视觉样式优先级。</p>\n<p>具体来说，<code class=\"codespan\">v4</code> 中，<a href=\"option.html#visualMap\" target=\"_blank\">visualMap 组件</a> 中生成的视觉样式（如，颜色、图形类型、图形尺寸等）的优先级，比开发者在 <a href=\"option.html#series-scatter.itemStyle\" target=\"_blank\">itemStyle</a> | <a href=\"option.html#series-scatter.lineStyle\" target=\"_blank\">lineStyle</a> | <a href=\"option.html#series-scatter.areaStyle\" target=\"_blank\">areaStyle</a> 中设置的样式的优先级高，也就是说如果他们同时设置的话，前者会生效而后者不会生效。这带来了些麻烦：假如使用者在使用 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap 组件</a> 时，又想针对某个数据项对应的图形，设置 <a href=\"option.html#series-scatter.itemStyle\" target=\"_blank\">itemStyle</a> 样式，则做不到。<code class=\"codespan\">v5</code> 中于是提高了 <a href=\"option.html#series-scatter.itemStyle\" target=\"_blank\">itemStyle</a> | <a href=\"option.html#series-scatter.lineStyle\" target=\"_blank\">lineStyle</a> | <a href=\"option.html#series-scatter.areaStyle\" target=\"_blank\">areaStyle</a> 的优先级，使他们能生效。</p>\n<p>在绝大多处情况下，这个变化并不会带来什么影响。但是为保险起见，使用者在升级 <code class=\"codespan\">v4</code> 到 <code class=\"codespan\">v5</code> 时，还是可以检查下，是否有同时使用 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> 和 <a href=\"option.html#series-scatter.itemStyle\" target=\"_blank\">itemStyle</a> | <a href=\"option.html#series-scatter.lineStyle\" target=\"_blank\">lineStyle</a> | <a href=\"option.html#series-scatter.areaStyle\" target=\"_blank\">areaStyle</a> 的情况。</p>\n<h5 id=\"-padding\">富文本的 <code class=\"codespan\">padding</code></h5>\n<p><code class=\"codespan\">v5</code> 调整了 <a href=\"option.html#series-scatter.label.rich.&lt;style_name&gt;.padding\" target=\"_blank\">rich.?.padding</a> 的格式使其更符合 CSS 的规范。<code class=\"codespan\">v4</code> 里，例如 <code class=\"codespan\">rich.?.padding: [11, 22, 33, 44]</code> 表示 <code class=\"codespan\">padding-top</code> 是 <code class=\"codespan\">33</code> 且 <code class=\"codespan\">padding-bottom</code> 是 <code class=\"codespan\">11</code>。在 <code class=\"codespan\">v5</code> 中调整了上下的位置，<code class=\"codespan\">rich.?.padding: [11, 22, 33, 44]</code> 表示  <code class=\"codespan\">padding-top</code> 是 <code class=\"codespan\">11</code> 且 <code class=\"codespan\">padding-bottom</code> 是 <code class=\"codespan\">33</code>。</p>\n<p>如果使用者有在使用 <a href=\"option.html#series-scatter.label.rich.&lt;style_name&gt;.padding\" target=\"_blank\">rich.?.padding</a>，需要注意调整下这个顺序。</p>\n<h2 id=\"echarts-\">ECharts 的相关扩展</h2>\n<p>如果想要升级到 <code class=\"codespan\">v5</code> ，下面这些扩展需要升级到最新的版本实现兼容。</p>\n<ul>\n<li><a href=\"https://github.com/ecomfe/echarts-gl\" target=\"_blank\">echarts-gl</a></li>\n<li><a href=\"https://github.com/ecomfe/echarts-wordcloud\" target=\"_blank\">echarts-wordcloud</a></li>\n<li><a href=\"https://github.com/ecomfe/echarts-liquidfill\" target=\"_blank\">echarts-liquidfill</a></li>\n</ul>\n<h2 id=\"-api\">不再推荐使用的 API</h2>\n<p>一些 API（包括接口调用，事件监听和配置项）在 <code class=\"codespan\">v5</code> 中不再推荐使用。当然，使用者仍然可以用他们，只是会在 dev 模式下，在 console 中打印一些 warning，并不会影响功能。但是从长远维护考虑，我们还是推荐升级成新的 API。</p>\n<p>下面是不再推荐使用的 API 以及推荐的新 API：</p>\n<ul>\n<li>图形元素 transform 相关的属性被改变了：<ul>\n<li>变更点：<ul>\n<li><code class=\"codespan\">position: [number, number]</code> 改为 <code class=\"codespan\">x: number</code> / <code class=\"codespan\">y: number</code>。</li>\n<li><code class=\"codespan\">scale: [number, number]</code> 改为 <code class=\"codespan\">scaleX: number</code> / <code class=\"codespan\">scaleY: number</code>。</li>\n<li><code class=\"codespan\">origin: [number, number]</code> 改为 <code class=\"codespan\">originX: number</code> / <code class=\"codespan\">originY: number</code>。</li>\n</ul>\n</li>\n<li><code class=\"codespan\">position</code>、<code class=\"codespan\">scale</code> 和 <code class=\"codespan\">origin</code> 仍然支持，但已不推荐使用。</li>\n<li>它影响到这些地方：<ul>\n<li>在<code class=\"codespan\">graphic</code>组件中：每个元素的声明。</li>\n<li>在 <code class=\"codespan\">custom series</code> 中：<code class=\"codespan\">renderItem</code> 返回的每个元素的声明。</li>\n<li>直接使用 zrender 图形元素时。</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>Text 相关的属性被改变：<ul>\n<li>变更点：<ul>\n<li>图形元素附带的文本的声明方式被改变：<ul>\n<li>除了 <code class=\"codespan\">Text</code> 元素之外，其他元素中的属性 <code class=\"codespan\">style.text</code> 都不推荐使用了。取而代之的是新属性 <code class=\"codespan\">textContent</code> 和 <code class=\"codespan\">textConfig</code>，他们能带来更丰富的功能。</li>\n<li>其中，下面左边部分的这些属性已不推荐使用或废弃。请使用下面的右边部分的属性：<ul>\n<li>textPosition =&gt; textConfig.position</li>\n<li>textOffset =&gt; textConfig.offset</li>\n<li>textRotation =&gt; textConfig.rotation</li>\n<li>textDistance =&gt; textConfig.distance</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>下面左边部分的属性在 <code class=\"codespan\">style</code> 和 <code class=\"codespan\">style.rich.?</code> 中已不推荐使用或废弃。请使用下面右边的属性：<ul>\n<li>textFill =&gt; fill</li>\n<li>textStroke =&gt; stroke</li>\n<li>textFont =&gt; font</li>\n<li>textStrokeWidth =&gt; lineWidth</li>\n<li>textAlign =&gt; align</li>\n<li>textVerticalAlign =&gt; verticalAlign</li>\n<li>textLineHeight =&gt;</li>\n<li>textWidth =&gt; width</li>\n<li>textHeight =&gt; hight</li>\n<li>textBackgroundColor =&gt; backgroundColor</li>\n<li>textPadding =&gt; padding</li>\n<li>textBorderColor =&gt; borderColor</li>\n<li>textBorderWidth =&gt; borderWidth</li>\n<li>textBorderRadius =&gt; borderRadius</li>\n<li>textBoxShadowColor =&gt; shadowColor</li>\n<li>textBoxShadowBlur =&gt; shadowBlur</li>\n<li>textBoxShadowOffsetX =&gt; shadowOffsetX</li>\n<li>textBoxShadowOffsetY =&gt; shadowOffsetY</li>\n</ul>\n</li>\n<li>注：这些属性并没有变化：<ul>\n<li>textShadowColor</li>\n<li>textShadowBlur</li>\n<li>textShadowOffsetX</li>\n<li>textShadowOffsetY</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>它影响到这些地方：<ul>\n<li>在 <code class=\"codespan\">graphic</code> 组件中：每个元素的声明。（原来的写法仍兼容，但在一些很复杂的情况下，可能效果不完全一致。）</li>\n<li>在自定义系列（<code class=\"codespan\">custom series</code>）中：<code class=\"codespan\">renderItem</code> 返回中的每个元素的声明。（原来的写法仍兼容，但在一些很复杂的情况下，可能效果不完全一致。）</li>\n<li>直接使用 zrender API 创建图形元素。（不再兼容，原写法被废弃。）</li>\n</ul>\n</li>\n</ul>\n</li>\n<li>图表实例上的 API：<ul>\n<li><code class=\"codespan\">chart.one(...)</code> 已不推荐使用。</li>\n</ul>\n</li>\n<li><code class=\"codespan\">label</code>。<ul>\n<li>属性 <code class=\"codespan\">color</code>、<code class=\"codespan\">textBorderColor</code>、<code class=\"codespan\">backgroundColor</code>、<code class=\"codespan\">borderColor</code> 中，值 <code class=\"codespan\">auto</code> 已不推荐使用，而推荐使用 <code class=\"codespan\">&#39;inherit&#39;</code> 代替。</li>\n</ul>\n</li>\n<li><code class=\"codespan\">hoverAnimation</code>:<ul>\n<li>选项 <code class=\"codespan\">series.hoverAnimation</code> 已不推荐使用，使用 <code class=\"codespan\">series.emphasis.scale</code> 代替之。</li>\n</ul>\n</li>\n<li>折线图（<code class=\"codespan\">line series</code>）：<ul>\n<li>选项 <code class=\"codespan\">series.clipOverflow</code> 已不推荐使用，使用 <code class=\"codespan\">series.clip</code> 代替之。</li>\n</ul>\n</li>\n<li>自定义系列（<code class=\"codespan\">custom series</code>）。<ul>\n<li>在 <code class=\"codespan\">renderItem</code> 中，<code class=\"codespan\">api.style(...)</code> 和 <code class=\"codespan\">api.styleEmphasis(...)</code> 已不推荐使用。因为这两个接口其实并不真正必要，也很难保证向后兼容。用户可以通过 <code class=\"codespan\">api.visual(...)</code> 获取系统自动分配的视觉信息。</li>\n</ul>\n</li>\n<li>旭日图（<code class=\"codespan\">sunburst</code>）：<ul>\n<li>动作类型 <code class=\"codespan\">highlight</code> 已被弃用，请使用 <code class=\"codespan\">sunburstHighlight</code> 代替。</li>\n<li>动作类型 <code class=\"codespan\">downplay</code> 已被弃用，请使用 <code class=\"codespan\">sunburstUnhighlight</code> 代替。</li>\n<li>选项 <code class=\"codespan\">series.downplay</code> 已被弃用，请使用 <code class=\"codespan\">series.blur</code> 代替。</li>\n<li>选项 <code class=\"codespan\">series.highlightPolicy</code> 已不适用，请使用 <code class=\"codespan\">series.emphasis.focus</code> 代替。</li>\n</ul>\n</li>\n<li>饼图（<code class=\"codespan\">pie</code>）：<ul>\n<li>下面左边部分的 action 名已经不推荐使用。请使用右边的 action 名。<ul>\n<li><code class=\"codespan\">pieToggleSelect</code> =&gt; <code class=\"codespan\">toggleSelect</code>。</li>\n<li><code class=\"codespan\">pieSelect</code> =&gt; <code class=\"codespan\">select</code>。</li>\n<li><code class=\"codespan\">pieUnSelect</code> =&gt; <code class=\"codespan\">unselect</code>。</li>\n</ul>\n</li>\n<li>下面左边部分的事件名已经不推荐使用。请使用右边的事件名。<ul>\n<li><code class=\"codespan\">pieselectchanged</code> =&gt; <code class=\"codespan\">selectchanged</code>。</li>\n<li><code class=\"codespan\">pieselected</code> =&gt; <code class=\"codespan\">selected</code>。</li>\n<li><code class=\"codespan\">pieunselected</code> =&gt; <code class=\"codespan\">unselected</code>。</li>\n</ul>\n</li>\n<li>选项 <code class=\"codespan\">series.label.margin</code> 已经不推荐使用。使用 <code class=\"codespan\">series.label.edgeDistance</code> 代替。</li>\n<li>选项 <code class=\"codespan\">series.clockWise</code> 已经不推荐使用。使用 <code class=\"codespan\">series.clockwise</code> 代替。</li>\n<li>选项 <code class=\"codespan\">series.hoverOffset</code> 已经不推荐使用。使用 <code class=\"codespan\">series.emphasis.scaleSize</code> 代替。</li>\n</ul>\n</li>\n<li>地图（<code class=\"codespan\">map series</code>）：<ul>\n<li>下文左边部分的 action 名已经不推荐使用。请使用右边的 action 名。<ul>\n<li><code class=\"codespan\">mapToggleSelect</code> =&gt; <code class=\"codespan\">toggleSelect</code>。</li>\n<li><code class=\"codespan\">mapSelect</code> =&gt; <code class=\"codespan\">select</code>。</li>\n<li><code class=\"codespan\">mapUnSelect</code> =&gt; <code class=\"codespan\">unselect</code>。</li>\n</ul>\n</li>\n<li>下面左边部分的事件名已经不推荐使用。请使用右边的事件名。<ul>\n<li><code class=\"codespan\">mapselectchanged</code> =&gt; <code class=\"codespan\">selectchanged</code>。</li>\n<li><code class=\"codespan\">mapselected</code> =&gt; <code class=\"codespan\">selected</code>。</li>\n<li><code class=\"codespan\">mapunselected</code> =&gt; <code class=\"codespan\">unselected</code>。</li>\n</ul>\n</li>\n<li>选项 <code class=\"codespan\">series.mapType</code> 已经不推荐使用。使用 <code class=\"codespan\">series.map</code> 代替。</li>\n<li>选项 <code class=\"codespan\">series.mapLocation</code> 已经不推荐使用。</li>\n</ul>\n</li>\n<li>关系图（<code class=\"codespan\">graph series</code>）：<ul>\n<li>选项 <code class=\"codespan\">series.focusNodeAdjacency</code> 已经不推荐使用。使用 <code class=\"codespan\">series.emphasis: { focus: &#39;adjacency&#39;}</code> 代替。</li>\n</ul>\n</li>\n<li>仪表盘（<code class=\"codespan\">gauge series</code>）：<ul>\n<li>选项 <code class=\"codespan\">series.clockWise</code> 已经不推荐使用。使用 <code class=\"codespan\">series.clockwise</code> 代替。</li>\n<li>选项 <code class=\"codespan\">series.hoverOffset</code> 已经不推荐使用。使用 <code class=\"codespan\">series.emphasis.scaleSize</code> 代替。</li>\n</ul>\n</li>\n<li><code class=\"codespan\">dataZoom</code> 组件：<ul>\n<li>选项 <code class=\"codespan\">dataZoom.handleIcon</code> 如果使用 <code class=\"codespan\">SVGPath</code>，需要前缀 <code class=\"codespan\">path://</code>。</li>\n</ul>\n</li>\n<li>雷达图（<code class=\"codespan\">radar</code>）：<ul>\n<li>选项 <code class=\"codespan\">radar.name</code> 已经不推荐使用。使用 <code class=\"codespan\">radar.axisName</code> 代替。</li>\n<li>选项 <code class=\"codespan\">radar.nameGap</code> 已经不推荐使用。使用 <code class=\"codespan\">radar.axisNameGap</code> 代替。</li>\n</ul>\n</li>\n<li>Parse and format：<ul>\n<li><code class=\"codespan\">echarts.format.formatTime</code> 已经不推荐使用。使用 <code class=\"codespan\">echarts.time.format</code> 代替。</li>\n<li><code class=\"codespan\">echarts.number.parseDate</code> 已经不推荐使用。使用 <code class=\"codespan\">echarts.time.parse</code> 代替。</li>\n<li><code class=\"codespan\">echarts.format.getTextRect</code> 已经不推荐使用。</li>\n</ul>\n</li>\n</ul>\n"
  },
  "在打包环境中使用 ECharts": {
    "desc": "<p>假如你的开发环境使用了<code class=\"codespan\">npm</code>或者<code class=\"codespan\">yarn</code>等包管理工具，并且使用 Webpack 等打包工具进行构建，本文将会介绍如何引入 Apache ECharts<sup>TM</sup> 并通过 treeshaking 只打包需要的模块。</p>\n<h2 id=\"npm-echarts\">NPM 安装 ECharts</h2>\n<p>你可以使用如下命令通过 npm 安装 ECharts</p>\n<pre><code class=\"lang-shell\">npm install echarts --save\n</code></pre>\n<h2 id=\"-echarts\">引入 ECharts</h2>\n<pre><code class=\"lang-js\">import * as echarts from &#39;echarts&#39;;\n\n// 基于准备好的dom，初始化echarts实例\nvar myChart = echarts.init(document.getElementById(&#39;main&#39;));\n// 绘制图表\nmyChart.setOption({\n    title: {\n        text: &#39;ECharts 入门示例&#39;\n    },\n    tooltip: {},\n    xAxis: {\n        data: [&#39;衬衫&#39;, &#39;羊毛衫&#39;, &#39;雪纺衫&#39;, &#39;裤子&#39;, &#39;高跟鞋&#39;, &#39;袜子&#39;]\n    },\n    yAxis: {},\n    series: [{\n        name: &#39;销量&#39;,\n        type: &#39;bar&#39;,\n        data: [5, 20, 36, 10, 10, 20]\n    }]\n});\n</code></pre>\n<h2 id=\"-echarts-\">按需引入 ECharts 图表和组件</h2>\n<p>上面的代码会引入所有 ECharts 中所有的图表和组件，但是假如你不想引入所有组件，也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。</p>\n<pre><code class=\"lang-js\">// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。\nimport * as echarts from &#39;echarts/core&#39;;\n// 引入柱状图图表，图表后缀都为 Chart\nimport {\n    BarChart\n} from &#39;echarts/charts&#39;;\n// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component\nimport {\n    TitleComponent,\n    TooltipComponent,\n    GridComponent\n} from &#39;echarts/components&#39;;\n// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步\nimport {\n    CanvasRenderer\n} from &#39;echarts/renderers&#39;;\n\n// 注册必须的组件\necharts.use(\n    [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]\n);\n\n// 接下来的使用就跟之前一样，初始化图表，设置配置项\nvar myChart = echarts.init(document.getElementById(&#39;main&#39;));\nmyChart.setOption({\n    ...\n});\n</code></pre>\n<blockquote>\n<p>需要注意的是注意为了保证打包的体积是最小的，ECharts 按需引入的时候不再提供任何渲染器，所以需要选择引入<code class=\"codespan\">CanvasRenderer</code>或者<code class=\"codespan\">SVGRenderer</code>作为渲染器。这样的好处是假如你只需要使用 svg 渲染模式，打包的结果中就不会再包含无需使用的<code class=\"codespan\">CanvasRenderer</code>模块。</p>\n</blockquote>\n<p>我们在示例编辑页的“完整代码”标签提供了非常方便的生成按需引入代码的功能。这个功能会根据当前的配置项动态生成最小的按需引入的代码。你可以直接在你的项目中使用。</p>\n<h2 id=\"-typescript-\">在 TypeScript 中按需引入</h2>\n<p>对于使用了 TypeScript 来开发 ECharts 的开发者，我们提供了类型接口来组合出最小的<code class=\"codespan\">EChartsOption</code>类型。这个更严格的类型可以有效帮助你检查出是否少加载了组件或者图表。</p>\n<pre><code class=\"lang-ts\">import * as echarts from &#39;echarts/core&#39;;\nimport {\n    BarChart,\n    // 系列类型的定义后缀都为 SeriesOption\n    BarSeriesOption,\n    LineChart,\n    LineSeriesOption\n} from &#39;echarts/charts&#39;;\nimport {\n    TitleComponent,\n    // 组件类型的定义后缀都为 ComponentOption\n    TitleComponentOption,\n    GridComponent,\n    GridComponentOption\n} from &#39;echarts/components&#39;;\nimport {\n    CanvasRenderer\n} from &#39;echarts/renderers&#39;;\n\n// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型\ntype ECOption = echarts.ComposeOption&lt;\n  BarSeriesOption | LineSeriesOption | TitleComponentOption | GridComponentOption\n&gt;;\n\n// 注册必须的组件\necharts.use(\n    [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer]\n);\n\nvar option: ECOption = {\n    ...\n}\n</code></pre>\n"
  },
  "ECharts 基础概念概览": {
    "desc": "<p>本文介绍 Apache ECharts<sup>TM</sup> 最基本的名词和概念。</p>\n<h2 id=\"echarts-\">echarts 实例</h2>\n<p>一个网页中可以创建多个 <code class=\"codespan\">echarts 实例</code>。每个 <code class=\"codespan\">echarts 实例</code> 中可以创建多个图表和坐标系等等（用 <code class=\"codespan\">option</code> 来描述）。准备一个 DOM 节点（作为 echarts 的渲染容器），就可以在上面创建一个 echarts 实例。每个 echarts 实例独占一个 DOM 节点。</p>\n<p><br></p>\n<p><img width=\"500\" height=\"auto\" src=\"documents/asset/img/basic-concepts-overview/multiple-ec-instance.jpg\"></p>\n<h2 id=\"-series-\">系列（series）</h2>\n<p><code class=\"codespan\">系列</code>（<a href=\"option.html#series\" target=\"_blank\">series</a>）是很常见的名词。在 echarts 里，<code class=\"codespan\">系列</code>（<a href=\"option.html#series\" target=\"_blank\">series</a>）是指：一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”，而在 echarts 中取其扩展的概念，不仅表示数据，也表示数据映射成为的图。所以，一个 <code class=\"codespan\">系列</code> 包含的要素至少有：一组数值、图表类型（<code class=\"codespan\">series.type</code>）、以及其他的关于这些数据如何映射成图的参数。</p>\n<p>echarts 里系列类型（<code class=\"codespan\">series.type</code>）就是图表类型。系列类型（<code class=\"codespan\">series.type</code>）至少有：<a href=\"option.html#series-line\" target=\"_blank\">line</a>（折线图）、<a href=\"option.html#series-bar\" target=\"_blank\">bar</a>（柱状图）、<a href=\"option.html#series-pie\" target=\"_blank\">pie</a>（饼图）、<a href=\"option.html#series-scatter\" target=\"_blank\">scatter</a>（散点图）、<a href=\"option.html#series-graph\" target=\"_blank\">graph</a>（关系图）、<a href=\"option.html#series-tree\" target=\"_blank\">tree</a>（树图）、...</p>\n<p>如下图，右侧的 <code class=\"codespan\">option</code> 中声明了三个 <code class=\"codespan\">系列</code>（<a href=\"option.html#series\" target=\"_blank\">series</a>）：<a href=\"option.html#series-pie\" target=\"_blank\">pie</a>（饼图系列）、<a href=\"option.html#series-line\" target=\"_blank\">line</a>（折线图系列）、<a href=\"option.html#series-bar\" target=\"_blank\">bar</a>（柱状图系列），每个系列中有他所需要的数据（<a href=\"option.html#series.data\" target=\"_blank\">series.data</a>）。</p>\n<p><br></p>\n<p><img width=\"700\" height=\"auto\" src=\"documents/asset/img/basic-concepts-overview/series-all-a.jpg\"></p>\n<p><br></p>\n<p>类同地，下图中是另一种配置方式，系列的数据从 <a href=\"option.html#dataset\" target=\"_blank\">dataset</a> 中取：</p>\n<p><br></p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/basic-concepts-overview/series-all-b.jpg\"></p>\n<h2 id=\"-component-\">组件（component）</h2>\n<p>在系列之上，echarts 中各种内容，被抽象为“组件”。例如，echarts 中至少有这些组件：<a href=\"option.html#xAxis\" target=\"_blank\">xAxis</a>（直角坐标系 X 轴）、<a href=\"option.html#yAxis\" target=\"_blank\">yAxis</a>（直角坐标系 Y 轴）、<a href=\"option.html#grid\" target=\"_blank\">grid</a>（直角坐标系底板）、<a href=\"option.html#angleAxis\" target=\"_blank\">angleAxis</a>（极坐标系角度轴）、<a href=\"option.html#radiusAxis\" target=\"_blank\">radiusAxis</a>（极坐标系半径轴）、<a href=\"option.html#polar\" target=\"_blank\">polar</a>（极坐标系底板）、<a href=\"option.html#geo\" target=\"_blank\">geo</a>（地理坐标系）、<a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a>（数据区缩放组件）、<a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a>（视觉映射组件）、<a href=\"option.html#tooltip\" target=\"_blank\">tooltip</a>（提示框组件）、<a href=\"option.html#toolbox\" target=\"_blank\">toolbox</a>（工具栏组件）、<a href=\"option.html#series\" target=\"_blank\">series</a>（系列）、...</p>\n<p>我们注意到，其实系列（<a href=\"option.html#series\" target=\"_blank\">series</a>）也是一种组件，可以理解为：系列是专门绘制“图”的组件。</p>\n<p>如下图，右侧的 <code class=\"codespan\">option</code> 中声明了各个组件（包括系列），各个组件就出现在图中。</p>\n<p><br></p>\n<p><img width=\"800\" height=\"auto\" src=\"documents/asset/img/basic-concepts-overview/components.jpg\"></p>\n<p><br></p>\n<p>注：因为系列是一种特殊的组件，所以有时候也会出现 “组件和系列” 这样的描述，这种语境下的 “组件” 是指：除了 “系列” 以外的其他组件。</p>\n<h2 id=\"-option-\">用 option 描述图表</h2>\n<p>上面已经出现了 <code class=\"codespan\">option</code> 这个概念。echarts 的使用者，使用 <code class=\"codespan\">option</code> 来描述其对图表的各种需求，包括：有什么数据、要画什么图表、图表长什么样子、含有什么组件、组件能操作什么事情等等。简而言之，<code class=\"codespan\">option</code> 表述了：<code class=\"codespan\">数据</code>、<code class=\"codespan\">数据如何映射成图形</code>、<code class=\"codespan\">交互行为</code>。</p>\n<pre><code class=\"lang-js\">// 创建 echarts 实例。\nvar dom = document.getElementById(&#39;dom-id&#39;);\nvar chart = echarts.init(dom);\n\n// 用 option 描述 `数据`、`数据如何映射成图形`、`交互行为` 等。\n// option 是个大的 JavaScript 对象。\nvar option = {\n    // option 每个属性是一类组件。\n    legend: {...},\n    grid: {...},\n    tooltip: {...},\n    toolbox: {...},\n    dataZoom: {...},\n    visualMap: {...},\n    // 如果有多个同类组件，那么就是个数组。例如这里有三个 X 轴。\n    xAxis: [\n        // 数组每项表示一个组件实例，用 type 描述“子类型”。\n        {type: &#39;category&#39;, ...},\n        {type: &#39;category&#39;, ...},\n        {type: &#39;value&#39;, ...}\n    ],\n    yAxis: [{...}, {...}],\n    // 这里有多个系列，也是构成一个数组。\n    series: [\n        // 每个系列，也有 type 描述“子类型”，即“图表类型”。\n        {type: &#39;line&#39;, data: [[&#39;AA&#39;, 332], [&#39;CC&#39;, 124], [&#39;FF&#39;, 412], ... ]},\n        {type: &#39;line&#39;, data: [2231, 1234, 552, ... ]},\n        {type: &#39;line&#39;, data: [[4, 51], [8, 12], ... ]}\n    }]\n};\n\n// 调用 setOption 将 option 输入 echarts，然后 echarts 渲染图表。\nchart.setOption(option);\n</code></pre>\n<p>系列里的 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 是本系列的数据。而另一种描述方式，系列数据从 <a href=\"option.html#dataset\" target=\"_blank\">dataset</a> 中取：</p>\n<pre><code class=\"lang-js\">var option = {\n    dataset: {\n        source: [\n            [121, &#39;XX&#39;, 442, 43.11],\n            [663, &#39;ZZ&#39;, 311, 91.14],\n            [913, &#39;ZZ&#39;, 312, 92.12],\n            ...\n        ]\n    },\n    xAxis: {},\n    yAxis: {},\n    series: [\n        // 数据从 dataset 中取，encode 中的数值是 dataset.source 的维度 index （即第几列）\n        {type: &#39;bar&#39;, encode: {x: 1, y: 0}},\n        {type: &#39;bar&#39;, encode: {x: 1, y: 2}},\n        {type: &#39;scatter&#39;, encode: {x: 1, y: 3}},\n        ...\n    ]\n};\n</code></pre>\n<h2 id=\"-\">组件的定位</h2>\n<p>不同的组件、系列，常有不同的定位方式。</p>\n<p><br></p>\n<p><strong>[类 CSS 的绝对定位]</strong></p>\n<p><br></p>\n<p>多数组件和系列，都能够基于 <code class=\"codespan\">top</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">down</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">width</code> / <code class=\"codespan\">height</code> 绝对定位。\n这种绝对定位的方式，类似于 <code class=\"codespan\">CSS</code> 的绝对定位（<code class=\"codespan\">position: absolute</code>）。绝对定位基于的是 echarts 容器 DOM 节点。</p>\n<p>其中，他们每个值都可以是：</p>\n<ul>\n<li>绝对数值（例如 <code class=\"codespan\">bottom: 54</code> 表示：距离 echarts 容器底边界 <code class=\"codespan\">54</code> 像素）。</li>\n<li>或者基于 echarts 容器高宽的百分比（例如 <code class=\"codespan\">right: &#39;20%&#39;</code> 表示：距离 echarts 容器右边界的距离是 echarts 容器宽度的 <code class=\"codespan\">20%</code>）。</li>\n</ul>\n<p>如下图的例子，对 <a href=\"option.html#grid\" target=\"_blank\">grid</a> 组件（也就是直角坐标系的底板）设置 <code class=\"codespan\">left</code>、<code class=\"codespan\">right</code>、<code class=\"codespan\">height</code>、<code class=\"codespan\">bottom</code> 达到的效果。</p>\n<p><br></p>\n<p><img width=\"800\" height=\"auto\" src=\"documents/asset/img/basic-concepts-overview/locate.jpg\"></p>\n<p><br></p>\n<p>我们可以注意到，<code class=\"codespan\">left</code> <code class=\"codespan\">right</code> <code class=\"codespan\">width</code> 是一组（横向）、<code class=\"codespan\">top</code> <code class=\"codespan\">bottom</code> <code class=\"codespan\">height</code> 是另一组（纵向）。这两组没有什么关联。每组中，至多设置两项就可以了，第三项会被自动算出。例如，设置了 <code class=\"codespan\">left</code> 和 <code class=\"codespan\">right</code> 就可以了，<code class=\"codespan\">width</code> 会被自动算出。</p>\n<p><br></p>\n<p><strong>[中心半径定位]</strong></p>\n<p><br></p>\n<p>少数圆形的组件或系列，可以使用“中心半径定位”，例如，<a href=\"option.html#series-pie\" target=\"_blank\">pie</a>（饼图）、<a href=\"option.html#series-sunburst\" target=\"_blank\">sunburst</a>（旭日图）、<a href=\"option.html#polar\" target=\"_blank\">polar</a>（极坐标系）。</p>\n<p>中心半径定位，往往依据 <a href=\"option.html#series-pie.center\" target=\"_blank\">center</a>（中心）、<a href=\"option.html#series-pie.radius\" target=\"_blank\">radius</a>（半径）来决定位置。</p>\n<p><br></p>\n<p><strong>[其他定位]</strong></p>\n<p><br></p>\n<p>少数组件和系列可能有自己的特殊的定位方式。在他们的文档中会有说明。</p>\n<h2 id=\"-\">坐标系</h2>\n<p>很多系列，例如 <a href=\"option.html#series-line\" target=\"_blank\">line</a>（折线图）、<a href=\"option.html#series-bar\" target=\"_blank\">bar</a>（柱状图）、<a href=\"option.html#series-scatter\" target=\"_blank\">scatter</a>（散点图）、<a href=\"option.html#series-heatmap\" target=\"_blank\">heatmap</a>（热力图）等等，需要运行在 “坐标系” 上。坐标系用于布局这些图，以及显示数据的刻度等等。例如 echarts 中至少支持这些坐标系：<a href=\"option.html#grid\" target=\"_blank\">直角坐标系</a>、<a href=\"option.html#polar\" target=\"_blank\">极坐标系</a>、<a href=\"option.html#geo\" target=\"_blank\">地理坐标系（GEO）</a>、<a href=\"option.html#singleAxis\" target=\"_blank\">单轴坐标系</a>、<a href=\"option.html#calendar\" target=\"_blank\">日历坐标系</a> 等。其他一些系列，例如 <a href=\"option.html#series-pie\" target=\"_blank\">pie</a>（饼图）、<a href=\"option.html#series-tree\" target=\"_blank\">tree</a>（树图）等等，并不依赖坐标系，能独立存在。还有一些图，例如 <a href=\"option.html#series-graph\" target=\"_blank\">graph</a>（关系图）等，既能独立存在，也能布局在坐标系中，依据用户的设定而来。</p>\n<p>一个坐标系，可能由多个组件协作而成。我们以最常见的直角坐标系来举例。直角坐标系中，包括有 <a href=\"option.html#xAxis\" target=\"_blank\">xAxis</a>（直角坐标系 X 轴）、<a href=\"option.html#yAxis\" target=\"_blank\">yAxis</a>（直角坐标系 Y 轴）、<a href=\"option.html#grid\" target=\"_blank\">grid</a>（直角坐标系底板）三种组件。<code class=\"codespan\">xAxis</code>、<code class=\"codespan\">yAxis</code> 被 <code class=\"codespan\">grid</code> 自动引用并组织起来，共同工作。</p>\n<p>我们来看下图，这是最简单的使用直角坐标系的方式：只声明了 <code class=\"codespan\">xAxis</code>、<code class=\"codespan\">yAxis</code> 和一个 <code class=\"codespan\">scatter</code>（散点图系列），echarts 暗自为他们创建了 <code class=\"codespan\">grid</code> 并关联起他们：</p>\n<p><br></p>\n<p><img width=\"450\" height=\"auto\" src=\"documents/asset/img/basic-concepts-overview/coord-sys-0.jpg\"></p>\n<p><br></p>\n<p>再来看下图，两个 <code class=\"codespan\">yAxis</code>，共享了一个 <code class=\"codespan\">xAxis</code>。两个 <code class=\"codespan\">series</code>，也共享了这个 <code class=\"codespan\">xAxis</code>，但是分别使用不同的 <code class=\"codespan\">yAxis</code>，使用 <a href=\"option.html#series-line.yAxisIndex\" target=\"_blank\">yAxisIndex</a> 来指定它自己使用的是哪个 <code class=\"codespan\">yAxis</code>：</p>\n<p><br></p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/basic-concepts-overview/coord-sys-1.jpg\"></p>\n<p><br></p>\n<p>再来看下图，一个 echarts 实例中，有多个 <code class=\"codespan\">grid</code>，每个 <code class=\"codespan\">grid</code> 分别有 <code class=\"codespan\">xAxis</code>、<code class=\"codespan\">yAxis</code>，他们使用 <code class=\"codespan\">xAxisIndex</code>、<code class=\"codespan\">yAxisIndex</code>、<code class=\"codespan\">gridIndex</code> 来指定引用关系：</p>\n<p><br></p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/basic-concepts-overview/coord-sys-2.jpg\"></p>\n<p><br></p>\n<p>另外，一个系列，往往能运行在不同的坐标系中。例如，一个 <a href=\"option.html#series-scatter\" target=\"_blank\">scatter</a>（散点图）能运行在 <a href=\"option.html#grid\" target=\"_blank\">直角坐标系</a>、<a href=\"option.html#polar\" target=\"_blank\">极坐标系</a> 、<a href=\"option.html#geo\" target=\"_blank\">地理坐标系（GEO）</a> 等各种坐标系中。同样，一个坐标系，也能承载不同的系列，如上面出现的各种例子，<a href=\"option.html#grid\" target=\"_blank\">直角坐标系</a> 里承载了 <a href=\"option.html#series-line\" target=\"_blank\">line</a>（折线图）、<a href=\"option.html#series-bar\" target=\"_blank\">bar</a>（柱状图）等等。</p>\n"
  },
  "个性化图表的样式": {
    "desc": "<p>Apache ECharts<sup>TM</sup> 提供了丰富的自定义配置选项，并且能够从全局、系列、数据三个层级去设置数据图形的样式。下面我们来看如何使用 ECharts 实现下面这个南丁格尔图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step5&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n<h2 id=\"-\">绘制南丁格尔图</h2>\n<p><a href=\"#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts\">5分钟上手ECharts</a> 中讲了如何绘制一个简单的柱状图，这次要画的是饼图，饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，它的数据格式比柱状图更简单，只有一维的数值，不需要给类目。因为不在直角坐标系上，所以也不需要<code class=\"codespan\">xAxis</code>，<code class=\"codespan\">yAxis</code>。</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n    series : [\n        {\n            name: &#39;访问来源&#39;,\n            type: &#39;pie&#39;,\n            radius: &#39;55%&#39;,\n            data:[\n                {value:235, name:&#39;视频广告&#39;},\n                {value:274, name:&#39;联盟广告&#39;},\n                {value:310, name:&#39;邮件营销&#39;},\n                {value:335, name:&#39;直接访问&#39;},\n                {value:400, name:&#39;搜索引擎&#39;}\n            ]\n        }\n    ]\n})\n</code></pre>\n<p>上面代码就能画出一个简单的饼图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step0&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>这里<code class=\"codespan\">data</code>属性值不像入门教程里那样每一项都是单个数值，而是一个包含 <code class=\"codespan\">name</code> 和 <code class=\"codespan\">value</code> 属性的对象，ECharts 中的数据项都是既可以只设成数值，也可以设成一个包含有名称、该数据图形的样式配置、标签配置的对象，具体见 <a href=\"option.html#series-pie.data\" target=\"_blank\">data</a> 文档。</p>\n<p>ECharts 中的<a href=\"option.html#series-pie\" target=\"_blank\">饼图</a>也支持通过设置 <a href=\"option.html#series-pie.roseType\" target=\"_blank\">roseType</a> 显示成南丁格尔图。</p>\n<pre><code class=\"lang-js\">roseType: &#39;angle&#39;\n</code></pre>\n<p>南丁格尔图会通过半径表示数据的大小。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step1&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<h2 id=\"-\">阴影的配置</h2>\n<p>ECharts 中有一些通用的样式，诸如阴影、透明度、颜色、边框颜色、边框宽度等，这些样式一般都会在系列的 <a href=\"#series-pie.itemStyle\">itemStyle</a> 里设置。例如阴影的样式可以通过下面几个配置项设置：</p>\n<pre><code class=\"lang-js\">itemStyle: {\n    // 阴影的大小\n    shadowBlur: 200,\n    // 阴影水平方向上的偏移\n    shadowOffsetX: 0,\n    // 阴影垂直方向上的偏移\n    shadowOffsetY: 0,\n    // 阴影颜色\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;\n}\n</code></pre>\n<p>加上阴影后的效果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step2&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p><code class=\"codespan\">itemStyle</code>的<code class=\"codespan\">emphasis</code>是鼠标 hover 时候的高亮样式。这个示例里是正常的样式下加阴影，但是可能更多的时候是 hover 的时候通过阴影突出。</p>\n<pre><code class=\"lang-js\">itemStyle: {\n    emphasis: {\n        shadowBlur: 200,\n        shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;\n    }\n}\n</code></pre>\n<h2 id=\"-\">深色背景和浅色标签</h2>\n<p>现在我们需要把整个主题改成开始的示例中那样的深色主题，这就需要改背景色和文本颜色。</p>\n<p>背景色是全局的，所以直接在 option 下设置 <a href=\"option.html#backgroundColor\" target=\"_blank\">backgroundColor</a></p>\n<pre><code class=\"lang-js\">setOption({\n    backgroundColor: &#39;#2c343c&#39;\n})\n</code></pre>\n<p>文本的样式可以设置全局的 <a href=\"option.html#textStyle\" target=\"_blank\">textStyle</a>。</p>\n<pre><code class=\"lang-js\">setOption({\n    textStyle: {\n        color: &#39;rgba(255, 255, 255, 0.3)&#39;\n    }\n})\n</code></pre>\n<p>也可以每个系列分别设置，每个系列的文本设置在 <a href=\"option.html#series-pie.label.textStyle\" target=\"_blank\">label.textStyle</a>。</p>\n<pre><code class=\"lang-js\">label: {\n    textStyle: {\n        color: &#39;rgba(255, 255, 255, 0.3)&#39;\n    }\n}\n</code></pre>\n<p>饼图的话还要将标签的视觉引导线的颜色设为浅色。</p>\n<pre><code class=\"lang-js\">labelLine: {\n    lineStyle: {\n        color: &#39;rgba(255, 255, 255, 0.3)&#39;\n    }\n}\n</code></pre>\n<p>如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step3&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>跟<code class=\"codespan\">itemStyle</code>一样，<code class=\"codespan\">label</code>和<code class=\"codespan\">labelLine</code>的样式也有<code class=\"codespan\">emphasis</code>状态。</p>\n<h2 id=\"-\">设置扇形的颜色</h2>\n<p>扇形的颜色也是在 itemStyle 中设置：</p>\n<pre><code class=\"lang-js\">itemStyle: {\n    // 设置扇形的颜色\n    color: &#39;#c23531&#39;,\n    shadowBlur: 200,\n    shadowColor: &#39;rgba(0, 0, 0, 0.5)&#39;\n}\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step4&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>跟我们要实现的效果已经挺像了，除了每个扇形的颜色，效果中阴影下面的扇形颜色更深，有种光线被遮住的感觉，从而会出现层次感和空间感。</p>\n<p>ECharts 中每个扇形颜色的可以通过分别设置 data 下的数据项实现。</p>\n<pre><code class=\"lang-js\">data: [{\n    value:400,\n    name:&#39;搜索引擎&#39;,\n    itemStyle: {\n        color: &#39;#c23531&#39;\n    }\n}, ...]\n</code></pre>\n<p>但是这次因为只有明暗度的变化，所以有一种更快捷的方式是通过 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> 组件将数值的大小映射到明暗度。</p>\n<pre><code class=\"lang-js\">visualMap: {\n    // 不显示 visualMap 组件，只用于明暗度的映射\n    show: false,\n    // 映射的最小值为 80\n    min: 80,\n    // 映射的最大值为 600\n    max: 600,\n    inRange: {\n        // 明暗度的范围是 0 到 1\n        colorLightness: [0, 1]\n    }\n}\n</code></pre>\n<p>最终效果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-styling-step5&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n\n\n\n"
  },
  "ECharts 中的样式简介": {
    "desc": "<p>本文主要是大略概述，用哪些方法，可以在 Apache ECharts<sup>TM</sup> 中设置样式，改变图形元素或者文字的颜色、明暗、大小等。</p>\n<blockquote>\n<p>之所以用“样式”这种可能不很符合数据可视化思维的词，是因为，比较通俗易懂。</p>\n</blockquote>\n<p>本文介绍这几种方式，他们的功能范畴可能会有交叉（即同一种细节的效果可能可以用不同的方式实现），但是他们各有各的场景偏好。</p>\n<ul>\n<li>颜色主题（Theme）</li>\n<li>调色盘</li>\n<li>直接样式设置（itemStyle、lineStyle、areaStyle、label、...）</li>\n<li>视觉映射（visualMap）</li>\n</ul>\n<p>其他关于样式的文章，参见：<a href=\"#%E4%B8%AA%E6%80%A7%E5%8C%96%E5%9B%BE%E8%A1%A8%E7%9A%84%E6%A0%B7%E5%BC%8F\">个性化图表的样式</a>，<a href=\"#%E6%95%B0%E6%8D%AE%E7%9A%84%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84\">数据的视觉映射</a>。</p>\n<h2 id=\"-theme-\">颜色主题（Theme）</h2>\n<p>最简单的更改全局样式的方式，是直接采用颜色主题（theme）。例如，在 <a href=\"https://echarts.apache.org/examples/zh/index.html\" target=\"_blank\">示例集合</a> 中，可以选择 “Theme”，直接看到采用主题的效果。</p>\n<p>ECharts4 开始，除了一贯的默认主题外，新内置了两套主题，分别为 <code class=\"codespan\">&#39;light&#39;</code> 和 <code class=\"codespan\">&#39;dark&#39;</code>。可以这么来使用它们：</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, &#39;light&#39;);\n</code></pre>\n<p>或者</p>\n<pre><code class=\"lang-js\">var chart = echarts.init(dom, &#39;dark&#39;);\n</code></pre>\n<p>其他的主题，没有内置在 ECharts 中，需要自己加载。这些主题可以在 <a href=\"https://echarts.apache.org/zh/theme-builder.html\" target=\"_blank\">主题编辑器</a> 里访问到。也可以使用这个主题编辑器，自己编辑主题。下载下来的主题可以这样使用：</p>\n<p>如果主题保存为 JSON 文件，那么可以自行加载和注册，例如：</p>\n<pre><code class=\"lang-js\">// 假设主题名称是 &quot;vintage&quot;\n$.getJSON(&#39;xxx/xxx/vintage.json&#39;, function (themeJSON) {\n    echarts.registerTheme(&#39;vintage&#39;, JSON.parse(themeJSON))\n    var chart = echarts.init(dom, &#39;vintage&#39;);\n});\n</code></pre>\n<p>如果保存为 UMD 格式的 JS 文件，那么支持了自注册，直接引入 JS 文件即可：</p>\n<pre><code class=\"lang-js\">// HTML 引入 vintage.js 文件后（假设主题名称是 &quot;vintage&quot;）\nvar chart = echarts.init(dom, &#39;vintage&#39;);\n// ...\n</code></pre>\n<h2 id=\"-\">调色盘</h2>\n<p>调色盘，可以在 option 中设置。它给定了一组颜色，图形、系列会自动从其中选择颜色。\n可以设置全局的调色盘，也可以设置系列自己专属的调色盘。</p>\n<pre><code class=\"lang-js\">option = {\n    // 全局调色盘。\n    color: [&#39;#c23531&#39;,&#39;#2f4554&#39;, &#39;#61a0a8&#39;, &#39;#d48265&#39;, &#39;#91c7ae&#39;,&#39;#749f83&#39;,  &#39;#ca8622&#39;, &#39;#bda29a&#39;,&#39;#6e7074&#39;, &#39;#546570&#39;, &#39;#c4ccd3&#39;],\n\n    series: [{\n        type: &#39;bar&#39;,\n        // 此系列自己的调色盘。\n        color: [&#39;#dd6b66&#39;,&#39;#759aa0&#39;,&#39;#e69d87&#39;,&#39;#8dc1a9&#39;,&#39;#ea7e53&#39;,&#39;#eedd78&#39;,&#39;#73a373&#39;,&#39;#73b9bc&#39;,&#39;#7289ab&#39;, &#39;#91ca8c&#39;,&#39;#f49f42&#39;],\n        ...\n    }, {\n        type: &#39;pie&#39;,\n        // 此系列自己的调色盘。\n        color: [&#39;#37A2DA&#39;, &#39;#32C5E9&#39;, &#39;#67E0E3&#39;, &#39;#9FE6B8&#39;, &#39;#FFDB5C&#39;,&#39;#ff9f7f&#39;, &#39;#fb7293&#39;, &#39;#E062AE&#39;, &#39;#E690D1&#39;, &#39;#e7bcf3&#39;, &#39;#9d96f5&#39;, &#39;#8378EA&#39;, &#39;#96BFFF&#39;],\n        ...\n    }]\n}\n</code></pre>\n<h2 id=\"-itemstyle-linestyle-areastyle-label-\">直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...</h2>\n<p>直接的样式设置是比较常用设置方式。纵观 ECharts 的 <a href=\"option.html\" target=\"_blank\">option</a> 中，很多地方可以设置 <a href=\"option.html#series.itemStyle\" target=\"_blank\">itemStyle</a>、<a href=\"option.html#series-line.lineStyle\" target=\"_blank\">lineStyle</a>、<a href=\"option.html#series-line.areaStyle\" target=\"_blank\">areaStyle</a>、<a href=\"option.html#series.label\" target=\"_blank\">label</a> 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。</p>\n<p>一般来说，ECharts 的各个系列和组件，都遵从这些命名习惯，虽然不同图表和组件中，<code class=\"codespan\">itemStyle</code>、<code class=\"codespan\">label</code> 等可能出现在不同的地方。</p>\n<p>直接样式设置的另一篇介绍，参见 <a href=\"#%E4%B8%AA%E6%80%A7%E5%8C%96%E5%9B%BE%E8%A1%A8%E7%9A%84%E6%A0%B7%E5%BC%8F\">个性化图表的样式</a>。</p>\n<h2 id=\"-emphasis\">高亮的样式：emphasis</h2>\n<p>在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义，主要是通过 <a href=\"option.html#series-scatter.emphasis\" target=\"_blank\">emphasis</a> 属性来定制。<a href=\"option.html#series-scatter.emphasis\" target=\"_blank\">emphsis</a> 中的结构，和普通样式的结构相同，例如：</p>\n<pre><code class=\"lang-js\">option = {\n    series: {\n        type: &#39;scatter&#39;,\n\n        // 普通样式。\n        itemStyle: {\n            // 点的颜色。\n            color: &#39;red&#39;\n        },\n        label: {\n            show: true,\n            // 标签的文字。\n            formatter: &#39;This is a normal label.&#39;\n        },\n\n        // 高亮样式。\n        emphasis: {\n            itemStyle: {\n                // 高亮时点的颜色。\n                color: &#39;blue&#39;\n            },\n            label: {\n                show: true,\n                // 高亮时标签的文字。\n                formatter: &#39;This is a emphasis label.&#39;\n            }\n        }\n    }\n}\n</code></pre>\n<p>注意：在 ECharts4 以前，高亮和普通样式的写法，是这样的：</p>\n<pre><code class=\"lang-js\">option = {\n    series: {\n        type: &#39;scatter&#39;,\n\n        itemStyle: {\n            // 普通样式。\n            normal: {\n                // 点的颜色。\n                color: &#39;red&#39;\n            },\n            // 高亮样式。\n            emphasis: {\n                // 高亮时点的颜色。\n                color: &#39;blue&#39;\n            }\n        },\n\n        label: {\n            // 普通样式。\n            normal: {\n                show: true,\n                // 标签的文字。\n                formatter: &#39;This is a normal label.&#39;\n            },\n            // 高亮样式。\n            emphasis: {\n                show: true,\n                // 高亮时标签的文字。\n                formatter: &#39;This is a emphasis label.&#39;\n            }\n        }\n    }\n}\n</code></pre>\n<p>这种写法 <strong>仍然被兼容</strong>，但是，不再推荐。事实上，多数情况下，使用者只会配置普通状态下的样式，而使用默认的高亮样式。所以在 ECharts4 中，支持不写 <code class=\"codespan\">normal</code> 的配置方法（即本文开头的那种写法），使得配置项更扁平简单。</p>\n<h2 id=\"-visualmap-\">通过 visualMap 组件设定样式</h2>\n<p><a href=\"option.html#visualMap\" target=\"_blank\">visualMap 组件</a> 能指定数据到颜色、图形尺寸的映射规则，详见 <a href=\"#%E6%95%B0%E6%8D%AE%E7%9A%84%E8%A7%86%E8%A7%89%E6%98%A0%E5%B0%84\">数据的视觉映射</a>。</p>\n"
  },
  "异步数据加载和更新": {
    "desc": "<h2 id=\"-\">异步加载</h2>\n<p><a href=\"#getting-started\">入门示例</a>中的数据是在初始化后 <code class=\"codespan\">setOption</code> 中直接填入的，但是很多时候可能数据需要异步加载后再填入。Apache ECharts<sup>TM</sup> 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 <code class=\"codespan\">setOption</code> 填入数据和配置项就行。</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById(&#39;main&#39;));\n\n$.get(&#39;data.json&#39;).done(function (data) {\n    myChart.setOption({\n        title: {\n            text: &#39;异步数据加载示例&#39;\n        },\n        tooltip: {},\n        legend: {\n            data:[&#39;销量&#39;]\n        },\n        xAxis: {\n            data: data.categories\n        },\n        yAxis: {},\n        series: [{\n            name: &#39;销量&#39;,\n            type: &#39;bar&#39;,\n            data: data.data\n        }]\n    });\n});\n</code></pre>\n<p>或者先设置完其它的样式，显示一个空的直角坐标轴，然后获取数据后填入数据。</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById(&#39;main&#39;));\n// 显示标题，图例和空的坐标轴\nmyChart.setOption({\n    title: {\n        text: &#39;异步数据加载示例&#39;\n    },\n    tooltip: {},\n    legend: {\n        data:[&#39;销量&#39;]\n    },\n    xAxis: {\n        data: []\n    },\n    yAxis: {},\n    series: [{\n        name: &#39;销量&#39;,\n        type: &#39;bar&#39;,\n        data: []\n    }]\n});\n\n// 异步加载数据\n$.get(&#39;data.json&#39;).done(function (data) {\n    // 填入数据\n    myChart.setOption({\n        xAxis: {\n            data: data.categories\n        },\n        series: [{\n            // 根据名字对应到相应的系列\n            name: &#39;销量&#39;,\n            data: data.data\n        }]\n    });\n});\n</code></pre>\n<p>如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-async&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>ECharts 中在更新数据的时候需要通过<code class=\"codespan\">name</code>属性对应到相应的系列，上面示例中如果<code class=\"codespan\">name</code>不存在也可以根据系列的顺序正常更新，但是更多时候推荐更新数据的时候加上系列的<code class=\"codespan\">name</code>数据。</p>\n<h2 id=\"loading-\">loading 动画</h2>\n<p>如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了，因此需要一个 loading 的动画来提示用户数据正在加载。</p>\n<p>ECharts 默认有提供了一个简单的加载动画。只需要调用 <a href=\"api.html#echartsInstance.showLoading\" target=\"_blank\">showLoading</a> 方法显示。数据加载完成后再调用 <a href=\"api.html#echartsInstance.hideLoading\" target=\"_blank\">hideLoading</a> 方法隐藏加载动画。</p>\n<pre><code class=\"lang-js\">myChart.showLoading();\n$.get(&#39;data.json&#39;).done(function (data) {\n    myChart.hideLoading();\n    myChart.setOption(...);\n});\n</code></pre>\n<p>效果如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-loading&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<h2 id=\"-\">数据的动态更新</h2>\n<p>ECharts 由数据驱动，数据的改变驱动图表展现的改变，因此动态数据的实现也变得异常简单。</p>\n<p>所有数据的更新都通过 <a href=\"#api.html#echartsInstance.setOption\">setOption</a>实现，你只需要定时获取数据，<a href=\"#api.html#echartsInstance.setOption\">setOption</a> 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。</p>\n<blockquote>\n<p>ECharts 3 中移除了 ECharts 2 中的 addData 方法。如果只需要加入单个数据，可以先 data.push(value) 后 setOption</p>\n</blockquote>\n<p>具体可以看下面示例：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/tutorial-dynamic-data&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n\n"
  },
  "使用 dataset 管理数据": {
    "desc": "<p>Apache ECharts<sup>TM</sup> 4 开始支持了 <code class=\"codespan\">dataset</code> 组件用于单独的数据集声明，从而数据可以单独管理，被多个组件复用，并且可以基于数据指定数据到视觉的映射。这在不少场景下能带来使用上的方便。</p>\n<p>ECharts 4 以前，数据只能声明在各个“系列（series）”中，例如：</p>\n<pre><code class=\"lang-js\">option = {\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;Matcha Latte&#39;, &#39;Milk Tea&#39;, &#39;Cheese Cocoa&#39;, &#39;Walnut Brownie&#39;]\n    },\n    yAxis: {},\n    series: [\n        {\n            type: &#39;bar&#39;,\n            name: &#39;2015&#39;,\n            data: [89.3, 92.1, 94.4, 85.4]\n        },\n        {\n            type: &#39;bar&#39;,\n            name: &#39;2016&#39;,\n            data: [95.8, 89.4, 91.2, 76.9]\n        },\n        {\n            type: &#39;bar&#39;,\n            name: &#39;2017&#39;,\n            data: [97.7, 83.1, 92.5, 78.1]\n        }\n    ]\n}\n</code></pre>\n<p>这种方式的优点是，直观易理解，以及适于对一些特殊图表类型进行一定的数据类型定制。但是缺点是，为匹配这种数据输入形式，常需要有数据处理的过程，把数据分割设置到各个系列（和类目轴）中。此外，不利于多个系列共享一份数据，也不利于基于原始数据进行图表类型、系列的映射安排。</p>\n<p>于是，ECharts 4 提供了 <code class=\"codespan\">数据集</code>（<code class=\"codespan\">dataset</code>）组件来单独声明数据，它带来了这些效果：</p>\n<ul>\n<li>能够贴近这样的数据可视化常见思维方式：(I) 提供数据，(II) 指定数据到视觉的映射，从而形成图表。</li>\n<li>数据和其他配置可以被分离开来。数据常变，其他配置常不变。分开易于分别管理。</li>\n<li>数据可以被多个系列或者组件复用，对于大数据量的场景，不必为每个系列创建一份数据。</li>\n<li>支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。</li>\n</ul>\n<h2 id=\"-\">入门例子</h2>\n<p>下面是一个最简单的 <code class=\"codespan\">dataset</code> 的例子：</p>\n<pre><code class=\"lang-js\">option = {\n    legend: {},\n    tooltip: {},\n    dataset: {\n        // 提供一份数据。\n        source: [\n            [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n            [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n            [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n            [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n            [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n        ]\n    },\n    // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。\n    xAxis: {type: &#39;category&#39;},\n    // 声明一个 Y 轴，数值轴。\n    yAxis: {},\n    // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。\n    series: [\n        {type: &#39;bar&#39;},\n        {type: &#39;bar&#39;},\n        {type: &#39;bar&#39;}\n    ]\n}\n</code></pre>\n<p>效果如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-simple0&edit=1&reset=1\" width=\"500\" height=\"300\" ></iframe>\n\n\n<p>或者也可以使用常见的对象数组的格式：</p>\n<pre><code class=\"lang-js\">option = {\n    legend: {},\n    tooltip: {},\n    dataset: {\n        // 用 dimensions 指定了维度的顺序。直角坐标系中，\n        // 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。\n        // 如果不指定 dimensions，也可以通过指定 series.encode\n        // 完成映射，参见后文。\n        dimensions: [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n        source: [\n            {product: &#39;Matcha Latte&#39;, &#39;2015&#39;: 43.3, &#39;2016&#39;: 85.8, &#39;2017&#39;: 93.7},\n            {product: &#39;Milk Tea&#39;, &#39;2015&#39;: 83.1, &#39;2016&#39;: 73.4, &#39;2017&#39;: 55.1},\n            {product: &#39;Cheese Cocoa&#39;, &#39;2015&#39;: 86.4, &#39;2016&#39;: 65.2, &#39;2017&#39;: 82.5},\n            {product: &#39;Walnut Brownie&#39;, &#39;2015&#39;: 72.4, &#39;2016&#39;: 53.9, &#39;2017&#39;: 39.1}\n        ]\n    },\n    xAxis: {type: &#39;category&#39;},\n    yAxis: {},\n    series: [\n        {type: &#39;bar&#39;},\n        {type: &#39;bar&#39;},\n        {type: &#39;bar&#39;}\n    ]\n};\n</code></pre>\n<h2 id=\"-\">数据到图形的映射</h2>\n<p>本篇里，我们制作数据可视化图表的逻辑是这样的：基于数据，在配置项中指定如何映射到图形。</p>\n<p>概略而言，可以进行这些映射：</p>\n<ul>\n<li>指定 dataset 的列（column）还是行（row）映射为图形系列（series）。这件事可以使用 <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">series.seriesLayoutBy</a> 属性来配置。默认是按照列（column）来映射。</li>\n<li>指定维度映射的规则：如何从 dataset 的维度（一个“维度”的意思是一行/列）映射到坐标轴（如 X、Y 轴）、提示框（tooltip）、标签（label）、图形元素大小颜色等（visualMap）。这件事可以使用 <a href=\"option.html#series.encode\" target=\"_blank\">series.encode</a> 属性，以及 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> 组件（如果有需要映射颜色大小等视觉维度的话）来配置。上面的例子中，没有给出这种映射配置，那么 ECharts 就按最常见的理解进行默认映射：X 坐标轴声明为类目轴，默认情况下会自动对应到 dataset.source 中的第一列；三个柱图系列，一一对应到 dataset.source 中后面每一列。</li>\n</ul>\n<p>下面详细解释。</p>\n<h2 id=\"-dataset-series-\">把数据集（ dataset ）的行或列映射为系列（series）</h2>\n<p>有了数据表之后，使用者可以灵活得配置：数据如何对应到轴和图形系列。</p>\n<p>用户可以使用 <code class=\"codespan\">seriesLayoutBy</code> 配置项，改变图表对于行列的理解。<code class=\"codespan\">seriesLayoutBy</code> 可取值：</p>\n<ul>\n<li>&#39;column&#39;: 默认值。系列被安放到 <code class=\"codespan\">dataset</code> 的列上面。</li>\n<li>&#39;row&#39;: 系列被安放到 <code class=\"codespan\">dataset</code> 的行上面。</li>\n</ul>\n<p>看这个例子：</p>\n<pre><code class=\"lang-js\">option = {\n    legend: {},\n    tooltip: {},\n    dataset: {\n        source: [\n            [&#39;product&#39;, &#39;2012&#39;, &#39;2013&#39;, &#39;2014&#39;, &#39;2015&#39;],\n            [&#39;Matcha Latte&#39;, 41.1, 30.4, 65.1, 53.3],\n            [&#39;Milk Tea&#39;, 86.5, 92.1, 85.7, 83.1],\n            [&#39;Cheese Cocoa&#39;, 24.1, 67.2, 79.5, 86.4]\n        ]\n    },\n    xAxis: [\n        {type: &#39;category&#39;, gridIndex: 0},\n        {type: &#39;category&#39;, gridIndex: 1}\n    ],\n    yAxis: [\n        {gridIndex: 0},\n        {gridIndex: 1}\n    ],\n    grid: [\n        {bottom: &#39;55%&#39;},\n        {top: &#39;55%&#39;}\n    ],\n    series: [\n        // 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。\n        {type: &#39;bar&#39;, seriesLayoutBy: &#39;row&#39;},\n        {type: &#39;bar&#39;, seriesLayoutBy: &#39;row&#39;},\n        {type: &#39;bar&#39;, seriesLayoutBy: &#39;row&#39;},\n        // 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。\n        {type: &#39;bar&#39;, xAxisIndex: 1, yAxisIndex: 1},\n        {type: &#39;bar&#39;, xAxisIndex: 1, yAxisIndex: 1},\n        {type: &#39;bar&#39;, xAxisIndex: 1, yAxisIndex: 1},\n        {type: &#39;bar&#39;, xAxisIndex: 1, yAxisIndex: 1}\n    ]\n}\n</code></pre>\n<p>效果如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-series-layout-by&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n<h2 id=\"-dimension-\">维度（dimension）</h2>\n<p>介绍 <code class=\"codespan\">encode</code> 之前，首先要介绍“维度（dimension）”的概念。</p>\n<p>常用图表所描述的数据大部分是“二维表”结构，上述的例子中，我们都使用二维数组来容纳二维表。现在，当我们把系列（series）对应到“列”的时候，那么每一列就称为一个“维度（dimension）”，而每一行称为数据项（item）。反之，如果我们把系列（series）对应到表行，那么每一行就是“维度（dimension）”，每一列就是数据项（item）。</p>\n<p>维度可以有单独的名字，便于在图表中显示。维度名（dimension name）可以在定义在 dataset 的第一行（或者第一列）。例如上面的例子中，<code class=\"codespan\">&#39;score&#39;</code>、<code class=\"codespan\">&#39;amount&#39;</code>、<code class=\"codespan\">&#39;product&#39;</code> 就是维度名。从第二行开始，才是正式的数据。<code class=\"codespan\">dataset.source</code> 中第一行（列）到底包含不包含维度名，ECharts 默认会自动探测。当然也可以设置 <code class=\"codespan\">dataset.sourceHeader: true</code> 显示声明第一行（列）就是维度，或者 <code class=\"codespan\">dataset.sourceHeader: false</code> 表明第一行（列）开始就直接是数据。</p>\n<p>维度的定义，也可以使用单独的 <code class=\"codespan\">dataset.dimensions</code> 或者 <code class=\"codespan\">series.dimensions</code> 来定义，这样可以同时指定维度名，和维度的类型（dimension type）：</p>\n<pre><code class=\"lang-js\">var option1 = {\n    dataset: {\n        dimensions: [\n            {name: &#39;score&#39;},\n            // 可以简写为 string，表示维度名。\n            &#39;amount&#39;,\n            // 可以在 type 中指定维度类型。\n            {name: &#39;product&#39;, type: &#39;ordinal&#39;}\n        ],\n        source: [...]\n    },\n    ...\n};\n\nvar option2 = {\n    dataset: {\n        source: [...]\n    },\n    series: {\n        type: &#39;line&#39;,\n        // 在系列中设置的 dimensions 会更优先采纳。\n        dimensions: [\n            null, // 可以设置为 null 表示不想设置维度名\n            &#39;amount&#39;,\n            {name: &#39;product&#39;, type: &#39;ordinal&#39;}\n        ]\n    },\n    ...\n};\n</code></pre>\n<p>大多数情况下，我们并不需要去设置维度类型，因为会自动判断。但是如果因为数据为空之类原因导致判断不足够准确时，可以手动设置维度类型。</p>\n<p>维度类型（dimension type）可以取这些值：</p>\n<ul>\n<li><code class=\"codespan\">&#39;number&#39;</code>: 默认，表示普通数据。</li>\n<li><code class=\"codespan\">&#39;ordinal&#39;</code>: 对于类目、文本这些 string 类型的数据，如果需要能在数轴上使用，须是 &#39;ordinal&#39; 类型。ECharts 默认会自动判断这个类型。但是自动判断也是不可能很完备的，所以使用者也可以手动强制指定。</li>\n<li><code class=\"codespan\">&#39;time&#39;</code>: 表示时间数据。设置成 <code class=\"codespan\">&#39;time&#39;</code> 则能支持自动解析数据成时间戳（timestamp），比如该维度的数据是 &#39;2017-05-10&#39;，会自动被解析。如果这个维度被用在时间数轴（<a href=\"option.html#xAxis.type\" target=\"_blank\">axis.type</a> 为 <code class=\"codespan\">&#39;time&#39;</code>）上，那么会被自动设置为 <code class=\"codespan\">&#39;time&#39;</code> 类型。时间类型的支持参见 <a href=\"option.html#series.data\" target=\"_blank\">data</a>。</li>\n<li><code class=\"codespan\">&#39;float&#39;</code>: 如果设置成 <code class=\"codespan\">&#39;float&#39;</code>，在存储时候会使用 <code class=\"codespan\">TypedArray</code>，对性能优化有好处。</li>\n<li><code class=\"codespan\">&#39;int&#39;</code>: 如果设置成 <code class=\"codespan\">&#39;int&#39;</code>，在存储时候会使用 <code class=\"codespan\">TypedArray</code>，对性能优化有好处。</li>\n</ul>\n<h2 id=\"-series-encode-\">数据到图形的映射（ series.encode ）</h2>\n<p>了解了维度的概念后，我们就可以使用 <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> 来做映射。总体是这样的感觉：</p>\n<pre><code class=\"lang-js\">var option = {\n    dataset: {\n        source: [\n            [&#39;score&#39;, &#39;amount&#39;, &#39;product&#39;],\n            [89.3, 58212, &#39;Matcha Latte&#39;],\n            [57.1, 78254, &#39;Milk Tea&#39;],\n            [74.4, 41032, &#39;Cheese Cocoa&#39;],\n            [50.1, 12755, &#39;Cheese Brownie&#39;],\n            [89.7, 20145, &#39;Matcha Cocoa&#39;],\n            [68.1, 79146, &#39;Tea&#39;],\n            [19.6, 91852, &#39;Orange Juice&#39;],\n            [10.6, 101852, &#39;Lemon Juice&#39;],\n            [32.7, 20112, &#39;Walnut Brownie&#39;]\n        ]\n    },\n    xAxis: {},\n    yAxis: {type: &#39;category&#39;},\n    series: [\n        {\n            type: &#39;bar&#39;,\n            encode: {\n                // 将 &quot;amount&quot; 列映射到 X 轴。\n                x: &#39;amount&#39;,\n                // 将 &quot;product&quot; 列映射到 Y 轴。\n                y: &#39;product&#39;\n            }\n        }\n    ]\n};\n</code></pre>\n<p>效果如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/dataset-encode-simple0&edit=1&reset=1\" width=\"500\" height=\"300\" ></iframe>\n\n\n\n<p><code class=\"codespan\">series.encode</code> 声明的基本结构如下，其中冒号左边是坐标系、标签等特定名称，如 <code class=\"codespan\">&#39;x&#39;</code>, <code class=\"codespan\">&#39;y&#39;</code>, <code class=\"codespan\">&#39;tooltip&#39;</code> 等，冒号右边是数据中的维度名（string 格式）或者维度的序号（number 格式，从 0 开始计数），可以指定一个或多个维度（使用数组）。通常情况下，下面各种信息不需要所有的都写，按需写即可。</p>\n<p>下面是 <code class=\"codespan\">series.encode</code> 支持的属性：</p>\n<pre><code class=\"lang-js\">// 在任何坐标系和系列中，都支持：\nencode: {\n    // 使用 “名为 product 的维度” 和 “名为 score 的维度” 的值在 tooltip 中显示\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // 使用 “维度 1” 和 “维度 3” 的维度名连起来作为系列名。（有时候名字比较长，这可以避免在 series.name 重复输入这些名字）\n    seriesName: [1, 3],\n    // 表示使用 “维度2” 中的值作为 id。这在使用 setOption 动态更新数据时有用处，可以使新老数据用 id 对应起来，从而能够产生合适的数据更新动画。\n    itemId: 2,\n    // 指定数据项的名称使用 “维度3” 在饼图等图表中有用，可以使这个名字显示在图例（legend）中。\n    itemName: 3\n}\n\n// 直角坐标系（grid/cartesian）特有的属性：\nencode: {\n    // 把 “维度1”、“维度5”、“名为 score 的维度” 映射到 X 轴：\n    x: [1, 5, &#39;score&#39;],\n    // 把“维度0”映射到 Y 轴。\n    y: 0\n}\n\n// 单轴（singleAxis）特有的属性：\nencode: {\n    single: 3\n}\n\n// 极坐标系（polar）特有的属性：\nencode: {\n    radius: 3,\n    angle: 2\n}\n\n// 地理坐标系（geo）特有的属性：\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// 对于一些没有坐标系的图表，例如饼图、漏斗图等，可以是：\nencode: {\n    value: 3\n}\n</code></pre>\n<p>下面给出个更丰富的 <code class=\"codespan\">series.encode</code> 的示例：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode1&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n<h2 id=\"-\">视觉通道（颜色、尺寸等）的映射</h2>\n<p>我们可以使用 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> 组件进行视觉通道的映射。详见 <code class=\"codespan\">visualMap</code> 文档的介绍。这是一个示例：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-encode0&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n\n<h2 id=\"-encode\">默认的 encode</h2>\n<p>值得一提的是，当 <code class=\"codespan\">series.encode</code> 并没有指定时，ECharts 针对最常见直角坐标系中的图表（折线图、柱状图、散点图、K线图等）、饼图、漏斗图，会采用一些默认的映射规则。默认的映射规则比较简单，大体是：</p>\n<ul>\n<li>在坐标系中（如直角坐标系、极坐标系等）<ul>\n<li>如果有类目轴（axis.type 为 &#39;category&#39;），则将第一列（行）映射到这个轴上，后续每一列（行）对应一个系列。</li>\n<li>如果没有类目轴，假如坐标系有两个轴（例如直角坐标系的 X Y 轴），则每两列对应一个系列，这两列分别映射到这两个轴上。</li>\n</ul>\n</li>\n<li>如果没有坐标系（如饼图）<ul>\n<li>取第一列（行）为名字，第二列（行）为数值（如果只有一列，则取第一列为数值）。</li>\n</ul>\n</li>\n</ul>\n<p>默认的规则不能满足要求时，就可以自己来配置 <code class=\"codespan\">encode</code>，也并不复杂。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-default&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n<h2 id=\"-series-encode-\">几个常见的 series.encode 设置方式举例</h2>\n<p>问：如何把第三列设置为 X 轴，第五列设置为 Y 轴？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">series: {\n    // 注意维度序号（dimensionIndex）从 0 开始计数，第三列是 dimensions[2]。\n    encode: {x: 2, y: 4},\n    ...\n}\n</code></pre>\n<p>问：如何把第三行设置为 X 轴，第五行设置为 Y 轴？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">series: {\n    encode: {x: 2, y: 4},\n    seriesLayoutBy: &#39;row&#39;,\n    ...\n}\n</code></pre>\n<p>问：如何把第二列设置为标签？</p>\n<p>答：\n关于标签的显示 <a href=\"option.html#series.label.formatter\" target=\"_blank\">label.formatter</a>，现在支持引用特定维度的值，例如：</p>\n<pre><code class=\"lang-js\">series: {\n    label: {\n        // `&#39;{@score}&#39;` 表示 “名为 score” 的维度里的值。\n        // `&#39;{@[4]}&#39;` 表示引用序号为 4 的维度里的值。\n        formatter: &#39;aaa{@product}bbb{@score}ccc{@[4]}ddd&#39;\n    }\n}\n</code></pre>\n<p>问：如何让第 2 列和第 3 列显示在提示框（tooltip）中？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">series: {\n    encode: {\n        tooltip: [1, 2]\n        ...\n    },\n    ...\n}\n</code></pre>\n<p>问：数据里没有维度名，那么怎么给出维度名？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">dataset: {\n    dimensions: [&#39;score&#39;, &#39;amount&#39;],\n    source: [\n        [89.3, 3371],\n        [92.1, 8123],\n        [94.4, 1954],\n        [85.4, 829]\n    ]\n}\n</code></pre>\n<p>问：如何把第三列映射为气泡图的点的大小？</p>\n<p>答：</p>\n<pre><code class=\"lang-js\">var option = {\n    dataset: {\n        source: [\n            [12, 323, 11.2],\n            [23, 167, 8.3],\n            [81, 284, 12],\n            [91, 413, 4.1],\n            [13, 287, 13.5]\n        ]\n    },\n    visualMap: {\n        show: false,\n        dimension: 2, // 指向第三列（列序号从 0 开始记，所以设置为 2）。\n        min: 2, // 需要给出数值范围，最小数值。\n        max: 15, // 需要给出数值范围，最大数值。\n        inRange: {\n            // 气泡尺寸：5 像素到 60 像素。\n            symbolSize: [5, 60]\n        }\n    },\n    xAxis: {},\n    yAxis: {},\n    series: {\n        type: &#39;scatter&#39;\n    }\n};\n</code></pre>\n<p>问：encode 里指定了映射，但是不管用？</p>\n<p>答：可以查查有没有拼错，比如，维度名是：<code class=\"codespan\">&#39;Life Expectancy&#39;</code>，encode 中拼成了 <code class=\"codespan\">&#39;Life Expectency&#39;</code>。</p>\n<h2 id=\"-\">数据的各种格式</h2>\n<p>多数常见图表中，数据适于用二维表的形式描述。广为使用的数据表格软件（如 MS Excel、Numbers）或者关系数据数据库都是二维表。他们的数据可以导出成 JSON 格式，输入到 <code class=\"codespan\">dataset.source</code> 中，在不少情况下可以免去一些数据处理的步骤。</p>\n<blockquote>\n<p>假如数据导出成 csv 文件，那么可以使用一些 csv 工具如 <a href=\"https://github.com/d3/d3-dsv\" target=\"_blank\">dsv</a> 或者 <a href=\"https://github.com/mholt/PapaParse\" target=\"_blank\">PapaParse</a> 将 csv 转成 JSON。</p>\n</blockquote>\n<p>在 JavaScript 常用的数据传输格式中，二维数组可以比较直观的存储二维表。前面的示例都是使用二维数组表示。</p>\n<p>除了二维数组以外，dataset 也支持例如下面 key-value 方式的数据格式，这类格式也非常常见。但是这类格式中，目前并不支持 <a href=\"option.html#series.seriesLayoutBy\" target=\"_blank\">seriesLayoutBy</a> 参数。</p>\n<pre><code class=\"lang-js\">dataset: [{\n    // 按行的 key-value 形式（对象数组），这是个比较常见的格式。\n    source: [\n        {product: &#39;Matcha Latte&#39;, count: 823, score: 95.8},\n        {product: &#39;Milk Tea&#39;, count: 235, score: 81.4},\n        {product: &#39;Cheese Cocoa&#39;, count: 1042, score: 91.2},\n        {product: &#39;Walnut Brownie&#39;, count: 988, score: 76.9}\n    ]\n}, {\n    // 按列的 key-value 形式。\n    source: {\n        &#39;product&#39;: [&#39;Matcha Latte&#39;, &#39;Milk Tea&#39;, &#39;Cheese Cocoa&#39;, &#39;Walnut Brownie&#39;],\n        &#39;count&#39;: [823, 235, 1042, 988],\n        &#39;score&#39;: [95.8, 81.4, 91.2, 76.9]\n    }\n}]\n</code></pre>\n<h2 id=\"-dataset-\">多个 dataset 以及如何引用他们</h2>\n<p>可以同时定义多个 dataset。系列可以通过 <a href=\"option.html#series.datasetIndex\" target=\"_blank\">series.datasetIndex</a> 来指定引用哪个 dataset。例如：</p>\n<pre><code class=\"lang-js\">var option = {\n    dataset: [{\n        // 序号为 0 的 dataset。\n        source: [...],\n    }, {\n        // 序号为 1 的 dataset。\n        source: [...]\n    }, {\n        // 序号为 2 的 dataset。\n        source: [...]\n    }],\n    series: [{\n        // 使用序号为 2 的 dataset。\n        datasetIndex: 2\n    }, {\n        // 使用序号为 1 的 dataset。\n        datasetIndex: 1\n    }]\n}\n</code></pre>\n<h2 id=\"echarts-3-series-data-\">ECharts 3 的数据设置方式（series.data）仍正常使用</h2>\n<p>ECharts 4 之前一直以来的数据声明方式仍然被正常支持，如果系列已经声明了 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a>， 那么就会使用 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 而非 <code class=\"codespan\">dataset</code>。</p>\n<pre><code class=\"lang-js\">{\n    xAxis: {\n        type: &#39;category&#39;\n        data: [&#39;Matcha Latte&#39;, &#39;Milk Tea&#39;, &#39;Cheese Cocoa&#39;, &#39;Walnut Brownie&#39;]\n    },\n    yAxis: {},\n    series: [{\n        type: &#39;bar&#39;,\n        name: &#39;2015&#39;,\n        data: [89.3, 92.1, 94.4, 85.4]\n    }, {\n        type: &#39;bar&#39;,\n        name: &#39;2016&#39;,\n        data: [95.8, 89.4, 91.2, 76.9]\n    }, {\n        type: &#39;bar&#39;,\n        name: &#39;2017&#39;,\n        data: [97.7, 83.1, 92.5, 78.1]\n    }]\n}\n</code></pre>\n<p>其实，<a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 也是种会一直存在的重要设置方式。一些特殊的非 table 格式的图表，如 <a href=\"option.html#series-treemap\" target=\"_blank\">treemap</a>、<a href=\"option.html#series-graph\" target=\"_blank\">graph</a>、<a href=\"option.html#series-lines\" target=\"_blank\">lines</a> 等，现在仍不支持在 dataset 中设置，仍然需要使用 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a>。另外，对于巨大数据量的渲染（如百万以上的数据量），需要使用 <a href=\"api.html#echartsInstance.appendData\" target=\"_blank\">appendData</a> 进行增量加载，这种情况不支持使用 <code class=\"codespan\">dataset</code>。</p>\n<h2 id=\"-data-transform-\">数据转换器（ data transform ）</h2>\n<p>参见 <a href=\"#%E4%BD%BF%E7%94%A8%20transform%20%E8%BF%9B%E8%A1%8C%E6%95%B0%E6%8D%AE%E8%BD%AC%E6%8D%A2\">data transform</a>。</p>\n<h2 id=\"-\">其他</h2>\n<p>目前并非所有图表都支持 dataset。支持 dataset 的图表有：\n<code class=\"codespan\">line</code>、<code class=\"codespan\">bar</code>、<code class=\"codespan\">pie</code>、<code class=\"codespan\">scatter</code>、<code class=\"codespan\">effectScatter</code>、<code class=\"codespan\">parallel</code>、<code class=\"codespan\">candlestick</code>、<code class=\"codespan\">map</code>、<code class=\"codespan\">funnel</code>、<code class=\"codespan\">custom</code>。\n后续会有更多的图表进行支持。</p>\n<p>最后，给出一个示例，多个图表共享一个 <code class=\"codespan\">dataset</code>，并带有联动交互：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dataset-link&edit=1&reset=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n\n\n"
  },
  "使用 transform 进行数据转换": {
    "desc": "<p>Apache ECharts<sup>TM</sup> 5 开始支持了“数据转换”（ data transform ）功能。在 echarts 中，“数据转换” 这个词指的是，给定一个已有的“数据集”（<a href=\"option.html#dataset\" target=\"_blank\">dataset</a>）和一个“转换方法”（<a href=\"option.html#dataset.transform\" target=\"_blank\">transform</a>），echarts 能生成一个新的“数据集”，然后可以使用这个新的“数据集”绘制图表。这些工作都可以声明式地完成。</p>\n<p>抽象地来说，数据转换是这样一种公式：<code class=\"codespan\">outData = f(inputData)</code>。<code class=\"codespan\">f</code> 是转换方法，例如：<code class=\"codespan\">filter</code>、<code class=\"codespan\">sort</code>、<code class=\"codespan\">regression</code>、<code class=\"codespan\">boxplot</code>、<code class=\"codespan\">cluster</code>、<code class=\"codespan\">aggregate</code>(todo) 等等。有了数据转换能力后，我们就至少可以做到这些事情：</p>\n<ul>\n<li>把数据分成多份用不同的饼图展现。</li>\n<li>进行一些数据统计运算，并展示结果。</li>\n<li>用某些数据可视化算法处理数据，并展示结果。</li>\n<li>数据排序。</li>\n<li>去除或直选择数据项。</li>\n<li>...</li>\n</ul>\n<h2 id=\"-\">数据转换基础使用</h2>\n<p>在 echarts 中，数据转换是依托于数据集（<a href=\"#dataset\">dataset</a>）来实现的. 我们可以设置 <a href=\"option.html#dataset.transform\" target=\"_blank\">dataset.transform</a> 来表示，此 dataset 的数据，来自于此 transform 的结果。例如。</p>\n<pre><code class=\"lang-js\">var option = {\n    dataset: [{\n        // 这个 dataset 的 index 是 `0`。\n        source: [\n            [&#39;Product&#39;, &#39;Sales&#39;, &#39;Price&#39;, &#39;Year&#39;],\n            [&#39;Cake&#39;, 123, 32, 2011],\n            [&#39;Cereal&#39;, 231, 14, 2011],\n            [&#39;Tofu&#39;, 235, 5, 2011],\n            [&#39;Dumpling&#39;, 341, 25, 2011],\n            [&#39;Biscuit&#39;, 122, 29, 2011],\n            [&#39;Cake&#39;, 143, 30, 2012],\n            [&#39;Cereal&#39;, 201, 19, 2012],\n            [&#39;Tofu&#39;, 255, 7, 2012],\n            [&#39;Dumpling&#39;, 241, 27, 2012],\n            [&#39;Biscuit&#39;, 102, 34, 2012],\n            [&#39;Cake&#39;, 153, 28, 2013],\n            [&#39;Cereal&#39;, 181, 21, 2013],\n            [&#39;Tofu&#39;, 395, 4, 2013],\n            [&#39;Dumpling&#39;, 281, 31, 2013],\n            [&#39;Biscuit&#39;, 92, 39, 2013],\n            [&#39;Cake&#39;, 223, 29, 2014],\n            [&#39;Cereal&#39;, 211, 17, 2014],\n            [&#39;Tofu&#39;, 345, 3, 2014],\n            [&#39;Dumpling&#39;, 211, 35, 2014],\n            [&#39;Biscuit&#39;, 72, 24, 2014],\n        ],\n        // id: &#39;a&#39;\n    }, {\n        // 这个 dataset 的 index 是 `1`。\n        // 这个 `transform` 配置，表示，此 dataset 的数据，来自于此 transform 的结果。\n        transform: {\n            type: &#39;filter&#39;,\n            config: { dimension: &#39;Year&#39;, value: 2011 }\n        },\n        // 我们还可以设置这些可选的属性： `fromDatasetIndex` 或 `fromDatasetId`。\n        // 这些属性，指定了，transform 的输入，来自于哪个 dataset。例如，\n        // `fromDatasetIndex: 0` 表示输入来自于 index 为 `0` 的 dataset 。又例如，\n        // `fromDatasetId: &#39;a&#39;` 表示输入来自于 `id: &#39;a&#39;` 的 dataset。\n        // 当这些属性都不指定时，默认认为，输入来自于 index 为 `0` 的 dataset 。\n    }, {\n        // 这个 dataset 的 index 是 `2`。\n        // 同样，这里因为 `fromDatasetIndex` 和 `fromDatasetId` 都没有被指定，\n        // 那么输入默认来自于 index 为 `0` 的 dataset 。\n        transform: {\n            // 这个类型为 &quot;filter&quot; 的 transform 能够遍历并筛选出满足条件的数据项。\n            type: &#39;filter&#39;,\n            // 每个 transform 如果需要有配置参数的话，都须配置在 `config` 里。\n            // 在这个 &quot;filter&quot; transform 中，`config` 用于指定筛选条件。\n            // 下面这个筛选条件是：选出维度（ dimension ）&#39;Year&#39; 中值为 2012 的所有\n            // 数据项。\n            config: { dimension: &#39;Year&#39;, value: 2012 }\n        }\n    }, {\n        // 这个 dataset 的 index 是 `3`。\n        transform: {\n            type: &#39;filter&#39;,\n            config: { dimension: &#39;Year&#39;, value: 2013 }\n        }\n    }],\n    series: [{\n        type: &#39;pie&#39;, radius: 50, center: [&#39;25%&#39;, &#39;50%&#39;],\n        // 这个饼图系列，引用了 index 为 `1` 的 dataset 。也就是，引用了上述\n        // 2011 年那个 &quot;filter&quot; transform 的结果。\n        datasetIndex: 1\n    }, {\n        type: &#39;pie&#39;, radius: 50, center: [&#39;50%&#39;, &#39;50%&#39;],\n        datasetIndex: 2\n    }, {\n        type: &#39;pie&#39;, radius: 50, center: [&#39;75%&#39;, &#39;50%&#39;],\n        datasetIndex: 3\n    }]\n};\n</code></pre>\n<p>下面是上述例子的效果，三个饼图分别显示了 2011、2012、2013 年的数据。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=data-transform-multiple-pie&reset=1&edit=1\" width=\"800\" height=\"300\" ></iframe>\n\n\n<p>现在我们简单总结下，使用 transform 时的几个要点：</p>\n<ul>\n<li>在一个空的 dataset 中声明 <code class=\"codespan\">transform</code>, <code class=\"codespan\">fromDatasetIndex</code>/<code class=\"codespan\">fromDatasetId</code> 来表示我们要生成新的数据。</li>\n<li>系列引用这个 dataset 。</li>\n</ul>\n<h2 id=\"-\">数据转换的进阶使用</h2>\n<h4 id=\"-transform\">链式声明 transform</h4>\n<p><code class=\"codespan\">transform</code> 可以被链式声明，这是一个语法糖。</p>\n<pre><code class=\"lang-js\">option: {\n    dataset: [{\n        source: [ ... ] // 原始数据\n    }, {\n        // 几个 transform 被声明成 array ，他们构成了一个链，\n        // 前一个 transform 的输出是后一个 transform 的输入。\n        transform: [{\n            type: &#39;filter&#39;,\n            config: { dimension: &#39;Product&#39;, value: &#39;Tofu&#39; }\n        }, {\n            type: &#39;sort&#39;,\n            config: { dimension: &#39;Year&#39;, order: &#39;desc&#39; }\n        }]\n    }],\n    series: {\n        type: &#39;pie&#39;,\n        // 这个系列引用上述 transform 的结果。\n        datasetIndex: 1\n    }\n}\n</code></pre>\n<blockquote>\n<p>注意：理论上，任何 transform 都可能有多个输入或多个输出。但是，如果一个 transform 被链式声明，它只能获取前一个 transform 的第一个输出作为输入（第一个 transform 除外），以及它只能把自己的第一个输出给到后一个 transform （最后一个 transform 除外）。</p>\n</blockquote>\n<h4 id=\"-transform-data\">一个 transform 输出多个 data</h4>\n<p>在大多数场景下，transform 只需输出一个 data 。但是也有一些场景，需要输出多个 data ，每个 data 可以被不同的 series 或者 dataset 所使用。</p>\n<p>例如，在内置的 &quot;boxplot&quot; transform 中，除了 boxplot 系列所需要的 data 外，离群点（ outlier ）也会被生成，并且可以用例如散点图系列显示出来。例如，<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=boxplot-light-velocity&amp;edit=1&amp;reset=1\" target=\"_blank\">example</a>。</p>\n<p>我们提供配置 <a href=\"option.html#dataset.fromTransformResult\" target=\"_blank\">dataset.fromTransformResult</a> 来满足这种情况，例如：</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: [{\n        // 这个 dataset 的 index 为 `0`。\n        source: [...] // 原始数据\n    }, {\n        // 这个 dataset 的 index 为 `1`。\n        transform: {\n            type: &#39;boxplot&#39;\n        }\n        // 这个 &quot;boxplot&quot; transform 生成了两个数据：\n        // result[0]: boxplot series 所需的数据。\n        // result[1]: 离群点数据。\n        // 当其他 series 或者 dataset 引用这个 dataset 时，他们默认只能得到\n        // result[0] 。\n        // 如果想要他们得到 result[1] ，需要额外声明如下这样一个 dataset ：\n    }, {\n        // 这个 dataset 的 index 为 `2`。\n        // 这个额外的 dataset 指定了数据来源于 index 为 `1` 的 dataset。\n        fromDatasetIndex: 1,\n        // 并且指定了获取 transform result[1] 。\n        fromTransformResult: 1\n    }],\n    xAxis: {\n        type: &#39;category&#39;\n    },\n    yAxis: {\n    },\n    series: [{\n        name: &#39;boxplot&#39;,\n        type: &#39;boxplot&#39;,\n        // Reference the data from result[0].\n        // 这个 series 引用 index 为 `1` 的 dataset 。\n        datasetIndex: 1\n    }, {\n        name: &#39;outlier&#39;,\n        type: &#39;scatter&#39;,\n        // 这个 series 引用 index 为 `2` 的 dataset 。\n        // 从而也就得到了上述的 transform result[1] （即离群点数据）\n        datasetIndex: 2\n    }]\n};\n</code></pre>\n<p>另外，<a href=\"option.html#dataset.fromTransformResult\" target=\"_blank\">dataset.fromTransformResult</a> 和 <a href=\"option.html#dataset.transform\" target=\"_blank\">dataset.transform</a> 能同时出现在一个 dataset 中，这表示，这个 transform 的输入，是上游的结果中以 <code class=\"codespan\">fromTransformResult</code> 获取的结果。例如：</p>\n<pre><code class=\"lang-js\">{\n    fromDatasetIndex: 1,\n    fromTransformResult: 1,\n    transform: {\n        type: &#39;sort&#39;,\n        config: { dimension: 2, order: &#39;desc&#39; }\n    }\n}\n</code></pre>\n<h4 id=\"-debug\">在开发环境中 debug</h4>\n<p>使用 transform 时，有时候我们会配不对，显示不出来结果，并且不知道哪里错了。所以，这里提供了一个配置项 <code class=\"codespan\">transform.print</code> 方便 debug 。这个配置项只在开发环境中生效。如下例：</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: [{\n        source: [ ... ]\n    }, {\n        transform: {\n            type: &#39;filter&#39;,\n            config: { ... }\n            // 配置为 `true` 后， transform 的结果\n            // 会被 console.log 打印出来。\n            print: true\n        }\n    }],\n    ...\n}\n</code></pre>\n<h2 id=\"-filter\">数据转换器 &quot;filter&quot;</h2>\n<p>echarts 内置提供了能起过滤作用的数据转换器。我们只需声明 <code class=\"codespan\">transform.type: &quot;filter&quot;</code>，以及给出数据筛选条件。如下例：</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: [{\n        source: [\n            [&#39;Product&#39;, &#39;Sales&#39;, &#39;Price&#39;, &#39;Year&#39;],\n            [&#39;Cake&#39;, 123, 32, 2011],\n            [&#39;Latte&#39;, 231, 14, 2011],\n            [&#39;Tofu&#39;, 235, 5, 2011],\n            [&#39;Milk Tee&#39;, 341, 25, 2011],\n            [&#39;Porridge&#39;, 122, 29, 2011],\n            [&#39;Cake&#39;, 143, 30, 2012],\n            [&#39;Latte&#39;, 201, 19, 2012],\n            [&#39;Tofu&#39;, 255, 7, 2012],\n            [&#39;Milk Tee&#39;, 241, 27, 2012],\n            [&#39;Porridge&#39;, 102, 34, 2012],\n            [&#39;Cake&#39;, 153, 28, 2013],\n            [&#39;Latte&#39;, 181, 21, 2013],\n            [&#39;Tofu&#39;, 395, 4, 2013],\n            [&#39;Milk Tee&#39;, 281, 31, 2013],\n            [&#39;Porridge&#39;, 92, 39, 2013],\n            [&#39;Cake&#39;, 223, 29, 2014],\n            [&#39;Latte&#39;, 211, 17, 2014],\n            [&#39;Tofu&#39;, 345, 3, 2014],\n            [&#39;Milk Tee&#39;, 211, 35, 2014],\n            [&#39;Porridge&#39;, 72, 24, 2014]\n        ]\n    }, {\n        transform: {\n            type: &#39;filter&#39;,\n            config: { dimension: &#39;Year&#39;, &#39;=&#39;: 2011 }\n            // 这个筛选条件表示，遍历数据，筛选出维度（ dimension ）\n            // &#39;Year&#39; 上值为 2011 的所有数据项。\n        }\n    }],\n    series: {\n        type: &#39;pie&#39;,\n        datasetIndex: 1\n    }\n};\n</code></pre>\n<p><br>\n<br>\n这是 filter 的另一个例子的效果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=data-transform-filter&reset=1&edit=1\" width=\"600\" height=\"350\" ></iframe>\n\n\n\n<p>在 &quot;filter&quot; transform 中，有这些要素：</p>\n<p><strong>关于维度（ dimension ）：</strong></p>\n<p><code class=\"codespan\">config.dimension</code> 指定了维度，能设成这样的值：</p>\n<ul>\n<li>设定成声明在 dataset 中的维度名，例如 <code class=\"codespan\">config: { dimension: &#39;Year&#39;, &#39;=&#39;: 2011 }</code>。不过， dataset 中维度名的声明并非强制，所以我们也可以</li>\n<li>设定成 dataset 中的维度 index （index 值从 0 开始）例如 <code class=\"codespan\">config: { dimension: 3, &#39;=&#39;: 2011 }</code>。</li>\n</ul>\n<p><strong>关于关系比较操作符：</strong></p>\n<p>关系操作符，可以设定这些：\n<code class=\"codespan\">&gt;</code>（<code class=\"codespan\">gt</code>）、<code class=\"codespan\">&gt;=</code>（<code class=\"codespan\">gte</code>）、<code class=\"codespan\">&lt;</code>（<code class=\"codespan\">lt</code>）、<code class=\"codespan\">&lt;=</code>（<code class=\"codespan\">lte</code>）、<code class=\"codespan\">=</code>（<code class=\"codespan\">eq</code>）、<code class=\"codespan\">!=</code>（<code class=\"codespan\">ne</code>、<code class=\"codespan\">&lt;&gt;</code>）、<code class=\"codespan\">reg</code>。（小括号中的符号或名字，是别名，设置起来作用相同）。他们首先基本地能基于数值大小进行比较，然后也有些额外的功能特性：</p>\n<ul>\n<li>多个关系操作符能声明在一个 {} 中，例如 <code class=\"codespan\">{ dimension: &#39;Price&#39;, &#39;&gt;=&#39;: 20, &#39;&lt;&#39;: 30 }</code>。这表示“与”的关系，即，筛选出价格大于等于 20 小于 30 的数据项。</li>\n<li>data 里的值，不仅可以是数值（ number ），也可以是“类数值的字符串”（“ numeric string ”）。“类数值的字符串”本身是一个字符串，但是可以被转换为字面所描述的数值，例如 <code class=\"codespan\">&#39; 123 &#39;</code>。转换过程中，空格（全角半角空格）和换行符都能被消除（ trim ）。</li>\n<li>如果我们需要对日期对象（JS <code class=\"codespan\">Date</code>）或者日期字符串（如 &#39;2012-05-12&#39;）进行比较，我们需要手动指定 <code class=\"codespan\">parser: &#39;time&#39;</code>，例如 <code class=\"codespan\">config: { dimension: 3, lt: &#39;2012-05-12&#39;, parser: &#39;time&#39; }</code>。</li>\n<li>纯字符串比较也被支持，但是只能用在 <code class=\"codespan\">=</code> 或 <code class=\"codespan\">!=</code> 上。而 <code class=\"codespan\">&gt;</code>, <code class=\"codespan\">&gt;=</code>, <code class=\"codespan\">&lt;</code>, <code class=\"codespan\">&lt;=</code> 并不支持纯字符串比较，也就是说，这四个操作符的右值，不能是字符串。</li>\n<li><code class=\"codespan\">reg</code> 操作符能提供正则表达式比较。例如， <code class=\"codespan\">{ dimension: &#39;Name&#39;, reg: /\\s+Müller\\s*$/ }</code> 能在 <code class=\"codespan\">&#39;Name&#39;</code> 维度上选出姓 <code class=\"codespan\">&#39;Müller&#39;</code> 的数据项。</li>\n</ul>\n<p><strong>关于逻辑比较：</strong></p>\n<p>我们也支持了逻辑比较操作符 <strong>与或非</strong>（ <code class=\"codespan\">and</code> | <code class=\"codespan\">or</code> | <code class=\"codespan\">not</code> ）：</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: [{\n        source: [...]\n    }, {\n        transform: {\n            type: &#39;filter&#39;,\n            config: {\n                // 使用 and 操作符。\n                // 类似地，同样的位置也可以使用 “or” 或 “not”。\n                // 但是注意 “not” 后应该跟一个 {...} 而非 [...] 。\n                and: [\n                    { dimension: &#39;Year&#39;, &#39;=&#39;: 2011 },\n                    { dimension: &#39;Price&#39;, &#39;&gt;=&#39;: 20, &#39;&lt;&#39;: 30 }\n                ]\n            }\n            // 这个表达的是，选出 2011 年价格大于等于 20 但小于 30 的数据项。\n        }\n    }],\n    series: {\n        type: &#39;pie&#39;,\n        datasetIndex: 1\n    }\n};\n</code></pre>\n<p><code class=\"codespan\">and</code>/<code class=\"codespan\">or</code>/<code class=\"codespan\">not</code> 自然可以被嵌套，例如：</p>\n<pre><code class=\"lang-js\">transform: {\n    type: &#39;filter&#39;,\n    config: {\n        or: [{\n            and: [{\n                dimension: &#39;Price&#39;, &#39;&gt;=&#39;: 10, &#39;&lt;&#39;: 20\n            }, {\n                dimension: &#39;Sales&#39;, &#39;&lt;&#39;: 100\n            }, {\n                not: { dimension: &#39;Product&#39;, &#39;=&#39;: &#39;Tofu&#39; }\n            }]\n        }, {\n            and: [{\n                dimension: &#39;Price&#39;, &#39;&gt;=&#39;: 10, &#39;&lt;&#39;: 20\n            }, {\n                dimension: &#39;Sales&#39;, &#39;&lt;&#39;: 100\n            }, {\n                not: { dimension: &#39;Product&#39;, &#39;=&#39;: &#39;Cake&#39; }\n            }]\n        }]\n    }\n}\n</code></pre>\n<p><strong>关于解析器（ parser ）：</strong></p>\n<p>还可以指定“解析器”（ parser ）来对值进行解析后再做比较。现在支持的解析器有：</p>\n<ul>\n<li><code class=\"codespan\">parser: &#39;time&#39;</code>：把原始值解析成时间戳（ timestamp ）后再做比较。这个解析器的行为，和 <code class=\"codespan\">echarts.time.parse</code> 相同，即，当原始值为时间对象（ JS <code class=\"codespan\">Date</code> 实例），或者是时间戳，或者是描述时间的字符串（例如 <code class=\"codespan\">&#39;2012-05-12 03:11:22&#39;</code> ），都可以被解析为时间戳，然后就可以基于数值大小进行比较。如果原始数据是其他不可解析为时间戳的值，那么会被解析为 NaN。</li>\n<li><code class=\"codespan\">parser: &#39;trim&#39;</code>：如果原始数据是字符串，则把字符串两端的空格（全角半角）和换行符去掉。如果不是字符串，还保持为原始数据。</li>\n<li><code class=\"codespan\">parser: &#39;number&#39;</code>：强制把原始数据转成数值。如果不能转成有意义的数值，那么转成 <code class=\"codespan\">NaN</code>。在大多数场景下，我们并不需要这个解析器，因为按默认策略，“像数值的字符串”就会被转成数值。但是默认策略比较严格，这个解析器比较宽松，如果我们遇到含有尾缀的字符串（例如 <code class=\"codespan\">&#39;33%&#39;</code>, <code class=\"codespan\">12px</code>），我们需要手动指定 <code class=\"codespan\">parser: &#39;number&#39;</code>，从而去掉尾缀转为数值才能比较。</li>\n</ul>\n<p>这个例子显示了如何使用 <code class=\"codespan\">parser: &#39;time&#39;</code>：</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: [{\n        source: [\n            [&#39;Product&#39;, &#39;Sales&#39;, &#39;Price&#39;, &#39;Date&#39;],\n            [&#39;Milk Tee&#39;, 311, 21, &#39;2012-05-12&#39;],\n            [&#39;Cake&#39;, 135, 28, &#39;2012-05-22&#39;],\n            [&#39;Latte&#39;, 262, 36, &#39;2012-06-02&#39;],\n            [&#39;Milk Tee&#39;, 359, 21, &#39;2012-06-22&#39;],\n            [&#39;Cake&#39;, 121, 28, &#39;2012-07-02&#39;],\n            [&#39;Latte&#39;, 271, 36, &#39;2012-06-22&#39;],\n            ...\n        ]\n    }, {\n        transform: {\n            type: &#39;filter&#39;,\n            config: {\n                { dimension: &#39;Date&#39;, &#39;&gt;=&#39;: &#39;2012-05&#39;, &#39;&lt;&#39;: &#39;2012-06&#39;, parser: &#39;time&#39; }\n            }\n        }\n    }]\n}\n</code></pre>\n<p><strong>形式化定义：</strong></p>\n<p>最后，我们给出，数据转换器 &quot;filter&quot; 的 config 的形式化定义：</p>\n<pre><code class=\"lang-ts\">type FilterTransform = {\n    type: &#39;filter&#39;;\n    config: ConditionalExpressionOption;\n};\ntype ConditionalExpressionOption =\n    true | false | RelationalExpressionOption | LogicalExpressionOption;\ntype RelationalExpressionOption = {\n    dimension: DimensionName | DimensionIndex;\n    parser?: &#39;time&#39; | &#39;trim&#39; | &#39;number&#39;;\n    lt?: DataValue; // less than\n    lte?: DataValue; // less than or equal\n    gt?: DataValue; // greater than\n    gte?: DataValue; // greater than or equal\n    eq?: DataValue; // equal\n    ne?: DataValue; // not equal\n    &#39;&lt;&#39;?: DataValue; // lt\n    &#39;&lt;=&#39;?: DataValue; // lte\n    &#39;&gt;&#39;?: DataValue; // gt\n    &#39;&gt;=&#39;?: DataValue; // gte\n    &#39;=&#39;?: DataValue; // eq\n    &#39;!=&#39;?: DataValue; // ne\n    &#39;&lt;&gt;&#39;?: DataValue; // ne (SQL style)\n    reg?: RegExp | string; // RegExp\n};\ntype LogicalExpressionOption = {\n    and?: ConditionalExpressionOption[];\n    or?: ConditionalExpressionOption[];\n    not?: ConditionalExpressionOption;\n};\ntype DataValue = string | number | Date;\ntype DimensionName = string;\ntype DimensionIndex = number;\n</code></pre>\n<h2 id=\"-sort\">数据转换器 &quot;sort&quot;</h2>\n<p>&quot;sort&quot; 是另一个内置的数据转换器，用于排序数据。目前主要能用于在类目轴（ <code class=\"codespan\">axis.type: &#39;category&#39;</code> ）中显示排过序的数据。例如：</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: [{\n        dimensions: [&#39;name&#39;, &#39;age&#39;, &#39;profession&#39;, &#39;score&#39;, &#39;date&#39;],\n        source: [\n            [&#39; Hannah Krause &#39;, 41, &#39;Engineer&#39;, 314, &#39;2011-02-12&#39;],\n            [&#39;Zhao Qian &#39;, 20, &#39;Teacher&#39;, 351, &#39;2011-03-01&#39;],\n            [&#39; Jasmin Krause &#39;, 52, &#39;Musician&#39;, 287, &#39;2011-02-14&#39;],\n            [&#39;Li Lei&#39;, 37, &#39;Teacher&#39;, 219, &#39;2011-02-18&#39;],\n            [&#39; Karle Neumann &#39;, 25, &#39;Engineer&#39;, 253, &#39;2011-04-02&#39;],\n            [&#39; Adrian Groß&#39;, 19, &#39;Teacher&#39;, null, &#39;2011-01-16&#39;],\n            [&#39;Mia Neumann&#39;, 71, &#39;Engineer&#39;, 165, &#39;2011-03-19&#39;],\n            [&#39; Böhm Fuchs&#39;, 36, &#39;Musician&#39;, 318, &#39;2011-02-24&#39;],\n            [&#39;Han Meimei &#39;, 67, &#39;Engineer&#39;, 366, &#39;2011-03-12&#39;],\n        ]\n    }, {\n        transform: {\n            type: &#39;sort&#39;,\n            // 按分数排序\n            config: { dimension: &#39;score&#39;, order: &#39;asc&#39; }\n        }\n    }],\n    series: {\n        type: &#39;bar&#39;,\n        datasetIndex: 1\n    },\n    ...\n};\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=data-transform-sort-bar&reset=1&edit=1\" width=\"600\" height=\"350\" ></iframe>\n\n\n\n<p>数据转换器 &quot;sort&quot; 还有一些额外的功能：</p>\n<ul>\n<li>可以多重排序，多个维度一起排序。见下面的例子。</li>\n<li>排序规则是这样的：<ul>\n<li>默认按照数值大小排序。其中，“可转为数值的字符串”也被转换成数值，和其他数值一起按大小排序。</li>\n<li>对于其他“不能转为数值的字符串”，也能在它们之间按字符串进行排序。这个特性有助于这种场景：把相同标签的数据项排到一起，尤其是当多个维度共同排序时。见下面的例子。</li>\n<li>当“数值及可转为数值的字符串”和“不能转为数值的字符串”进行排序时，或者它们和“其他类型的值”进行比较时，它们本身是不知如何进行比较的。那么我们称呼“后者”为“incomparable”，并且可以设置 <code class=\"codespan\">incomparable: &#39;min&#39; | &#39;max&#39;</code> 来指定一个“incomparable”在这个比较中是最大还是最小，从而能使它们能产生比较结果。这个设定的用途，比如可以是，决定空值（例如 <code class=\"codespan\">null</code>, <code class=\"codespan\">undefined</code>, <code class=\"codespan\">NaN</code>, <code class=\"codespan\">&#39;&#39;</code>, <code class=\"codespan\">&#39;-&#39;</code>）在排序的头还是尾。</li>\n</ul>\n</li>\n<li>过滤器 <code class=\"codespan\">filter: &#39;time&#39; | &#39;trim&#39; | &#39;number&#39;</code> 可以被使用，和数据转换器 &quot;filter&quot; 中的情况一样。<ul>\n<li>如果要对时间进行排序（例如，值为 JS <code class=\"codespan\">Date</code> 实例或者时间字符串如 <code class=\"codespan\">&#39;2012-03-12 11:13:54&#39;</code>），我们需要声明 <code class=\"codespan\">parser: &#39;time&#39;</code>。</li>\n<li>如果需要对有后缀的数值进行排序（如 <code class=\"codespan\">&#39;33%&#39;</code>, <code class=\"codespan\">&#39;16px&#39;</code>）我们需要声明 <code class=\"codespan\">parser: &#39;number&#39;</code>。</li>\n</ul>\n</li>\n</ul>\n<p>这是一个“多维度排序”的例子。</p>\n<pre><code class=\"lang-js\">option = {\n    dataset: [{\n        dimensions: [&#39;name&#39;, &#39;age&#39;, &#39;profession&#39;, &#39;score&#39;, &#39;date&#39;],\n        source: [\n            [&#39; Hannah Krause &#39;, 41, &#39;Engineer&#39;, 314, &#39;2011-02-12&#39;],\n            [&#39;Zhao Qian &#39;, 20, &#39;Teacher&#39;, 351, &#39;2011-03-01&#39;],\n            [&#39; Jasmin Krause &#39;, 52, &#39;Musician&#39;, 287, &#39;2011-02-14&#39;],\n            [&#39;Li Lei&#39;, 37, &#39;Teacher&#39;, 219, &#39;2011-02-18&#39;],\n            [&#39; Karle Neumann &#39;, 25, &#39;Engineer&#39;, 253, &#39;2011-04-02&#39;],\n            [&#39; Adrian Groß&#39;, 19, &#39;Teacher&#39;, null, &#39;2011-01-16&#39;],\n            [&#39;Mia Neumann&#39;, 71, &#39;Engineer&#39;, 165, &#39;2011-03-19&#39;],\n            [&#39; Böhm Fuchs&#39;, 36, &#39;Musician&#39;, 318, &#39;2011-02-24&#39;],\n            [&#39;Han Meimei &#39;, 67, &#39;Engineer&#39;, 366, &#39;2011-03-12&#39;],\n        ]\n    }, {\n        transform: {\n            type: &#39;sort&#39;,\n            config: [\n                // 对两个维度按声明的优先级分别排序。\n                { dimension: &#39;profession&#39;, order: &#39;desc&#39; },\n                { dimension: &#39;score&#39;, order: &#39;desc&#39; }\n            ]\n        }\n    }],\n    series: {\n        type: &#39;bar&#39;,\n        datasetIndex: 1\n    },\n    ...\n};\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/data-transform-multiple-sort-bar&reset=1&edit=1\" width=\"600\" height=\"350\" ></iframe>\n\n\n\n<p>最后，我们给出数据转换器 &quot;sort&quot; 的 config 的形式化定义。</p>\n<pre><code class=\"lang-ts\">type SortTransform = {\n    type: &#39;filter&#39;;\n    config: OrderExpression | OrderExpression[];\n};\ntype OrderExpression = {\n    dimension: DimensionName | DimensionIndex;\n    order: &#39;asc&#39; | &#39;desc&#39;;\n    incomparable?: &#39;min&#39; | &#39;max&#39;;\n    parser?: &#39;time&#39; | &#39;trim&#39; | &#39;number&#39;;\n};\ntype DimensionName = string;\ntype DimensionIndex = number;\n</code></pre>\n<h2 id=\"-\">使用外部的数据转换器</h2>\n<p>除了上述的内置的数据转换器外，我们也可以使用外部的数据转换器。外部数据转换器能提供或自己定制更丰富的功能。下面的例子中，我们使用第三方库 <a href=\"https://github.com/ecomfe/echarts-stat\" target=\"_blank\">ecStat</a> 提供的数据转换器。</p>\n<p>生成数据的回归线：</p>\n<pre><code class=\"lang-js\">// 首先要注册外部数据转换器。\necharts.registerTransform(ecStatTransform(ecStat).regression);\n</code></pre>\n<pre><code class=\"lang-js\">option = {\n    dataset: [{\n        source: rawData\n    }, {\n        transform: {\n            // 引用注册的数据转换器。\n            // 注意，每个外部的数据转换器，都有名空间（如 &#39;ecStat:xxx&#39;，&#39;ecStat&#39; 是名空间）。\n            // 而内置数据转换器（如 &#39;filter&#39;, &#39;sort&#39;）没有名空间。\n            type: &#39;ecStat:regression&#39;,\n            config: {\n                // 这里是此外部数据转换器所需的参数。\n                method: &#39;exponential&#39;\n            }\n        }\n    }],\n    xAxis: { type: &#39;category&#39; },\n    yAxis: {},\n    series: [{\n        name: &#39;scatter&#39;,\n        type: &#39;scatter&#39;,\n        datasetIndex: 0\n    }, {\n        name: &#39;regression&#39;,\n        type: &#39;line&#39;,\n        symbol: &#39;none&#39;,\n        datasetIndex: 1\n    }]\n};\n</code></pre>\n<p>一些使用外部转换器的例子：</p>\n<ul>\n<li><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=data-transform-aggregate&amp;edit=1&amp;reset=1\" target=\"_blank\">聚集</a></li>\n<li><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-histogram&amp;edit=1&amp;reset=1\" target=\"_blank\">直方图</a></li>\n<li><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-clustering&amp;edit=1&amp;reset=1\" target=\"_blank\">简单聚类</a></li>\n<li><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-linear-regression&amp;edit=1&amp;reset=1\" target=\"_blank\">线性回归线</a></li>\n<li><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-exponential-regression&amp;edit=1&amp;reset=1\" target=\"_blank\">指数回归线</a></li>\n<li><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-logarithmic-regression&amp;edit=1&amp;reset=1\" target=\"_blank\">对数回归线</a></li>\n<li><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter-polynomial-regression&amp;edit=1&amp;reset=1\" target=\"_blank\">多项式回归线</a></li>\n</ul>\n"
  },
  "在图表中加入交互组件": {
    "desc": "<p>除了图表外 Apache ECharts<sup>TM</sup> 中，提供了很多交互组件。例如：</p>\n<p><code class=\"codespan\">图例组件</code> <a href=\"option.html#legend\" target=\"_blank\">legend</a>、<code class=\"codespan\">标题组件</code> <a href=\"option.html#title\" target=\"_blank\">title</a>、<code class=\"codespan\">视觉映射组件</code> <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a>、<code class=\"codespan\">数据区域缩放组件</code> <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a>、<code class=\"codespan\">时间线组件</code> <a href=\"option.html#timeline\" target=\"_blank\">timeline</a></p>\n<p>下面以 <code class=\"codespan\">数据区域缩放组件</code> <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a> 为例，介绍如何加入这种组件。</p>\n<h2 id=\"-datazoom-\">数据区域缩放组件（dataZoom）介绍</h2>\n<p>『概览数据整体，按需关注数据细节』是数据可视化的基本交互需求。<code class=\"codespan\">dataZoom</code> 组件能够在直角坐标系（<a href=\"option.html#grid\" target=\"_blank\">grid</a>）、极坐标系（<a href=\"option.html#polar\" target=\"_blank\">polar</a>）中实现这一功能。</p>\n<p><strong>如下例子：</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-dataZoom-all&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<ul>\n<li><code class=\"codespan\">dataZoom</code> 组件是对 <code class=\"codespan\">数轴（axis）</code> 进行『数据窗口缩放』『数据窗口平移』操作。</li>\n</ul>\n<blockquote>\n<p>可以通过 <a href=\"option.html#dataZoom.xAxisIndex\" target=\"_blank\">dataZoom.xAxisIndex</a> 或 <a href=\"option.html#dataZoom.yAxisIndex\" target=\"_blank\">dataZoom.yAxisIndex</a> 来指定 <code class=\"codespan\">dataZoom</code> 控制哪个或哪些数轴。</p>\n</blockquote>\n<ul>\n<li><p><code class=\"codespan\">dataZoom</code> 组件可同时存在多个，起到共同控制的作用。控制同一个数轴的组件，会自动联动。下面例子中会详细说明。</p>\n</li>\n<li><p><code class=\"codespan\">dataZoom</code> 的运行原理是通过『数据过滤』来达到『数据窗口缩放』的效果。</p>\n<p>  数据过滤模式的设置不同，效果也不同，参见：<a href=\"option.html#dataZoom.filterMode\" target=\"_blank\">dataZoom.filterMode</a>。</p>\n</li>\n<li><p><code class=\"codespan\">dataZoom</code> 的数据窗口范围的设置，目前支持两种形式：</p>\n<ul>\n<li><p>百分比形式：参见 <a href=\"option.html#dataZoom.start\" target=\"_blank\">dataZoom.start</a> 和 <a href=\"option.html#dataZoom.end\" target=\"_blank\">dataZoom.end</a>。</p>\n</li>\n<li><p>绝对数值形式：参见 <a href=\"option.html#dataZoom.startValue\" target=\"_blank\">dataZoom.startValue</a> 和 <a href=\"option.html#dataZoom.endValue\" target=\"_blank\">dataZoom.endValue</a>。</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><strong>dataZoom 组件现在支持几种子组件：</strong></p>\n<ul>\n<li><p><a href=\"option.html#dataZoom-inside\" target=\"_blank\">内置型数据区域缩放组件（dataZoomInside）</a>：内置于坐标系中。</p>\n</li>\n<li><p><a href=\"option.html#dataZoom-slider\" target=\"_blank\">滑动条型数据区域缩放组件（dataZoomSlider）</a>：有单独的滑动条操作。</p>\n</li>\n<li><p><a href=\"option.html#toolbox.feature.dataZoom\" target=\"_blank\">框选型数据区域缩放组件（dataZoomSelect）</a>：全屏的选框进行数据区域缩放。入口和配置项均在 <code class=\"codespan\">toolbox</code>中。</p>\n</li>\n</ul>\n<h2 id=\"-datazoom-\">在代码加入 dataZoom 组件</h2>\n<p>先只在对单独一个横轴，加上 dataZoom 组件，代码示例如下：</p>\n<pre><code class=\"lang-javascript\">\noption = {\n    xAxis: {\n        type: &#39;value&#39;\n    },\n    yAxis: {\n        type: &#39;value&#39;\n    },\n    dataZoom: [\n        {   // 这个dataZoom组件，默认控制x轴。\n            type: &#39;slider&#39;, // 这个 dataZoom 组件是 slider 型 dataZoom 组件\n            start: 10,      // 左边在 10% 的位置。\n            end: 60         // 右边在 60% 的位置。\n        }\n    ],\n    series: [\n        {\n            type: &#39;scatter&#39;, // 这是个『散点图』\n            itemStyle: {\n                opacity: 0.8\n            },\n            symbolSize: function (val) {\n                return val[2] * 40;\n            },\n            data: [[&quot;14.616&quot;,&quot;7.241&quot;,&quot;0.896&quot;],[&quot;3.958&quot;,&quot;5.701&quot;,&quot;0.955&quot;],[&quot;2.768&quot;,&quot;8.971&quot;,&quot;0.669&quot;],[&quot;9.051&quot;,&quot;9.710&quot;,&quot;0.171&quot;],[&quot;14.046&quot;,&quot;4.182&quot;,&quot;0.536&quot;],[&quot;12.295&quot;,&quot;1.429&quot;,&quot;0.962&quot;],[&quot;4.417&quot;,&quot;8.167&quot;,&quot;0.113&quot;],[&quot;0.492&quot;,&quot;4.771&quot;,&quot;0.785&quot;],[&quot;7.632&quot;,&quot;2.605&quot;,&quot;0.645&quot;],[&quot;14.242&quot;,&quot;5.042&quot;,&quot;0.368&quot;]]\n        }\n    ]\n}\n</code></pre>\n<p>可以看到如下结果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-1&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n<p><br></p>\n<p>上面的图只能拖动 dataZoom 组件导致窗口变化。如果想在坐标系内进行拖动，以及用滚轮（或移动触屏上的两指滑动）进行缩放，那么要再加上一个 inside 型的 dataZoom组件。直接在上面的 <code class=\"codespan\">option.dataZoom</code> 中增加即可：</p>\n<pre><code class=\"lang-javascript\">option = {\n    ...,\n    dataZoom: [\n        {   // 这个dataZoom组件，默认控制x轴。\n            type: &#39;slider&#39;, // 这个 dataZoom 组件是 slider 型 dataZoom 组件\n            start: 10,      // 左边在 10% 的位置。\n            end: 60         // 右边在 60% 的位置。\n        },\n        {   // 这个dataZoom组件，也控制x轴。\n            type: &#39;inside&#39;, // 这个 dataZoom 组件是 inside 型 dataZoom 组件\n            start: 10,      // 左边在 10% 的位置。\n            end: 60         // 右边在 60% 的位置。\n        }\n    ],\n    ...\n}\n</code></pre>\n<p>可以看到如下结果（能在坐标系中进行滑动，以及使用滚轮缩放了）：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-2&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n<p><br></p>\n<p>如果想 y 轴也能够缩放，那么在 y 轴上也加上 dataZoom 组件：</p>\n<pre><code class=\"lang-javascript\">option = {\n    ...,\n    dataZoom: [\n        {\n            type: &#39;slider&#39;,\n            xAxisIndex: 0,\n            start: 10,\n            end: 60\n        },\n        {\n            type: &#39;inside&#39;,\n            xAxisIndex: 0,\n            start: 10,\n            end: 60\n        },\n        {\n            type: &#39;slider&#39;,\n            yAxisIndex: 0,\n            start: 30,\n            end: 80\n        },\n        {\n            type: &#39;inside&#39;,\n            yAxisIndex: 0,\n            start: 30,\n            end: 80\n        }\n    ],\n    ...\n}\n</code></pre>\n<p>可以看到如下结果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/scatter-tutorial-dataZoom-3&edit=1&reset=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n\n\n\n\n\n"
  },
  "移动端自适应": {
    "desc": "<p>Apache ECharts<sup>TM</sup> 工作在用户指定高宽的 DOM 节点（容器）中。ECharts 的『组件』和『系列』都在这个 DOM 节点中，每个节点都可以由用户指定位置。图表库内部并不适宜实现 DOM 文档流布局，因此采用类似绝对布局的简单容易理解的布局方式。但是有时候容器尺寸极端时，这种方式并不能自动避免组件重叠的情况，尤其在移动端小屏的情况下。</p>\n<p>另外，有时会出现一个图表需要同时在PC、移动端上展现的场景。这需要 ECharts 内部组件随着容器尺寸变化而变化的能力。</p>\n<p>为了解决这个问题，ECharts 完善了组件的定位设置，并且实现了类似 <a href=\"https://www.w3.org/TR/css3-mediaqueries/\" target=\"_blank\">CSS Media Query</a> 的自适应能力。</p>\n<h2 id=\"echarts-\">ECharts组件的定位和布局</h2>\n<p>大部分『组件』和『系列』会遵循两种定位方式：</p>\n<p><br>\n<strong>left/right/top/bottom/width/height 定位方式：</strong></p>\n<p>这六个量中，每个量都可以是『绝对值』或者『百分比』或者『位置描述』。</p>\n<ul>\n<li><p>绝对值</p>\n<p>  单位是浏览器像素（px），用 <code class=\"codespan\">number</code> 形式书写（不写单位）。例如 <code class=\"codespan\">{left: 23, height: 400}</code>。</p>\n</li>\n<li><p>百分比</p>\n<p>  表示占 DOM 容器高宽的百分之多少，用 <code class=\"codespan\">string</code> 形式书写。例如 <code class=\"codespan\">{right: &#39;30%&#39;, bottom: &#39;40%&#39;}</code>。</p>\n</li>\n<li><p>位置描述</p>\n<ul>\n<li>可以设置 <code class=\"codespan\">left: &#39;center&#39;</code>，表示水平居中。</li>\n<li>可以设置 <code class=\"codespan\">top: &#39;middle&#39;</code>，表示垂直居中。</li>\n</ul>\n</li>\n</ul>\n<p>这六个量的概念，和 CSS 中六个量的概念类似：</p>\n<ul>\n<li>left：距离 DOM 容器左边界的距离。</li>\n<li>right：距离 DOM 容器右边界的距离。</li>\n<li>top：距离 DOM 容器上边界的距离。</li>\n<li>bottom：距离 DOM 容器下边界的距离。</li>\n<li>width：宽度。</li>\n<li>height：高度。</li>\n</ul>\n<p>在横向，<code class=\"codespan\">left</code>、<code class=\"codespan\">right</code>、<code class=\"codespan\">width</code> 三个量中，只需两个量有值即可，因为任两个量可以决定组件的位置和大小，例如 <code class=\"codespan\">left</code> 和 <code class=\"codespan\">right</code> 或者 <code class=\"codespan\">right</code> 和 <code class=\"codespan\">width</code> 都可以决定组件的位置和大小。\n纵向，<code class=\"codespan\">top</code>、<code class=\"codespan\">bottom</code>、<code class=\"codespan\">height</code> 三个量，和横向类同不赘述。</p>\n<p><br>\n<strong><code class=\"codespan\">center</code> / <code class=\"codespan\">radius</code> 定位方式：</strong></p>\n<ul>\n<li><p><code class=\"codespan\">center</code></p>\n<p>  是一个数组，表示 <code class=\"codespan\">[x, y]</code>，其中，<code class=\"codespan\">x</code>、<code class=\"codespan\">y</code>可以是『绝对值』或者『百分比』，含义和前述相同。</p>\n</li>\n<li><p><code class=\"codespan\">radius</code></p>\n<p>  是一个数组，表示 <code class=\"codespan\">[内半径, 外半径]</code>，其中，内外半径可以是『绝对值』或者『百分比』，含义和前述相同。</p>\n<p>  在自适应容器大小时，百分比设置是很有用的。</p>\n</li>\n</ul>\n<p><br>\n<strong>横向（horizontal）和纵向（vertical）</strong></p>\n<p>ECharts的『外观狭长』型的组件（如 <code class=\"codespan\">legend</code>、<code class=\"codespan\">visualMap</code>、<code class=\"codespan\">dataZoom</code>、<code class=\"codespan\">timeline</code>等），大多提供了『横向布局』『纵向布局』的选择。例如，在细长的移动端屏幕上，可能适合使用『纵向布局』；在PC宽屏上，可能适合使用『横向布局』。</p>\n<p>横纵向布局的设置，一般在『组件』或者『系列』的 <code class=\"codespan\">orient</code> 或者 <code class=\"codespan\">layout</code> 配置项上，设置为 <code class=\"codespan\">&#39;horizontal&#39;</code> 或者 <code class=\"codespan\">&#39;vertical&#39;</code>。</p>\n<p><br>\n<strong>与 ECharts2 的兼容：</strong></p>\n<p>ECharts2 中的 <code class=\"codespan\">x/x2/y/y2</code> 的命名方式仍被兼容，对应于 <code class=\"codespan\">left/right/top/bottom</code>。但是建议写 <code class=\"codespan\">left/right/top/bottom</code>。</p>\n<p>位置描述中，为兼容 ECharts2，可以支持一些看起来略奇怪的设置：<code class=\"codespan\">left: &#39;right&#39;</code>、<code class=\"codespan\">left: &#39;left&#39;</code>、<code class=\"codespan\">top: &#39;bottom&#39;</code>、<code class=\"codespan\">top: &#39;top&#39;</code>。这些语句分别等效于：<code class=\"codespan\">right: 0</code>、<code class=\"codespan\">left: 0</code>、<code class=\"codespan\">bottom: 0</code>、<code class=\"codespan\">top: 0</code>，写成后者就不奇怪了。</p>\n<h2 id=\"media-query\">Media Query</h2>\n<p><a href=\"https://www.w3.org/TR/css3-mediaqueries/#media1\" target=\"_blank\">Media Query</a> 提供了『随着容器尺寸改变而改变』的能力。</p>\n<p>如下例子，可尝试拖动<strong>右下角的圆点</strong>，随着尺寸变化，legend 和 系列会自动改变布局位置和方式。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-media&edit=1&reset=1\" width=\"750\" height=\"600\" ></iframe>\n\n\n<p>要在 option 中设置 Media Query 须遵循如下格式：</p>\n<pre><code class=\"lang-javascript\">option = {\n    // 这里是基本的『原子option』。\n    title: {...},\n    legend: {...},\n    series: [{...}, {...}, ...],\n    ...,\n    media: [ // 这里定义了 media query 的逐条规则。\n        {\n            query: {...},   // 这里写规则。\n            option: {       // 这里写此规则满足下的option。\n                legend: {...},\n                ...\n            }\n        },\n        {\n            query: {...},   // 第二个规则。\n            option: {       // 第二个规则对应的option。\n                legend: {...},\n                ...\n            }\n        },\n        {                   // 这条里没有写规则，表示『默认』，\n            option: {       // 即所有规则都不满足时，采纳这个option。\n                legend: {...},\n                ...\n            }\n        }\n    ]\n};\n</code></pre>\n<p>上面的例子中，<code class=\"codespan\">baseOption</code>、以及 <code class=\"codespan\">media</code> 每个 option 都是『原子 option』，即普通的含有各组件、系列定义的 option。而由『原子option』组合成的整个 option，我们称为『复合 option』。<code class=\"codespan\">baseOption</code> 是必然被使用的，此外，满足了某个 <code class=\"codespan\">query</code> 条件时，对应的 option 会被使用 <code class=\"codespan\">chart.mergeOption()</code> 来 merge 进去。</p>\n<p><strong>query：</strong></p>\n<p>每个 <code class=\"codespan\">query</code> 类似于这样：</p>\n<pre><code class=\"lang-javascript\">{\n    minWidth: 200,\n    maxHeight: 300,\n    minAspectRatio: 1.3\n}\n</code></pre>\n<p>现在支持三个属性：<code class=\"codespan\">width</code>、<code class=\"codespan\">height</code>、<code class=\"codespan\">aspectRatio</code>（长宽比）。每个属性都可以加上 <code class=\"codespan\">min</code> 或 <code class=\"codespan\">max</code> 前缀。比如，<code class=\"codespan\">minWidth: 200</code> 表示『大于等于200px宽度』。两个属性一起写表示『并且』，比如：<code class=\"codespan\">{minWidth: 200, maxHeight: 300}</code> 表示『大于等于200px宽度，并且小于等于300px高度』。</p>\n<p><strong>option：</strong></p>\n<p><code class=\"codespan\">media</code>中的 option 既然是『原子 option』，理论上可以写任何 option 的配置项。但是一般我们只写跟布局定位相关的，例如截取上面例子中的一部分 query option：</p>\n<pre><code class=\"lang-javascript\">media: [\n    ...,\n    {\n        query: {\n            maxAspectRatio: 1           // 当长宽比小于1时。\n        },\n        option: {\n            legend: {                   // legend 放在底部中间。\n                right: &#39;center&#39;,\n                bottom: 0,\n                orient: &#39;horizontal&#39;    // legend 横向布局。\n            },\n            series: [                   // 两个饼图左右布局。\n                {\n                    radius: [20, &#39;50%&#39;],\n                    center: [&#39;50%&#39;, &#39;30%&#39;]\n                },\n                {\n                    radius: [30, &#39;50%&#39;],\n                    center: [&#39;50%&#39;, &#39;70%&#39;]\n                }\n            ]\n        }\n    },\n    {\n        query: {\n            maxWidth: 500               // 当容器宽度小于 500 时。\n        },\n        option: {\n            legend: {\n                right: 10,              // legend 放置在右侧中间。\n                top: &#39;15%&#39;,\n                orient: &#39;vertical&#39;      // 纵向布局。\n            },\n            series: [                   // 两个饼图上下布局。\n                {\n                    radius: [20, &#39;50%&#39;],\n                    center: [&#39;50%&#39;, &#39;30%&#39;]\n                },\n                {\n                    radius: [30, &#39;50%&#39;],\n                    center: [&#39;50%&#39;, &#39;75%&#39;]\n                }\n            ]\n        }\n    },\n    ...\n]\n</code></pre>\n<p><strong>多个 query 被满足时的优先级：</strong></p>\n<p>注意，可以有多个 <code class=\"codespan\">query</code> 同时被满足，会都被 <code class=\"codespan\">mergeOption</code>，定义在后的后被 merge（即优先级更高）。</p>\n<p><strong>默认 query：</strong></p>\n<p>如果 <code class=\"codespan\">media</code> 中有某项不写 <code class=\"codespan\">query</code>，则表示『默认值』，即所有规则都不满足时，采纳这个option。</p>\n<p><strong>容器大小实时变化时的注意事项：</strong></p>\n<p>在不少情况下，并不需要容器DOM节点任意随着拖拽变化大小，而是只是根据不同终端设置几个典型尺寸。</p>\n<p>但是如果容器DOM节点需要能任意随着拖拽变化大小，那么目前使用时需要注意这件事：某个配置项，如果在某一个 <code class=\"codespan\">query option</code> 中出现，那么在其他 <code class=\"codespan\">query option</code> 中也必须出现，否则不能够回归到原来的状态。（<code class=\"codespan\">left/right/top/bottom/width/height</code> 不受这个限制。）</p>\n<p><strong>『复合 option』 中的 <code class=\"codespan\">media</code> 不支持 merge</strong></p>\n<p>也就是说，当第二（或三、四、五 ...）次 <code class=\"codespan\">chart.setOption(rawOption)</code> 时，如果 <code class=\"codespan\">rawOption</code> 是 <code class=\"codespan\">复合option</code>（即包含 <code class=\"codespan\">media</code> 列表），那么新的 <code class=\"codespan\">rawOption.media</code> 列表不会和老的 <code class=\"codespan\">media</code> 列表进行 merge，而是简单替代。当然，<code class=\"codespan\">baseOption</code> 仍然会正常和老的 option 进行merge。</p>\n<p>其实，很少有场景需要使用『复合 option』来多次 <code class=\"codespan\">setOption</code>，而我们推荐的做法是，使用 mediaQuery 时，第一次setOption使用『复合 option』，后面 <code class=\"codespan\">setOption</code> 时仅使用 『原子 option』，也就是仅仅用 setOption 来改变 <code class=\"codespan\">baseOption</code>。</p>\n<p><br>\n最后看一个和时间轴结合的例子：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/bar-media-timeline&edit=1&reset=1\" width=\"750\" height=\"700\" ></iframe>\n\n\n\n\n"
  },
  "数据的视觉映射": {
    "desc": "<p>数据可视化是 <strong>数据</strong> 到 <strong>视觉元素</strong> 的映射过程（这个过程也可称为视觉编码，视觉元素也可称为视觉通道）。</p>\n<p>Apache ECharts<sup>TM</sup> 的每种图表本身就内置了这种映射过程，比如折线图把数据映射到『线』，柱状图把数据映射到『长度』。一些更复杂的图表，如 <code class=\"codespan\">graph</code>、<code class=\"codespan\">事件河流图</code>、<code class=\"codespan\">treemap</code> 也都会做出他们内置的映射。</p>\n<p>此外，ECharts 还提供了 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap 组件</a> 来提供通用的视觉映射。<code class=\"codespan\">visualMap</code> 组件中可以使用的视觉元素有：<br>\n<code class=\"codespan\">图形类别（symbol）</code>、<code class=\"codespan\">图形大小（symbolSize）</code><br>\n<code class=\"codespan\">颜色（color）</code>、<code class=\"codespan\">透明度（opacity）</code>、<code class=\"codespan\">颜色透明度（colorAlpha）</code>、<br>\n<code class=\"codespan\">颜色明暗度（colorLightness）</code>、<code class=\"codespan\">颜色饱和度（colorSaturation）</code>、<code class=\"codespan\">色调（colorHue）</code></p>\n<p>下面对 <code class=\"codespan\">visualMap</code> 组件的使用方式进行简要的介绍。</p>\n<h2 id=\"-\">数据和维度</h2>\n<p>ECharts中的数据，一般存放于 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 中。根据图表类型不同，数据的具体形式也可能有些许差异。比如可能是『线性表』、『树』、『图』等。但他们都有个共性：都是『数据项（dataItem）』的集合。每个数据项含有『数据值（value）』和其他信息（如果需要的话）。每个数据值，可以是单一的数值（一维）或者一个数组（多维）。</p>\n<p>例如，<a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 最常见的形式，是『线性表』，即一个普通数组：</p>\n<pre><code class=\"lang-javascript\">series: {\n    data: [\n        {       // 这里每一个项就是数据项（dataItem）\n            value: 2323, // 这是数据项的数据值（value）\n            itemStyle: {...}\n        },\n        1212,   // 也可以直接是 dataItem 的 value，这更常见。\n        2323,   // 每个 value 都是『一维』的。\n        4343,\n        3434\n    ]\n}\n</code></pre>\n<pre><code class=\"lang-javascript\">series: {\n    data: [\n        {                        // 这里每一个项就是数据项（dataItem）\n            value: [3434, 129,  &#39;圣马力诺&#39;], // 这是数据项的数据值（value）\n            itemStyle: {...}\n        },\n        [1212, 5454, &#39;梵蒂冈&#39;],   // 也可以直接是 dataItem 的 value，这更常见。\n        [2323, 3223, &#39;瑙鲁&#39;],     // 每个 value 都是『三维』的，每列是一个维度。\n        [4343, 23,   &#39;图瓦卢&#39;]    // 假如是『气泡图』，常见第一维度映射到x轴，\n                                 // 第二维度映射到y轴，\n                                 // 第三维度映射到气泡半径（symbolSize）\n    ]\n}\n</code></pre>\n<p>在图表中，往往默认把 value 的前一两个维度进行映射，比如取第一个维度映射到x轴，取第二个维度映射到y轴。如果想要把更多的维度展现出来，可以借助 <code class=\"codespan\">visualMap</code> 。最常见的情况，<a href=\"option.html#series-scatter\" target=\"_blank\">气泡图（scatter）</a> 使用半径展现了第三个维度。</p>\n<h2 id=\"visualmap-\">visualMap 组件</h2>\n<p>visualMap 组件定义了把数据的『哪个维度』映射到『什么视觉元素上』。</p>\n<p>现在提供如下两种类型的visualMap组件，通过 <a href=\"option.html#visualMap.type\" target=\"_blank\">visualMap.type</a> 来区分。</p>\n<p>其定义结构例如：</p>\n<pre><code class=\"lang-javascript\">option = {\n    visualMap: [ // 可以同时定义多个 visualMap 组件。\n        { // 第一个 visualMap 组件\n            type: &#39;continuous&#39;, // 定义为连续型 visualMap\n            ...\n        },\n        { // 第二个 visualMap 组件\n            type: &#39;piecewise&#39;, // 定义为分段型 visualMap\n            ...\n        }\n    ],\n    ...\n};\n</code></pre>\n<p><a href=\"option.html#visualMap-continuous\" target=\"_blank\">连续型（visualMapContinuous）</a></p>\n<p><a href=\"option.html#visualMap-piecewise\" target=\"_blank\">分段型（visualMapPiecewise）</a>：</p>\n<p>分段型视觉映射组件（visualMapPiecewise），有三种模式：</p>\n<ul>\n<li>连续型数据平均分段: 依据 <a href=\"option.html#visualMap-piecewise.splitNumber\" target=\"_blank\">visualMap-piecewise.splitNumber</a> 来自动平均分割成若干块。</li>\n<li>连续型数据自定义分段: 依据 <a href=\"option.html#visualMap-piecewise.pieces\" target=\"_blank\">visualMap-piecewise.pieces</a> 来定义每块范围。</li>\n<li>离散数据（类别性数据）: 类别定义在 <a href=\"option.html#visualMap-piecewise.categories\" target=\"_blank\">visualMap-piecewise.categories</a> 中。</li>\n</ul>\n<p><br>\n<strong>视觉映射方式的配置</strong></p>\n<p>既然是『数据』到『视觉元素』的映射，<code class=\"codespan\">visualMap</code> 中可以指定数据的『哪个维度』（参见<a href=\"#visualMap.dimension\">visualMap.dimension</a>）映射到哪些『视觉元素』（参见 <a href=\"option.html#visualMap.inRange\" target=\"_blank\">visualMap.inRange</a> 和 <a href=\"option.html#visualMap.outOfRange\" target=\"_blank\">visualMap.outOfRange</a>）中。</p>\n<p>例一：</p>\n<pre><code class=\"lang-javascript\">option = {\n    visualMap: [\n        {\n            type: &#39;piecewise&#39;,\n            min: 0,\n            max: 5000,\n            dimension: 3,       // series.data 的第四个维度（即 value[3]）被映射\n            seriesIndex: 4,     // 对第四个系列进行映射。\n            inRange: {          // 选中范围中的视觉配置\n                color: [&#39;blue&#39;, &#39;#121122&#39;, &#39;red&#39;], // 定义了图形颜色映射的颜色列表，\n                                                    // 数据最小值映射到&#39;blue&#39;上，\n                                                    // 最大值映射到&#39;red&#39;上，\n                                                    // 其余自动线性计算。\n                symbolSize: [30, 100]               // 定义了图形尺寸的映射范围，\n                                                    // 数据最小值映射到30上，\n                                                    // 最大值映射到100上，\n                                                    // 其余自动线性计算。\n            },\n            outOfRange: {       // 选中范围外的视觉配置\n                symbolSize: [30, 100]\n            }\n        },\n        ...\n    ]\n};\n</code></pre>\n<p>例二：</p>\n<pre><code class=\"lang-javascript\">option = {\n    visualMap: [\n        {\n            ...,\n            inRange: {          // 选中范围中的视觉配置\n                colorLightness: [0.2, 1], // 映射到明暗度上。也就是对本来的颜色进行明暗度处理。\n                                          // 本来的颜色可能是从全局色板中选取的颜色，visualMap组件并不关心。\n                symbolSize: [30, 100]\n            },\n            ...\n        },\n        ...\n    ]\n};\n</code></pre>\n<p>更多详情，参见 <a href=\"option.html#visualMap.inRange\" target=\"_blank\">visualMap.inRange</a> 和 <a href=\"option.html#visualMap.outOfRange\" target=\"_blank\">visualMap.outOfRange</a>。</p>\n"
  },
  "ECharts 中的事件和行为": {
    "desc": "<p>在 Apache ECharts<sup>TM</sup> 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。</p>\n<p>在 ECharts 3 中绑定事件跟 2 一样都是通过 <a href=\"api.html#EChartsInstance.on\" target=\"_blank\">on</a> 方法，但是事件名称比 2 更加简单了。ECharts 3 中，事件名称对应 DOM 事件名称，均为小写的字符串，如下是一个绑定点击操作的示例。</p>\n<pre><code class=\"lang-js\">myChart.on(&#39;click&#39;, function (params) {\n    // 控制台打印数据的名称\n    console.log(params.name);\n});\n</code></pre>\n<p>在 ECharts 中事件分为两种类型，一种是用户鼠标操作点击，或者 hover 图表的图形时触发的事件，还有一种是用户在使用可以交互的组件后触发的行为事件，例如在切换图例开关时触发的 <a href=\"api.html#events.legendselectchanged\" target=\"_blank\">&#39;legendselectchanged&#39;</a> 事件（这里需要注意切换图例开关是不会触发<code class=\"codespan\">&#39;legendselected&#39;</code>事件的），数据区域缩放时触发的 <a href=\"api.html#events.legendselectchanged\" target=\"_blank\">&#39;datazoom&#39;</a> 事件等等。</p>\n<h2 id=\"-\">鼠标事件的处理</h2>\n<p>ECharts 支持常规的鼠标事件类型，包括 <code class=\"codespan\">&#39;click&#39;</code>、<code class=\"codespan\">&#39;dblclick&#39;</code>、<code class=\"codespan\">&#39;mousedown&#39;</code>、<code class=\"codespan\">&#39;mousemove&#39;</code>、<code class=\"codespan\">&#39;mouseup&#39;</code>、<code class=\"codespan\">&#39;mouseover&#39;</code>、<code class=\"codespan\">&#39;mouseout&#39;</code>、<code class=\"codespan\">&#39;globalout&#39;</code>、<code class=\"codespan\">&#39;contextmenu&#39;</code> 事件。下面先来看一个简单的点击柱状图后打开相应的百度搜索页面的示例。</p>\n<pre><code class=\"lang-js\">// 基于准备好的dom，初始化ECharts实例\nvar myChart = echarts.init(document.getElementById(&#39;main&#39;));\n\n// 指定图表的配置项和数据\nvar option = {\n    xAxis: {\n        data: [&quot;衬衫&quot;,&quot;羊毛衫&quot;,&quot;雪纺衫&quot;,&quot;裤子&quot;,&quot;高跟鞋&quot;,&quot;袜子&quot;]\n    },\n    yAxis: {},\n    series: [{\n        name: &#39;销量&#39;,\n        type: &#39;bar&#39;,\n        data: [5, 20, 36, 10, 10, 20]\n    }]\n};\n// 使用刚指定的配置项和数据显示图表。\nmyChart.setOption(option);\n// 处理点击事件并且跳转到相应的百度搜索页面\nmyChart.on(&#39;click&#39;, function (params) {\n    window.open(&#39;https://www.baidu.com/s?wd=&#39; + encodeURIComponent(params.name));\n});\n</code></pre>\n<p>所有的鼠标事件包含参数 <code class=\"codespan\">params</code>，这是一个包含点击图形的数据信息的对象，如下格式：</p>\n<pre><code class=\"lang-js\">{\n    // 当前点击的图形元素所属的组件名称，\n    // 其值如 &#39;series&#39;、&#39;markLine&#39;、&#39;markPoint&#39;、&#39;timeLine&#39; 等。\n    componentType: string,\n    // 系列类型。值可能为：&#39;line&#39;、&#39;bar&#39;、&#39;pie&#39; 等。当 componentType 为 &#39;series&#39; 时有意义。\n    seriesType: string,\n    // 系列在传入的 option.series 中的 index。当 componentType 为 &#39;series&#39; 时有意义。\n    seriesIndex: number,\n    // 系列名称。当 componentType 为 &#39;series&#39; 时有意义。\n    seriesName: string,\n    // 数据名，类目名\n    name: string,\n    // 数据在传入的 data 数组中的 index\n    dataIndex: number,\n    // 传入的原始数据项\n    data: Object,\n    // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，\n    // dataType 的值会是 &#39;node&#39; 或者 &#39;edge&#39;，表示当前点击在 node 还是 edge 上。\n    // 其他大部分图表中只有一种 data，dataType 无意义。\n    dataType: string,\n    // 传入的数据值\n    value: number|Array\n    // 数据图形的颜色。当 componentType 为 &#39;series&#39; 时有意义。\n    color: string\n}\n</code></pre>\n<p>如何区分鼠标点击到了哪里：</p>\n<pre><code class=\"lang-js\">myChart.on(&#39;click&#39;, function (params) {\n    if (params.componentType === &#39;markPoint&#39;) {\n        // 点击到了 markPoint 上\n        if (params.seriesIndex === 5) {\n            // 点击到了 index 为 5 的 series 的 markPoint 上。\n        }\n    }\n    else if (params.componentType === &#39;series&#39;) {\n        if (params.seriesType === &#39;graph&#39;) {\n            if (params.dataType === &#39;edge&#39;) {\n                // 点击到了 graph 的 edge（边）上。\n            }\n            else {\n                // 点击到了 graph 的 node（节点）上。\n            }\n        }\n    }\n});\n</code></pre>\n<p>使用 <code class=\"codespan\">query</code> 只对指定的组件的图形元素的触发回调：</p>\n<pre><code class=\"lang-js\">chart.on(eventName, query, handler);\n</code></pre>\n<p><code class=\"codespan\">query</code> 可为 <code class=\"codespan\">string</code> 或者 <code class=\"codespan\">Object</code>。</p>\n<p>如果为 <code class=\"codespan\">string</code> 表示组件类型。格式可以是 &#39;mainType&#39; 或者 &#39;mainType.subType&#39;。例如：</p>\n<pre><code class=\"lang-js\">chart.on(&#39;click&#39;, &#39;series&#39;, function () {...});\nchart.on(&#39;click&#39;, &#39;series.line&#39;, function () {...});\nchart.on(&#39;click&#39;, &#39;dataZoom&#39;, function () {...});\nchart.on(&#39;click&#39;, &#39;xAxis.category&#39;, function () {...});\n</code></pre>\n<p>如果为 <code class=\"codespan\">Object</code>，可以包含以下一个或多个属性，每个属性都是可选的：</p>\n<pre><code class=\"lang-js\">{\n    &lt;mainType&gt;Index: number // 组件 index\n    &lt;mainType&gt;Name: string // 组件 name\n    &lt;mainType&gt;Id: string // 组件 id\n    dataIndex: number // 数据项 index\n    name: string // 数据项 name\n    dataType: string // 数据项 type，如关系图中的 &#39;node&#39;, &#39;edge&#39;\n    element: string // 自定义系列中的 el 的 name\n}\n</code></pre>\n<p>例如：</p>\n<pre><code class=\"lang-js\">chart.setOption({\n    // ...\n    series: [{\n        name: &#39;uuu&#39;\n        // ...\n    }]\n});\nchart.on(&#39;mouseover&#39;, {seriesName: &#39;uuu&#39;}, function () {\n    // series name 为 &#39;uuu&#39; 的系列中的图形元素被 &#39;mouseover&#39; 时，此方法被回调。\n});\n</code></pre>\n<p>例如：</p>\n<pre><code class=\"lang-js\">chart.setOption({\n    // ...\n    series: [{\n        // ...\n    }, {\n        // ...\n        data: [\n            {name: &#39;xx&#39;, value: 121},\n            {name: &#39;yy&#39;, value: 33}\n        ]\n    }]\n});\nchart.on(&#39;mouseover&#39;, {seriesIndex: 1, name: &#39;xx&#39;}, function () {\n    // series index 1 的系列中的 name 为 &#39;xx&#39; 的元素被 &#39;mouseover&#39; 时，此方法被回调。\n});\n</code></pre>\n<p>例如：</p>\n<pre><code class=\"lang-js\">chart.setOption({\n    // ...\n    series: [{\n        type: &#39;graph&#39;,\n        nodes: [{name: &#39;a&#39;, value: 10}, {name: &#39;b&#39;, value: 20}],\n        edges: [{source: 0, target: 1}]\n    }]\n});\nchart.on(&#39;click&#39;, {dataType: &#39;node&#39;}, function () {\n    // 关系图的节点被点击时此方法被回调。\n});\nchart.on(&#39;click&#39;, {dataType: &#39;edge&#39;}, function () {\n    // 关系图的边被点击时此方法被回调。\n});\n</code></pre>\n<p>例如：</p>\n<pre><code class=\"lang-js\">chart.setOption({\n    // ...\n    series: {\n        // ...\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;group&#39;,\n                children: [{\n                    type: &#39;circle&#39;,\n                    name: &#39;my_el&#39;,\n                    // ...\n                }, {\n                    // ...\n                }]\n            }\n        },\n        data: [[12, 33]]\n    }\n})\nchart.on(&#39;mouseup&#39;, {element: &#39;my_el&#39;}, function () {\n    // name 为 &#39;my_el&#39; 的元素被 &#39;mouseup&#39; 时，此方法被回调。\n});\n</code></pre>\n<p>你可以在回调函数中获得这个对象中的数据名、系列名称后在自己的数据仓库中索引得到其它的信息候更新图表，显示浮层等等，如下示例代码：</p>\n<pre><code class=\"lang-js\">myChart.on(&#39;click&#39;, function (parmas) {\n    $.get(&#39;detail?q=&#39; + params.name, function (detail) {\n        myChart.setOption({\n            series: [{\n                name: &#39;pie&#39;,\n                // 通过饼图表现单个柱子中的数据分布\n                data: [detail.data]\n            }]\n        });\n    });\n});\n</code></pre>\n<h2 id=\"-\">组件交互的行为事件</h2>\n<p>在 ECharts 中基本上所有的组件交互行为都会触发相应的事件，常用的事件和事件对应参数在 <a href=\"api.html#events\" target=\"_blank\">events</a> 文档中有列出。</p>\n<p>下面是监听一个图例开关的示例：</p>\n<pre><code class=\"lang-js\">// 图例开关的行为只会触发 legendselectchanged 事件\nmyChart.on(&#39;legendselectchanged&#39;, function (params) {\n    // 获取点击图例的选中状态\n    var isSelected = params.selected[params.name];\n    // 在控制台中打印\n    console.log((isSelected ? &#39;选中了&#39; : &#39;取消选中了&#39;) + &#39;图例&#39; + params.name);\n    // 打印所有图例的状态\n    console.log(params.selected);\n});\n</code></pre>\n<h2 id=\"-echarts-\">代码触发 ECharts 中组件的行为</h2>\n<p>上面提到诸如<code class=\"codespan\">&#39;legendselectchanged&#39;</code>事件会由组件交互的行为触发，那除了用户的交互操作，有时候也会有需要在程序里调用方法触发图表的行为，诸如显示 tooltip，选中图例。</p>\n<p>在 ECharts 2.x 是通过 <code class=\"codespan\">myChart.component.tooltip.showTip</code> 这种形式调用相应的接口触发图表行为，入口很深，而且涉及到内部组件的组织。相对地，在 ECharts 3 里改为通过调用 <code class=\"codespan\">myChart.dispatchAction({ type: &#39;&#39; })</code> 触发图表行为，统一管理了所有动作，也可以方便地根据需要去记录用户的行为路径。</p>\n<p>常用的动作和动作对应参数在 <a href=\"api.html#action\" target=\"_blank\">action</a> 文档中有列出。</p>\n<p>下面示例演示了如何通过<code class=\"codespan\">dispatchAction</code>去轮流高亮饼图的每个扇形。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/pie-highlight&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n<h2 id=\"-\">监听“空白处”的事件</h2>\n<p>有时候，开发者需要监听画布的“空白处”所触发的事件。比如，当需要在用户点击“空白处”的时候重置图表时。</p>\n<p>在讨论这个功能之前，我们需要先明确两种事件。<code class=\"codespan\">zrender 事件</code>和<code class=\"codespan\">echarts 事件</code>。</p>\n<pre><code class=\"lang-js\">myChart.getZr().on(&#39;click&#39;, function (event) {\n    // 该监听器正在监听一个`zrender 事件`。\n});\nmyChart.on(&#39;click&#39;, function (event) {\n    // 该监听器正在监听一个`echarts 事件`。\n});\n</code></pre>\n<p><code class=\"codespan\">zrender 事件</code>与<code class=\"codespan\">echarts 事件</code>不同。前者是当鼠标在任何地方都会被触发，而后者是只有当鼠标在图形元素上时才能被触发。事实上，<code class=\"codespan\">echarts 事件</code> 是在 <code class=\"codespan\">zrender 事件</code> 的基础上实现的，也就是说，当一个 <code class=\"codespan\">zrender 事件</code> 在图形元素上被触发时，<code class=\"codespan\">echarts</code> 将触发一个 <code class=\"codespan\">echarts 事件</code> 给开发者。</p>\n<p>有了 <code class=\"codespan\">zrender事件</code>，我们就可以实现 “监听空白处的事件”，具体如下：</p>\n<pre><code class=\"lang-js\">myChart.getZr().on(&#39;click&#39;, function (event) {\n    // 没有 target 意味着鼠标/指针不在任何一个图形元素上，它是从“空白处”触发的。\n    if (!event.target) {\n        // 点击在了空白处，做些什么。\n    }\n});\n</code></pre>\n"
  },
  "动态排序柱状图": {
    "desc": "<p>动态排序柱状图是一种展示随时间变化的数据排名变化的图表，从 ECharts 5 开始内置支持。</p>\n<blockquote>\n<p>动态排序柱状图通常是横向的柱条，如果想要采用纵向的柱条，只要把本教程中的 X 轴和 Y 轴相反设置即可。</p>\n</blockquote>\n<ol>\n<li><code class=\"codespan\">yAxis.realtimeSort</code> 设为 <code class=\"codespan\">true</code>，表示开启 Y 轴的动态排序效果</li>\n<li><code class=\"codespan\">yAxis.inverse</code> 设为 <code class=\"codespan\">true</code>，表示 Y 轴从下往上是从小到大的排列</li>\n<li><code class=\"codespan\">yAxis.animationDuration</code> 建议设为 <code class=\"codespan\">300</code>，表示第一次柱条排序动画的时长</li>\n<li><code class=\"codespan\">yAxis.animationDurationUpdate</code> 建议设为 <code class=\"codespan\">300</code>，表示第一次后柱条排序动画的时长</li>\n<li>如果想只显示前 <em>n</em> 名，将 <code class=\"codespan\">yAxis.max</code> 设为 <em>n - 1</em>，否则显示所有柱条</li>\n<li><code class=\"codespan\">xAxis.max</code> 建议设为 <code class=\"codespan\">&#39;dataMax&#39;</code> 表示用数据的最大值作为 X 轴最大值，视觉效果更好</li>\n<li>如果想要实时改变标签，需要将 <code class=\"codespan\">series.label.valueAnimation</code> 设为 <code class=\"codespan\">true</code></li>\n<li><code class=\"codespan\">animationDuration</code> 设为 <code class=\"codespan\">0</code>，表示第一份数据不需要从 <code class=\"codespan\">0</code> 开始动画（如果希望从 <code class=\"codespan\">0</code> 开始则设为和 <code class=\"codespan\">animationDurationUpdate</code> 相同的值）</li>\n<li><code class=\"codespan\">animationDurationUpdate</code> 建议设为 <code class=\"codespan\">3000</code> 表示每次更新动画时长，这一数值应与调用 <code class=\"codespan\">setOption</code> 改变数据的频率相同</li>\n<li>以 <code class=\"codespan\">animationDurationUpdate</code> 的频率调用 <code class=\"codespan\">setInterval</code>，更新数据值，显示下一个时间点对应的柱条排序</li>\n</ol>\n<p>完整的例子如下：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-race&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n<p>以上的设置项比较多，如果手动设置比较繁琐，之后我们也会推出不用写代码就能实现动态排序柱状图的工具，敬请期待！</p>\n"
  },
  "小例子：自己实现拖拽": {
    "desc": "<p>介绍一个实现拖拽的小例子。这个例子是在原生 Apache ECharts<sup>TM</sup> 基础上做了些小小扩展，带有一定的交互性。通过这个例子，我们可以了解到，如何使用 ECharts 提供的 API 实现定制化的富交互的功能。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=line-draggable&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>这个例子主要做到了这样一件事，用鼠标可以拖拽曲线的点，从而改变曲线的形状。例子很简单，但是有了这个基础我们还可以做更多的事情，比如在图中可视化得编辑。所以我们从这个简单的例子开始。</p>\n<p>echarts 本身没有提供封装好的『拖拽改变图表』功能，因为现在认为这个功能并不足够有通用性。那么这个功能就留给开发者用 API 实现，这也有助于开发者按自己的需要个性定制。</p>\n<h2 id=\"-\">（一）实现基本的拖拽功能</h2>\n<p>在这个例子中，基础的图表是一个 <a href=\"option.html#series-line\" target=\"_blank\">折线图 (series-line)</a>。参见如下配置：</p>\n<pre><code class=\"lang-js\">var symbolSize = 20;\n\n// 这个 data 变量在这里单独声明，在后面也会用到。\nvar data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];\n\nmyChart.setOption({\n    xAxis: {\n        min: -100,\n        max: 80,\n        type: &#39;value&#39;,\n        axisLine: {onZero: false}\n    },\n    yAxis: {\n        min: -30,\n        max: 60,\n        type: &#39;value&#39;,\n        axisLine: {onZero: false}\n    },\n    series: [\n        {\n            id: &#39;a&#39;,\n            type: &#39;line&#39;,\n            smooth: true,\n            symbolSize: symbolSize, // 为了方便拖拽，把 symbolSize 尺寸设大了。\n            data: data\n        }\n    ]\n});\n</code></pre>\n<p>既然折线中原生的点没有拖拽功能，我们就为它加上拖拽功能：用 <a href=\"option.html#graphic\" target=\"_blank\">graphic</a> 组件，在每个点上面，覆盖一个隐藏的可拖拽的圆点。</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n    // 声明一个 graphic component，里面有若干个 type 为 &#39;circle&#39; 的 graphic elements。\n    // 这里使用了 echarts.util.map 这个帮助方法，其行为和 Array.prototype.map 一样，但是兼容 es5 以下的环境。\n    // 用 map 方法遍历 data 的每项，为每项生成一个圆点。\n    graphic: echarts.util.map(data, function (dataItem, dataIndex) {\n        return {\n            // &#39;circle&#39; 表示这个 graphic element 的类型是圆点。\n            type: &#39;circle&#39;,\n\n            shape: {\n                // 圆点的半径。\n                r: symbolSize / 2\n            },\n            // 用 transform 的方式对圆点进行定位。position: [x, y] 表示将圆点平移到 [x, y] 位置。\n            // 这里使用了 convertToPixel 这个 API 来得到每个圆点的位置，下面介绍。\n            position: myChart.convertToPixel(&#39;grid&#39;, dataItem),\n\n            // 这个属性让圆点不可见（但是不影响他响应鼠标事件）。\n            invisible: true,\n            // 这个属性让圆点可以被拖拽。\n            draggable: true,\n            // 把 z 值设得比较大，表示这个圆点在最上方，能覆盖住已有的折线图的圆点。\n            z: 100,\n            // 此圆点的拖拽的响应事件，在拖拽过程中会不断被触发。下面介绍详情。\n            // 这里使用了 echarts.util.curry 这个帮助方法，意思是生成一个与 onPointDragging\n            // 功能一样的新的函数，只不过第一个参数永远为此时传入的 dataIndex 的值。\n            ondrag: echarts.util.curry(onPointDragging, dataIndex)\n        };\n    })\n});\n</code></pre>\n<p>上面的代码中，使用 <a href=\"api.html#echartsInstance.convertToPixel\" target=\"_blank\">convertToPixel</a> 这个 API，进行了从 data 到『像素坐标』的转换，从而得到了每个圆点应该在的位置，从而能绘制这些圆点。<code class=\"codespan\">myChart.convertToPixel(&#39;grid&#39;, dataItem)</code> 这句话中，第一个参数 <code class=\"codespan\">&#39;grid&#39;</code> 表示 <code class=\"codespan\">dataItem</code> 在 <a href=\"option.html#grid\" target=\"_blank\">grid</a> 这个组件中（即直角坐标系）中进行转换。所谓『像素坐标』，就是以 echarts 容器 dom element 的左上角为零点的以像素为单位的坐标系中的坐标。</p>\n<p>注意这件事需要在第一次 setOption 后再进行，也就是说，须在坐标系（<a href=\"option.html#grid\" target=\"_blank\">grid</a>）初始化后才能调用 <code class=\"codespan\">myChart.convertToPixel(&#39;grid&#39;, dataItem)</code>。</p>\n<p>有了这段代码后，就有了诸个能拖拽的点。接下来要为每个点，加上拖拽响应的事件：</p>\n<pre><code class=\"lang-js\">// 拖拽某个圆点的过程中会不断调用此函数。\n// 此函数中会根据拖拽后的新位置，改变 data 中的值，并用新的 data 值，重绘折线图，从而使折线图同步于被拖拽的隐藏圆点。\nfunction onPointDragging(dataIndex) {\n    // 这里的 data 就是本文最初的代码块中声明的 data，在这里会被更新。\n    // 这里的 this 就是被拖拽的圆点。this.position 就是圆点当前的位置。\n    data[dataIndex] = myChart.convertFromPixel(&#39;grid&#39;, this.position);\n    // 用更新后的 data，重绘折线图。\n    myChart.setOption({\n        series: [{\n            id: &#39;a&#39;,\n            data: data\n        }]\n    });\n}\n</code></pre>\n<p>上面的代码中，使用了 <a href=\"api.html#echartsInstance.convertFromPixel\" target=\"_blank\">convertFromPixel</a> 这个 API。它是 <a href=\"api.html#echartsInstance.convertToPixel\" target=\"_blank\">convertToPixel</a> 的逆向过程。<code class=\"codespan\">myChart.convertFromPixel(&#39;grid&#39;, this.position)</code> 表示把当前像素坐标转换成 <a href=\"option.html#grid\" target=\"_blank\">grid</a> 组件中直角坐标系的 dataItem 值。</p>\n<p>最后，为了使 dom 尺寸改变时，图中的元素能自适应得变化，加上这些代码：</p>\n<pre><code class=\"lang-js\">window.addEventListener(&#39;resize&#39;, function () {\n    // 对每个拖拽圆点重新计算位置，并用 setOption 更新。\n    myChart.setOption({\n        graphic: echarts.util.map(data, function (item, dataIndex) {\n            return {\n                position: myChart.convertToPixel(&#39;grid&#39;, item)\n            };\n        })\n    });\n});\n\n</code></pre>\n<h2 id=\"-tooltip-\">（二）添加 tooltip 组件</h2>\n<p>到此，拖拽的基本功能就完成了。但是想要更进一步得实时看到拖拽过程中，被拖拽的点的 data 值的变化状况，我们可以使用 <a href=\"option.html#tooltip\" target=\"_blank\">tooltip</a> 组件来实时显示这个值。但是，tooltip 有其默认的『显示』『隐藏』触发规则，在我们拖拽的场景中并不适用，所以我们还要手动定制 tooltip 的『显示』『隐藏』行为。</p>\n<p>在上述代码中分别添加如下定义：</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n    ...,\n    tooltip: {\n        // 表示不使用默认的『显示』『隐藏』触发规则。\n        triggerOn: &#39;none&#39;,\n        formatter: function (params) {\n            return &#39;X: &#39; + params.data[0].toFixed(2) + &#39;&lt;br&gt;Y: &#39; + params.data[1].toFixed(2);\n        }\n    }\n});\n</code></pre>\n<pre><code class=\"lang-js\">myChart.setOption({\n    graphic: echarts.util.map(data, function (item, dataIndex) {\n        return {\n            type: &#39;circle&#39;,\n            ...,\n            // 在 mouseover 的时候显示，在 mouseout 的时候隐藏。\n            onmousemove: echarts.util.curry(showTooltip, dataIndex),\n            onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n        };\n    })\n});\n\nfunction showTooltip(dataIndex) {\n    myChart.dispatchAction({\n        type: &#39;showTip&#39;,\n        seriesIndex: 0,\n        dataIndex: dataIndex\n    });\n}\n\nfunction hideTooltip(dataIndex) {\n    myChart.dispatchAction({\n        type: &#39;hideTip&#39;\n    });\n}\n</code></pre>\n<p>这里使用了 <a href=\"api.html#echartsInstance.dispatchAction\" target=\"_blank\">dispatchAction</a> 来显示隐藏 tooltip。用到了 <a href=\"api.html#action.tooltip.showTip\" target=\"_blank\">showTip</a>、<a href=\"api.html#action.tooltip.hideTip\" target=\"_blank\">hideTip</a>。</p>\n<h2 id=\"-\">（三）全部代码</h2>\n<p>总结一下，全部的代码如下：</p>\n<pre><code>&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;utf-8&quot;&gt;\n    &lt;script src=&quot;dist/echarts.min.js&quot;&gt;&lt;/script&gt;\n&lt;/head&gt;\n&lt;body&gt;\n    &lt;div id=&quot;main&quot; style=&quot;width: 600px;height:400px;&quot;&gt;&lt;/div&gt;\n    &lt;script type=&quot;text/javascript&quot;&gt;\n\n    var symbolSize = 20;\n    var data = [[15, 0], [-50, 10], [-56.5, 20], [-46.5, 30], [-22.1, 40]];\n\n    var myChart = echarts.init(document.getElementById(&#39;main&#39;));\n\n    myChart.setOption({\n        tooltip: {\n            triggerOn: &#39;none&#39;,\n            formatter: function (params) {\n                return &#39;X: &#39; + params.data[0].toFixed(2) + &#39;&lt;br&gt;Y: &#39; + params.data[1].toFixed(2);\n            }\n        },\n        xAxis: {\n            min: -100,\n            max: 80,\n            type: &#39;value&#39;,\n            axisLine: {onZero: false}\n        },\n        yAxis: {\n            min: -30,\n            max: 60,\n            type: &#39;value&#39;,\n            axisLine: {onZero: false}\n        },\n        series: [\n            {\n                id: &#39;a&#39;,\n                type: &#39;line&#39;,\n                smooth: true,\n                symbolSize: symbolSize,\n                data: data\n            }\n        ],\n    });\n\n    myChart.setOption({\n        graphic: echarts.util.map(data, function (item, dataIndex) {\n            return {\n                type: &#39;circle&#39;,\n                position: myChart.convertToPixel(&#39;grid&#39;, item),\n                shape: {\n                    r: symbolSize / 2\n                },\n                invisible: true,\n                draggable: true,\n                ondrag: echarts.util.curry(onPointDragging, dataIndex),\n                onmousemove: echarts.util.curry(showTooltip, dataIndex),\n                onmouseout: echarts.util.curry(hideTooltip, dataIndex),\n                z: 100\n            };\n        })\n    });\n\n    window.addEventListener(&#39;resize&#39;, function () {\n        myChart.setOption({\n            graphic: echarts.util.map(data, function (item, dataIndex) {\n                return {\n                    position: myChart.convertToPixel(&#39;grid&#39;, item)\n                };\n            })\n        });\n    });\n\n    function showTooltip(dataIndex) {\n        myChart.dispatchAction({\n            type: &#39;showTip&#39;,\n            seriesIndex: 0,\n            dataIndex: dataIndex\n        });\n    }\n\n    function hideTooltip(dataIndex) {\n        myChart.dispatchAction({\n            type: &#39;hideTip&#39;\n        });\n    }\n\n    function onPointDragging(dataIndex, dx, dy) {\n        data[dataIndex] = myChart.convertFromPixel(&#39;grid&#39;, this.position);\n        myChart.setOption({\n            series: [{\n                id: &#39;a&#39;,\n                data: data\n            }]\n        });\n    }\n\n&lt;/script&gt;\n&lt;/body&gt;\n&lt;/html&gt;\n</code></pre><p><br></p>\n<p>有了这些基础，就可以定制更多的功能了。可以加 <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a> 组件，可以制作一个直角坐标系上的绘图板等等。可以发挥想象力。</p>\n"
  },
  "小例子：实现日历图": {
    "desc": "<p>在 Apache ECharts<sup>TM</sup> 中，我们新增了日历坐标系，如何快速写出一个日历图呢？</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-simple&edit=1&reset=1\" width=\"800\" height=\"300\" ></iframe>\n\n\n<p>通过以下三个步骤即可实现上述效果：</p>\n<h2 id=\"-js-\">第一步：引入js文件</h2>\n<p>下载的最新完整版本 echarts.min.js 即可，无需再单独引入其他文件哦</p>\n<pre><code class=\"lang-html\">&lt;script src=&quot;echarts.min.js&quot;&gt;&lt;/script&gt;\n&lt;script&gt;\n    // ...\n&lt;/script&gt;\n</code></pre>\n<h2 id=\"-dom-\">第二步：指定DOM元素作为图表容器</h2>\n<p>和ECharts中的其他图表一样，创建一个DOM来作为绘制图表的容器</p>\n<pre><code class=\"lang-html\">&lt;div id=&quot;main&quot; style=&quot;width=100%; height = 400px&quot;&gt;&lt;/div&gt;\n</code></pre>\n<p>使用ECharts进行初始化</p>\n<pre><code class=\"lang-js\">var myChart = echarts.init(document.getElementById(&#39;main&#39;));\n</code></pre>\n<h2 id=\"-\">第三步：配置参数</h2>\n<p>以常见的日历图为例: calendar坐标 + heatmap图</p>\n<pre><code class=\"lang-js\">var option = {\n    visualMap: {\n        show: false\n        min: 0,\n        max: 1000\n    },\n    calendar: {\n        range: &#39;2017&#39;\n    },\n    series: {\n        type: &#39;heatmap&#39;,\n        coordinateSystem: &#39;calendar&#39;,\n        data: [[&#39;2017-01-02&#39;, 900], [&#39;2017-01-02&#39;, 877], [&#39;2017-01-02&#39;, 699], ...]\n    }\n}\nmyChart.setOption(option);\n</code></pre>\n<p>在heatmap图的基础上，加上<code class=\"codespan\">coordinateSystem: &#39;calendar&#39;,</code>和<code class=\"codespan\">calendar: { range: &#39;2017&#39; }</code>heatmap图就秒变为日历图了。</p>\n<blockquote>\n<p>若发现图表没有正确显示，你可以检查以下几种可能：</p>\n<ul>\n<li>JS文件是否正确加载；</li>\n<li><code class=\"codespan\">echarts</code> 变量是否存在；</li>\n<li>控制台是否报错;</li>\n<li>DOM 元素在 <code class=\"codespan\">echarts.init</code> 的时候是否有高度和宽度。</li>\n<li>若为 <code class=\"codespan\">type: heatmap</code>，检查是否配置了 <code class=\"codespan\">visualMap</code>。</li>\n</ul>\n</blockquote>\n<p><strong>附完整示例代码</strong></p>\n<pre><code class=\"lang-html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;utf-8&quot;&gt;\n    &lt;title&gt;ECharts&lt;/title&gt;\n    &lt;script src=&quot;echarts.min.js&quot;&gt;&lt;/script&gt;\n&lt;/head&gt;\n&lt;body&gt;\n    &lt;div id=&quot;main&quot; style=&quot;width:100%;height:400px;&quot;&gt;&lt;/div&gt;\n    &lt;script type=&quot;text/javascript&quot;&gt;\n        var myChart = echarts.init(document.getElementById(&#39;main&#39;));\n\n        // 模拟数据\n        function getVirtulData(year) {\n            year = year || &#39;2017&#39;;\n            var date = +echarts.number.parseDate(year + &#39;-01-01&#39;);\n            var end = +echarts.number.parseDate(year + &#39;-12-31&#39;);\n            var dayTime = 3600 * 24 * 1000;\n            var data = [];\n            for (var time = date; time &lt;= end; time += dayTime) {\n                data.push([\n                    echarts.format.formatTime(&#39;yyyy-MM-dd&#39;, time),\n                    Math.floor(Math.random() * 10000)\n                ]);\n            }\n            return data;\n        }\n        var option = {\n            visualMap: {\n                show: false,\n                min: 0,\n                max: 10000\n            },\n            calendar: {\n                range: &#39;2017&#39;\n            },\n            series: {\n                type: &#39;heatmap&#39;,\n                coordinateSystem: &#39;calendar&#39;,\n                data: getVirtulData(2017)\n            }\n        };\n        myChart.setOption(option);\n    &lt;/script&gt;\n&lt;/body&gt;\n&lt;/html&gt;\n\n</code></pre>\n<p>以上就是绘制最简日历图的步骤了，如若还想进一步私人定制，还可以通过自定义配置参数来实现</p>\n<h2 id=\"-\">自定义配置参数</h2>\n<p>使用日历坐标绘制日历图时，支持自定义各项属性:</p>\n<ul>\n<li><p><a href=\"option.html#calendar.range\" target=\"_blank\">range</a>: <code class=\"codespan\">设置时间的范围，可支持某年、某月、某天，还可支持跨年</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.cellSize\" target=\"_blank\">cellSize</a>: <code class=\"codespan\">设置日历格的大小，可支持设置不同高宽，还可支持自适应auto</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.width\" target=\"_blank\">width</a>、<a href=\"http://xxx\" target=\"_blank\">height</a>: <code class=\"codespan\">也可以直接设置改日历图的整体高宽，让其基于已有的高宽全部自适应</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.orient\" target=\"_blank\">orient</a>: <code class=\"codespan\">设置坐标的方向，既可以横着也可以竖着</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.splitLine\" target=\"_blank\">splitLine</a>: <code class=\"codespan\">设置分隔线样式，也可以直接不显示</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.itemStyle\" target=\"_blank\">itemStyle</a>: <code class=\"codespan\">设置日历格的样式，背景色、方框线颜色大小类型、透明度均可自定义，甚至还能加阴影</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.dayLabel\" target=\"_blank\">dayLabel</a>: <code class=\"codespan\">设置坐标中 星期样式，可以设置星期从第几天开始，快捷设置中英文、甚至是自定义中英文混搭、或局部不显示、通过formatter 可以想怎么显示就怎么显示;</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.monthLabel\" target=\"_blank\">monthLabel</a>: <code class=\"codespan\">设置坐标中 月样式，和星期一样，可快捷设置中英文和自定义混搭</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.yearLabel\" target=\"_blank\">yearLabel</a>: <code class=\"codespan\">设置坐标中 年样式，默认显示一年，通过formatter 文字可以想显示什么就能通过string function任性自定义，上下左右方位随便选;</code></p>\n</li>\n</ul>\n<p>完整的配置项参数参见：<a href=\"option.html#calendar\" target=\"_blank\">calendar API</a></p>\n<h2 id=\"-\">日历坐标系的其他形式</h2>\n<p>日历坐标系是一种新的 <code class=\"codespan\">ECharts</code> 坐标系，提供了在日历上绘制图表的能力; 所以除了制作常用的日历图外，我们可以在热力图、散点图、关系图中使用日历坐标系。</p>\n<p>在日历坐标系中使用热力图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-heatmap&edit=1&reset=1\" width=\"800\" height=\"300\" ></iframe>\n\n\n<p>在日历坐标系中使用散点图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-effectscatter&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<p>还可以混合放置不同的图表，例如下例子，同时放置了热力图和关系图：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-graph&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<p><strong>其他更丰富的效果</strong></p>\n<p>灵活利用 <code class=\"codespan\">ECharts</code> 图表和坐标系的组合，以及 API，还可以实现更丰富的效果。</p>\n<p>例如，制作农历：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-lunar&edit=1&reset=1\" width=\"600\" height=\"500\" ></iframe>\n\n\n<p>例如，使用 <code class=\"codespan\">chart.convertToPixel</code> 接口，在日历坐标系绘制饼图。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=calendar-pie&edit=1&reset=1\" width=\"800\" height=\"640\" ></iframe>\n\n\n\n\n\n\n\n"
  },
  "旭日图": {
    "desc": "<p><a href=\"https://en.wikipedia.org/wiki/Pie_chart#Ring_chart_/_Sunburst_chart_/_Multilevel_pie_chart\" target=\"_blank\">旭日图（Sunburst）</a>由多层的环形图组成，在数据结构上，内圈是外圈的父节点。因此，它既能像<a href=\"option.html#series-pie\" target=\"_blank\">饼图</a>一样表现局部和整体的占比，又能像<a href=\"option.html#series-treemap\" target=\"_blank\">矩形树图</a>一样表现层级关系。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-monochrome&edit=1&reset=1\" width=\"700\" height=\"500\" ></iframe>\n\n\n<h2 id=\"-\">引入相关文件</h2>\n<p>旭日图是 Apache ECharts<sup>TM</sup> 4.0 新增的图表类型，从 <a href=\"https://www.jsdelivr.com/package/npm/echarts\" target=\"_blank\">CDN</a> 引入完整版的 <a href=\"https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js\" target=\"_blank\">echarts.min.js</a></p>\n<h2 id=\"-\">最简单的旭日图</h2>\n<p>创建旭日图需要在 <code class=\"codespan\">series</code> 配置项中声明类型为 <code class=\"codespan\">&#39;sunburst&#39;</code> 的系列，并且以树形结构声明其 <code class=\"codespan\">data</code>：</p>\n<pre><code class=\"lang-js\">var option = {\n    series: {\n        type: &#39;sunburst&#39;,\n        data: [{\n            name: &#39;A&#39;,\n            value: 10,\n            children: [{\n                value: 3,\n                name: &#39;Aa&#39;\n            }, {\n                value: 5,\n                name: &#39;Ab&#39;\n            }]\n        }, {\n            name: &#39;B&#39;,\n            children: [{\n                name: &#39;Ba&#39;,\n                value: 4\n            }, {\n                name: &#39;Bb&#39;,\n                value: 2\n            }]\n        }, {\n            name: &#39;C&#39;,\n            value: 3\n        }]\n    }\n};\n</code></pre>\n<p>得到以下结果：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-simple&edit=1&reset=1\" width=\"700\" height=\"400\" ></iframe>\n\n\n<h2 id=\"-\">颜色等样式调整</h2>\n<p>默认情况下会使用全局调色盘 <a href=\"option.html#color\" target=\"_blank\">color</a> 分配最内层的颜色，其余层则与其父元素同色。在旭日图中，扇形块的颜色有以下三种设置方式：</p>\n<ul>\n<li>在 <a href=\"option.html#series-sunburst.data.itemStyle\" target=\"_blank\">series.data.itemStyle</a> 中设置每个扇形块的样式；</li>\n<li>在 <a href=\"option.html#series-sunburst.levels.itemStyle\" target=\"_blank\">series.levels.itemStyle</a> 中设置每一层的样式；</li>\n<li>在 <a href=\"option.html#series-sunburst.itemStyle\" target=\"_blank\">series.itemStyle</a> 中设置整个旭日图的样式。</li>\n</ul>\n<p>上述三者的优先级是从高到低的，也就是说，配置了 <code class=\"codespan\">series.data.itemStyle</code> 的扇形块将会覆盖 <code class=\"codespan\">series.levels.itemStyle</code> 和 <code class=\"codespan\">series.itemStyle</code> 的设置。</p>\n<p>下面，我们将整体的颜色设为灰色 <code class=\"codespan\">&#39;#aaa&#39;</code>，将最内层的颜色设为蓝色 <code class=\"codespan\">&#39;blue&#39;</code>，将 <code class=\"codespan\">Aa</code>、<code class=\"codespan\">B</code> 这两块设为红色 <code class=\"codespan\">&#39;red&#39;</code>。</p>\n<pre><code class=\"lang-js\">var option = {\n    series: {\n        type: &#39;sunburst&#39;,\n        data: [{\n            name: &#39;A&#39;,\n            value: 10,\n            children: [{\n                value: 3,\n                name: &#39;Aa&#39;,\n                itemStyle: {\n                    color: &#39;red&#39;\n                }\n            }, {\n                value: 5,\n                name: &#39;Ab&#39;\n            }]\n        }, {\n            name: &#39;B&#39;,\n            children: [{\n                name: &#39;Ba&#39;,\n                value: 4\n            }, {\n                name: &#39;Bb&#39;,\n                value: 2\n            }],\n            itemStyle: {\n                color: &#39;red&#39;\n            }\n        }, {\n            name: &#39;C&#39;,\n            value: 3\n        }],\n        itemStyle: {\n            color: &#39;#aaa&#39;\n        },\n        levels: [{\n            // 留给数据下钻的节点属性\n        }, {\n            itemStyle: {\n                color: &#39;blue&#39;\n            }\n        }]\n    }\n};\n</code></pre>\n<p>效果为：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-color&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n\n<h2 id=\"-\">按层配置样式</h2>\n<p>旭日图是一种有层次的结构，为了方便同一层样式的配置，我们提供了 <a href=\"option.html#series-sunburst.levels\" target=\"_blank\">levels</a> 配置项。它是一个数组，其中的第 0 项表示数据下钻后返回上级的图形，其后的每一项分别表示从圆心向外层的层级。</p>\n<p>例如，假设我们没有数据下钻功能，并且希望将最内层的扇形块的颜色设为红色，文字设为蓝色，可以这样设置：</p>\n<pre><code class=\"lang-js\">series: {\n    // ...\n    levels: [\n        {\n            // 留给数据下钻点的空白配置\n        },\n        {\n            // 最靠内测的第一层\n            itemStyle: {\n                color: &#39;red&#39;\n            },\n            label: {\n                color: &#39;blue&#39;\n            }\n        },\n        {\n            // 第二层 ...\n        }\n    ]\n}\n</code></pre>\n<p>在实际使用的过程中，你会发现按层配置样式是一个很常用的功能，能够很大程度上提高配置的效率。</p>\n<h2 id=\"-\">数据下钻</h2>\n<p>旭日图默认支持数据下钻，也就是说，当点击了扇形块之后，将以该扇形块的数据作为根节点，便于进一步了解该数据的细节。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-simple&edit=1&reset=1\" width=\"700\" height=\"500\" ></iframe>\n\n\n<p>当数据下钻后，中间会出现一个用于返回上一层的图形，该图形的样式可以通过 <a href=\"option.html#series-sunburst.levels\" target=\"_blank\">levels[0]</a> 配置。</p>\n<p>如果不需要数据下钻功能，可以通过将 <a href=\"option.html#series-sunburst.nodeClick\" target=\"_blank\">nodeClick</a> 设置为 <code class=\"codespan\">false</code> 关闭；或者将其设为 <code class=\"codespan\">&#39;link&#39;</code>，并将 <a href=\"option.html#series-sunburst.data.link\" target=\"_blank\">data.link</a> 设为点击扇形块对应打开的链接。</p>\n<h2 id=\"-\">高亮相关扇形块</h2>\n<p>旭日图支持鼠标移动到某扇形块时，高亮相关数据块的操作，可以通过设置 <a href=\"option.html#series-sunburst.highlightPolicy\" target=\"_blank\">highlightPolicy</a>，包括以下几种高亮方式：</p>\n<ul>\n<li><code class=\"codespan\">&#39;descendant&#39;</code>（默认值）：高亮鼠标移动所在扇形块与其后代元素；</li>\n<li><code class=\"codespan\">&#39;ancestor&#39;</code>：高亮鼠标所在扇形块与其祖先元素；</li>\n<li><code class=\"codespan\">&#39;self&#39;</code>：仅高亮鼠标所在扇形块；</li>\n<li><code class=\"codespan\">&#39;none&#39;</code>：不会淡化（downplay）其他元素。</li>\n</ul>\n<p>上面提到的“高亮”，对于鼠标所在的扇形块，会使用 <code class=\"codespan\">emphasis</code> 样式；对于其他相关扇形块，则会使用 <code class=\"codespan\">highlight</code> 样式。通过这种方式，可以很方便地实现突出显示相关数据的需求。</p>\n<p>具体来说，对于配置项：</p>\n<pre><code class=\"lang-js\">itemStyle: {\n    color: &#39;yellow&#39;,\n    borderWidth: 2,\n    emphasis: {\n        color: &#39;red&#39;\n    },\n    highlight: {\n        color: &#39;orange&#39;\n    },\n    downplay: {\n        color: &#39;#ccc&#39;\n    }\n}\n</code></pre>\n<p><code class=\"codespan\">highlightPolicy</code> 为 <code class=\"codespan\">&#39;descendant&#39;</code> 或 <code class=\"codespan\">&#39;ancestor&#39;</code> 的效果分别为：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-highlight-descendant&edit=1&reset=1\" width=\"700\" height=\"350\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/sunburst-highlight-ancestor&edit=1&reset=1\" width=\"700\" height=\"350\" ></iframe>\n\n\n<h2 id=\"-\">总结</h2>\n<p>上面的教程主要讲述的是如何入门使用旭日图，感兴趣的用户可以在 <a href=\"option.html#series-sunburst\" target=\"_blank\">配置项手册</a> 查看更完整的文档。在灵活应用这些配置项之后，就能做出丰富多彩的旭日图了！</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-book&edit=1&reset=1\" width=\"700\" height=\"600\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=sunburst-drink&edit=1&reset=1\" width=\"700\" height=\"600\" ></iframe>\n\n\n\n\n\n\n\n\n\n"
  },
  "自定义系列": {
    "desc": "<p><a href=\"option.html#series-custom\" target=\"_blank\">自定义系列（custom series）</a>，是一种系列的类型。它把绘制图形元素这一步留给开发者去做，从而开发者能在坐标系中自由绘制出自己需要的图表。</p>\n<p>Apache ECharts<sup>TM</sup> 为什么会要支持 <code class=\"codespan\">自定义系列</code> 呢？</p>\n<p>ECharts 内置支持的图表类型是最常见的图表类型，但是图表类型是难于穷举的，有很多小众的需求 echarts 并不能内置的支持。那么就需要提供一种方式来让开发者自己扩展。另一方面，所提供的扩展方式要尽可能得简单，例如图形元素创建和释放、过渡动画、tooltip、<a href=\"option.html#dataZoom\" target=\"_blank\">数据区域缩放（dataZoom）</a>、<a href=\"option.html#visualMap\" target=\"_blank\">视觉映射（visualMap）</a>等功能，尽量在 ECharts 中内置得处理，使开发者不必纠结于这些细节。综上考虑形成了 <a href=\"option.html#series-custom\" target=\"_blank\">自定义系列（custom series）</a>。</p>\n<p><strong>例如，下面的例子使用 custom series 扩展出了 x-range 图：</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=custom-profile&reset=1&edit=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n<p><strong>更多的例子参见：<a href=\"https://echarts.apache.org/examples/zh/index.html#chart-type-custom\" target=\"_blank\">custom examples</a></strong></p>\n<p>下面来介绍开发者怎么使用 <a href=\"option.html#series-custom\" target=\"_blank\">自定义系列（custom series）</a>。</p>\n<h2 id=\"-renderitem-\">（一）renderItem 方法</h2>\n<p>开发者自定义的图形元素渲染逻辑，是通过书写 <code class=\"codespan\">renderItem</code> 函数实现的，例如：</p>\n<pre><code class=\"lang-js\">var option = {\n    ...,\n    series: [{\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            // ...\n        },\n        data: data\n    }]\n}\n</code></pre>\n<p>在渲染阶段，对于 <a href=\"option.html#series-custom.data\" target=\"_blank\">series.data</a> 中的每个数据项（为方便描述，这里称为 <code class=\"codespan\">dataItem</code>)，会调用此 <a href=\"option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数。这个 <code class=\"codespan\">renderItem</code> 函数的职责，就是返回一个（或者一组）<code class=\"codespan\">图形元素定义</code>，<code class=\"codespan\">图形元素定义</code> 中包括图形元素的类型、位置、尺寸、样式等。echarts 会根据这些 <code class=\"codespan\">图形元素定义</code> 来渲染出图形元素。如下的示意：</p>\n<pre><code class=\"lang-js\">var option = {\n    ...,\n    series: [{\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            // 对于 data 中的每个 dataItem，都会调用这个 renderItem 函数。\n            // （但是注意，并不一定是按照 data 的顺序调用）\n\n            // 这里进行一些处理，例如，坐标转换。\n            // 这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。\n            var categoryIndex = api.value(0);\n            // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。\n            var startPoint = api.coord([api.value(1), categoryIndex]);\n            var endPoint = api.coord([api.value(2), categoryIndex]);\n            // 这里使用 api.size(...) 获得 Y 轴上数值范围为 1 的一段所对应的像素长度。\n            var height = api.size([0, 1])[1] * 0.6;\n\n            // shape 属性描述了这个矩形的像素位置和大小。\n            // 其中特殊得用到了 echarts.graphic.clipRectByRect，意思是，\n            // 如果矩形超出了当前坐标系的包围盒，则剪裁这个矩形。\n            // 如果矩形完全被剪掉，会返回 undefined.\n            var rectShape = echarts.graphic.clipRectByRect({\n                // 矩形的位置和大小。\n                x: startPoint[0],\n                y: startPoint[1] - height / 2,\n                width: endPoint[0] - startPoint[0],\n                height: height\n            }, {\n                // 当前坐标系的包围盒。\n                x: params.coordSys.x,\n                y: params.coordSys.y,\n                width: params.coordSys.width,\n                height: params.coordSys.height\n            });\n\n            // 这里返回为这个 dataItem 构建的图形元素定义。\n            return rectShape &amp;&amp; {\n                // 表示这个图形元素是矩形。还可以是 &#39;circle&#39;, &#39;sector&#39;, &#39;polygon&#39; 等等。\n                type: &#39;rect&#39;,\n                shape: rectShape,\n                // 用 api.style(...) 得到默认的样式设置。这个样式设置包含了\n                // option 中 itemStyle 的配置和视觉映射得到的颜色。\n                style: api.style()\n            };\n        },\n        data: [\n            [12, 44, 55, 60], // 这是第一个 dataItem\n            [53, 31, 21, 56], // 这是第二个 dataItem\n            [71, 33, 10, 20], // 这是第三个 dataItem\n            ...\n        ]\n    }]\n}\n</code></pre>\n<p><a href=\"option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数提供了两个参数：</p>\n<ul>\n<li><a href=\"option.html#series-custom.renderItem.arguments.params\" target=\"_blank\">params</a>：包含了当前数据信息（如 <code class=\"codespan\">seriesIndex</code>、<code class=\"codespan\">dataIndex</code> 等等）和坐标系的信息（如坐标系包围盒的位置和尺寸）。</li>\n<li><a href=\"option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">api</a>：是一些开发者可调用的方法集合（如 <code class=\"codespan\">api.value()</code>、<code class=\"codespan\">api.coord()</code>）。</li>\n</ul>\n<p><a href=\"option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数须返回根据此 <code class=\"codespan\">dataItem</code> 绘制出的图形元素的定义信息，参见 <a href=\"option.html#series-custom.renderItem.return\" target=\"_blank\">renderItem.return</a>。</p>\n<p>一般来说，<a href=\"option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数的主要逻辑，是将 <code class=\"codespan\">dataItem</code> 里的值映射到坐标系上的图形元素。这一般需要用到 <a href=\"option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">renderItem.arguments.api</a> 中的两个函数：</p>\n<ul>\n<li><a href=\"option.html#series-custom.renderItem.arguments.api.value\" target=\"_blank\">api.value(...)</a>，意思是取出 <code class=\"codespan\">dataItem</code> 中的数值。例如 <code class=\"codespan\">api.value(0)</code> 表示取出当前 <code class=\"codespan\">dataItem</code> 中第一个维度的数值。</li>\n<li><a href=\"option.html#series-custom.renderItem.arguments.api.coord\" target=\"_blank\">api.coord(...)</a>，意思是进行坐标转换计算。例如 <code class=\"codespan\">var point = api.coord([api.value(0), api.value(1)])</code> 表示 <code class=\"codespan\">dataItem</code> 中的数值转换成坐标系上的点。</li>\n</ul>\n<p>有时候还需要用到 <a href=\"option.html#series-custom.renderItem.arguments.api.size\" target=\"_blank\">api.size(...)</a> 函数，表示得到坐标系上一段数值范围对应的长度。</p>\n<p>返回值中样式的设置可以使用 <a href=\"option.html#series-custom.renderItem.arguments.api.style\" target=\"_blank\">api.style(...)</a> 函数，他能得到 <a href=\"option.html#series-custom.itemStyle\" target=\"_blank\">series.itemStyle</a> 中定义的样式信息，以及视觉映射的样式信息。也可以用这种方式覆盖这些样式信息：<code class=\"codespan\">api.style({fill: &#39;green&#39;, stroke: &#39;yellow&#39;})</code>。</p>\n<p>书写完 <code class=\"codespan\">renderItem</code> 方法后，自定义系列的 90% 工作就做完了。剩下的是一些精化工作。</p>\n<h2 id=\"-\">（二）使坐标轴的范围自适应数据范围</h2>\n<p>在 <a href=\"option.html#grid\" target=\"_blank\">直角坐标系（grid）</a>、<a href=\"option.html#polar\" target=\"_blank\">极坐标系（polar）</a> 中都有坐标轴。坐标轴的刻度范围需要自适应当前显示出的数据的范围，否则绘制出的图形会超出去。所以，例如，在 <a href=\"option.html#grid\" target=\"_blank\">直角坐标系（grid）</a> 中，使用自定义系列的开发者，需要设定，<code class=\"codespan\">data</code> 中的哪些维度会对应到 <code class=\"codespan\">x</code> 轴上，哪些维度会对应到 <code class=\"codespan\">y</code> 轴上。这件事通过 <a href=\"option.html#series-custom.encode\" target=\"_blank\">encode</a> 来设定。例如：</p>\n<pre><code class=\"lang-js\">option = {\n    series: [{\n        type: &#39;custom&#39;,\n        renderItem: function () {\n            ...\n        },\n        encode: {\n            // data 中『维度1』和『维度2』对应到 X 轴\n            x: [1, 2],\n            // data 中『维度0』对应到 Y 轴\n            y: 0\n        },\n        data: [\n            // 维度0  维度1  维度2  维度3\n            [   12,   44,   55,   60   ], // 这是第一个 dataItem\n            [   53,   31,   21,   56   ], // 这是第二个 dataItem\n            [   71,   33,   10,   20   ], // 这是第三个 dataItem\n            ...\n        ]\n    }]\n};\n</code></pre>\n<h2 id=\"-tooltip\">（三）设定 tooltip</h2>\n<p>当然，使用 <a href=\"option.html#tooltip.formatter\" target=\"_blank\">tooltip.formatter</a> 可以任意定制 tooltip 中的内容。但是还有更简单的方法，通过<a href=\"option.html#series-custom.encode\" target=\"_blank\">encode</a> 和 <a href=\"option.html#series-custom.dimensions\" target=\"_blank\">dimensions</a> 来设定：</p>\n<pre><code class=\"lang-js\">option = {\n    series: [{\n        type: &#39;custom&#39;,\n        renderItem: function () {\n            ...\n        },\n        encode: {\n            x: [1, 2],\n            y: 0,\n            // 表示『维度2』和『维度3』要显示到 tooltip 中。\n            tooltip: [2, 3]\n        },\n        // 表示给『维度2』和『维度3』分别取名为『年龄』和『满意度』，显示到 tooltip 中。\n        dimensions: [null, null, &#39;年龄&#39;, &#39;满意度&#39;],\n        data: [\n            // 维度0  维度1  维度2  维度3\n            [   12,   44,   55,   60   ], // 这是第一个 dataItem\n            [   53,   31,   21,   56   ], // 这是第二个 dataItem\n            [   71,   33,   10,   20   ], // 这是第三个 dataItem\n            ...\n        ]\n    }]\n};\n</code></pre>\n<p><br>\n<br>\n<br></p>\n<hr>\n<p>上面，一个简单的 custome series 例子完成了。</p>\n<p>下面介绍几个其他细节要点。</p>\n<h2 id=\"-\">（四）超出坐标系范围的截取</h2>\n<p>与 <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a> 结合使用的时候，常常使用会设置 <a href=\"option.html#dataZoom.filterMode\" target=\"_blank\">dataZoom.filterMode</a> 为 &#39;weakFilter&#39;。这个设置的意思是：当 <code class=\"codespan\">dataItem</code> 部分超出坐标系边界的时候，<code class=\"codespan\">dataItem</code> 不会整体被过滤掉。例如：</p>\n<pre><code class=\"lang-js\">option = {\n    dataZoom: {\n        xAxisIndex: 0,\n        filterMode: &#39;weakFilter&#39;\n    },\n    series: [{\n        type: &#39;custom&#39;,\n        renderItem: function () {\n            ...\n        },\n        encode: {\n            // data 中『维度1』和『维度2』对应到 X 轴\n            x: [1, 2],\n            y: 0\n        },\n        data: [\n            // 维度0  维度1  维度2  维度3\n            [   12,   44,   55,   60   ], // 这是第一个 dataItem\n            [   53,   31,   21,   56   ], // 这是第二个 dataItem\n            [   71,   33,   10,   20   ], // 这是第三个 dataItem\n            ...\n        ]\n    }]\n};\n</code></pre>\n<p>在这个例子中，『维度1』和『维度2』对应到 X 轴，<code class=\"codespan\">dataZoom</code> 组件控制 X 轴的缩放。假如在缩放的过程中，某个 dataItem 的『维度1』超出了 X 轴的范围，『维度2』还在 X 轴的范围中，那么只要设置 <code class=\"codespan\">dataZoom.filterMode = &#39;weakFilter&#39;</code>，这个 dataItem 就不会被过滤掉，从而还能够使用 <code class=\"codespan\">renderItem</code> 绘制图形（可以使用上面提到过的 <code class=\"codespan\">echarts.graphic.clipRectByRect</code> 把图形绘制成被坐标系剪裁过的样子）。参见上面提到过的例子：<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-profile\" target=\"_blank\">Profile</a></p>\n<h2 id=\"-dataindex\">（五）关于 dataIndex</h2>\n<p>开发者如果使用到的话应注意，<a href=\"option.html#series-custom.renderItem.arguments.params\" target=\"_blank\">renderItem.arguments.params</a> 中的 <code class=\"codespan\">dataIndex</code> 和 <code class=\"codespan\">dataIndexInside</code> 是有区别的：</p>\n<ul>\n<li><code class=\"codespan\">dataIndex</code> 指的 <code class=\"codespan\">dataItem</code> 在原始数据中的 index。</li>\n<li><code class=\"codespan\">dataIndexInside</code> 指的是 <code class=\"codespan\">dataItem</code> 在当前数据窗口（参见 <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a>）中的 index。</li>\n</ul>\n<p><a href=\"option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">renderItem.arguments.api</a> 中使用的参数都是 <code class=\"codespan\">dataIndexInside</code> 而非 <code class=\"codespan\">dataIndex</code>，因为从 <code class=\"codespan\">dataIndex</code> 转换成 <code class=\"codespan\">dataIndexInside</code> 需要时间开销。</p>\n<h2 id=\"-\">（六）事件监听</h2>\n<pre><code class=\"lang-js\">chart.setOption({\n    // ...\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function () {\n            // ...\n            return {\n                type: &#39;group&#39;,\n                children: [{\n                    type: &#39;circle&#39;\n                    // ...\n                }, {\n                    type: &#39;circle&#39;,\n                    name: &#39;aaa&#39;,\n                    // 用户指定的信息，可以在 event handler 访问到。\n                    info: 12345,\n                    // ...\n                }]\n            };\n        }\n    }\n});\nchart.on(&#39;click&#39;, {element: &#39;aaa&#39;}, function (params) {\n    // 当 name 为 &#39;aaa&#39; 的图形元素被点击时，此回调被触发。\n    console.log(params.info);\n});\n</code></pre>\n<h2 id=\"-\">（七）自定义矢量图形</h2>\n<p>自定义系列能支持使用 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> 定义矢量路径。从而可以使用矢量图工具中做出的图形。参见：<a href=\"option.html#series-custom.renderItem.return_path\" target=\"_blank\">path</a>，以及例子：<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-calendar-icon\" target=\"_blank\">icons</a> 和 <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=custom-gantt-flight\" target=\"_blank\">shapes</a>。</p>\n<p><br></p>\n<p><strong>更多的自定义系列的例子参见：<a href=\"https://echarts.apache.org/examples/zh/index.html#chart-type-custom\" target=\"_blank\">custom examples</a></strong></p>\n"
  },
  "富文本标签": {
    "desc": "<p>在许多地方（如图、轴的标签等）都可以使用富文本标签。例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=pie-rich-text&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=treemap-obama&edit=1&reset=1\" width=\"800\" height=\"550\" ></iframe>\n\n\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-rich-text&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<p><br></p>\n<p>其他一些例子：\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=map-labels&amp;edit=1&amp;reset=1\" target=\"_blank\">Map Labels</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=pie-nest&amp;edit=1&amp;reset=1\" target=\"_blank\">Pie Labels</a>,\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=gauge-car&amp;edit=1&amp;reset=1\" target=\"_blank\">Gauge</a>.</p>\n<p><br></p>\n<p>原先 Apache ECharts<sup>TM</sup> 中的文本标签，只能对整块统一进行样式设置，并且仅仅支持颜色和字体的设置，从而导致不易于制作表达能力更强的文字描述信息。</p>\n<p>echarts v3.7 以后，支持了富文本标签，能够：</p>\n<ul>\n<li>定制文本块整体的样式（如背景、边框、阴影等）、位置、旋转等。</li>\n<li>对文本块中个别片段定义样式（如颜色、字体、高宽、背景、阴影等）、对齐方式等。</li>\n<li>在文本中使用图片做小图标或者背景。</li>\n<li>特定组合以上的规则，可以做出简单表格、分割线等效果。</li>\n</ul>\n<p>开始下面的介绍之前，先说明一下下面会使用的两个名词的含义：</p>\n<ul>\n<li>文本块（Text Block）：文本标签块整体。</li>\n<li>文本片段（Text fragment）：文本标签块中的部分文本。</li>\n</ul>\n<p>如下图示例：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-block-fragment&edit=1&reset=1\" width=\"340\" height=\"240\" ></iframe>\n\n\n\n<h2 id=\"-\">文本样式相关的配置项</h2>\n<p>echarts 提供了丰富的文本标签配置项，包括：</p>\n<ul>\n<li>字体基本样式设置：<code class=\"codespan\">fontStyle</code>、<code class=\"codespan\">fontWeight</code>、<code class=\"codespan\">fontSize</code>、<code class=\"codespan\">fontFamily</code>。</li>\n<li>文字颜色：<code class=\"codespan\">color</code>。</li>\n<li>文字描边：<code class=\"codespan\">textBorderColor</code>、<code class=\"codespan\">textBorderWidth</code>。</li>\n<li>文字阴影：<code class=\"codespan\">textShadowColor</code>、<code class=\"codespan\">textShadowBlur</code>、<code class=\"codespan\">textShadowOffsetX</code>、<code class=\"codespan\">textShadowOffsetY</code>。</li>\n<li>文本块或文本片段大小：<code class=\"codespan\">lineHeight</code>、<code class=\"codespan\">width</code>、<code class=\"codespan\">height</code>、<code class=\"codespan\">padding</code>。</li>\n<li>文本块或文本片段的对齐：<code class=\"codespan\">align</code>、<code class=\"codespan\">verticalAlign</code>。</li>\n<li>文本块或文本片段的边框、背景（颜色或图片）：<code class=\"codespan\">backgroundColor</code>、<code class=\"codespan\">borderColor</code>、<code class=\"codespan\">borderWidth</code>、<code class=\"codespan\">borderRadius</code>。</li>\n<li>文本块或文本片段的阴影：<code class=\"codespan\">shadowColor</code>、<code class=\"codespan\">shadowBlur</code>、<code class=\"codespan\">shadowOffsetX</code>、<code class=\"codespan\">shadowOffsetY</code>。</li>\n<li>文本块的位置和旋转：<code class=\"codespan\">position</code>、<code class=\"codespan\">distance</code>、<code class=\"codespan\">rotate</code>。</li>\n</ul>\n<p>可以在各处的 <code class=\"codespan\">rich</code> 属性中定义文本片段样式。例如 <a href=\"option.html#series-bar.label.rich\" target=\"_blank\">series-bar.label.rich</a></p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n    // 在文本中，可以对部分文本采用 rich 中定义样式。\n    // 这里需要在文本中使用标记符号：\n    // `{styleName|text content text content}` 标记样式名。\n    // 注意，换行仍是使用 &#39;\\n&#39;。\n    formatter: [\n        &#39;{a|这段文本采用样式a}&#39;,\n        &#39;{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}&#39;\n    ].join(&#39;\\n&#39;),\n\n    // 这里是文本块的样式设置：\n    color: &#39;#333&#39;,\n    fontSize: 5,\n    fontFamily: &#39;Arial&#39;,\n    borderWidth: 3,\n    backgroundColor: &#39;#984455&#39;,\n    padding: [3, 10, 10, 5],\n    lineHeight: 20,\n\n    // rich 里是文本片段的样式设置：\n    rich: {\n        a: {\n            color: &#39;red&#39;,\n            lineHeight: 10\n        },\n        b: {\n            backgroundColor: {\n                image: &#39;xxx/xxx.jpg&#39;\n            },\n            height: 40\n        },\n        x: {\n            fontSize: 18,\n            fontFamily: &#39;Microsoft YaHei&#39;,\n            borderColor: &#39;#449933&#39;,\n            borderRadius: 4\n        },\n        ...\n    }\n}\n</code></pre>\n<blockquote>\n<p>注意：如果不定义 <code class=\"codespan\">rich</code>，不能指定文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n</blockquote>\n<h2 id=\"-\">文本、文本框、文本片段的基本样式和装饰</h2>\n<p>每个文本可以设置基本的字体样式：<code class=\"codespan\">fontStyle</code>、<code class=\"codespan\">fontWeight</code>、<code class=\"codespan\">fontSize</code>、<code class=\"codespan\">fontFamily</code>。</p>\n<p>可以设置文字的颜色 <code class=\"codespan\">color</code> 和边框的颜色 <code class=\"codespan\">textBorderColor</code>、<code class=\"codespan\">textBorderWidth</code>。</p>\n<p>文本框可以设置边框和背景的样式：<code class=\"codespan\">borderColor</code>、<code class=\"codespan\">borderWidth</code>、<code class=\"codespan\">backgroundColor</code>、<code class=\"codespan\">padding</code>。</p>\n<p>文本片段也可以设置边框和背景的样式：<code class=\"codespan\">borderColor</code>、<code class=\"codespan\">borderWidth</code>、<code class=\"codespan\">backgroundColor</code>、<code class=\"codespan\">padding</code>。</p>\n<p>例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-options&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n\n<h2 id=\"-\">标签的位置</h2>\n<p>对于折线图、柱状图、散点图等，均可以使用 <code class=\"codespan\">label</code> 来设置标签。标签的相对于图形元素的位置，一般使用 <a href=\"option.html#series-scatter.label.position\" target=\"_blank\">label.position</a>、<a href=\"option.html#series-scatter.label.distance\" target=\"_blank\">label.distance</a> 来配置。</p>\n<p>例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<blockquote>\n<p>注意：<code class=\"codespan\">position</code> 在不同的图中可取值有所不同。<code class=\"codespan\">distance</code> 并不是在每个图中都支持。详情请参见 <a href=\"option.html\" target=\"_blank\">option 文档</a>。</p>\n</blockquote>\n<h2 id=\"-\">标签的旋转</h2>\n<p>某些图中，为了能有足够长的空间来显示标签，需要对标签进行旋转。例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-label-rotation&edit=1&reset=1\" width=\"900\" height=\"500\" ></iframe>\n\n\n<p>这种场景下，可以结合 <a href=\"option.html#series-bar.label.align\" target=\"_blank\">align</a> 和 <a href=\"option.html#series-bar.label.verticalAlign\" target=\"_blank\">verticalAlign</a> 来调整标签位置。</p>\n<p>注意，逻辑是，先使用 <code class=\"codespan\">align</code> 和 <code class=\"codespan\">verticalAlign</code> 定位，再旋转。</p>\n<h2 id=\"-\">文本片段的排版和对齐</h2>\n<p>关于排版方式，每个文本片段，可以想象成 CSS 中的 <code class=\"codespan\">inline-block</code>，在文档流中按行放置。</p>\n<p>每个文本片段的内容盒尺寸（<code class=\"codespan\">content box size</code>），默认是根据文字大小决定的。但是，也可以设置 <code class=\"codespan\">width</code>、<code class=\"codespan\">height</code> 来强制指定，虽然一般不会这么做（参见下文）。文本片段的边框盒尺寸（<code class=\"codespan\">border box size</code>），由上述本身尺寸，加上文本片段的 <code class=\"codespan\">padding</code> 来得到。</p>\n<p>只有 <code class=\"codespan\">&#39;\\n&#39;</code> 是换行符，能导致换行。</p>\n<p>一行内，会有多个文本片段。每行的实际高度，由 <code class=\"codespan\">lineHeight</code> 最大的文本片段决定。文本片段的 <code class=\"codespan\">lineHeight</code> 可直接在 <code class=\"codespan\">rich</code> 中指定，也可以在 <code class=\"codespan\">rich</code> 的父层级中统一指定而采用到 <code class=\"codespan\">rich</code> 的所有项中，如果都不指定，则取文本片段的边框盒尺寸（<code class=\"codespan\">border box size</code>）。</p>\n<p>在一行的 <code class=\"codespan\">lineHeight</code> 被决定后，一行内，文本片段的竖直位置，由文本片段的 <code class=\"codespan\">verticalAlign</code> 来指定（这里和 CSS 中的规则稍有不同）：</p>\n<ul>\n<li><code class=\"codespan\">&#39;bottom&#39;</code>：文本片段的盒的底边贴住行底。</li>\n<li><code class=\"codespan\">&#39;top&#39;</code>：文本片段的盒的顶边贴住行顶。</li>\n<li><code class=\"codespan\">&#39;middle&#39;</code>：居行中。</li>\n</ul>\n<p>文本块的宽度，可以直接由文本块的 <code class=\"codespan\">width</code> 指定，否则，由最长的行决定。宽度决定后，在一行中进行文本片段的放置。文本片段的 <code class=\"codespan\">align</code> 决定了文本片段在行中的水平位置：</p>\n<ul>\n<li>首先，从左向右连续紧靠放置 <code class=\"codespan\">align</code> 为 <code class=\"codespan\">&#39;left&#39;</code> 的文本片段盒。</li>\n<li>然后，从右向左连续紧靠放置 <code class=\"codespan\">align</code> 为 <code class=\"codespan\">&#39;right&#39;</code> 的文本片段盒。</li>\n<li>最后，剩余的没处理的文本片段盒，紧贴着，在中间剩余的区域中居中放置。</li>\n</ul>\n<p>关于文字在文本片段盒中的位置：</p>\n<ul>\n<li>如果 <code class=\"codespan\">align</code> 为 <code class=\"codespan\">&#39;center&#39;</code>，则文字在文本片段盒中是居中的。</li>\n<li>如果 <code class=\"codespan\">align</code> 为 <code class=\"codespan\">&#39;left&#39;</code>，则文字在文本片段盒中是居左的。</li>\n<li>如果 <code class=\"codespan\">align</code> 为 <code class=\"codespan\">&#39;right&#39;</code>，则文字在文本片段盒中是居右的。</li>\n</ul>\n<p>例如：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/text-fragment-align&edit=1&reset=1\" width=\"800\" height=\"220\" ></iframe>\n\n\n\n<h2 id=\"-\">特殊效果：图标、分割线、标题块、简单表格</h2>\n<p>看下面的例子：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/title-block&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>文本片段的 <code class=\"codespan\">backgroundColor</code> 可以指定为图片后，就可以在文本中使用图标了：</p>\n<pre><code class=\"lang-js\">rich: {\n    Sunny: {\n        // 这样设定 backgroundColor 就可以是图片了。\n        backgroundColor: {\n            image: &#39;./data/asset/img/weather/sunny_128.png&#39;\n        },\n        // 可以只指定图片的高度，从而图片的宽度根据图片的长宽比自动得到。\n        height: 30\n    }\n}\n</code></pre>\n<p>分割线实际是用 border 实现的：</p>\n<pre><code class=\"lang-js\">rich: {\n    hr: {\n        borderColor: &#39;#777&#39;,\n        // 这里把 width 设置为 &#39;100%&#39;，表示分割线的长度充满文本块。\n        // 注意，这里是文本块内容盒（content box）的 100%，而不包含 padding。\n        // 虽然这和 CSS 相关的定义有所不同，但是在这类场景中更加方便。\n        width: &#39;100%&#39;,\n        borderWidth: 0.5,\n        height: 0\n    }\n}\n</code></pre>\n<p>标题块是使用 <code class=\"codespan\">backgroundColor</code> 实现的：</p>\n<pre><code class=\"lang-js\">// 标题文字居左\nformatter: &#39;{titleBg|Left Title}&#39;,\nrich: {\n    titleBg: {\n        backgroundColor: &#39;#000&#39;,\n        height: 30,\n        borderRadius: [5, 5, 0, 0],\n        padding: [0, 10, 0, 10],\n        width: &#39;100%&#39;,\n        color: &#39;#eee&#39;\n    }\n}\n\n// 标题文字居中。\n// 这个实现有些 tricky，但是，能够不引入更复杂的排版规则而实现这个效果。\nformatter: &#39;{tc|Center Title}{titleBg|}&#39;,\nrich: {\n    titleBg: {\n        align: &#39;right&#39;,\n        backgroundColor: &#39;#000&#39;,\n        height: 30,\n        borderRadius: [5, 5, 0, 0],\n        padding: [0, 10, 0, 10],\n        width: &#39;100%&#39;,\n        color: &#39;#eee&#39;\n    }\n}\n</code></pre>\n<p>简单表格的设定，其实就是给不同行上纵向对应的文本片段设定同样的宽度就可以了。参见本文最开始的 <a href=\"https://echarts.apache.org/examples/zh/view.html?c=pie-rich-text&amp;edit=1&amp;reset=1\" target=\"_blank\">例子</a>。</p>\n"
  },
  "服务端渲染": {
    "desc": "<p>Apache ECharts<sup>TM</sup> 可以在服务端进行渲染。例如 <a href=\"https://echarts.apache.org/examples/zh/index.html\" target=\"_blank\">官方示例</a> 里的一个个小截图，就是在服务端预生成出来的。</p>\n<p>服务端渲染可以使用流行的 headless 环境，例如 <a href=\"https://github.com/GoogleChrome/puppeteer\" target=\"_blank\">puppeteer</a>、<a href=\"https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md\" target=\"_blank\">headless chrome</a>、<a href=\"https://github.com/Automattic/node-canvas\" target=\"_blank\">node-canvas</a>、<a href=\"https://github.com/jsdom/jsdom\" target=\"_blank\">jsdom</a>、<a href=\"http://phantomjs.org/\" target=\"_blank\">PhantomJS</a> 等。</p>\n<p>这是一些社区贡献的 echarts 服务端渲染方案：</p>\n<ul>\n<li><a href=\"https://github.com/hellosean1025/node-echarts\" target=\"_blank\">https://github.com/hellosean1025/node-echarts</a></li>\n<li><a href=\"https://github.com/chfw/echarts-scrappeteer\" target=\"_blank\">https://github.com/chfw/echarts-scrappeteer</a></li>\n<li><a href=\"https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js\" target=\"_blank\">https://github.com/chfw/pyecharts-snapshot/blob/master/pyecharts_snapshot/phantomjs/snapshot.js</a></li>\n<li><a href=\"https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73\" target=\"_blank\">https://gist.github.com/pissang/4c32ee30e35c91336af72b129a1a4a73</a></li>\n</ul>\n"
  },
  "使用 Canvas 或者 SVG 渲染": {
    "desc": "<p>浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说，这两种技术往往是可替换的，效果相近。但是在一些场景中，他们的表现和能力又有一定差异。于是，对它们的选择取舍，就成为了一个一直存在的不易有标准答案的话题。</p>\n<p>Apache ECharts<sup>TM</sup> 从初始一直使用 Canvas 绘制图表（除了对 IE8- 使用 VML）。而 <a href=\"https://github.com/apache/echarts/releases\" target=\"_blank\">ECharts v4.0</a> 发布了 SVG 渲染器，从而提供了一种新的选择。只须在初始化一个图表实例时，设置 <a href=\"api.html#echarts.init\" target=\"_blank\">renderer 参数</a> 为 <code class=\"codespan\">&#39;canvas&#39;</code> 或 <code class=\"codespan\">&#39;svg&#39;</code> 即可指定渲染器，比较方便。</p>\n<blockquote>\n<p>SVG 和 Canvas 这两种使用方式差异很大的技术，能够做到同时被透明支持，主要归功于 ECharts 底层库 <a href=\"https://github.com/ecomfe/zrender\" target=\"_blank\">ZRender</a> 的抽象和实现，形成可互换的 SVG 渲染器和 Canvas 渲染器。</p>\n</blockquote>\n<h2 id=\"-\">选择哪种渲染器</h2>\n<p>一般来说，Canvas 更适合绘制图形元素数量非常大（这一般是由数据量大导致）的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也利于实现某些视觉 <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=lines-bmap-effect\" target=\"_blank\">特效</a>。但是，在不少场景中，SVG 具有重要的优势：它的内存占用更低（这对移动端尤其重要）、渲染性能略高、并且用户使用浏览器内置的缩放功能时不会模糊。</p>\n<p>选择哪种渲染器，我们可以根据软硬件环境、数据量、功能需求综合考虑。</p>\n<ul>\n<li>在软硬件环境较好，数据量不大的场景下（例如 PC 端做商务报表），两种渲染器都可以适用，并不需要太多纠结。</li>\n<li>在环境较差，出现性能问题需要优化的场景下，可以通过试验来确定使用哪种渲染器。比如有这些经验：<ul>\n<li>在须要创建很多 ECharts 实例且浏览器易崩溃的情况下（可能是因为 Canvas 数量多导致内存占用超出手机承受能力），可以使用 SVG 渲染器来进行改善。大略得说，如果图表运行在低端安卓机，或者我们在使用一些特定图表如 <a href=\"https://ecomfe.github.io/echarts-liquidfill/example/\" target=\"_blank\">水球图</a> 等，SVG 渲染器可能效果更好。</li>\n<li>数据量很大、较多交互时，可以选用 Canvas 渲染器。</li>\n</ul>\n</li>\n</ul>\n<p>我们强烈欢迎开发者们 <a href=\"https://github.com/apache/echarts/issues/new\" target=\"_blank\">反馈</a> 给我们使用的体验和场景，帮助我们更好的做优化。</p>\n<p>注：除了某些特殊的渲染可能依赖 Canvas：如<a href=\"option.html#series-lines.effect\" target=\"_blank\">炫光尾迹特效</a>、<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=heatmap-bmap\" target=\"_blank\">带有混合效果的热力图</a>等，绝大部分功能 SVG 都是支持的。</p>\n<h2 id=\"-\">如何使用渲染器</h2>\n<p>ECharts 默认使用 Canvas 渲染。如果想使用 SVG 渲染，ECharts 代码中须包括有 SVG 渲染器模块。</p>\n<ul>\n<li>ECharts 的 <a href=\"https://www.jsdelivr.com/package/npm/echarts\" target=\"_blank\">预构建文件</a> 中，<a href=\"https://cdn.jsdelivr.net/npm/echarts/dist/echarts.common.min.js\" target=\"_blank\">常用版</a> 和 <a href=\"https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js\" target=\"_blank\">完整版</a> 已经包含了 SVG 渲染器，可直接使用。而 <a href=\"https://cdn.jsdelivr.net/npm/echarts/dist/echarts.simple.min.js\" target=\"_blank\">精简版</a> 没有包括。</li>\n<li>如果 <a href=\"https://echarts.apache.org/zh/builder.html\" target=\"_blank\">在线自定义构建 ECharts</a>，则需要勾上页面下方的 “SVG 渲染”。</li>\n<li>如果 <a href=\"tutorial.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9E%84%E5%BB%BA%20ECharts\" target=\"_blank\">线下自定义构建 ECharts</a>，则须引入 SVG 渲染器模块，即：</li>\n</ul>\n<pre><code class=\"lang-js\">import &#39;zrender/lib/svg/svg&#39;;\n</code></pre>\n<p>然后，我们就可以在代码中，初始化图表实例时，<a href=\"api.html#echarts.init\" target=\"_blank\">传入参数</a> 选择渲染器类型：</p>\n<pre><code class=\"lang-js\">// 使用 Canvas 渲染器（默认）\nvar chart = echarts.init(containerDom, null, {renderer: &#39;canvas&#39;});\n// 等价于：\nvar chart = echarts.init(containerDom);\n\n// 使用 SVG 渲染器\nvar chart = echarts.init(containerDom, null, {renderer: &#39;svg&#39;});\n</code></pre>\n"
  },
  "地理坐标系和地图系列的 SVG 底图": {
    "desc": "<p>从 <code class=\"codespan\">v5.1.0</code> 开始，ECharts 支持在 <a href=\"option.html#geo\" target=\"_blank\">地理坐标系（geo）</a> 和 <a href=\"option.html#series-map\" target=\"_blank\">地图系列（map series）</a> 中使用 SVG 作为底图。之前只支持 <a href=\"http://geojson.org/\" target=\"_blank\">GeoJSON</a> 格式的底图。</p>\n<p>有了这个功能，ECharts 能在任一种渲染模式（<code class=\"codespan\">canvas</code> 渲染模式和 <code class=\"codespan\">svg</code> 渲染模式）中绘制 SVG 底图，并且能够只用简单的 ECharts 配置项（option）就带来 <a href=\"option.html#geo.roam\" target=\"_blank\">放大</a>、<a href=\"option.html#geo.roam\" target=\"_blank\">平移</a>、<a href=\"option.html#geo.select\" target=\"_blank\">点选（select）</a>、<a href=\"option.html#geo.roam\" target=\"_blank\">高亮强调（emphasis）</a>、<a href=\"option.html#geo.emphasis.focus\" target=\"_blank\">聚焦-淡出（focus-blur）</a>、<a href=\"option.html#geo.label\" target=\"_blank\">标签（label）</a>、<a href=\"option.html#series-map.labelLayout\" target=\"_blank\">标签布局（labelLayout）</a>、<a href=\"option.html#geo.tooltip\" target=\"_blank\">提示框（tooltip）</a> 等特性。ECharts 中的所有在 <a href=\"option.html#geo\" target=\"_blank\">地理坐标系（geo）</a> 中可用系列（如 <a href=\"option.html#series-scatter\" target=\"_blank\">散点图（scatter）</a>、<a href=\"option.html#series-effectScatter\" target=\"_blank\">特效散点图（effectScatter）</a>，<a href=\"option.html#series-lines\" target=\"_blank\">路径图（lines）</a>，<a href=\"option.html#series-custom\" target=\"_blank\">自定义系列（custom）</a>）也能显示在 SVG 底图上。</p>\n<p>这些是使用 SVG 底图的例子：</p>\n<p><a href=\"https://echarts.apache.org/examples/zh/editor.html?c=geo-beef-cuts\" target=\"_blank\">庖丁解牛</a> |\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=geo-organ\" target=\"_blank\">内脏数据</a> |\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=geo-seatmap-flight\" target=\"_blank\">航班选座</a> |\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=geo-svg-map\" target=\"_blank\">地图</a> |\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=geo-svg-scatter-simple\" target=\"_blank\">散点图</a> |\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=geo-svg-lines\" target=\"_blank\">路径图</a> |\n<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=geo-svg-traffic\" target=\"_blank\">交通</a></p>\n<h2 id=\"-\">基本用法</h2>\n<p>SVG 底图的用法与 <a href=\"http://geojson.org/\" target=\"_blank\">GeoJSON</a> 底图的用法相同。</p>\n<p>如果在 <a href=\"option.html#geo\" target=\"_blank\">地理坐标系（geo）</a> 中使用：</p>\n<pre><code class=\"lang-js\">$.get(&#39;map/organ.svg&#39;, function (svg) {\n    // 首先向 echarts 注册 SVG 字符串或解析过的 SVG DOM\n    echarts.registerMap(&#39;organ_diagram&#39;, {svg: svg});\n\n    var chart = echarts.init(document.getElementById(&#39;main&#39;))。\n    chart.setOption({\n        geo: [{\n            // 引用注册过的底图。\n            map: &#39;organ_diagram&#39;,\n            ...\n        }]\n    });\n});\n</code></pre>\n<p>如果在 <a href=\"option.html#series-map\" target=\"_blank\">地图系列（map series）</a> 中使用：</p>\n<pre><code class=\"lang-js\">$.get(&#39;map/beef_cuts.svg&#39;, function (svg) {\n    // 首先向 echarts 注册 SVG 字符串或解析过的 SVG DOM\n    echarts.registerMap(&#39;beef_cuts_diagram&#39;, {svg: svg})。\n\n    var chart = echarts.init(document.getElementById(&#39;main&#39;))。\n    chart.setOption({\n        series: {\n            type: &#39;map&#39;,\n            // 引用注册过的底图。\n            map: &#39;beef_cuts_diagram&#39;,\n            ...\n        }\n    });\n});\n</code></pre>\n<h2 id=\"-\">缩放和平移</h2>\n<p><a href=\"option.html#geo\" target=\"_blank\">地理坐标系（geo）</a></p>\n<pre><code class=\"lang-js\">option = {\n    geo: {\n        // 启用缩放和平移。\n        roam: true,\n        ...\n    }\n};\n</code></pre>\n<p><a href=\"option.html#series-map\" target=\"_blank\">地图系列（map series）</a></p>\n<pre><code class=\"lang-js\">option = {\n    series: {\n        type: &#39;map&#39;,\n        // 启用缩放和平移。\n        roam: true,\n        ...\n    }\n};\n</code></pre>\n<p>参见例子 <a href=\"option.html#geo.roam\" target=\"_blank\">roam</a>、<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=geo-svg-map\" target=\"_blank\">SVG 地图</a>。</p>\n<h2 id=\"-\">具名元素</h2>\n<p>如果要控制 SVG 中的某些元素，或者让某些元素能交互，我们首先要在 SVG 中标记这些元素：在这些元素上添加 <code class=\"codespan\">name</code> 属性（下文称此类添加过 <code class=\"codespan\">name</code> 属性的元素为：“具名元素”）。许多功能（如 <a href=\"option.html#geo.select\" target=\"_blank\">select</a>、<a href=\"option.html#geo.emphasis\" target=\"_blank\">emphasis</a>、<a href=\"option.html#geo.emphasis.focus\" target=\"_blank\">focus-blur</a>、<a href=\"option.html#geo.label\" target=\"_blank\">label</a>、<a href=\"option.html#series-map.labelLayout\" target=\"_blank\">labelLayout</a> 和 <a href=\"option.html#geo.tooltip\" target=\"_blank\">tooltip</a> 这类交互相关的功能）都依赖于对元素的命名。</p>\n<p>如下例，我们只在左边的 SVG <code class=\"codespan\">path</code> 上添加名称属性 <code class=\"codespan\">name=&quot;named_rect&quot;</code>：</p>\n<pre><code class=\"lang-xml\">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;\n&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; version=&quot;1.2&quot; fill-rule=&quot;evenodd&quot; xml:space=&quot;preserve&quot;&gt;\n    &lt;path name=&quot;named_rect&quot; d=&quot;M 0,0 L 0,100 100,100 100,0 Z&quot; fill=&quot;#765&quot; /&gt;\n    &lt;path d=&quot;M 150,0 L 150,100 250,100 250,0 Z&quot; fill=&quot;#567&quot; /&gt;\n&lt;/svg&gt;\n</code></pre>\n<p>这样，鼠标 hover 时能高亮左边的矩形，但是右边的不行。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/geo-svg-named-basic&edit=1&reset=1\" width=\"500\" height=\"200\" ></iframe>\n\n\n<p>我们还可以在 <a href=\"option.html#geo.regions\" target=\"_blank\">geo.regions</a> 中为具名元素指定一些专属配置项：</p>\n<pre><code class=\"lang-js\">option = {\n    geo: {\n        map: &#39;some_svg&#39;,\n        regions: [{\n            name: &#39;element_name_1&#39;,\n            itemStyle: { ... }\n        }, {\n            name: &#39;element_name_2&#39;,\n            itemStyle: { ... }\n        }]\n    }\n};\n</code></pre>\n<p>注意:</p>\n<ul>\n<li>只有这些 SVG 元素可以被命名：\n<code class=\"codespan\">rect</code>、<code class=\"codespan\">circle</code>、<code class=\"codespan\">line</code>、<code class=\"codespan\">ellipse</code>、<code class=\"codespan\">polygon</code>、<code class=\"codespan\">polyline</code>、<code class=\"codespan\">path</code>、<code class=\"codespan\">text</code>、<code class=\"codespan\">tspan</code>、<code class=\"codespan\">g</code>。</li>\n<li>支持多个元素以相同的名称命名，这样它们能被同时高亮、选中。</li>\n</ul>\n<h2 id=\"-\">自定义样式</h2>\n<p>虽然 SVG 元素的样式（如颜色、字体、线宽等等）都能直接在 SVG 文件中定义，但 ECharts 也支持在 <code class=\"codespan\">option</code> 中为具名元素定制样式，这能提供不少便利。</p>\n<p>可以在 <a href=\"option.html#geo.itemStyle\" target=\"_blank\">geo.itemStyle</a> 或 <a href=\"option.html#series-map.itemStyle\" target=\"_blank\">series-map.itemStyle</a> 中设置样式（也包括 <code class=\"codespan\">emphasis.itemStyle</code>、<code class=\"codespan\">select.itemStyle</code>、<code class=\"codespan\">blur.itemStyle</code>、<code class=\"codespan\">regions[i].itemStyle</code>、<code class=\"codespan\">regions[i].emphasis.itemStyle</code>、<code class=\"codespan\">regions[i].select.itemStyle</code>、<code class=\"codespan\">regions[i].blur.itemStyle</code>）。也能在这里删除一些具名元素的默认样式（例如，设置 <code class=\"codespan\">emphasis.itemStyle.color: null</code> 后，鼠标 hover 时填充色就不会改变）。</p>\n<p>此外，使用 <a href=\"option.html#series-map\" target=\"_blank\">series-map</a> 时，也可以用 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap 组件</a> 为具名元素赋予样式。参见例子 <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=geo-beef-cuts\" target=\"_blank\">庖丁解牛</a>。</p>\n<p>注意：\n只有这些具名元素可以在 <code class=\"codespan\">itemStyle</code> 中设置样式：\n<code class=\"codespan\">rect</code>、<code class=\"codespan\">circle</code>、<code class=\"codespan\">line</code>、<code class=\"codespan\">ellipse</code>、<code class=\"codespan\">polygon</code>、<code class=\"codespan\">polyline</code>、<code class=\"codespan\">path</code>。</p>\n<h2 id=\"-select-\">元素的“选中”能力（select）</h2>\n<p>如果想使具名元素能被“选中”，把 <a href=\"option.html#geo.selectedMode\" target=\"_blank\">geo.selectedMode</a> 或 <a href=\"option.html#series-map.selectedMode\" target=\"_blank\">series-map.selectedMode</a> 设置为 <code class=\"codespan\">&#39;single&#39;</code> 或者 <code class=\"codespan\">&#39;multiple&#39;</code> 即可。元素被选中时的样式可以在 <a href=\"option.html#geo.select\" target=\"_blank\">geo.select</a> 或 <a href=\"option.html#series-map.select\" target=\"_blank\">series-map.select</a> 中设定。</p>\n<p>可以通过 <a href=\"api.html#event.geoselectchanged\" target=\"_blank\">geoselectchanged</a> 事件获得所有被选中者的名称，例如：</p>\n<pre><code class=\"lang-js\">myChart.on(&#39;geoselectchanged&#39;, function (params) {\n    var selectedNames = params.allSelected[0].name;\n    console.log(&#39;selected&#39;, selectedNames);\n});\n</code></pre>\n<p>参见例子 <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=geo-seatmap-flight\" target=\"_blank\">航班选座</a>。</p>\n<h2 id=\"-emphasis-focus-blur-\">元素的“高亮强调”（emphasis）和“聚焦-淡出”（focus-blur）</h2>\n<p>具名元素可以自动在鼠标 hover 时有“高亮强调”（emphasis）的能力。</p>\n<p>此外，可以把 <a href=\"option.html#geo.emphasis.focus\" target=\"_blank\">geo.emphasis.focus</a> 设置为 <code class=\"codespan\">&#39;self&#39;</code> 来启用 “聚焦-淡出”（focus-blur）功能。也就是，当鼠标 hover 在一个具名元素上时，所有其他元素都会被淡出。</p>\n<p>参见例子 <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=geo-organ\" target=\"_blank\">Organ Visualization</a>。</p>\n<h2 id=\"-tooltip-\">提示框（tooltip）</h2>\n<p>可以在具名元素上启用或禁用提示框（tooltip）功能。</p>\n<pre><code class=\"lang-js\">option = {\n    // 在 option 根部声明 tooltip 以整体开启 tooltip 功能。\n    tooltip: {},\n    geo: {\n        map: &#39;some_svg&#39;,\n        tooltip: {\n            // 用 `show` 来启用/禁用 geo 上的 tooltip。\n            show: true\n        },\n        regions: [{\n            name: &#39;some_name1&#39;,\n            // 如果需要的话，可以对特定具名元素指定 tooltip 参数。\n            tooltip: {\n                formatter: &#39;一些特殊的提示 1&#39;\n            }\n        }, {\n            name: &#39;some_name2&#39;,\n            tooltip: {\n                formatter: &#39;一些特殊的提示 2&#39;\n            }\n        }]\n    }\n};\n</code></pre>\n<p>如果想单独禁用 geo 上的 tooltip，只需：</p>\n<pre><code class=\"lang-js\">option = {\n    tooltip: {},\n    geo: {\n        map: &#39;some_svg&#39;,\n        tooltip: {\n            show: false\n        }\n    }\n};\n</code></pre>\n<p>参见例子 <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=geo-svg-map\" target=\"_blank\">SVG 地图</a>。</p>\n<h2 id=\"-label-\">标签（label）</h2>\n<p>虽然可以直接在 SVG 中定义 <code class=\"codespan\">&lt;text&gt;</code>/<code class=\"codespan\">&lt;tspan&gt;</code> 来显示文本标签，但 ECharts 也支持用 <a href=\"option.html#geo.label\" target=\"_blank\">geo.label</a> 或 <a href=\"option.html#series-map.label\" target=\"_blank\">series-map.label</a> 来设置底图上的标签。</p>\n<p>标签功能默认在鼠标 hover 时是启用的。如果想禁用标签，只需：</p>\n<pre><code class=\"lang-js\">option = {\n    geo: {\n        map: &#39;some_svg&#39;,\n        emphasis: {\n            label: {\n                show: false\n            }\n        }\n    }\n};\n</code></pre>\n<p>当想要多个元素共享一个标签时，我们有两种选择：</p>\n<ul>\n<li>将这些元素包裹在一个具名的 <code class=\"codespan\">&lt;g&gt;</code> 中（如 <code class=\"codespan\">&lt;g=&quot;name_a&quot;&gt;</code>）中，这样只会显示一个标签，并且基于 <code class=\"codespan\">&lt;g&gt;</code> 的 <code class=\"codespan\">boundingRect</code> 定位。</li>\n<li>给这些元素起相同的名字（如 <code class=\"codespan\">&lt;path name=&quot;name_b&quot;/&gt;&lt;path name=&quot;name_b&quot;/&gt;</code>），这样每个元素都会显示一个标签，并且会根据每个元素自身显示和定位。</li>\n</ul>\n<p>例如（将鼠标 hover 到元素上能显示标签）：</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/geo-svg-label-basic&edit=1&reset=1\" width=\"500\" height=\"300\" ></iframe>\n\n\n<p>注意：只有这些具名元素可以设置 <code class=\"codespan\">label</code>：\n<code class=\"codespan\">rect</code>、<code class=\"codespan\">circle</code>、<code class=\"codespan\">line</code>、<code class=\"codespan\">ellipse</code>、<code class=\"codespan\">polygon</code>、<code class=\"codespan\">polyline</code>、<code class=\"codespan\">path</code>、<code class=\"codespan\">g</code>。</p>\n<p>标签的用法也参见示例 <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=geo-organ\" target=\"_blank\">Organ Visualization</a>。</p>\n<h2 id=\"-\">事件</h2>\n<p>可以用如下方式监听具名元素的鼠标事件或者触摸事件：</p>\n<pre><code class=\"lang-js\">// &#39;name1&#39; 是一个 SVG 元素的名字。\nmyChart.on(&#39;click&#39;, { geoIndex: 0, name: &#39;name1&#39; }, function (params) {\n    console.log(params);\n});\n</code></pre>\n<h2 id=\"svg-\">SVG 底图的布局</h2>\n<p>在默认情况下，ECharts 会将 SVG 底图放置在画布的中心。如果需要调整的话，一般只调整 <a href=\"option.html#geo.layoutCenter\" target=\"_blank\">layoutCenter</a>/<a href=\"option.html#geo.layoutSize\" target=\"_blank\">layoutSize</a>，偶尔也可能要调整 <code class=\"codespan\">&lt;svg viewBox=&quot;...&quot;&gt;</code>/<a href=\"option.html#geo.boundingCoords\" target=\"_blank\">geo.boundingCoords</a>（它们两个的区别是：是否产生剪裁）。在大多数情况下，用这些已经足够了。</p>\n<p>如果要做一些精确的位置定制，那么还得了解下面这些概念。</p>\n<p><a href=\"option.html#geo\" target=\"_blank\">地理坐标系（geo）</a> 和 <a href=\"option.html#series-map\" target=\"_blank\">地图系列（map series）</a> 的布局规则和选项都是一样的。所以下面我们只讲 <a href=\"option.html#geo\" target=\"_blank\">地理坐标系（geo）</a>。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/geo-svg-layout-basic&edit=1&reset=1\" width=\"700\" height=\"550\" ></iframe>\n\n\n<p>上面的例子只有一个 ECharts 画布，其中三个 SVG 展示在六个 <a href=\"option.html#geo\" target=\"_blank\">地理坐标系（geo）</a> 中。同一列中的两个 <a href=\"option.html#geo\" target=\"_blank\">地理坐标系（geo）</a> 使用相同的 SVG。</p>\n<p>首先，形状的外观是由 SVG 文件本身决定的。也就是说，在上例中，由 <code class=\"codespan\">&lt;circle&gt;</code> 和 <code class=\"codespan\">viewBox</code> 属性决定（<code class=\"codespan\">viewBox</code> 会切割圆形）。可以注意，每一列的形状轮廓都一样（不管它们的位置、大小是否不同和是否被拉伸），因为它们使用的是同一个 SVG。</p>\n<p>其次，用户可以用下面任一组选项，指定 <a href=\"option.html#geo\" target=\"_blank\">地理坐标系（geo）</a> 的视口（<code class=\"codespan\">view port</code>）的位置和大小（它们的单位都是 echarts 画布的像素，或者百分比值）：</p>\n<ul>\n<li><a href=\"option.html#geo.layoutCenter\" target=\"_blank\">layoutCenter</a>、<a href=\"option.html#geo.layoutSize\" target=\"_blank\">layoutSize</a>（最常用）。</li>\n<li><a href=\"option.html#geo.top\" target=\"_blank\">top</a>、<a href=\"option.html#geo.right\" target=\"_blank\">right</a>、<a href=\"option.html#geo.bottom\" target=\"_blank\">bottom</a>、<a href=\"option.html#geo.left\" target=\"_blank\">left</a>（在上例中使用的是这组）。</li>\n</ul>\n<p>在上例中，六个 <code class=\"codespan\">geo view port</code> 用六个黑色方块表示。</p>\n<p>第三，确定 SVG 的 <code class=\"codespan\">bounding rect</code>。<code class=\"codespan\">bounding rect</code> 由以下方法决定（它们的单位都是 SVG 内部元素的度量单位）：</p>\n<ol>\n<li>如果设定了 <a href=\"option.html#geo.boundingCoords\" target=\"_blank\">geo.boundingCoords</a>，则用它作 <code class=\"codespan\">bounding rect</code>。</li>\n<li>否则，如果设定了 <code class=\"codespan\">&lt;svg width=&quot;...&quot; height=&quot;...&quot;&gt;</code>，则用 <code class=\"codespan\">[0, 0, width, height]</code> 作为 <code class=\"codespan\">bounding rect</code>。（如果只设定了 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code>，则只使用 <code class=\"codespan\">[0, width]</code> 或 <code class=\"codespan\">[0, height]</code>）。</li>\n<li>否则，如果设定了 <code class=\"codespan\">&lt;svg viewBox=&quot;...&quot;&gt;</code>，则用 <code class=\"codespan\">viewBox</code> 作 <code class=\"codespan\">bounding rect</code>。</li>\n<li>否则，由整个 SVG 所有元素 <code class=\"codespan\">bounding rect</code> 的并集得到最终 <code class=\"codespan\">bounding rect</code>。</li>\n<li>如果设定了 <a href=\"option.html#geo.center\" target=\"_blank\">geo.center</a> 或 <a href=\"option.html#geo.zoom\" target=\"_blank\">geo.zoom</a>，则把上述 <code class=\"codespan\">1~4</code> 得到的 <code class=\"codespan\">bounding rect</code> 进行相应的 <code class=\"codespan\">transform</code>。</li>\n</ol>\n<p><code class=\"codespan\">bounding rect</code> 确定后，会放置到相应的 <code class=\"codespan\">geo view port</code> 里：</p>\n<ul>\n<li>如果用的是 <a href=\"option.html#geo.layoutCenter\" target=\"_blank\">layoutCenter</a>、<a href=\"option.html#geo.layoutSize\" target=\"_blank\">layoutSize</a>，<code class=\"codespan\">bounding rect</code> 会置于 <code class=\"codespan\">geo view port</code> 的中心，并尽量填满 <code class=\"codespan\">geo view port</code>（保持长宽比）。</li>\n<li>如果用的是 <a href=\"option.html#geo.top\" target=\"_blank\">top</a>、<a href=\"option.html#geo.right\" target=\"_blank\">right</a>、<a href=\"option.html#geo.bottom\" target=\"_blank\">bottom</a>、<a href=\"option.html#geo.left\" target=\"_blank\">left</a>，<code class=\"codespan\">bounding rect</code> 会被拉伸，完全填充 <code class=\"codespan\">geo view port</code>。</li>\n</ul>\n<h2 id=\"-svg-\">在 SVG 底图上绘制系列</h2>\n<p><a href=\"option.html#series-scatter\" target=\"_blank\">scatter</a>、<a href=\"option.html#series-effectScatter\" target=\"_blank\">effectScatter</a>、<a href=\"option.html#series-lines\" target=\"_blank\">lines</a>、<a href=\"option.html#series-custom\" target=\"_blank\">custom</a> 这些在 <a href=\"option.html#geo\" target=\"_blank\">地理坐标系（geo）</a> 中可用的系列都可以在 SVG 底图上定位和显示。</p>\n<p>在这种用法中，<code class=\"codespan\">series.data</code> 的值的单位即为是 SVG 内部元素的度量单位。比如说：</p>\n<pre><code class=\"lang-js\">option = {\n    geo: {\n        map: &#39;some_svg&#39;\n    },\n    series: {\n        type: &#39;effectScatter&#39;,\n        coordinateSystem: &#39;geo&#39;,\n        geoIndex: 0,\n        data: [\n            // SVG local coords.\n            [488.2358421078053, 459.70913833075736],\n            [770.3415644319939, 757.9672194986475],\n            [1180.0329284196291, 743.6141808346214],\n        ]\n    }\n};\n</code></pre>\n<p>另外，有种简便方法可以获得 SVG 的坐标。</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n    geo: {\n        map: &#39;some_svg&#39;\n    }\n});\nmyChart.getZr().on(&#39;click&#39;, function (params) {\n    var pixelPoint = [params.offsetX, params.offsetY];\n    var dataPoint = myChart.convertFromPixel({ geoIndex: 0 }, pixelPoint);\n    // 在 SVG 上点击时，坐标会被打印。\n    // 这些坐标可以在 `series.data` 里使用。\n    console.log(dataPoint);\n});\n</code></pre>\n<p>参见示例 <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=geo-svg-scatter-simple\" target=\"_blank\">SVG Scatter</a>、<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=geo-svg-lines\" target=\"_blank\">SVG Lines</a>、<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=geo-traffic\" target=\"_blank\">SVG Traffic</a>。</p>\n<h2 id=\"-svg-\">暂不支持的 SVG 功能</h2>\n<p>实现一个完整的 SVG 解析器有点困难。虽然已经支持了常用的 SVG 功能，但至少下面列出的这些还没支持：</p>\n<ul>\n<li>翻转（flip）和倾斜（skew）（将在 <code class=\"codespan\">v5.1.2</code> 支持）：<ul>\n<li>不支持 <code class=\"codespan\">transform: skew(...)</code>（包括包含 skew 的 <code class=\"codespan\">transform: matrix(...)</code>）。</li>\n<li>不支持当 <code class=\"codespan\">transform: scale(x, y)</code> 中 <code class=\"codespan\">x</code>/<code class=\"codespan\">y</code> 正负不同且有 <code class=\"codespan\">rotate</code>（例如，<code class=\"codespan\">scale: (1, -1), rotate(90)</code>）。</li>\n</ul>\n</li>\n<li>不支持 <code class=\"codespan\">&lt;style&gt;</code> 标签。<ul>\n<li>但内联样式是支持的（例如支持 <code class=\"codespan\">&lt;path style=&quot;color:red&quot; /&gt;</code>）。</li>\n</ul>\n</li>\n<li>单位：<ul>\n<li>只支持 <code class=\"codespan\">px</code>。不支持其他单位如 <code class=\"codespan\">width=&quot;231.65mm&quot;</code>。</li>\n<li>不支持百分比值，如不支持 <code class=\"codespan\">&lt;svg width=&quot;30%&quot; height=&quot;40%&quot;&gt;</code>。</li>\n</ul>\n</li>\n<li><code class=\"codespan\">&lt;defs&gt;</code> 标签：<ul>\n<li>只支持 <code class=\"codespan\">&lt;linearGradient&gt;</code>、<code class=\"codespan\">&lt;radialGradient&gt;</code>。</li>\n<li>还不支持在 <code class=\"codespan\">&lt;defs&gt;</code> 中定义其他元素（如 <code class=\"codespan\">&lt;pattern&gt;</code>、<code class=\"codespan\">&lt;path&gt;</code>、...）。</li>\n</ul>\n</li>\n<li><code class=\"codespan\">&lt;linearGradient&gt;</code>、<code class=\"codespan\">&lt;radialGradient&gt;</code>：<ul>\n<li>不支持 <code class=\"codespan\">fx</code>、<code class=\"codespan\">fy</code>。</li>\n<li>不支持 <code class=\"codespan\">gradientTransform</code>。</li>\n</ul>\n</li>\n<li><code class=\"codespan\">fill:url(..)</code>, <code class=\"codespan\">stroke:utl(..)</code>：<ul>\n<li>只支持 <code class=\"codespan\">url(#someId)</code>。</li>\n<li>不支持其他 URL 模式，例如不支持：<ul>\n<li><code class=\"codespan\">url(https://example.com/images/myImg.jpg)</code>。</li>\n<li><code class=\"codespan\">url(data:image/png;base64,iRxVB0...)</code>。</li>\n<li><code class=\"codespan\">url(myFont.woff)</code>。</li>\n</ul>\n</li>\n</ul>\n</li>\n<li><code class=\"codespan\">&lt;switch&gt;</code> 标签：<ul>\n<li><code class=\"codespan\">&lt;switch&gt;</code> 标签内的所有内容都会显示。不支持“切换”功能。</li>\n</ul>\n</li>\n<li><code class=\"codespan\">&lt;text&gt;</code>。<ul>\n<li>不支持 <code class=\"codespan\">textPath</code>。</li>\n<li>不支持 <a href=\"https://www.w3.org/TR/SVG/text.html#TermAddressableCharacter\" target=\"_blank\">Addressable character</a>，也就是说：<pre><code class=\"lang-xml\">&lt;!-- 不支持： --&gt;\n&lt;tspan x=&quot;0 4.94 9.89&quot;&gt;abc&lt;/tspan&gt;。\n&lt;!-- 支持： --&gt;\n&lt;tspan x=&quot;0&quot;&gt;A&lt;/tspan&gt;\n&lt;tspan x=&quot;4.94&quot;&gt;b&lt;/tspan&gt;\n&lt;tspan x=&quot;9.89&quot;&gt;C&lt;/tspan&gt;\n</code></pre>\n</li>\n</ul>\n</li>\n</ul>\n"
  },
  "在图表中支持无障碍访问": {
    "desc": "<p>W3C 制定了无障碍富互联网应用规范集（<a href=\"https://www.w3.org/WAI/intro/aria\" target=\"_blank\">WAI-ARIA</a>，the Accessible Rich Internet Applications Suite），致力于使得网页内容和网页应用能够被更多残障人士访问。Apache ECharts<sup>TM</sup> 4.0 遵从这一规范，支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问。</p>\n<p>默认关闭，需要通过将 <a href=\"option.html#aria.enabled\" target=\"_blank\">aria.enabled</a> 设置为 <code class=\"codespan\">true</code> 开启。开启后，会根据图表、数据、标题等情况，自动智能生成关于图表的描述，用户也可以通过配置项修改描述。</p>\n<p>对于配置项：</p>\n<pre><code class=\"lang-js\">option = {\n    aria: {\n        enabled: true\n    },\n    title: {\n        text: &#39;某站点用户访问来源&#39;,\n        x: &#39;center&#39;\n    },\n    series: [\n        {\n            name: &#39;访问来源&#39;,\n            type: &#39;pie&#39;,\n            data: [\n                { value: 335, name: &#39;直接访问&#39; },\n                { value: 310, name: &#39;邮件营销&#39; },\n                { value: 234, name: &#39;联盟广告&#39; },\n                { value: 135, name: &#39;视频广告&#39; },\n                { value: 1548, name: &#39;搜索引擎&#39; }\n            ]\n        }\n    ]\n};\n</code></pre>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/aria-pie&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n<p>生成的图表 DOM 上，会有一个 <code class=\"codespan\">aria-label</code> 属性，在朗读设备的帮助下，盲人能够了解图表的内容。其值为：</p>\n<pre><code>这是一个关于“某站点用户访问来源”的图表。图表类型是饼图，表示访问来源。其数据是——直接访问的数据是335，邮件营销的数据是310，联盟广告的数据是234，视频广告的数据是135，搜索引擎的数据是1548。\n</code></pre><p>默认语言会根据语言包（默认中文）选择，也可以使用配置项自定义模板。</p>\n<p>除此之外，Apache ECharts 5 新增支持贴花纹理，作为颜色的辅助表达，进一步用以区分数据。在 <code class=\"codespan\">aria.enabled</code> 为 <code class=\"codespan\">true</code> 的前提下，将 <code class=\"codespan\">aria.decal.show</code> 设为 <code class=\"codespan\">true</code> 即可采用默认的贴花样式。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/aria-decal-simple&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n<p>下面，我们更具体地介绍这两种无障碍设计的配置方式。</p>\n<h2 id=\"-\">图表描述</h2>\n<h4 id=\"-\">采用整体描述</h4>\n<p>对于有些图表，默认生成的数据点的描述并不足以表现整体的信息。比如下图的散点图，默认生成的描述可以包含数据点的坐标值，但是知道几百几千个点的坐标并不能帮助我们有效地理解图表表达的信息。</p>\n<p><img width=\"600\" height=\"auto\" src=\"documents/asset/img/aria-example.png\"></p>\n<p>这时候，用户可以通过 <a href=\"option.html#aria.label.description\" target=\"_blank\">aria.label.description</a> 配置项指定图表的整体描述。</p>\n<h4 id=\"-\">定制模板描述</h4>\n<p>除了整体性修改描述之外，我们还提供了生成描述的模板，可以方便地进行细粒度的修改。</p>\n<p>生成描述的基本流程为，如果 <a href=\"option.html#aria.label.show\" target=\"_blank\">aria.label.show</a> 设置为 <code class=\"codespan\">true</code>，则生成无障碍访问描述，否则不生成。如果定义了 <a href=\"option.html#aria.label.description\" target=\"_blank\">aria.label.description</a>，则将其作为图表的完整描述，否则根据模板拼接生成描述。我们提供了默认的生成描述的算法，仅当生成的描述不太合适时，才需要修改这些模板，甚至使用 <code class=\"codespan\">aria.description</code> 完全覆盖。</p>\n<p>使用模板拼接时，先根据是否存在标题 <a href=\"#title.text\">title.text</a> 决定使用 <a href=\"option.html#aria.label.general.withTitle\" target=\"_blank\">aria.label.general.withTitle</a> 还是 <a href=\"option.html#aria.label.general.withoutTitle\" target=\"_blank\">aria.label.general.withoutTitle</a> 作为整体性描述。其中，<code class=\"codespan\">aria.general.withTitle</code> 配置项包括模板变量 <code class=\"codespan\">&#39;{title}&#39;</code>，将会被替换成图表标题。也就是说，如果 <code class=\"codespan\">aria.general.withTitle</code> 被设置为 <code class=\"codespan\">&#39;图表的标题是：{title}。&#39;</code>，则如果包含标题 <code class=\"codespan\">&#39;价格分布图&#39;</code>，这部分的描述为 <code class=\"codespan\">&#39;图表的标题是：价格分布图。&#39;</code>。</p>\n<p>拼接完标题之后，会依次拼接系列的描述（<a href=\"option.html#aria.label.series\" target=\"_blank\">aria.label.series</a>），和每个系列的数据的描述（<a href=\"option.html#aria.label.data\" target=\"_blank\">aria.label.data</a>）。同样，每个模板都有可能包括模板变量，用以替换实际的值。</p>\n<h2 id=\"-\">贴花图案</h2>\n<p>上文介绍了使用默认的贴花图案的方式。如果需要自定义贴花图案，可以使用 <a href=\"option.html#aria.decal.decals\" target=\"_blank\">aria.decal.decals</a> 配置出灵活多变的图案。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/aria-decal&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n<p>更具体的信息请参见 <a href=\"option.html#aria\" target=\"_blank\">ARIA 文档</a>。</p>\n"
  },
  "使用 ECharts GL 实现基础的三维可视化": {
    "desc": "<p>ECharts GL （后面统一简称 GL）为 Apache ECharts<sup>TM</sup> 补充了丰富的三维可视化组件，这篇文章我们会简单介绍如何基于 GL 实现一些常见的三维可视化作品。实际上如果你对 ECharts 有一定了解的话，也可以很快的上手 GL，GL 的配置项完全是按照 ECharts 的标准和上手难度来设计的。</p>\n<p>在看完文章之后，你可以前往 <a href=\"https://echarts.apache.org/examples/zh/index.html#chart-type-globe\" target=\"_blank\">官方示例</a> 和 <a href=\"https://gallery.echartsjs.com/explore.html#tags=echarts-gl\" target=\"_blank\">Gallery</a> 去了解更多使用 GL 制作的示例，对于文章中我们没法解释到的代码，也可以前往 <a href=\"option-gl.html\" target=\"_blank\">GL 配置项手册</a> 查看具体的配置项使用方法。</p>\n<h2 id=\"-echarts-gl\">如何下载和引入 ECharts GL</h2>\n<p>为了不再增加已经很大了的 ECharts 完整版的体积，我们将 GL 作为扩展包的形式提供，和诸如水球图这样的扩展类似，如果要使用 GL 里的各种组件，只需要在引入<code class=\"codespan\">echarts.min.js</code>的基础上再引入一个<code class=\"codespan\">echarts-gl.min.js</code>。你可以从 <a href=\"https://echarts.apache.org/zh/download.html\" target=\"_blank\">官网</a> 下载最新版的 GL，然后在页面中通过标签引入：</p>\n<pre><code class=\"lang-html\">&lt;script src=&quot;lib/echarts.min.js&quot;&gt;&lt;/script&gt;\n&lt;script src=&quot;lib/echarts-gl.min.js&quot;&gt;&lt;/script&gt;\n</code></pre>\n<p>如果你的项目使用 webpack 或者 rollup 来打包代码的话，也可以通过 npm 安装后引入</p>\n<pre><code class=\"lang-bash\">npm install echarts\nnpm install echarts-gl\n</code></pre>\n<pre><code class=\"lang-js\">// 通过 ES6 的 import 语法引入 ECharts 和 ECharts GL\nimport echarts from &#39;echarts&#39;;\nimport &#39;echarts-gl&#39;;\n</code></pre>\n<h2 id=\"-\">声明一个基础的三维笛卡尔坐标系</h2>\n<p>引入 ECharts 和 ECharts GL 后，我们先来声明一个基础的三维笛卡尔坐标系用于绘制三维的散点图，柱状图，曲面图等常见的统计图。</p>\n<p>在 ECharts 中我们有 <a href=\"option.html#grid\" target=\"_blank\">grid</a> 组件用于提供一个矩形的区域放置一个二维的笛卡尔坐标系，以及笛卡尔坐标系上上的 x 轴（<a href=\"option.html#xAxis\" target=\"_blank\">xAxis</a>）和 y 轴（<a href=\"option.html#yAxis\" target=\"_blank\">yAxis</a>）。对于三维的笛卡尔坐标系，我们在 GL 中提供了 <a href=\"option-gl.html#grid3D\" target=\"_blank\">grid3D</a> 组件用于划分一块三维的笛卡尔空间，以及放置在这个 <a href=\"option-gl.html#grid3D\" target=\"_blank\">grid3D</a> 上的 <a href=\"option-gl.html#xAxis3D\" target=\"_blank\">xAxis3D</a>, <a href=\"option-gl.html#yAxis3D\" target=\"_blank\">yAxis3D</a>, <a href=\"option-gl.html#zAxis3D\" target=\"_blank\">zAxis3D</a>。</p>\n<blockquote>\n<p>小提示：在 GL 中我们对除了 globe 之外所有的三维组件和系列都加了 3D 的后缀用以区分，例如三维的散点图就是 scatter3D，三维的地图就是 map3D 等等。</p>\n</blockquote>\n<p>下面这段代码就声明了一个最简单的三维笛卡尔坐标系</p>\n<pre><code class=\"lang-js\">var option = {\n    // 需要注意的是我们不能跟 grid 一样省略 grid3D\n    grid3D: {},\n    // 默认情况下, x, y, z 分别是从 0 到 1 的数值轴\n    xAxis3D: {},\n    yAxis3D: {},\n    zAxis3D: {}\n}\n</code></pre>\n<p>效果如下：</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/grid3D-basic.png\"></p>\n<p>跟二维的笛卡尔坐标系一样，每个轴都会有多种类型，默认是数值轴，如果需要是类目轴的话，简单的设置为 <code class=\"codespan\">type: &#39;category&#39;</code>就行了。</p>\n<h2 id=\"-\">绘制三维的散点图</h2>\n<p>声明好笛卡尔坐标系后，我们先试试用一份程序生成的正态分布数据在这个三维的笛卡尔坐标系中画散点图。</p>\n<p>下面这段是生成正态分布数据的代码，你可以先不用关心这段代码是怎么工作的，只需要知道它生成了一份三维的正态分布数据放在<code class=\"codespan\">data</code>数组中。</p>\n<pre><code class=\"lang-js\">function makeGaussian(amplitude, x0, y0, sigmaX, sigmaY) {\n    return function (amplitude, x0, y0, sigmaX, sigmaY, x, y) {\n        var exponent = -(\n                ( Math.pow(x - x0, 2) / (2 * Math.pow(sigmaX, 2)))\n                + ( Math.pow(y - y0, 2) / (2 * Math.pow(sigmaY, 2)))\n            );\n        return amplitude * Math.pow(Math.E, exponent);\n    }.bind(null, amplitude, x0, y0, sigmaX, sigmaY);\n}\n// 创建一个高斯分布函数\nvar gaussian = makeGaussian(50, 0, 0, 20, 20);\n\nvar data = [];\nfor (var i = 0; i &lt; 1000; i++) {\n    // x, y 随机分布\n    var x = Math.random() * 100 - 50;\n    var y = Math.random() * 100 - 50;\n    var z = gaussian(x, y);\n    data.push([x, y, z]);\n}\n</code></pre>\n<p>生成的正态分布的数据大概长这样：</p>\n<pre><code class=\"lang-js\">[\n  [46.74395071259907, -33.88391024738553, 0.7754030099768191],\n  [-18.45302873809771, 16.88114775416834, 22.87772504105404],\n  [2.9908128281121336, -0.027699444453467947, 49.44400635911886],\n  ...\n]\n</code></pre>\n<p>每一项都包含了<code class=\"codespan\">x</code>, <code class=\"codespan\">y</code>, <code class=\"codespan\">z</code>三个值，这三个值会分别被映射到笛卡尔坐标系的 x 轴，y 轴和 z 轴上。</p>\n<p>然后我们可以使用 GL 提供的 <a href=\"option-gl.html#series-scatter3D\" target=\"_blank\">scatter3D</a> 系列类型把这些数据画成三维空间中正态分布的点。</p>\n<pre><code class=\"lang-js\">option = {\n    grid3D: {},\n    xAxis3D: {},\n    yAxis3D: {},\n    zAxis3D: { max: 100 },\n    series: [{\n        type: &#39;scatter3D&#39;,\n        data: data\n    }]\n}\n</code></pre>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/scatter3D-gaussian.png\"></p>\n<h2 id=\"-\">使用真实数据的三维散点图</h2>\n<p>接下来我们来看一个使用真实多维数据的三维散点图例子。</p>\n<p>可以先从 <a href=\"https://echarts.apache.org/examples/data/asset/data/life-expectancy-table.json\" target=\"_blank\">https://echarts.apache.org/examples/data/asset/data/life-expectancy-table.json</a> 获取这份数据。</p>\n<p>格式化一下可以看到这份数据是很传统转成 JSON 后的表格格式。第一行是每一列数据的属性名，可以从这个属性名看出来每一列数据的含义，分别是人均收入，人均寿命，人口数量，国家和年份。</p>\n<pre><code class=\"lang-js\">[\n    [&quot;Income&quot;, &quot;Life Expectancy&quot;, &quot;Population&quot;, &quot;Country&quot;, &quot;Year&quot;],\n    [815, 34.05, 351014, &quot;Australia&quot;, 1800],\n    [1314, 39, 645526, &quot;Canada&quot;, 1800],\n    [985, 32, 321675013, &quot;China&quot;, 1800],\n    [864, 32.2, 345043, &quot;Cuba&quot;, 1800],\n    [1244, 36.5731262, 977662, &quot;Finland&quot;, 1800],\n    ...\n]\n</code></pre>\n<p>在 ECharts 4 中我们可以使用 dataset 组件非常方便地引入这份数据。如果对 dataset 还不熟悉的话可以看<a href=\"tutorial.html#%E4%BD%BF%E7%94%A8%20dataset%20%E7%AE%A1%E7%90%86%E6%95%B0%E6%8D%AE\" target=\"_blank\">dataset使用教程</a></p>\n<pre><code class=\"lang-js\">$.get(&#39;data/asset/data/life-expectancy-table.json&#39;, function (data) {\n    myChart.setOption({\n        grid3D: {},\n        xAxis3D: {},\n        yAxis3D: {},\n        zAxis3D: {},\n        dataset: {\n            source: data\n        },\n        series: [\n            {\n                type: &#39;scatter3D&#39;,\n                symbolSize: 2.5\n            }\n        ]\n    })\n});\n</code></pre>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/scatter3D-life.png\"></p>\n<p>默认会把前三列，也就是收入（Income），人均寿命（Life Expectancy），人口（Population）分别放到 x、 y、 z 轴上。</p>\n<p>使用 encode 属性我们还可以将指定列的数据映射到指定的坐标轴上，从而省去很多繁琐的数据转换代码。例如我们将 x 轴换成是国家（Country），y 轴换成年份（Year），z 轴换成收入（Income），可以看到不同国家不同年份的人均收入分布。</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n    grid3D: {},\n    xAxis3D: {\n        // 因为 x 轴和 y 轴都是类目数据，所以需要设置 type: &#39;category&#39; 保证正确显示数据。\n        type: &#39;category&#39;\n    },\n    yAxis3D: {\n        type: &#39;category&#39;\n    },\n    zAxis3D: {},\n    dataset: {\n        source: data\n    },\n    series: [\n        {\n            type: &#39;scatter3D&#39;,\n            symbolSize: 2.5,\n            encode: {\n                // 维度的名字默认就是表头的属性名\n                x: &#39;Country&#39;,\n                y: &#39;Year&#39;,\n                z: &#39;Income&#39;,\n                tooltip: [0, 1, 2, 3, 4]\n            }\n        }\n    ]\n});\n</code></pre>\n<h2 id=\"-visualmap-\">利用 visualMap 组件对三维散点图进行视觉编码</h2>\n<p>刚才多维数据的例子中，我们还有几个维度（列）没能表达出来，利用 ECharts 内置的 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> 组件我们可以继续将第四个维度编码成颜色。</p>\n<pre><code class=\"lang-js\">myChart.setOption({\n    grid3D: {\n        viewControl: {\n            // 使用正交投影。\n            projection: &#39;orthographic&#39;\n        }\n    },\n    xAxis3D: {\n        // 因为 x 轴和 y 轴都是类目数据，所以需要设置 type: &#39;category&#39; 保证正确显示数据。\n        type: &#39;category&#39;\n    },\n    yAxis3D: {\n        type: &#39;log&#39;\n    },\n    zAxis3D: {},\n    visualMap: {\n        calculable: true,\n        max: 100,\n        // 维度的名字默认就是表头的属性名\n        dimension: &#39;Life Expectancy&#39;,\n        inRange: {\n            color: [&#39;#313695&#39;, &#39;#4575b4&#39;, &#39;#74add1&#39;, &#39;#abd9e9&#39;, &#39;#e0f3f8&#39;, &#39;#ffffbf&#39;, &#39;#fee090&#39;, &#39;#fdae61&#39;, &#39;#f46d43&#39;, &#39;#d73027&#39;, &#39;#a50026&#39;]\n        }\n    },\n    dataset: {\n        source: data\n    },\n    series: [\n        {\n            type: &#39;scatter3D&#39;,\n            symbolSize: 5,\n            encode: {\n                // 维度的名字默认就是表头的属性名\n                x: &#39;Country&#39;,\n                y: &#39;Population&#39;,\n                z: &#39;Income&#39;,\n                tooltip: [0, 1, 2, 3, 4]\n            }\n        }\n    ]\n})\n</code></pre>\n<p>这段代码中我们又在刚才的例子基础上加入了 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> 组件，将<code class=\"codespan\">Life Expectancy</code>这一列数据映射到了不同的颜色。</p>\n<p>除此之外我们还把原来默认的透视投影改成了正交投影。正交投影在某些场景中可以避免因为近大远小所造成的表达错误。</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/scatter3D-color.png\"></p>\n<p>当然，除了 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> 组件，还可以利用其它的 ECharts 内置组件并且充分利用这些组件的交互效果，比如 <a href=\"option.html#legend\" target=\"_blank\">legend</a>。也可以像 <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=scatter3d-scatter&amp;gl=1\" target=\"_blank\">三维散点图和散点矩阵结合使用</a> 这个例子一样实现二维和三维的系列混搭。</p>\n<p>在实现 GL 的时候我们尽可能地把 WebGL 和 Canvas 之间的差异屏蔽了到最小，从而让 GL 的使用可以更加方便自然。</p>\n<h2 id=\"-\">在笛卡尔坐标系上显示其它类型的三维图表</h2>\n<p>除了散点图，我们也可以通过 GL 在三维的笛卡尔坐标系上绘制其它类型的三维图表。比如刚才例子中将 <code class=\"codespan\">scatter3D</code> 类型改成 <code class=\"codespan\">bar3D</code> 就可以变成一个三维的柱状图。</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/bar3D.png\"></p>\n<p>还有机器学习中会用到的三维曲面图 <a href=\"option-gl.html#series-surface\" target=\"_blank\">surface</a>，三维曲面图常用来表达平面上的数据走势，刚才的正态分布数据我们也可以像下面这样画成曲面图。</p>\n<pre><code class=\"lang-js\">var data = [];\n// 曲面图要求给入的数据是网格形式按顺序分布。\nfor (var y = -50; y &lt;= 50; y++) {\n    for (var x = -50; x &lt;= 50; x++) {\n        var z = gaussian(x, y);\n        data.push([x, y, z]);\n    }\n}\noption = {\n    grid3D: {},\n    xAxis3D: {},\n    yAxis3D: {},\n    zAxis3D: { max: 60 },\n    series: [{\n        type: &#39;surface&#39;,\n        data: data\n    }]\n}\n</code></pre>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/surface.png\"></p>\n<h2 id=\"-\">老板想要立体的柱状图效果</h2>\n<p>最后，我们经常会被问到如何用 ECharts 画只有二维数据的立体柱状图效果。一般来说我们是不推荐这么做的，因为这种不必要的立体柱状图很容易造成错误的表达，具体可以见我们 <a href=\"https://vis.baidu.com/chartusage/bar/\" target=\"_blank\">柱状图使用指南</a> 中的解释。</p>\n<p>但是如果有一些其他因素导致必须得画成立体的柱状图的话，用 GL 也可以实现。<a href=\"https://gallery.echartsjs.com/explore.html?u=bd-3056387051\" target=\"_blank\">丶灬豆奶</a> 和 <a href=\"https://gallery.echartsjs.com/explore.html?u=bd-809368804\" target=\"_blank\">阿洛儿啊</a> 在 Gallery 已经写了类似的例子，大家可以参考。</p>\n<p><a href=\"https://gallery.echartsjs.com/explore.html?u=bd-3056387051\" target=\"_blank\">3D堆积柱状图</a></p>\n<p><a href=\"https://gallery.echartsjs.com/editor.html?c=xryQDPYK0b\" target=\"_blank\">3D柱状图</a></p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/bar3D-2d-data.png\"></p>\n"
  },
  "在微信小程序中使用 ECharts": {
    "desc": "<p>我们接到了很多微信小程序开发者的反馈，表示他们强烈需要像 Apache ECharts<sup>TM</sup> 这样的可视化工具。但是微信小程序是不支持 DOM 操作的，Canvas 接口也和浏览器不尽相同。</p>\n<p>因此，我们和微信小程序官方团队合作，提供了 ECharts 的微信小程序版本。开发者可以通过熟悉的 ECharts 配置方式，快速开发图表，满足各种可视化需求。</p>\n<h2 id=\"-\">体验示例小程序</h2>\n<p>在微信中扫描下面的二维码即可体验 ECharts Demo：</p>\n<p><img width=\"auto\" height=\"auto\" src=\"https://cdn.jsdelivr.net/gh/ecomfe/echarts-for-weixin/img/weixin-app.jpg\"></p>\n<h2 id=\"-\">下载</h2>\n<p>为了兼容小程序 Canvas，我们提供了一个小程序的组件，用这种方式可以方便地使用 ECharts。</p>\n<p>首先，下载 GitHub 上的 <a href=\"https://github.com/ecomfe/echarts-for-weixin\" target=\"_blank\">ecomfe/echarts-for-weixin</a> 项目。</p>\n<p>其中，<code class=\"codespan\">ec-canvas</code> 是我们提供的组件，其他文件是如何使用该组件的示例。</p>\n<p><code class=\"codespan\">ec-canvas</code> 目录下有一个 <code class=\"codespan\">echarts.js</code>，默认我们会在每次 <code class=\"codespan\">echarts-for-weixin</code> 项目发版的时候替换成最新版的 ECharts。如有必要，可以自行从 ECharts 项目中下载<a href=\"https://github.com/apache/echarts/releases\" target=\"_blank\">最新发布版</a>，或者从<a href=\"https://echarts.apache.org/builder.html\" target=\"_blank\">官网自定义构建</a>以减小文件大小。</p>\n<h2 id=\"-\">引入组件</h2>\n<p>微信小程序的项目创建可以参见<a href=\"https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/\" target=\"_blank\">微信公众平台官方文档</a>。</p>\n<p>在创建项目之后，可以将下载的 <a href=\"https://github.com/ecomfe/echarts-for-weixin\" target=\"_blank\">ecomfe/echarts-for-weixin</a> 项目完全替换新建的项目，然后将修改代码；或者仅拷贝 <code class=\"codespan\">ec-canvas</code> 目录到新建的项目下，然后做相应的调整。</p>\n<p>如果采用完全替换的方式，需要将 <code class=\"codespan\">project.config.json</code> 中的 <code class=\"codespan\">appid</code> 替换成在公众平台申请的项目 id。<code class=\"codespan\">pages</code> 目录下的每个文件夹是一个页面，可以根据情况删除不需要的页面，并且在 <code class=\"codespan\">app.json</code> 中删除对应页面。</p>\n<p>如果仅拷贝 <code class=\"codespan\">ec-canvas</code> 目录，则可以参考 <code class=\"codespan\">pages/bar</code> 目录下的几个文件的写法。下面，我们具体地说明。</p>\n<h2 id=\"-\">创建图表</h2>\n<p>首先，在 <code class=\"codespan\">pages/bar</code> 目录下新建以下几个文件：<code class=\"codespan\">index.js</code>、 <code class=\"codespan\">index.json</code>、 <code class=\"codespan\">index.wxml</code>、 <code class=\"codespan\">index.wxss</code>。并且在 <code class=\"codespan\">app.json</code> 的 <code class=\"codespan\">pages</code> 中增加 <code class=\"codespan\">&#39;pages/bar/index&#39;</code>。</p>\n<p><code class=\"codespan\">index.json</code> 配置如下：</p>\n<pre><code class=\"lang-json\">{\n  &quot;usingComponents&quot;: {\n    &quot;ec-canvas&quot;: &quot;../../ec-canvas/ec-canvas&quot;\n  }\n}\n</code></pre>\n<p>这一配置的作用是，允许我们在 <code class=\"codespan\">pages/bar/index.wxml</code> 中使用 <code class=\"codespan\">&lt;ec-canvas&gt;</code> 组件。注意路径的相对位置要写对，如果目录结构和本例相同，就应该像上面这样配置。</p>\n<p><code class=\"codespan\">index.wxml</code> 中，我们创建了一个 <code class=\"codespan\">&lt;ec-canvas&gt;</code> 组件，内容如下：</p>\n<pre><code class=\"lang-xml\">&lt;view class=&quot;container&quot;&gt;\n  &lt;ec-canvas id=&quot;mychart-dom-bar&quot; canvas-id=&quot;mychart-bar&quot; ec=&quot;{{ ec }}&quot;&gt;&lt;/ec-canvas&gt;\n&lt;/view&gt;\n</code></pre>\n<p>其中 <code class=\"codespan\">ec</code> 是一个我们在 <code class=\"codespan\">index.js</code> 中定义的对象，它使得图表能够在页面加载后被初始化并设置。<code class=\"codespan\">index.js</code> 的结构如下：</p>\n<pre><code class=\"lang-js\">function initChart(canvas, width, height) {\n  const chart = echarts.init(canvas, null, {\n    width: width,\n    height: height\n  });\n  canvas.setChart(chart);\n\n  var option = {\n    ...\n  };\n  chart.setOption(option);\n  return chart;\n}\n\nPage({\n  data: {\n    ec: {\n      onInit: initChart\n    }\n  }\n});\n</code></pre>\n<p>这对于所有 ECharts 图表都是通用的，用户只需要修改上面 <code class=\"codespan\">option</code> 的内容，即可改变图表。<code class=\"codespan\">option</code> 的使用方法参见 <a href=\"option.html\" target=\"_blank\">ECharts 配置项文档</a>。对于不熟悉 ECharts 的用户，可以参见 <a href=\"tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts\" target=\"_blank\">5 分钟上手 ECharts</a> 教程。</p>\n<p>完整的例子请参见 <a href=\"https://github.com/ecomfe/echarts-for-weixin\" target=\"_blank\">ecomfe/echarts-for-weixin</a> 项目。</p>\n<h2 id=\"-\">暂不支持的功能</h2>\n<p>ECharts 中的绝大部分功能都支持小程序版本，因此这里仅说明不支持的功能，以及存在的问题。</p>\n<p>以下功能尚不支持，如果有相关需求请在 <a href=\"https://github.com/ecomfe/echarts-for-weixin/issues\" target=\"_blank\">issue</a> 中向我们反馈，对于反馈人数多的需求将优先支持：</p>\n<ul>\n<li>Tooltip</li>\n<li>图片</li>\n<li>多个 zlevel 分层</li>\n</ul>\n<p>此外，目前还有一些 bug 尚未修复，部分需要小程序团队配合上线支持，但不影响基本的使用。已知的 bug 包括：</p>\n<ul>\n<li>安卓平台：transform 的问题（会影响关系图边两端的标记位置、旭日图文字位置等）</li>\n<li>iOS 平台：半透明略有变深的问题</li>\n<li>iOS 平台：渐变色出现在定义区域之外的地方</li>\n</ul>\n<p>如有其它问题，也欢迎在 <a href=\"https://github.com/ecomfe/echarts-for-weixin/issues\" target=\"_blank\">issue</a> 中向我们反馈，谢谢！</p>\n"
  }
}