{"$schema":"http://echarts.baidu.com/doc/json-schem","option":{"type":"Object","properties":{"5 分钟上手 ECharts":{"type":["*"],"description":"<h2 id=\"-echarts\">获取 ECharts</h2>\n<p>你可以通过以下几种方式获取 ECharts。</p>\n<ol>\n<li><p>从<a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">官网下载界面</a>选择你需要的版本下载，根据开发者功能和体积上的需求，我们提供了不同打包的下载，如果你在体积上没有要求，可以直接下载<a href=\"http://echarts.baidu.com/dist/echarts.min.js\" target=\"_blank\">完整版本</a>。开发环境建议下载<a href=\"http://echarts.baidu.com/dist/echarts.js\" target=\"_blank\">源代码版本</a>，包含了常见的错误提示和警告。</p>\n</li>\n<li><p>在 ECharts 的 <a href=\"https://github.com/ecomfe/echarts\" target=\"_blank\">GitHub</a> 上下载最新的 <code>release</code> 版本，解压出来的文件夹里的 <code>dist</code> 目录里可以找到最新版本的 echarts 库。</p>\n</li>\n<li><p>通过 npm 获取 echarts，<code>npm install echarts --save</code>，详见“<a href=\"http://echarts.baidu.com/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>cdn 引入，你可以在 <a href=\"https://cdnjs.com/libraries/echarts\" target=\"_blank\">cdnjs</a>，<a href=\"https://npmcdn.com/echarts@latest/dist/\" target=\"_blank\">npmcdn</a> 或者国内的 <a href=\"http://www.bootcdn.cn/echarts/\" target=\"_blank\">bootcdn</a> 上找到 ECharts 的最新版本。</p>\n</li>\n</ol>\n<h2 id=\"-echarts\">引入 ECharts</h2>\n<p>ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。</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://www.echartsjs.com/examples/en/view.html?c=doc-example/getting-started&reset=1&edit=1\" width=\"600\" height=\"300\" ></iframe>\n\n\n<p>你也可以直接进入 <a href=\"https://www.echartsjs.com/examples/en/editor.html?c=doc-example/getting-started\" target=\"_blank\">ECharts Gallery</a> 中查看编辑示例</p>\n"},"自定义构建 ECharts":{"type":["*"],"description":"<p>一般来说，可以直接从 <a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">echarts 下载页</a> 中获取构建好的 echarts，也可以从 <a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">GitHub</a> 中的 <code>echarts/dist</code> 文件夹中获取构建好的 echarts，这都可以直接在浏览器端项目中使用。这些构建好的 echarts 提供了下面这几种定制：</p>\n<ul>\n<li>完全版：<code>echarts/dist/echarts.js</code>，体积最大，包含所有的图表和组件，所包含内容参见：<code>echarts/echarts.all.js</code>。</li>\n<li>常用版：<code>echarts/dist/echarts.common.js</code>，体积适中，包含常见的图表和组件，所包含内容参见：<code>echarts/echarts.common.js</code>。</li>\n<li>精简版：<code>echarts/dist/echarts.simple.js</code>，体积较小，仅包含最常用的图表和组件，所包含内容参见：<code>echarts/echarts.simple.js</code>。</li>\n</ul>\n<p>如果对文件体积有更严苛的要求，可以自己构建 echarts，能够仅仅包括自己所需要的图表和组件。自定义构建有几种方式：</p>\n<ul>\n<li><a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">在线自定义构建</a>：比较方便。</li>\n<li>使用 <code>echarts/build/build.js</code> 脚本自定义构建：比在线构建更灵活一点，并且支持多语言。</li>\n<li>直接使用构建工具（如 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>、<a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a>、<a href=\"http://browserify.org/\" target=\"_blank\">browserify</a>）自己构建：也是一种选择。</li>\n</ul>\n<p>下面我们举些小例子，介绍后两种方式。</p>\n<h2 id=\"-echarts\">准备工作：创建自己的工程和安装 echarts</h2>\n<p>使用命令行，创建自己的工程：</p>\n<pre><code class=\"lang-shell\">mkdir myProject\ncd myProject\n</code></pre>\n<p>在 <code>myProject</code> 目录下使用命令行，初始化工程的 <a href=\"https://www.npmjs.com/\" target=\"_blank\">npm</a> 环境并安装 echarts（这里前提是您已经安装了 <a href=\"https://www.npmjs.com/\" target=\"_blank\">npm</a>）：</p>\n<pre><code class=\"lang-shell\">npm init\nnpm install echarts --save\n</code></pre>\n<p>通过 npm 安装的 echarts 会出现在 <code>myProject/node_modules</code> 目录下，从而可以直接在项目代码中得到 echarts，例如：</p>\n<p>使用 ES Module：</p>\n<pre><code class=\"lang-js\">import * as echarts from &#39;echarts&#39;;\n</code></pre>\n<p>使用 CommonJS：</p>\n<pre><code class=\"lang-js\">var echarts = require(&#39;echarts&#39;)\n</code></pre>\n<p>下面仅以使用 ES Module 的方式来举例。</p>\n<h2 id=\"-echarts-\">使用 echarts 提供的构建脚本自定义构建</h2>\n<p>在这个例子中，我们要创建一个饼图，并且想自定义构建一个只含有饼图的 echarts 文件，从而能使 echarts 文件的大小比较小一些。</p>\n<p>echarts 已经提供了构建脚本 <code>echarts/build/build.js</code>，基于 <a href=\"https://nodejs.org\" target=\"_blank\">Node.js</a> 运行。我们可以在 <code>myProject</code> 目录下使用命令行，看到它的使用方式：</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --help\n</code></pre>\n<p>其中我们在这个例子里会用到的参数有：</p>\n<ul>\n<li><code>-i</code>：代码入口文件，可以是绝对路径或者基于当前命令行路径的相对路径。</li>\n<li><code>-o</code>：生成的 bundle 文件，可以是绝对路径或者基于当前命令行路径的相对路径。</li>\n<li><code>--min</code>：是否压缩文件（默认不压缩），并且去多余的打印错误信息的代码，形成生产环境可用的文件。</li>\n<li><code>--lang &lt;language shortcut or file path&gt;</code>：是否使用其他语言版本，默认是中文。例如：<code>--lang en</code> 表示使用英文，<code>--lang my/langXX.js</code> 表示构建时使用 <code>&lt;cwd&gt;/my/langXX.js</code> 替代 <code>echarts/lib/lang.js</code> 文件。</li>\n<li><code>--sourcemap</code>：是否输出 source map，以便于调试。</li>\n<li><code>--format</code>：输出的格式，可选 <code>&#39;umb&#39;</code>（默认）、<code>&#39;amd&#39;</code>、<code>&#39;iife&#39;</code>、<code>&#39;cjs&#39;</code>、<code>&#39;es&#39;</code>。</li>\n</ul>\n<p>既然我们想自定义构建一个只含有饼图的 echarts 文件，我们需要创建一个入口文件，可以命名为 <code>myProject/echarts.custom.js</code>，文件里会引用所需要的 echarts 模块：</p>\n<pre><code class=\"lang-js\">// 引入 echarts 主模块。\nexport * from &#39;echarts/src/echarts&#39;;\n// 引入饼图。\nimport &#39;echarts/src/chart/pie&#39;;\n// 在这个场景下，可以引用 `echarts/src` 或者 `echarts/lib` 下的文件（但是不可混用），\n// 参见下方的解释：“引用 `echarts/lib/**` 还是 `echarts/src/**`”。\n</code></pre>\n<p>然后我们可以在 <code>myProject</code> 目录下使用命令行，这样开始构建：</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js\n</code></pre>\n<p>这样，<code>myProject/lib/echarts.custom.min.js</code> 就生成了。我们可以创建 <code>myProject/pie.html</code> 来使用它：</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;myProject&lt;/title&gt;\n    &lt;!-- 引入 lib/echarts.custom.min.js --&gt;\n    &lt;script src=&quot;lib/echarts.custom.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&gt;\n        // 绘制图表。\n        echarts.init(document.getElementById(&#39;main&#39;)).setOption({\n            series: {\n                type: &#39;pie&#39;,\n                data: [\n                    {name: &#39;A&#39;, value: 1212},\n                    {name: &#39;B&#39;, value: 2323},\n                    {name: &#39;C&#39;, value: 1919}\n                ]\n            }\n        });\n    &lt;/script&gt;\n&lt;/body&gt;\n&lt;/html&gt;\n</code></pre>\n<p>然后在浏览器里打开 <code>myProject/pie.html</code>，就可以看到一个饼图：</p>\n<p><img width=\"300\" height=\"auto\" src=\"documents/asset/img/custom-build-pie.png\"></p>\n<h2 id=\"-\">允许被引用的模块</h2>\n<p>在自定义构建中，允许被引用的模块，全声明在 <a href=\"https://github.com/ecomfe/echarts/blob/master/echarts.all.js\" target=\"_blank\"><code>myProject/node_module/echarts/echarts.all.js</code></a> 和 <a href=\"https://github.com/ecomfe/echarts/blob/master/src/export.js\" target=\"_blank\"><code>myProject/node_module/echarts/src/export.js</code></a> 中。echarts 和 zrender 源代码中的其他模块，都是 echarts 的内部模块，<strong>不应该去引用</strong>。因为在后续 echarts 版本升级中，内部模块的接口和功能可能变化，甚至模块本身也可能被移除。</p>\n<h2 id=\"-echarts-lib-echarts-src-\">引用 <code>echarts/lib/**</code> 还是 <code>echarts/src/**</code></h2>\n<ul>\n<li>项目中如果直接引用 echarts 里的一些模块并自行构建，应该使用 <code>echarts/lib/**</code> 路径，而不可使用 <code>echarts/src/**</code>。</li>\n<li>当使用构建脚本 <code>echarts/build/build.js</code> 打包 bundle，那么两者可以选其一使用（不可混用），使用 <code>echarts/src/**</code> 可以获得稍微小一些的文件体积。</li>\n</ul>\n<blockquote>\n<p>原因是：目前，<code>echarts/src/**</code> 中是采用 ES Module 的源代码，<code>echarts/lib/**</code> 中是 <code>echarts/src/**</code> 编译成为 CommonJS 后的产物（编译成 CommonJS 是为了向后兼容一些不支持 ES Module 的老版本 NodeJS 和 webpack）。\n因为历史上，各个 echarts 扩展、各个用户项目，一直是使用的包路径是 <code>echarts/lib/**</code>，所以这个路径不应该改变，否则，可能导致混合使用 <code>echarts/src/**</code> 和 <code>echarts/lib/**</code> 得到两个不同的 echarts 名空间，造成问题。而使用 <code>echarts/build/build.js</code> 打包 bundle 时没有涉及这个问题，<code>echarts/src/**</code> 中的 ES Module 便于静态分析从而得到稍微小些的文件体积。</p>\n</blockquote>\n<h2 id=\"-rollup-\">直接使用 rollup 自定义构建</h2>\n<p>上文中介绍了如何使用 echarts 提供的脚本 <code>echarts/build/build.js</code> 自定义构建。与此并列的另一种选择是，我们直接使用构建工具（如 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>、<a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a>、<a href=\"http://browserify.org/\" target=\"_blank\">browserify</a>）自定义构建，并且把 echarts 代码和项目代码在构建成一体。在一些项目中可能需要这么做。下面我们仅仅介绍如何使用 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> 来构建。<a href=\"https://webpack.github.io/\" target=\"_blank\">webpack</a> 和 <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a> 与此类同，不赘述。</p>\n<p>首先我们在 <code>myProject</code> 目录下使用 npm 安装 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a>：</p>\n<pre><code class=\"lang-shell\">npm install rollup --save-dev\nnpm install rollup-plugin-node-resolve --save-dev\nnpm install rollup-plugin-uglify --save-dev\n</code></pre>\n<p>接下来创建项目 JS 文件 <code>myProject/line.js</code> 来绘制图表，内容为：</p>\n<pre><code class=\"lang-js\">// 引入 echarts 主模块。\nimport * as echarts from &#39;echarts/lib/echarts&#39;;\n// 引入折线图。\nimport &#39;echarts/lib/chart/line&#39;;\n// 引入提示框组件、标题组件、工具箱组件。\nimport &#39;echarts/lib/component/tooltip&#39;;\nimport &#39;echarts/lib/component/title&#39;;\nimport &#39;echarts/lib/component/toolbox&#39;;\n\n// 基于准备好的dom，初始化 echarts 实例并绘制图表。\necharts.init(document.getElementById(&#39;main&#39;)).setOption({\n    title: {text: &#39;Line Chart&#39;},\n    tooltip: {},\n    toolbox: {\n        feature: {\n            dataView: {},\n            saveAsImage: {\n                pixelRatio: 2\n            },\n            restore: {}\n        }\n    },\n    xAxis: {},\n    yAxis: {},\n    series: [{\n        type: &#39;line&#39;,\n        smooth: true,\n        data: [[12, 5], [24, 20], [36, 36], [48, 10], [60, 10], [72, 20]]\n    }]\n});\n</code></pre>\n<p>对于不支持 ES Module 的浏览器而言，刚才创建的 <code>myProject/line.js</code> 还不能直接被网页引用并在浏览器中运行，需要进行构建。使用 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> 构建前，需要创建它的配置文件 <code>myProject/rollup.config.js</code>，内容如下：</p>\n<pre><code class=\"lang-js\">// 这个插件用于在 `node_module` 文件夹（即 npm 用于管理模块的文件夹）中寻找模块。比如，代码中有\n// `import &#39;echarts/lib/chart/line&#39;;` 时，这个插件能够寻找到\n// `node_module/echarts/lib/chart/line.js` 这个模块文件。\nimport nodeResolve from &#39;rollup-plugin-node-resolve&#39;;\n// 用于压缩构建出的代码。\nimport uglify from &#39;rollup-plugin-uglify&#39;;\n// 用于多语言支持（如果不需要可忽略此 plugin）。\n// import ecLangPlugin from &#39;echarts/build/rollup-plugin-ec-lang&#39;;\n\nexport default {\n    name: &#39;myProject&#39;,\n    // 入口代码文件，就是刚才所创建的文件。\n    input: &#39;./line.js&#39;,\n    plugins: [\n        nodeResolve(),\n        // ecLangPlugin({lang: &#39;en&#39;}),\n        // 消除代码中的 __DEV__ 代码段，从而不在控制台打印错误提示信息。\n        uglify()\n    ],\n    output: {\n        // 以 UMD 格式输出，从而能在各种浏览器中加载使用。\n        format: &#39;umd&#39;,\n        // 输出 source map 便于调试。\n        sourcemap: true,\n        // 输出文件的路径。\n        file: &#39;lib/line.min.js&#39;\n    }\n};\n</code></pre>\n<p>然后在 <code>myProject</code> 目录下使用命令行，构建工程代码 <code>myProject/line.js</code>：</p>\n<pre><code class=\"lang-shell\">./node_modules/.bin/rollup -c\n</code></pre>\n<blockquote>\n<p>其中 <code>-c</code> 表示让 <code>rollup</code> 使用我们刚才创建的 <code>myProject/rollup.config.js</code> 文件作为配置文件。</p>\n</blockquote>\n<p>构建生成的 <code>myProject/lib/line.min.js</code> 文件包括了工程代码和 echarts 代码，并且仅仅包括我们所需要的图和组件，并且可以在浏览器中使用。我们可以用一个示例页面来测试一下，创建文件 <code>myProject/line.html</code>，内容如下：</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;myProject&lt;/title&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;!-- 引入刚才构建好的文件。 --&gt;\n    &lt;script src=&quot;lib/line.min.js&quot;&gt;&lt;/script&gt;\n&lt;/body&gt;\n&lt;/html&gt;\n</code></pre>\n<p>在浏览器里打开 <code>myProject/line.html</code> 则会得到如下效果：</p>\n<p><img width=\"500\" height=\"auto\" src=\"documents/asset/img/custom-build-line.png\"></p>\n<h2 id=\"-\">多语言支持</h2>\n<p>上面的例子中能看到，工具箱组件（toolbox）的提示文字是中文。本质上，echarts 图表显示出来的文字，都可以通过 <code>option</code> 来定制，改成任意语言。但是如果想“默认就是某种语言”，则需要通过构建来实现。</p>\n<p>在上面的例子中，可以在 <code>echarts/build/build.js</code> 的参数中指定语言：</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang en\n</code></pre>\n<p>表示使用内置的英文。此外还可以是 <code>--lang fi</code>。</p>\n<pre><code class=\"lang-shell\">node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang my/langXX.js\n</code></pre>\n<p>表示在构建时使用 <code>myProject/my/langXX.js</code> 文件来替换 <code>myProject/node_modules/echarts/lib/lang.js</code> 文件。这样可以在 <code>myProject/my/langXX.js</code> 文件中自定义语言。注意这种方式中，必须指定 <code>-o</code> 或者 <code>--output</code>。</p>\n<p>另外，上面的 rollup 插件 <code>echarts/build/rollup-plugin-ec-lang</code> 也可以传入同样的参数，实现同样的功能。</p>\n"},"在 webpack 中使用 ECharts":{"type":["*"],"description":"<p><a href=\"https://webpack.github.io/\" target=\"_blank\">Webpack</a> 是目前比较流行的模块打包工具，你可以在使用 webpack 的项目中轻松的引入和打包 ECharts，这里假设你已经对 webpack 具有一定的了解并且在自己的项目中使用。</p>\n<h2 id=\"npm-echarts\">npm 安装 ECharts</h2>\n<p>在 <code>3.1.1</code> 版本之前 ECharts 在 npm 上的 package 是非官方维护的，从 <code>3.1.1</code> 开始由官方 <a href=\"https://github.com/ecomfe/\" target=\"_blank\">EFE</a> 维护 npm 上 ECharts 和 zrender 的 package。</p>\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<p>通过 npm 上安装的 ECharts 和 zrender 会放在<code>node_modules</code>目录下。可以直接在项目代码中 <code>require(&#39;echarts&#39;)</code> 得到 ECharts。</p>\n<pre><code class=\"lang-js\">var echarts = require(&#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>默认使用 <code>require(&#39;echarts&#39;)</code> 得到的是已经加载了所有图表和组件的 ECharts 包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。</p>\n<p>例如上面示例代码中只用到了柱状图，提示框和标题组件，因此在引入的时候也只需要引入这些模块，可以有效的将打包后的体积从 400 多 KB 减小到 170 多 KB。</p>\n<pre><code class=\"lang-js\">// 引入 ECharts 主模块\nvar echarts = require(&#39;echarts/lib/echarts&#39;);\n// 引入柱状图\nrequire(&#39;echarts/lib/chart/bar&#39;);\n// 引入提示框和标题组件\nrequire(&#39;echarts/lib/component/tooltip&#39;);\nrequire(&#39;echarts/lib/component/title&#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<p>可以按需引入的模块列表见 <a href=\"https://github.com/ecomfe/echarts/blob/master/index.js\" target=\"_blank\">https://github.com/ecomfe/echarts/blob/master/index.js</a></p>\n<p>对于流行的模块打包工具 <a href=\"http://browserify.org/\" target=\"_blank\">browserify</a> 也是同样的用法，这里就不赘述了。而对于使用 <a href=\"https://rollupjs.org/\" target=\"_blank\">rollup</a> 的自定义构建，参见 <a href=\"http://echarts.baidu.com/tutorial.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%9E%84%E5%BB%BA%20ECharts\" target=\"_blank\">自定义构建 ECharts</a>。</p>\n"},"个性化图表的样式":{"type":["*"],"description":"<p>ECharts 提供了丰富的自定义配置选项，并且能够从全局、系列、数据三个层级去设置数据图形的样式。下面我们来看如何使用 ECharts 实现下面这个南丁格尔图：</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/en/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>xAxis</code>，<code>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://www.echartsjs.com/examples/en/view.html?c=doc-example/tutorial-styling-step0&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>这里<code>data</code>属性值不像入门教程里那样每一项都是单个数值，而是一个包含 <code>name</code> 和 <code>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://www.echartsjs.com/examples/en/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://www.echartsjs.com/examples/en/view.html?c=doc-example/tutorial-styling-step2&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p><code>itemStyle</code>的<code>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://www.echartsjs.com/examples/en/view.html?c=doc-example/tutorial-styling-step3&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>跟<code>itemStyle</code>一样，<code>label</code>和<code>labelLine</code>的样式也有<code>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://www.echartsjs.com/examples/en/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\">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://www.echartsjs.com/examples/en/view.html?c=doc-example/tutorial-styling-step5&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n\n\n\n"},"ECharts 中的样式简介":{"type":["*"],"description":"<p>本文主要是大略概述，用哪些方法，可以设置设置样式，改变图形元素或者文字的颜色、明暗、大小等。</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=\"http://echarts.baidu.com/examples/index.html\" target=\"_blank\">示例集合</a> 中，可以选择 “Theme”，直接看到采用主题的效果。</p>\n<p>ECharts4 开始，除了一贯的默认主题外，新内置了两套主题，分别为 <code>&#39;light&#39;</code> 和 <code>&#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=\"http://echarts.baidu.com/theme-builder/\" 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>itemStyle</code>、<code>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>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"},"异步数据加载和更新":{"type":["*"],"description":"<h2 id=\"-\">异步加载</h2>\n<p><a href=\"#getting-started\">入门示例</a>中的数据是在初始化后<code>setOption</code>中直接填入的，但是很多时候可能数据需要异步加载后再填入。<code>ECharts</code> 中实现异步数据的更新非常简单，在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 <code>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: [&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</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://www.echartsjs.com/examples/en/view.html?c=doc-example/tutorial-async&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n<p>ECharts 中在更新数据的时候需要通过<code>name</code>属性对应到相应的系列，上面示例中如果<code>name</code>不存在也可以根据系列的顺序正常更新，但是更多时候推荐更新数据的时候加上系列的<code>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://www.echartsjs.com/examples/en/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://www.echartsjs.com/examples/en/view.html?c=doc-example/tutorial-dynamic-data&edit=1&reset=1\" width=\"400\" height=\"300\" ></iframe>\n\n\n\n"},"使用 dataset 管理数据":{"type":["*"],"description":"<p>ECharts 4 开始支持了 <code>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>数据集</code>（<code>dataset</code>）组件来单独声明数据，它带来了这些效果：</p>\n<ul>\n<li>能够贴近这样的数据可视化常见思维方式：基于数据（<code>dataset</code> 组件来提供数据），指定数据到视觉的映射（由 <a href=\"option.html#series.encode\" target=\"_blank\">encode</a> 属性来指定映射），形成图表。</li>\n<li>数据和其他配置可以被分离开来，使用者相对便于进行单独管理，也省去了一些数据处理的步骤。</li>\n<li>数据可以被多个系列或者组件复用，对于大数据，不必为每个系列创建一份。</li>\n<li>支持更多的数据的常用格式，例如二维数组、对象数组等，一定程度上避免使用者为了数据格式而进行转换。</li>\n</ul>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>入门例子</strong></p>\n<p>下面是一个最简单的 <code>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://www.echartsjs.com/examples/en/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        // 这里指定了维度名的顺序，从而可以利用默认的维度到坐标轴的映射。\n        // 如果不指定 dimensions，也可以通过指定 series.encode 完成映射，参见后文。\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<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>数据到图形的映射</strong></p>\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<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>按行还是按列做映射</strong></p>\n<p>有了数据表之后，使用者可以灵活得配置：数据如何对应到轴和图形系列。</p>\n<p>用户可以使用 <code>seriesLayoutBy</code> 配置项，改变图表对于行列的理解。<code>seriesLayoutBy</code> 可取值：</p>\n<ul>\n<li>&#39;column&#39;: 默认值。系列被安放到 <code>dataset</code> 的列上面。</li>\n<li>&#39;row&#39;: 系列被安放到 <code>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://www.echartsjs.com/examples/en/view.html?c=dataset-series-layout-by&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>维度（dimension）</strong></p>\n<p>介绍 <code>encode</code> 之前，首先要介绍“维度（dimension）”的概念。</p>\n<p>常用图表所描述的数据大部分是“二维表”结构，上述的例子中，我们都使用二维数组来容纳二维表。现在，当我们把系列（series）对应到“列”的时候，那么每一列就称为一个“维度（dimension）”，而每一行称为数据项（item）。反之，如果我们把系列（series）对应到表行，那么每一行就是“维度（dimension）”，每一列就是数据项（item）。</p>\n<p>维度可以有单独的名字，便于在图表中显示。维度名（dimension name）可以在定义在 dataset 的第一行（或者第一列）。例如上面的例子中，<code>&#39;score&#39;</code>、<code>&#39;amount&#39;</code>、<code>&#39;product&#39;</code> 就是维度名。从第二行开始，才是正式的数据。<code>dataset.source</code> 中第一行（列）到底包含不包含维度名，ECharts 默认会自动探测。当然也可以设置 <code>dataset.sourceHeader: true</code> 显示声明第一行（列）就是维度，或者 <code>dataset.sourceHeader: false</code> 表明第一行（列）开始就直接是数据。</p>\n<p>维度的定义，也可以使用单独的 <code>dataset.dimensions</code> 或者 <code>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>&#39;number&#39;</code>: 默认，表示普通数据。</li>\n<li><code>&#39;ordinal&#39;</code>: 对于类目、文本这些 string 类型的数据，如果需要能在数轴上使用，须是 &#39;ordinal&#39; 类型。ECharts 默认会自动判断这个类型。但是自动判断也是不可能很完备的，所以使用者也可以手动强制指定。</li>\n<li><code>&#39;time&#39;</code>: 表示时间数据。设置成 <code>&#39;time&#39;</code> 则能支持自动解析数据成时间戳（timestamp），比如该维度的数据是 &#39;2017-05-10&#39;，会自动被解析。如果这个维度被用在时间数轴（<a href=\"option.html#xAxis.type\" target=\"_blank\">axis.type</a> 为 <code>&#39;time&#39;</code>）上，那么会被自动设置为 <code>&#39;time&#39;</code> 类型。时间类型的支持参见 <a href=\"option.html#series.data\" target=\"_blank\">data</a>。</li>\n<li><code>&#39;float&#39;</code>: 如果设置成 <code>&#39;float&#39;</code>，在存储时候会使用 <code>TypedArray</code>，对性能优化有好处。</li>\n<li><code>&#39;int&#39;</code>: 如果设置成 <code>&#39;int&#39;</code>，在存储时候会使用 <code>TypedArray</code>，对性能优化有好处。</li>\n</ul>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>数据到图形的映射（encode）</strong></p>\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://www.echartsjs.com/examples/en/view.html?c=doc-example/dataset-encode-simple0&edit=1&reset=1\" width=\"500\" height=\"300\" ></iframe>\n\n\n\n<p><code>encode</code> 声明的基本结构如下，其中冒号左边是坐标系、标签等特定名称，如 <code>&#39;x&#39;</code>, <code>&#39;y&#39;</code>, <code>&#39;tooltip&#39;</code> 等，冒号右边是数据中的维度名（string 格式）或者维度的序号（number 格式，从 0 开始计数），可以指定一个或多个维度（使用数组）。通常情况下，下面各种信息不需要所有的都写，按需写即可。</p>\n<p>下面是 encode 支持的属性：</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>encode</code> 的示例：</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/en/view.html?c=dataset-encode1&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>视觉通道（颜色、尺寸等）的映射</strong></p>\n<p>我们可以使用 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a> 组件进行视觉通道的映射。详见 <code>visualMap</code> 文档的介绍。这是一个示例：</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/en/view.html?c=dataset-encode0&edit=1&reset=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>默认的映射</strong></p>\n<p>指的一提的是，ECharts 针对最常见直角坐标系中的图表（折线图、柱状图、散点图、K线图等）、饼图、漏斗图，给出了简单的默认的映射，从而不需要配置 <code>encode</code> 也可以出现图表（一旦给出了 <code>encode</code>，那么就不会采用默认映射）。默认的映射规则不易做得复杂，基本规则大体是：</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>encode</code>，也并不复杂。</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/en/view.html?c=dataset-default&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>几个常见的映射设置方式</strong></p>\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>&#39;Life Expectancy&#39;</code>，encode 中拼成了 <code>&#39;Life Expectency&#39;</code>。</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>数据的各种格式</strong></p>\n<p>多数常见图表中，数据适于用二维表的形式描述。广为使用的数据表格软件（如 MS Excel、Numbers）或者关系数据数据库都是二维表。他们的数据可以导出成 JSON 格式，输入到 <code>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<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>多个 dataset 和他们的引用</strong></p>\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<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>ECharts 3 的数据设置方式（series.data）仍正常使用</strong></p>\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>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>dataset</code>。</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>其他</strong></p>\n<p>目前并非所有图表都支持 dataset。支持 dataset 的图表有：\n<code>line</code>、<code>bar</code>、<code>pie</code>、<code>scatter</code>、<code>effectScatter</code>、<code>parallel</code>、<code>candlestick</code>、<code>map</code>、<code>funnel</code>、<code>custom</code>。\n后续会有更多的图表进行支持。</p>\n<p>最后，给出一个示例，多个图表共享一个 <code>dataset</code>，并带有联动交互：</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/en/view.html?c=dataset-link&edit=1&reset=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n\n\n"},"在图表中加入交互组件":{"type":["*"],"description":"<p>除了图表外 ECharts 中，提供了很多交互组件。例如：</p>\n<p><code>图例组件</code> <a href=\"option.html#legend\" target=\"_blank\">legend</a>、<code>标题组件</code> <a href=\"option.html#title\" target=\"_blank\">title</a>、<code>视觉映射组件</code> <a href=\"option.html#visualMap\" target=\"_blank\">visualMap</a>、<code>数据区域缩放组件</code> <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a>、<code>时间线组件</code> <a href=\"option.html#timeline\" target=\"_blank\">timeline</a></p>\n<p>下面以 <code>数据区域缩放组件</code> <a href=\"option.html#dataZoom\" target=\"_blank\">dataZoom</a> 为例，介绍如何加入这种组件。</p>\n<p><br></p>\n<h2>数据区域缩放组件（dataZoom）介绍</h2>\n\n<p>『概览数据整体，按需关注数据细节』是数据可视化的基本交互需求。<code>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://www.echartsjs.com/examples/en/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>dataZoom</code> 组件是对 <code>数轴（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>dataZoom</code> 控制哪个或哪些数轴。</p>\n</blockquote>\n<ul>\n<li><p><code>dataZoom</code> 组件可同时存在多个，起到共同控制的作用。控制同一个数轴的组件，会自动联动。下面例子中会详细说明。</p>\n</li>\n<li><p><code>dataZoom</code> 的运行原理是通过『数据过滤』来达到『数据窗口缩放』的效果。</p>\n<p>  数据过滤模式的设置不同，效果也不同，参见：<a href=\"option.html#dataZoom.filterMode\" target=\"_blank\">dataZoom.filterMode</a>。</p>\n</li>\n<li><p><code>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>toolbox</code>中。</p>\n</li>\n</ul>\n<p><br></p>\n<h2>在代码加入 dataZoom 组件</h2>\n\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://www.echartsjs.com/examples/en/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>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://www.echartsjs.com/examples/en/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://www.echartsjs.com/examples/en/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"},"移动端自适应":{"type":["*"],"description":"<p>ECharts 工作在用户指定高宽的 DOM 节点（容器）中。ECharts 的『组件』和『系列』都在这个 DOM 节点中，每个节点都可以由用户指定位置。图表库内部并不适宜实现 DOM 文档流布局，因此采用类似绝对布局的简单容易理解的布局方式。但是有时候容器尺寸极端时，这种方式并不能自动避免组件重叠的情况，尤其在移动端小屏的情况下。</p>\n<p>另外，有时会出现一个图表需要同时在PC、移动端上展现的场景。这需要 ECharts 内部组件随着容器尺寸变化而变化的能力。</p>\n<p>为了解决这个问题，ECharts 完善了组件的定位设置，并且实现了类似 <a href=\"http://www.w3.org/TR/css3-mediaqueries/\" target=\"_blank\">CSS Media Query</a> 的自适应能力。</p>\n<p><br></p>\n<h2>ECharts组件的定位和布局</h2>\n\n\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>number</code> 形式书写（不写单位）。例如 <code>{left: 23, height: 400}</code>。</p>\n</li>\n<li><p>百分比</p>\n<p>  表示占 DOM 容器高宽的百分之多少，用 <code>string</code> 形式书写。例如 <code>{right: &#39;30%&#39;, bottom: &#39;40%&#39;}</code>。</p>\n</li>\n<li><p>位置描述</p>\n<ul>\n<li>可以设置 <code>left: &#39;center&#39;</code>，表示水平居中。</li>\n<li>可以设置 <code>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>left</code>、<code>right</code>、<code>width</code> 三个量中，只需两个量有值即可，因为任两个量可以决定组件的位置和大小，例如 <code>left</code> 和 <code>right</code> 或者 <code>right</code> 和 <code>width</code> 都可以决定组件的位置和大小。\n纵向，<code>top</code>、<code>bottom</code>、<code>height</code> 三个量，和横向类同不赘述。</p>\n<p><br>\n<strong><code>center</code> / <code>radius</code> 定位方式：</strong></p>\n<ul>\n<li><p><code>center</code></p>\n<p>  是一个数组，表示 <code>[x, y]</code>，其中，<code>x</code>、<code>y</code>可以是『绝对值』或者『百分比』，含义和前述相同。</p>\n</li>\n<li><p><code>radius</code></p>\n<p>  是一个数组，表示 <code>[内半径, 外半径]</code>，其中，内外半径可以是『绝对值』或者『百分比』，含义和前述相同。</p>\n<p>  在自适应容器大小时，百分比设置是很有用的。</p>\n</li>\n</ul>\n<p><br>\n<strong>横向（horizontal）和纵向（vertical）</strong></p>\n<p>ECharts的『外观狭长』型的组件（如 <code>legend</code>、<code>visualMap</code>、<code>dataZoom</code>、<code>timeline</code>等），大多提供了『横向布局』『纵向布局』的选择。例如，在细长的移动端屏幕上，可能适合使用『纵向布局』；在PC宽屏上，可能适合使用『横向布局』。</p>\n<p>横纵向布局的设置，一般在『组件』或者『系列』的 <code>orient</code> 或者 <code>layout</code> 配置项上，设置为 <code>&#39;horizontal&#39;</code> 或者 <code>&#39;vertical&#39;</code>。</p>\n<p><br>\n<strong>于 ECharts2 的兼容：</strong></p>\n<p>ECharts2 中的 <code>x/x2/y/y2</code> 的命名方式仍被兼容，对应于 <code>left/right/top/bottom</code>。但是建议写 <code>left/right/top/bottom</code>。</p>\n<p>位置描述中，为兼容 ECharts2，可以支持一些看起来略奇怪的设置：<code>left: &#39;right&#39;</code>、<code>left: &#39;left&#39;</code>、<code>top: &#39;bottom&#39;</code>、<code>top: &#39;top&#39;</code>。这些语句分别等效于：<code>right: 0</code>、<code>left: 0</code>、<code>bottom: 0</code>、<code>top: 0</code>，写成后者就不奇怪了。</p>\n<p><br></p>\n<h2>Media Query</h2>\n\n<p><a href=\"http://www.w3.org/TR/css3-mediaqueries/#media1\" target=\"_blank\">Media Query</a> 提供了『随着容器尺寸改变而改变』的能力。</p>\n<p>如下例子，可尝试拖动<strong>右下角的圆点</strong>，随着尺寸变化，legend 和 系列会自动改变布局位置和方式。</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/en/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    baseOption: { // 这里是基本的『原子option』。\n        title: {...},\n        legend: {...},\n        series: [{...}, {...}, ...],\n        ...\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>baseOption</code>、以及 <code>media</code> 每个 option 都是『原子 option』，即普通的含有各组件、系列定义的 option。而由『原子option』组合成的整个 option，我们称为『复合 option』。<code>baseOption</code> 是必然被使用的，此外，满足了某个 <code>query</code> 条件时，对应的 option 会被使用 <code>chart.mergeOption()</code> 来 merge 进去。</p>\n<p><strong>query：</strong></p>\n<p>每个 <code>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>width</code>、<code>height</code>、<code>aspectRatio</code>（长宽比）。每个属性都可以加上 <code>min</code> 或 <code>max</code> 前缀。比如，<code>minWidth: 200</code> 表示『大于等于200px宽度』。两个属性一起写表示『并且』，比如：<code>{minWidth: 200, maxHeight: 300}</code> 表示『大于等于200px宽度，并且小于等于300px高度』。</p>\n<p><strong>option：</strong></p>\n<p><code>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>query</code> 同时被满足，会都被 <code>mergeOption</code>，定义在后的后被 merge（即优先级更高）。</p>\n<p><strong>默认 query：</strong></p>\n<p>如果 <code>media</code> 中有某项不写 <code>query</code>，则表示『默认值』，即所有规则都不满足时，采纳这个option。</p>\n<p><strong>容器大小实时变化时的注意事项：</strong></p>\n<p>在不少情况下，并不需要容器DOM节点任意随着拖拽变化大小，而是只是根据不同终端设置几个典型尺寸。</p>\n<p>但是如果容器DOM节点需要能任意随着拖拽变化大小，那么目前使用时需要注意这件事：某个配置项，如果在某一个 <code>query option</code> 中出现，那么在其他 <code>query option</code> 中也必须出现，否则不能够回归到原来的状态。（<code>left/right/top/bottom/width/height</code> 不受这个限制。）</p>\n<p><strong>『复合 option』 中的 <code>media</code> 不支持 merge</strong></p>\n<p>也就是说，当第二（或三、四、五 ...）次 <code>chart.setOption(rawOption)</code> 时，如果 <code>rawOption</code> 是 <code>复合option</code>（即包含 <code>media</code> 列表），那么新的 <code>rawOption.media</code> 列表不会和老的 <code>media</code> 列表进行 merge，而是简单替代。当然，<code>rawOption.baseOption</code> 仍然会正常和老的 option 进行merge。</p>\n<p>其实，很少有场景需要使用『复合 option』来多次 <code>setOption</code>，而我们推荐的做法是，使用 mediaQuery 时，第一次setOption使用『复合 option』，后面 <code>setOption</code> 时仅使用 『原子 option』，也就是仅仅用 setOption 来改变 <code>baseOption</code>。</p>\n<p><br>\n最后看一个和时间轴结合的例子：</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/en/view.html?c=doc-example/bar-media-timeline&edit=1&reset=1\" width=\"750\" height=\"700\" ></iframe>\n\n\n\n\n\n"},"数据的视觉映射":{"type":["*"],"description":"<p>数据可视化是 <strong>数据</strong> 到 <strong>视觉元素</strong> 的映射过程（这个过程也可称为视觉编码，视觉元素也可称为视觉通道）。</p>\n<p>ECharts 的每种图表本身就内置了这种映射过程，比如折线图把数据映射到『线』，柱状图把数据映射到『长度』。一些更复杂的图表，如 <code>graph</code>、<code>事件河流图</code>、<code>treemap</code> 也都会做出他们内置的映射。</p>\n<p>此外，ECharts 还提供了 <a href=\"option.html#visualMap\" target=\"_blank\">visualMap 组件</a> 来提供通用的视觉映射。<code>visualMap</code> 组件中可以使用的视觉元素有：<br>\n<code>图形类别（symbol）</code>、<code>图形大小（symbolSize）</code><br>\n<code>颜色（color）</code>、<code>透明度（opacity）</code>、<code>颜色透明度（colorAlpha）</code>、<br>\n<code>颜色明暗度（colorLightness）</code>、<code>颜色饱和度（colorSaturation）</code>、<code>色调（colorHue）</code></p>\n<p>下面对 <code>visualMap</code> 组件的使用方式进行简要的介绍。</p>\n<p><br></p>\n<h2>数据和维度</h2>\n\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>visualMap</code> 。最常见的情况，<a href=\"option.html#series-scatter\" target=\"_blank\">气泡图（scatter）</a> 使用半径展现了第三个维度。</p>\n<p><br></p>\n<h2>visualMap 组件</h2>\n\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><br>\n<a href=\"option.html#visualMap-continuous\" target=\"_blank\">连续型（visualMapContinuous）</a>：</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/en/view.html?c=doc-example/map-visualMap-continuous&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><a href=\"option.html#visualMap-piecewise\" target=\"_blank\">分段型（visualMapPiecewise）</a>：</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/en/view.html?c=doc-example/scatter-visualMap-piecewise&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p><br>\n分段型视觉映射组件（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>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 中的事件和行为":{"type":["*"],"description":"<p>在 ECharts 的图表中用户的操作将会触发相应的事件。开发者可以监听这些事件，然后通过回调函数做相应的处理，比如跳转到一个地址，或者弹出对话框，或者做数据下钻等等。</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>&#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>&#39;click&#39;</code>、<code>&#39;dblclick&#39;</code>、<code>&#39;mousedown&#39;</code>、<code>&#39;mousemove&#39;</code>、<code>&#39;mouseup&#39;</code>、<code>&#39;mouseover&#39;</code>、<code>&#39;mouseout&#39;</code>、<code>&#39;globalout&#39;</code>、<code>&#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>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>query</code> 只对指定的组件的图形元素的触发回调：</p>\n<pre><code class=\"lang-js\">chart.on(eventName, query, handler);\n</code></pre>\n<p><code>query</code> 可为 <code>string</code> 或者 <code>Object</code>。</p>\n<p>如果为 <code>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>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>&#39;legendselectchanged&#39;</code>事件会由组件交互的行为触发，那除了用户的交互操作，有时候也会有需要在程序里调用方法触发图表的行为，诸如显示 tooltip，选中图例。</p>\n<p>在 ECharts 2.x 是通过 <code>myChart.component.tooltip.showTip</code> 这种形式调用相应的接口触发图表行为，入口很深，而且涉及到内部组件的组织。相对地，在 ECharts 3 里改为通过调用 <code>myChart.dispatchAction({ type: &#39;&#39; })</code> 触发图表行为，统一管理了所有动作，也可以方便地根据需要去记录用户的行为路径。</p>\n<p>常用的动作和动作对应参数在 <a href=\"api.html#action\" target=\"_blank\">action</a> 文档中有列出。</p>\n<p>下面示例演示了如何通过<code>dispatchAction</code>去轮流高亮饼图的每个扇形。</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/en/view.html?c=doc-example/pie-highlight&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n\n\n"},"小例子：自己实现拖拽":{"type":["*"],"description":"<p>介绍一个实现拖拽的小例子。这个例子是在原生 echarts 基础上做了些小小扩展，带有一定的交互性。通过这个例子，我们可以了解到，如何使用 echarts 提供的 API 实现定制化的富有交互的功能。</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/en/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<p><br></p>\n<h2>（一）实现基本的拖拽功能</h2>\n\n<p>在这个例子中，基础的图表是一个 <a href=\"http://echarts.baidu.com/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=\"http://echarts.baidu.com/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=\"http://echarts.baidu.com/api.html#echartsInstance.convertToPixel\" target=\"_blank\">convertToPixel</a> 这个 API，进行了从 data 到『像素坐标』的转换，从而得到了每个圆点应该在的位置，从而能绘制这些圆点。<code>myChart.convertToPixel(&#39;grid&#39;, dataItem)</code> 这句话中，第一个参数 <code>&#39;grid&#39;</code> 表示 <code>dataItem</code> 在 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid</a> 这个组件中（即直角坐标系）中进行转换。所谓『像素坐标』，就是以 echarts 容器 dom element 的左上角为零点的以像素为单位的坐标系中的坐标。</p>\n<p>注意这件事需要在第一次 setOption 后再进行，也就是说，须在坐标系（<a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid</a>）初始化后才能调用 <code>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=\"http://echarts.baidu.com/api.html#echartsInstance.convertFromPixel\" target=\"_blank\">convertFromPixel</a> 这个 API。它是 <a href=\"http://echarts.baidu.com/api.html#echartsInstance.convertToPixel\" target=\"_blank\">convertToPixel</a> 的逆向过程。<code>myChart.convertFromPixel(&#39;grid&#39;, this.position)</code> 表示把当前像素坐标转换成 <a href=\"http://echarts.baidu.com/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</code></pre>\n<p><br></p>\n<h2>（二）添加 tooltip 组件</h2>\n\n<p>到此，拖拽的基本功能就完成了。但是想要更进一步得实时看到拖拽过程中，被拖拽的点的 data 值的变化状况，我们可以使用 <a href=\"http://echarts.baidu.com/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=\"http://echarts.baidu.com/api.html#echartsInstance.dispatchAction\" target=\"_blank\">dispatchAction</a> 来显示隐藏 tooltip。用到了 <a href=\"http://echarts.baidu.com/api.html#action.tooltip.showTip\" target=\"_blank\">showTip</a>、<a href=\"http://echarts.baidu.com/api.html#action.tooltip.hideTip\" target=\"_blank\">hideTip</a>。</p>\n<p><br></p>\n<h2>（三）全部代码</h2>\n\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;http://echarts.baidu.com/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=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">dataZoom</a> 组件，可以制作一个直角坐标系上的绘图板等等。可以发挥想象力。</p>\n"},"小例子：实现日历图":{"type":["*"],"description":"<p>在ECharts中，我们新增了日历坐标系，如何快速写出一个日历图呢？</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/en/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>coordinateSystem: &#39;calendar&#39;,</code>和<code>calendar: { range: &#39;2017&#39; }</code>heatmap图就秒变为日历图了。</p>\n<blockquote>\n<p>若发现图表没有正确显示，你可以检查以下几种可能：</p>\n<ul>\n<li>JS文件是否正确加载；</li>\n<li><code>echarts</code> 变量是否存在；</li>\n<li>控制台是否报错;</li>\n<li>DOM 元素在 <code>echarts.init</code> 的时候是否有高度和宽度。</li>\n<li>若为 <code>type: heatmap</code>，检查是否配置了 <code>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</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>设置时间的范围，可支持某年、某月、某天，还可支持跨年</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.cellSize\" target=\"_blank\">cellSize</a>: <code>设置日历格的大小，可支持设置不同高宽，还可支持自适应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>也可以直接设置改日历图的整体高宽，让其基于已有的高宽全部自适应</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.orient\" target=\"_blank\">orient</a>: <code>设置坐标的方向，既可以横着也可以竖着</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.splitLine\" target=\"_blank\">splitLine</a>: <code>设置分隔线样式，也可以直接不显示</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.itemStyle\" target=\"_blank\">itemStyle</a>: <code>设置日历格的样式，背景色、方框线颜色大小类型、透明度均可自定义，甚至还能加阴影</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.dayLabel\" target=\"_blank\">dayLabel</a>: <code>设置坐标中 星期样式，可以设置星期从第几天开始，快捷设置中英文、甚至是自定义中英文混搭、或局部不显示、通过formatter 可以想怎么显示就怎么显示;</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.monthLabel\" target=\"_blank\">monthLabel</a>: <code>设置坐标中 月样式，和星期一样，可快捷设置中英文和自定义混搭</code></p>\n</li>\n<li><p><a href=\"option.html#calendar.yearLabel\" target=\"_blank\">yearLabel</a>: <code>设置坐标中 年样式，默认显示一年，通过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>ECharts</code> 坐标系，提供了在日历上绘制图表的能力; 所以除了制作常用的日历图外，我们可以在热力图、散点图、关系图中使用日历坐标系。</p>\n<p>在日历坐标系中使用热力图：</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/en/view.html?c=calendar-heatmap&edit=1&reset=1\" width=\"800\" height=\"300\" ></iframe>\n\n\n<p>在日历坐标系中使用散点图：</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/en/view.html?c=calendar-effectscatter&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<p>还可以混合放置不同的图表，例如下例子，同时放置了热力图和关系图：</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/en/view.html?c=calendar-graph&edit=1&reset=1\" width=\"800\" height=\"600\" ></iframe>\n\n\n<p><strong>其他更丰富的效果</strong></p>\n<p>灵活利用 <code>ECharts</code> 图表和坐标系的组合，以及 API，还可以实现更丰富的效果。</p>\n<p>例如，制作农历：</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/en/view.html?c=calendar-lunar&edit=1&reset=1\" width=\"600\" height=\"500\" ></iframe>\n\n\n<p>例如，使用 <code>chart.convertToPixel</code> 接口，在日历坐标系绘制饼图。</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/en/view.html?c=calendar-pie&edit=1&reset=1\" width=\"800\" height=\"640\" ></iframe>\n\n\n\n\n\n\n\n"},"旭日图":{"type":["*"],"description":"<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://www.echartsjs.com/examples/en/view.html?c=sunburst-monochrome&edit=1&reset=1\" width=\"700\" height=\"500\" ></iframe>\n\n\n<h2 id=\"-\">引入相关文件</h2>\n<p>旭日图是 ECharts 4.0 新增的图表类型，在<a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">官网下载页面</a>下载“完整版” ECharts，并将下载的 JavaScript 文件引入即可创建旭日图。</p>\n<h2 id=\"-\">最简单的旭日图</h2>\n<p>创建旭日图需要在 <code>series</code> 配置项中声明类型为 <code>&#39;sunburst&#39;</code> 的系列，并且以树形结构声明其 <code>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://www.echartsjs.com/examples/en/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>series.data.itemStyle</code> 的扇形块将会覆盖 <code>series.levels.itemStyle</code> 和 <code>series.itemStyle</code> 的设置。</p>\n<p>下面，我们将整体的颜色设为灰色 <code>&#39;#aaa&#39;</code>，将最内层的颜色设为蓝色 <code>&#39;blue&#39;</code>，将 <code>Aa</code>、<code>B</code> 这两块设为红色 <code>&#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://www.echartsjs.com/examples/en/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://www.echartsjs.com/examples/en/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>false</code> 关闭；或者将其设为 <code>&#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>&#39;descendant&#39;</code>（默认值）：高亮鼠标移动所在扇形块与其后代元素；</li>\n<li><code>&#39;ancestor&#39;</code>：高亮鼠标所在扇形块与其祖先元素；</li>\n<li><code>&#39;self&#39;</code>：仅高亮鼠标所在扇形块；</li>\n<li><code>&#39;none&#39;</code>：不会淡化（downplay）其他元素。</li>\n</ul>\n<p>上面提到的“高亮”，对于鼠标所在的扇形块，会使用 <code>emphasis</code> 样式；对于其他相关扇形块，则会使用 <code>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>highlightPolicy</code> 为 <code>&#39;descendant&#39;</code> 或 <code>&#39;ancestor&#39;</code> 的效果分别为：</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/en/view.html?c=doc-example/sunburst-highlight-descendant&edit=1&reset=1\" width=\"700\" height=\"350\" ></iframe>\n\n\n<iframe data-src=\"https://www.echartsjs.com/examples/en/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://www.echartsjs.com/examples/en/view.html?c=sunburst-book&edit=1&reset=1\" width=\"700\" height=\"600\" ></iframe>\n\n\n<iframe data-src=\"https://www.echartsjs.com/examples/en/view.html?c=sunburst-drink&edit=1&reset=1\" width=\"700\" height=\"600\" ></iframe>\n\n\n\n\n\n\n\n\n"},"自定义系列":{"type":["*"],"description":"<p><a href=\"http://echarts.baidu.com/option.html#series-custom\" target=\"_blank\">自定义系列（custom series）</a>，是一种系列的类型。它把绘制图形元素这一步留给开发者去做，从而开发者能在坐标系中自由绘制出自己需要的图表。</p>\n<p>echarts 为什么会要支持 <code>自定义系列</code> 呢？echarts 内置支持的图表类型是最常见的图表类型，但是图表类型是难于穷举的，有很多小众的需求 echarts 并不能内置的支持。那么就需要提供一种方式来让开发者自己扩展。另一方面，所提供的扩展方式要尽可能得简单，例如图形元素创建和释放、过渡动画、tooltip、<a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">数据区域缩放（dataZoom）</a>、<a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">视觉映射（visualMap）</a>等功能，尽量在 echarts 中内置得处理，使开发者不必纠结于这些细节。综上考虑形成了 <a href=\"http://echarts.baidu.com/option.html#series-custom\" target=\"_blank\">自定义系列（custom series）</a>。</p>\n<p><strong>例如，下面的例子使用 custom series 扩展出了 x-range 图：</strong></p>\n<iframe data-src=\"https://www.echartsjs.com/examples/en/view.html?c=custom-profile&reset=1&edit=1\" width=\"800\" height=\"500\" ></iframe>\n\n\n<p><strong>更多的例子参见：<a href=\"http://echarts.baidu.com/examples.html#chart-type-custom\" target=\"_blank\">custom examples</a></strong></p>\n<p>下面来介绍开发者怎么使用 <a href=\"http://echarts.baidu.com/option.html#series-custom\" target=\"_blank\">自定义系列（custom series）</a>。</p>\n<p><br></p>\n<h2>（一）renderItem 方法</h2>\n\n<p>开发者自定义的图形元素渲染逻辑，是通过书写 <code>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=\"http://echarts.baidu.com/option.html#series-custom.data\" target=\"_blank\">series.data</a> 中的每个数据项（为方便描述，这里称为 <code>dataItem</code>)，会调用此 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数。这个 <code>renderItem</code> 函数的职责，就是返回一个（或者一组）<code>图形元素定义</code>，<code>图形元素定义</code> 中包括图形元素的类型、位置、尺寸、样式等。echarts 会根据这些 <code>图形元素定义</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=\"http://echarts.baidu.com/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数提供了两个参数：</p>\n<ul>\n<li><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.params\" target=\"_blank\">params</a>：包含了当前数据信息（如 <code>seriesIndex</code>、<code>dataIndex</code> 等等）和坐标系的信息（如坐标系包围盒的位置和尺寸）。</li>\n<li><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">api</a>：是一些开发者可调用的方法集合（如 <code>api.value()</code>、<code>api.coord()</code>）。</li>\n</ul>\n<p><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数须返回根据此 <code>dataItem</code> 绘制出的图形元素的定义信息，参见 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.return\" target=\"_blank\">renderItem.return</a>。</p>\n<p>一般来说，<a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem\" target=\"_blank\">renderItem</a> 函数的主要逻辑，是将 <code>dataItem</code> 里的值映射到坐标系上的图形元素。这一般需要用到 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">renderItem.arguments.api</a> 中的两个函数：</p>\n<ul>\n<li><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api.value\" target=\"_blank\">api.value(...)</a>，意思是取出 <code>dataItem</code> 中的数值。例如 <code>api.value(0)</code> 表示取出当前 <code>dataItem</code> 中第一个维度的数值。</li>\n<li><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api.coord\" target=\"_blank\">api.coord(...)</a>，意思是进行坐标转换计算。例如 <code>var point = api.coord([api.value(0), api.value(1)])</code> 表示 <code>dataItem</code> 中的数值转换成坐标系上的点。</li>\n</ul>\n<p>有时候还需要用到 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api.size\" target=\"_blank\">api.size(...)</a> 函数，表示得到坐标系上一段数值范围对应的长度。</p>\n<p>返回值中样式的设置可以使用 <a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api.style\" target=\"_blank\">api.style(...)</a> 函数，他能得到 <a href=\"http://echarts.baidu.com/option.html#series-custom.itemStyle\" target=\"_blank\">series.itemStyle</a> 中定义的样式信息，以及视觉映射的样式信息。也可以用这种方式覆盖这些样式信息：<code>api.style({fill: &#39;green&#39;, stroke: &#39;yellow&#39;})</code>。</p>\n<p>书写完 <code>renderItem</code> 方法后，自定义系列的 90% 工作就做完了。剩下的是一些精化工作。</p>\n<p><br></p>\n<h2>（二）使坐标轴的范围自适应数据范围</h2>\n\n<p>在 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">直角坐标系（grid）</a>、<a href=\"http://echarts.baidu.com/option.html#polar\" target=\"_blank\">极坐标系（polar）</a> 中都有坐标轴。坐标轴的刻度范围需要自适应当前显示出的数据的范围，否则绘制出的图形会超出去。所以，例如，在 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">直角坐标系（grid）</a> 中，使用自定义系列的开发者，需要设定，<code>data</code> 中的哪些维度会对应到 <code>x</code> 轴上，哪些维度会对应到 <code>y</code> 轴上。这件事通过 <a href=\"http://echarts.baidu.com/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<p><br></p>\n<h2>（三）设定 tooltip</h2>\n\n<p>当然，使用 <a href=\"http://echarts.baidu.com/option.html#tooltip.formatter\" target=\"_blank\">tooltip.formatter</a> 可以任意定制 tooltip 中的内容。但是还有更简单的方法，通过<a href=\"http://echarts.baidu.com/option.html#series-custom.encode\" target=\"_blank\">encode</a> 和 <a href=\"http://echarts.baidu.com/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<p><br></p>\n<h2>（四）超出坐标系范围的截取</h2>\n\n<p>与 <a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">dataZoom</a> 结合使用的时候，常常使用会设置 <a href=\"http://echarts.baidu.com/option.html#dataZoom.filterMode\" target=\"_blank\">dataZoom.filterMode</a> 为 &#39;weakFilter&#39;。这个设置的意思是：当 <code>dataItem</code> 部分超出坐标系边界的时候，<code>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>dataZoom</code> 组件控制 X 轴的缩放。假如在缩放的过程中，某个 dataItem 的『维度1』超出了 X 轴的范围，『维度2』还在 X 轴的范围中，那么只要设置 <code>dataZoom.filterMode = &#39;weakFilter&#39;</code>，这个 dataItem 就不会被过滤掉，从而还能够使用 <code>renderItem</code> 绘制图形（可以使用上面提到过的 <code>echarts.graphic.clipRectByRect</code> 把图形绘制成被坐标系剪裁过的样子）。参见上面提到过的例子：<a href=\"https://www.echartsjs.com/examples/en/editor.html?c=custom-profile\" target=\"_blank\">Profile</a></p>\n<p><br></p>\n<h2>（五）关于 dataIndex</h2>\n\n<p>开发者如果使用到的话应注意，<a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.params\" target=\"_blank\">renderItem.arguments.params</a> 中的 <code>dataIndex</code> 和 <code>dataIndexInside</code> 是有区别的：</p>\n<ul>\n<li><code>dataIndex</code> 指的 <code>dataItem</code> 在原始数据中的 index。</li>\n<li><code>dataIndexInside</code> 指的是 <code>dataItem</code> 在当前数据窗口（参见 <a href=\"http://echarts.baidu.com/option.html#dataZoom\" target=\"_blank\">dataZoom</a>）中的 index。</li>\n</ul>\n<p><a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.arguments.api\" target=\"_blank\">renderItem.arguments.api</a> 中使用的参数都是 <code>dataIndexInside</code> 而非 <code>dataIndex</code>，因为从 <code>dataIndex</code> 转换成 <code>dataIndexInside</code> 需要时间开销。</p>\n<p><br></p>\n<h2>（六）事件监听</h2>\n\n\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<p><br></p>\n<h2>（七）自定义矢量图形</h2>\n\n<p>自定义系列能支持使用 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a> 定义矢量路径。从而可以使用矢量图工具中做出的图形。参见：<a href=\"http://echarts.baidu.com/option.html#series-custom.renderItem.return_path\" target=\"_blank\">path</a>，以及例子：<a href=\"http://echarts.baidu.com/examples/editor.html?c=custom-calendar-icon\" target=\"_blank\">icons</a> 和 <a href=\"http://echarts.baidu.com/examples/editor.html?c=custom-gantt-flight\" target=\"_blank\">shapes</a>。</p>\n<p><br></p>\n<p><strong>更多的自定义系列的例子参见：<a href=\"http://echarts.baidu.com/examples.html#chart-type-custom\" target=\"_blank\">custom examples</a></strong></p>\n"},"富文本标签":{"type":["*"],"description":"<p>在许多地方（如图、轴的标签等）都可以使用富文本标签。例如：</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/en/view.html?c=pie-rich-text&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<iframe data-src=\"https://www.echartsjs.com/examples/en/view.html?c=treemap-obama&edit=1&reset=1\" width=\"800\" height=\"550\" ></iframe>\n\n\n<iframe data-src=\"https://www.echartsjs.com/examples/en/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://www.echartsjs.com/examples/en/editor.html?c=map-labels&amp;edit=1&amp;reset=1\" target=\"_blank\">Map Labels</a>,\n<a href=\"https://www.echartsjs.com/examples/en/editor.html?c=pie-nest&amp;edit=1&amp;reset=1\" target=\"_blank\">Pie Labels</a>,\n<a href=\"https://www.echartsjs.com/examples/en/editor.html?c=gauge-car&amp;edit=1&amp;reset=1\" target=\"_blank\">Gauge</a>.</p>\n<p><br></p>\n<p>原先 echarts 中的文本标签，只能对整块统一进行样式设置，并且仅仅支持颜色和字体的设置，从而导致不易于制作表达能力更强的文字描述信息。</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 Fregment）：文本标签块中的部分文本。</li>\n</ul>\n<p>如下图示例：</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/en/view.html?c=doc-example/text-block-fregment&edit=1&reset=1\" width=\"340\" height=\"240\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>文本样式相关的配置项</strong></p>\n<p>echarts 提供了丰富的文本标签配置项，包括：</p>\n<ul>\n<li>字体基本样式设置：<code>fontStyle</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>fontFamily</code>。</li>\n<li>文字颜色：<code>color</code>。</li>\n<li>文字描边：<code>textBorderColor</code>、<code>textBorderWidth</code>。</li>\n<li>文字阴影：<code>textShadowColor</code>、<code>textShadowBlur</code>、<code>textShadowOffsetX</code>、<code>textShadowOffsetY</code>。</li>\n<li>文本块或文本片段大小：<code>lineHeight</code>、<code>width</code>、<code>height</code>、<code>padding</code>。</li>\n<li>文本块或文本片段的对齐：<code>align</code>、<code>verticalAlign</code>。</li>\n<li>文本块或文本片段的边框、背景（颜色或图片）：<code>backgroundColor</code>、<code>borderColor</code>、<code>borderWidth</code>、<code>borderRadius</code>。</li>\n<li>文本块或文本片段的阴影：<code>shadowColor</code>、<code>shadowBlur</code>、<code>shadowOffsetX</code>、<code>shadowOffsetY</code>。</li>\n<li>文本块的位置和旋转：<code>position</code>、<code>distance</code>、<code>rotate</code>。</li>\n</ul>\n<p>可以在各处的 <code>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>rich</code>，不能指定文字块的 <code>width</code> 和 <code>height</code>。</p>\n</blockquote>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>文本、文本框、文本片段的基本样式和装饰</strong></p>\n<p>每个文本可以设置基本的字体样式：<code>fontStyle</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>fontFamily</code>。</p>\n<p>可以设置文字的颜色 <code>color</code> 和边框的颜色 <code>textBorderColor</code>、<code>textBorderWidth</code>。</p>\n<p>文本框可以设置边框和背景的样式：<code>borderColor</code>、<code>borderWidth</code>、<code>backgroundColor</code>、<code>padding</code>。</p>\n<p>文本片段也可以设置边框和背景的样式：<code>borderColor</code>、<code>borderWidth</code>、<code>backgroundColor</code>、<code>padding</code>。</p>\n<p>例如：</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/en/view.html?c=doc-example/text-options&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>标签的位置</strong></p>\n<p>对于折线图、柱状图、散点图等，均可以使用 <code>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://www.echartsjs.com/examples/en/view.html?c=doc-example/label-position&edit=1&reset=1\" width=\"800\" height=\"400\" ></iframe>\n\n\n<blockquote>\n<p>注意：<code>position</code> 在不同的图中可取值有所不同。<code>distance</code> 并不是在每个图中都支持。详情请参见 <a href=\"option.html\" target=\"_blank\">option 文档</a>。</p>\n</blockquote>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>标签的旋转</strong></p>\n<p>某些图中，为了能有足够长的空间来显示标签，需要对标签进行旋转。例如：</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/en/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>align</code> 和 <code>verticalAlign</code> 定位，再旋转。</p>\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>文本片段的排版和对齐</strong></p>\n<p>关于排版方式，每个文本片段，可以想象成 CSS 中的 <code>inline-block</code>，在文档流中按行放置。</p>\n<p>每个文本片段的内容盒尺寸（<code>content box size</code>），默认是根据文字大小决定的。但是，也可以设置 <code>width</code>、<code>height</code> 来强制指定，虽然一般不会这么做（参见下文）。文本片段的边框盒尺寸（<code>border box size</code>），由上述本身尺寸，加上文本片段的 <code>padding</code> 来得到。</p>\n<p>只有 <code>&#39;\\n&#39;</code> 是换行符，能导致换行。</p>\n<p>一行内，会有多个文本片段。每行的实际高度，由 <code>lineHeight</code> 最大的文本片段决定。文本片段的 <code>lineHeight</code> 可直接在 <code>rich</code> 中指定，也可以在 <code>rich</code> 的父层级中统一指定而采用到 <code>rich</code> 的所有项中，如果都不指定，则取文本片段的边框盒尺寸（<code>border box size</code>）。</p>\n<p>在一行的 <code>lineHeight</code> 被决定后，一行内，文本片段的竖直位置，由文本片段的 <code>verticalAlign</code> 来指定（这里和 CSS 中的规则稍有不同）：</p>\n<ul>\n<li><code>&#39;bottom&#39;</code>：文本片段的盒的底边贴住行底。</li>\n<li><code>&#39;top&#39;</code>：文本片段的盒的顶边贴住行顶。</li>\n<li><code>&#39;middle&#39;</code>：居行中。</li>\n</ul>\n<p>文本块的宽度，可以直接由文本块的 <code>width</code> 指定，否则，由最长的行决定。宽度决定后，在一行中进行文本片段的放置。文本片段的 <code>align</code> 决定了文本片段在行中的水平位置：</p>\n<ul>\n<li>首先，从左向右连续紧靠放置 <code>align</code> 为 <code>&#39;left&#39;</code> 的文本片段盒。</li>\n<li>然后，从右向左连续紧靠放置 <code>align</code> 为 <code>&#39;right&#39;</code> 的文本片段盒。</li>\n<li>最后，剩余的没处理的文本片段盒，紧贴着，在中间剩余的区域中居中放置。</li>\n</ul>\n<p>关于文字在文本片段盒中的位置：</p>\n<ul>\n<li>如果 <code>align</code> 为 <code>&#39;center&#39;</code>，则文字在文本片段盒中是居中的。</li>\n<li>如果 <code>align</code> 为 <code>&#39;left&#39;</code>，则文字在文本片段盒中是居左的。</li>\n<li>如果 <code>align</code> 为 <code>&#39;right&#39;</code>，则文字在文本片段盒中是居右的。</li>\n</ul>\n<p>例如：</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/en/view.html?c=doc-example/text-fregment-align&edit=1&reset=1\" width=\"800\" height=\"220\" ></iframe>\n\n\n\n<p><br></p>\n<hr>\n<p><br></p>\n<p><strong>特殊效果：图标、分割线、标题块、简单表格</strong></p>\n<p>看下面的例子：</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/en/view.html?c=doc-example/title-block&edit=1&reset=1\" width=\"600\" height=\"400\" ></iframe>\n\n\n<p>文本片段的 <code>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>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://www.echartsjs.com/examples/en/view.html?c=pie-rich-text&amp;edit=1&amp;reset=1\" target=\"_blank\">例子</a>。</p>\n"},"服务端渲染":{"type":["*"],"description":"<p>ECharts 可以在服务端进行渲染。例如 <a href=\"http://www.echartsjs.com/examples/\" 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</ul>\n"},"使用 Canvas 或者 SVG 渲染":{"type":["*"],"description":"<p>浏览器端图表库大多会选择 SVG 或者 Canvas 进行渲染。对于绘制图表来说，这两种技术往往是可替换的，效果相近。但是在一些场景中，他们的表现和能力又有一定差异。于是，对它们的选择取舍，就成为了一个一直存在的不易有标准答案的话题。</p>\n<p>ECharts 从初始一直使用 Canvas 绘制图表（除了对 IE8- 使用 VML）。而 <a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">ECharts v4.0</a> 发布了 SVG 渲染器，从而提供了一种新的选择。只须在初始化一个图表实例时，设置 <a href=\"http://echarts.baidu.com/api.html#echarts.init\" target=\"_blank\">renderer 参数</a> 为 <code>&#39;canvas&#39;</code> 或 <code>&#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=\"http://echarts.baidu.com/demo.html#lines-bmap-effect\" target=\"_blank\">特效</a>。但是，在不少场景中，SVG 具有重要的优势：它的内存占用更低（这对移动端尤其重要）、渲染性能略高、并且用户使用浏览器内置的缩放功能时不会模糊。例如，我们在一些硬件环境中分别使用 Canvas 渲染器和 SVG 渲染器绘制中等数据量的折、柱、饼，统计初始动画阶段的帧率，得到了一个性能对比图：</p>\n<iframe data-src=\"https://www.echartsjs.com/examples/en/view.html?c=doc-example/canvas-vs-svg&reset=1\" width=\"90%\" height=\"400\" ></iframe>\n\n\n<p>上图显示出，在这些场景中，SVG 渲染器相比 Canvas 渲染器在移动端的总体表现更好。当然，这个实验并非是全面的评测，在另一些数据量较大或者有图表交互动画的场景中，目前的 SVG 渲染器的性能还比不过 Canvas 渲染器。但是同时有这两个选项，为开发者们根据自己的情况优化性能提供了更广阔的空间。</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/ecomfe/echarts/issues/new\" target=\"_blank\">反馈</a> 给我们使用的体验和场景，帮助我们更好的做优化。</p>\n<p>注：除了某些特殊的渲染可能依赖 Canvas：如<a href=\"http://echarts.baidu.com/option.html#series-lines.effect\" target=\"_blank\">炫光尾迹特效</a>、<a href=\"http://echarts.baidu.com/examples/editor.html?c=heatmap-bmap\" target=\"_blank\">带有混合效果的热力图</a>等，绝大部分功能 SVG 都是支持的。此外，目前的 SVG 版中，富文本、材质功能尚未实现。</p>\n<h2 id=\"-\">如何使用渲染器</h2>\n<p>ECharts 默认使用 Canvas 渲染。如果想使用 SVG 渲染，ECharts 代码中须包括有 SVG 渲染器模块。</p>\n<ul>\n<li>ECharts 的 <a href=\"http://echarts.baidu.com/download.html\" target=\"_blank\">预构建文件</a> 中，<a href=\"http://echarts.baidu.com/dist/echarts.common.min.js\" target=\"_blank\">常用版</a> 和 <a href=\"http://echarts.baidu.com/dist/echarts.min.js\" target=\"_blank\">完整版</a> 已经包含了 SVG 渲染器，可直接使用。而 <a href=\"http://echarts.baidu.com/dist/echarts.simple.min.js\" target=\"_blank\">精简版</a> 没有包括。</li>\n<li>如果 <a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">在线自定义构建 ECharts</a>，则需要勾上页面下方的 “SVG 渲染”。</li>\n<li>如果 <a href=\"http://echarts.baidu.com/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=\"http://echarts.baidu.com/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"},"在图表中支持无障碍访问":{"type":["*"],"description":"<p>W3C 制定了无障碍富互联网应用规范集（<a href=\"https://www.w3.org/WAI/intro/aria\" target=\"_blank\">WAI-ARIA</a>，the Accessible Rich Internet Applications Suite），致力于使得网页内容和网页应用能够被更多残障人士访问。ECharts 4.0 遵从这一规范，支持自动根据图表配置项智能生成描述，使得盲人可以在朗读设备的帮助下了解图表内容，让图表可以被更多人群访问。</p>\n<p>默认关闭，需要通过将 <a href=\"option.html#aria.show\" target=\"_blank\">aria.show</a> 设置为 <code>true</code> 开启。开启后，会根据图表、数据、标题等情况，自动智能生成关于图表的描述，用户也可以通过配置项修改描述。</p>\n<p>对于配置项：</p>\n<pre><code class=\"lang-js\">option = {\n    aria: {\n        show: 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://www.echartsjs.com/examples/en/view.html?c=doc-example/aria-pie&edit=1&reset=1\" width=\"700\" height=\"300\" ></iframe>\n\n\n<p>生成的图表 DOM 上，会有一个 <code>aria-label</code> 属性，在朗读设备的帮助下，盲人能够了解图表的内容。其值为：</p>\n<pre><code>这是一个关于“某站点用户访问来源”的图表。图表类型是饼图，表示访问来源。其数据是——直接访问的数据是335，邮件营销的数据是310，联盟广告的数据是234，视频广告的数据是135，搜索引擎的数据是1548。\n</code></pre><h2 id=\"-\">整体修改描述</h2>\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.description\" target=\"_blank\">aria.description</a> 配置项指定图表的整体描述。</p>\n<h2 id=\"-\">定制模板描述</h2>\n<p>除了整体性修改描述之外，我们还提供了生成描述的模板，可以方便地进行细粒度的修改。</p>\n<p>生成描述的基本流程为，如果 <a href=\"option.html#aria.show\" target=\"_blank\">aria.show</a> 设置为 <code>true</code>，则生成无障碍访问描述，否则不生成。如果定义了 <a href=\"option.html#aria.description\" target=\"_blank\">aria.description</a>，则将其作为图表的完整描述，否则根据模板拼接生成描述。我们提供了默认的生成描述的算法，仅当生成的描述不太合适时，才需要修改这些模板，甚至使用 <code>aria.description</code> 完全覆盖。</p>\n<p>使用模板拼接时，先根据是否存在标题 <a href=\"#title.text\">title.text</a> 决定使用 <a href=\"option.html#aria.general.withTitle\" target=\"_blank\">aria.general.withTitle</a> 还是 <a href=\"option.html#aria.general.withoutTitle\" target=\"_blank\">aria.general.withoutTitle</a> 作为整体性描述。其中，<code>aria.general.withTitle</code> 配置项包括模板变量 <code>&#39;{title}&#39;</code>，将会被替换成图表标题。也就是说，如果 <code>aria.general.withTitle</code> 被设置为 <code>&#39;图表的标题是：{title}。&#39;</code>，则如果包含标题 <code>&#39;价格分布图&#39;</code>，这部分的描述为 <code>&#39;图表的标题是：价格分布图。&#39;</code>。</p>\n<p>拼接完标题之后，会依次拼接系列的描述（<a href=\"option.html#aria.series\" target=\"_blank\">aria.series</a>），和每个系列的数据的描述（<a href=\"option.html#aria.data\" target=\"_blank\">aria.data</a>）。同样，每个模板都有可能包括模板变量，用以替换实际的值。</p>\n<p>完整的描述生成流程请参见 <a href=\"option.html#aria\" target=\"_blank\">ARIA 文档</a>。</p>\n"},"使用 ECharts GL 实现基础的三维可视化":{"type":["*"],"description":"<p>ECharts GL （后面统一简称 GL）为 ECharts 补充了丰富的三维可视化组件，这篇文章我们会简单介绍如何基于 GL 实现一些常见的三维可视化作品。实际上如果你对 ECharts 有一定了解的话，也可以很快的上手 GL，GL 的配置项完全是按照 ECharts 的标准和上手难度来设计的。</p>\n<p>在看完文章之后，你可以前往 <a href=\"http://echarts.baidu.com/examples/index.html#chart-type-globe\" target=\"_blank\">官方示例</a> 和 <a href=\"http://gallery.echartsjs.com/explore.html#tags=echarts-gl\" target=\"_blank\">Gallery</a> 去了解更多使用 GL 制作的示例，对于文章中我们没法解释到的代码，也可以前往 <a href=\"http://echarts.baidu.com/option-gl.html\" target=\"_blank\">GL 配置项手册</a> 查看具体的配置项使用方法。</p>\n<h2 id=\"-echarts-gl\">如何下载和引入 ECharts GL</h2>\n<p>为了不再增加已经很大了的 ECharts 完整版的体积，我们将 GL 作为扩展包的形式提供，和诸如水球图这样的扩展类似，如果要使用 GL 里的各种组件，只需要在引入<code>echarts.min.js</code>的基础上再引入一个<code>echarts-gl.min.js</code>。你可以从 <a href=\"http://echarts.baidu.com/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 后，我们先来声明一个基础的三维笛卡尔坐标系用于绘制三维的散点图，柱状图，曲面图等常见的\b统计图。</p>\n<p>在 ECharts 中我们有 <a href=\"http://echarts.baidu.com/option.html#grid\" target=\"_blank\">grid</a> 组件用于提供一个矩形的区域放置一个二维的笛卡尔坐标系，以及笛卡尔坐标系上上的 x 轴（<a href=\"http://echarts.baidu.com/option.html#xAxis\" target=\"_blank\">xAxis</a>）和 y 轴（<a href=\"http://echarts.baidu.com/option.html#yAxis\" target=\"_blank\">yAxis</a>）。对于三维的笛卡尔坐标系，我们在 GL 中提供了 <a href=\"http://echarts.baidu.com/option-gl.html#grid3D\" target=\"_blank\">grid3D</a> 组件用于划分一块三维的\b笛卡尔空间，以及放置在这个 <a href=\"http://echarts.baidu.com/option-gl.html#grid3D\" target=\"_blank\">grid3D</a> 上的 <a href=\"http://echarts.baidu.com/option-gl.html#xAxis3D\" target=\"_blank\">xAxis3D</a>, <a href=\"http://echarts.baidu.com/option-gl.html#yAxis3D\" target=\"_blank\">yAxis3D</a>, <a href=\"http://echarts.baidu.com/option-gl.html#zAxis3D\" target=\"_blank\">zAxis3D</a>。</p>\n<blockquote>\n<p>小提示：在 GL 中我们\b对除了 globe 之外所有的三维组件和系列都加了 3D 的后缀用以区分，例如三维的散点图就是 scatter3D，三维的地图就是 map3D 等等。</p>\n</blockquote>\n<p>下面这段代码就声明了一个最简单的三维笛卡尔坐标系</p>\n<pre><code class=\"lang-js\">var option = {\n    // \b需要注意的是我们不能跟 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>跟二维的笛卡尔坐标系一样，每个轴都会有多种\b类型，默认是数值轴，如果需要是类目轴的话，简单的设置\b为 <code>type: &#39;category&#39;</code>就行了。</p>\n<h2 id=\"-\">绘制三维的散点图</h2>\n<p>声明好笛卡尔坐标系后，我们先试试用一份程序生成的正态分布数据在这个三维的笛卡尔坐标系中画散点图。\b\b</p>\n<p>下面这段是生成正态分布数据的代码，你可以先不用关心这段代码是怎么工作的，只需要知道它生成了一份\b三维的正态分布数据放在<code>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>生成的正态分布的数\b\u001c据大概长这样：</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>x</code>, <code>y</code>, <code>z</code>三个值，这三个值会分别被映射到笛卡尔坐标系的 x 轴，y 轴和 z 轴上。</p>\n<p>然后我们可以使用 GL 提供的 <a href=\"http://echarts.baidu.com/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=\"http://www.echartsjs.com/examples/data/asset/data/life-expectancy-table.json\" target=\"_blank\">http://www.echartsjs.com/examples/data/asset/data/life-expectancy-table.json</a> 获取这份数据。</p>\n<p>格式化一下可以看到这份数据是很传统转成 JSON 后的表格格式。第一行是\b每一列数据的属性名，可以从这个属性名看出来每一列数据的含义，分别是人均收入，人均寿命，人口数量，国家和年份。</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=\"http://echarts.baidu.com/tutorial.html#%E4%BD%BF%E7%94%A8%20dataset%20%E7%AE%A1%E7%90%86%E6%95%B0%E6%8D%AE\" target=\"_blank\">\bdataset使用教程</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）分别放到 \bx、 y、 z 轴上。</p>\n<p>使用 encode 属性我们还可以\b将指定列的数据映射到指定的坐标轴上，从而省去很多繁琐的数据转换代码。例如我们将 x 轴换成是国家（Country），y 轴换成年份（Year），z 轴换成收入（Income），可以看到不同国家不同年份的人均\b\b收入分布。\n\b</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 组件对三维散点图\b进行视觉编码</h2>\n<p>刚才多维数据的例子中，我们还有几个维度（列）没能表达出来，利用 ECharts 内置的 <a href=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">visualMap</a> 组件我们可以继续将\b第四个维度编码成颜色。</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=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">visualMap</a> 组件，将<code>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=\"http://echarts.baidu.com/option.html#visualMap\" target=\"_blank\">visualMap</a> 组件，还可以利用其它的 ECharts 内置组件并且充分利用这些组件的交互效果，比如 <a href=\"http://echarts.baidu.com/option.html#legend\" target=\"_blank\">legend</a>。也可以像 <a href=\"http://echarts.baidu.com/examples/editor.html?c=scatter3d-scatter&amp;gl=1\" target=\"_blank\">三维散点图和散点矩阵结合使用</a> 这个例子一样实现二维和三维的系列混搭。</p>\n<p>在实现 GL 的时候我们尽可能地\b把 WebGL \b和 Canvas 之间的差异屏蔽了到最小，从而让 GL 的使用可以更加方便自然。</p>\n<h2 id=\"-\">在笛卡尔坐标系上显示其它类型的三维图表</h2>\n<p>除了散点图，我们也可以\b通过 GL 在三维的笛卡尔坐标系上绘制其它类型的三维图表。比如\b刚才例子\b中将 <code>scatter3D</code> 类型改成 <code>bar3D</code> 就可以变成一个三维的柱状图。</p>\n<p><img width=\"\" height=\"auto\" src=\"documents/asset/img/gl/bar3D.png\"></p>\n<p>还有机器学习中\b会用到的三维曲面图 <a href=\"http://echarts.baidu.com/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=\"http://vis.baidu.com/chartusage/bar/\" target=\"_blank\">柱状图使用指南</a> 中的解释。</p>\n<p>但是如果有一些其他因素导致必须得画成立体的柱状图\b的话，用 GL 也可以实现。\b<a href=\"http://gallery.echartsjs.com/explore.html?u=bd-3056387051\" target=\"_blank\">丶灬豆奶</a> 和 <a href=\"http://gallery.echartsjs.com/explore.html?u=bd-809368804\" target=\"_blank\">阿洛儿啊</a> 在 Gallery 已经写了类似的例子，大家可以参考。</p>\n<p><a href=\"http://gallery.echartsjs.com/explore.html?u=bd-3056387051\" target=\"_blank\">3D堆积柱状图</a></p>\n<p><a href=\"http://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":{"type":["*"],"description":"<p>我们接到了很多微信小程序开发者的反馈，表示他们强烈需要像 ECharts 这样的可视化工具。但是微信小程序是不支持 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://github.com/ecomfe/echarts-for-weixin/raw/master/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>ec-canvas</code> 是我们提供的组件，其他文件是如何使用该组件的示例。</p>\n<p><code>ec-canvas</code> 目录下有一个 <code>echarts.js</code>，默认我们会在每次 <code>echarts-for-weixin</code> 项目发版的时候替换成最新版的 ECharts。如有必要，可以自行从 ECharts 项目中下载<a href=\"https://github.com/ecomfe/echarts/releases\" target=\"_blank\">最新发布版</a>，或者从<a href=\"http://echarts.baidu.com/builder.html\" target=\"_blank\">官网自定义构建</a>以减小文件大小。</p>\n<h2 id=\"-\">引入组件</h2>\n<p>微信小程序的项目创建可以参见<a href=\"https://mp.weixin.qq.com/debug/wxadoc/dev/quickstart/basic/getting-started.html\" target=\"_blank\">微信公众平台官方文档</a>。</p>\n<p>在创建项目之后，可以将下载的 <a href=\"https://github.com/ecomfe/echarts-for-weixin\" target=\"_blank\">ecomfe/echarts-for-weixin</a> 项目完全替换新建的项目，然后将修改代码；或者仅拷贝 <code>ec-canvas</code> 目录到新建的项目下，然后做相应的调整。</p>\n<p>如果采用完全替换的方式，需要将 <code>project.config.json</code> 中的 <code>appid</code> 替换成在公众平台申请的项目 id。<code>pages</code> 目录下的每个文件夹是一个页面，可以根据情况删除不需要的页面，并且在 <code>app.json</code> 中删除对应页面。</p>\n<p>如果仅拷贝 <code>ec-canvas</code> 目录，则可以参考 <code>pages/bar</code> 目录下的几个文件的写法。下面，我们具体地说明。</p>\n<h2 id=\"-\">创建图表</h2>\n<p>首先，在 <code>pages/bar</code> 目录下新建以下几个文件：<code>index.js</code>、 <code>index.json</code>、 <code>index.wxml</code>、 <code>index.wxss</code>。并且在 <code>app.json</code> 的 <code>pages</code> 中增加 <code>&#39;pages/bar/index&#39;</code>。</p>\n<p><code>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>pages/bar/index.wxml</code> 中使用 <code>&lt;ec-canvas&gt;</code> 组件。注意路径的相对位置要写对，如果目录结构和本例相同，就应该像上面这样配置。</p>\n<p><code>index.wxml</code> 中，我们创建了一个 <code>&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>ec</code> 是一个我们在 <code>index.js</code> 中定义的对象，它使得图表能够在页面加载后被初始化并设置。<code>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>option</code> 的内容，即可改变图表。<code>option</code> 的使用方法参见 <a href=\"http://echarts.baidu.com/option.html\" target=\"_blank\">ECharts 配置项文档</a>。对于不熟悉 ECharts 的用户，可以参见 <a href=\"http://echarts.baidu.com/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"}}}}