ECharts學習

ECharts 特性

ECharts，一個使用 JavaScript 實作的開源可視化庫，可以流暢的運作在 PC 和移動裝置上，相容目前絕大部分浏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴輕量級的矢量圖形庫 ZRender，提供直覺，互動豐富，可高度個性化定制的資料可視化圖表

豐富的可視化類型

ECharts 提供了正常的折線圖、柱狀圖、散點圖、餅圖、K線圖，用于統計的盒形圖，用于地理資料可視化的地圖、熱力圖、線圖，用于關系資料可視化的關系圖、treemap、旭日圖，多元資料可視化的平行坐标，還有用于 BI 的漏鬥圖，儀表盤，并且支援圖與圖之間的混搭。

除了已經内置的包含了豐富功能的圖表，ECharts 還提供了自定義系列，隻需要傳入一個renderItem函數，就可以從資料映射到任何你想要的圖形，更棒的是這些都還能和已有的互動元件結合使用而不需要操心其它事情。還可以在下載下傳界面下載下傳包含所有圖表的建構檔案，如果隻是需要其中一兩個圖表，又嫌包含所有圖表的建構檔案太大，也可以在線上建構中選擇需要的圖表類型後自定義建構

多種資料格式無需轉換直接使用

ECharts 内置的 dataset 屬性（4.0+）支援直接傳入包括二維表，key-value 等多種格式的資料源，通過簡單的設定 encode 屬性就可以完成從資料到圖形的映射，這種方式更符合可視化的直覺，省去了大部分場景下資料轉換的步驟，而且多個元件能夠共享一份資料而不用克隆。

為了配合大資料量的展現，ECharts 還支援輸入 TypedArray 格式的資料，TypedArray 在大資料量的存儲中可以占用更少的記憶體，對 GC 友好等特性也可以大幅度提升可視化應用的性能

千萬資料的前端展現

通過增量渲染技術（4.0+），配合各種細緻的優化，ECharts 能夠展現千萬級的資料量，并且在這個資料量級依然能夠進行流暢的縮放平移等互動。幾千萬的地理坐标資料就算使用二進制存儲也要占上百 MB 的空間。是以 ECharts 同時提供了對流加載（4.0+）的支援，你可以使用 WebSocket 或者對資料分塊後加載，加載多少渲染多少！不需要漫長地等待所有資料加載完再進行繪制

移動端優化

ECharts 針對移動端互動做了細緻的優化，例如移動端小屏上适于用手指在坐标系中進行縮放、平移。 PC 端也可以用滑鼠在圖中進行縮放（用滑鼠滾輪）、平移等。細粒度的子產品化和打包機制可以讓 ECharts 在移動端也擁有很小的體積，可選的 SVG 渲染子產品讓移動端的記憶體占用不再捉襟見肘

多渲染方案，跨平台使用

ECharts 支援以 Canvas、SVG（4.0+）、VML 的形式渲染圖表。VML 可以相容低版本 IE，SVG 使得移動端不再為記憶體擔憂，Canvas 可以輕松應對大資料量和特效的展現。不同的渲染方式提供了更多選擇，使得 ECharts 在各種場景下都有更好的表現。除了 PC 和移動端的浏覽器，ECharts 還能在 node 上配合 node-canvas 進行高效的服務端渲染（SSR）。從 4.0 開始我們還和微信小程式的團隊合作，提供了 ECharts 對小程式的适配！

社群熱心的貢獻者也為我們提供了豐富的其它語言擴充，比如 Python 的pyecharts，R 語言的 recharts, Julia 的 ECharts.jl 等等。我們希望平台和語言都不會成為大家使用 ECharts 實作可視化的限制

深度的互動式資料探索

互動是從資料中發掘資訊的重要手段。“總覽為先，縮放過濾按需檢視細節”是資料可視化互動的基本需求。

ECharts 一直在互動的路上前進，我們提供了 圖例、視覺映射、資料區域縮放、tooltip、資料刷選等開箱即用的互動元件，可以對資料進行多元度資料篩取、視圖縮放、展示細節等互動操作

多元資料的支援以及豐富的視覺編碼手段

ECharts 3 開始加強了對多元資料的支援。除了加入了平行坐标等常見的多元資料可視化工具外，對于傳統的散點圖等，傳入的資料也可以是多個次元的。配合視覺映射元件 visualMap 提供的豐富的視覺編碼，能夠将不同次元的資料映射到顔色，大小，透明度，明暗度等不同的視覺通道

動态資料

ECharts 由資料驅動，資料的改變驅動圖表展現的改變。是以動态資料的實作也變得異常簡單，隻需要擷取資料，填入資料，ECharts 會找到兩組資料之間的差異然後通過合适的動畫去表現資料的變化。配合 timeline 元件能夠在更高的時間次元上去表現資料的資訊

絢麗的特效

ECharts 針對線資料，點資料等地理資料的可視化提供了吸引眼球的特效

通過 GL 實作更多更強大絢麗的三維可視化

想要在 VR，大屏場景裡實作三維的可視化效果？我們提供了基于 WebGL 的 ECharts GL，你可以跟使用 ECharts 普通元件一樣輕松的使用 ECharts GL 繪制出三維的地球，建築群，人口分布的柱狀圖，在這基礎之上我們還提供了不同層級的畫面配置項，幾行配置就能得到藝術化的畫面

無障礙通路（4.0+）

當我們說到“可視化”的時候，我們往往很自然地将它與“看得⻅”聯系在一起，但其實這是片面的。W3C制定了無障礙富網際網路應用規範集(WAI-ARIA，the Accessible Rich Internet Applications Suite)，緻力于使得網⻚内容和網⻚應 用能夠被更多殘障人士通路。

ECharts 4.0遵從這一規範，支援自動根據圖表配置項智能生成描述，使得盲人可以在朗讀裝置的幫助下了解圖表内容，讓圖表可以被更多人群通路

ECharts 教程

5 分鐘上手 ECharts

擷取 ECharts

可以通過以下幾種方式擷取 ECharts

1.從官網下載下傳界面選擇你需要的版本下載下傳，根據開發者功能和體積上的需求，我們提供了不同打包的下載下傳，如果你在體積上沒有要求，可以直接下載下傳完整版本。開發環境建議下載下傳源代碼版本，包含了常見的錯誤提示和警告。

2.在ECharts的GitHub上下載下傳最新的release版本，解壓出來的檔案夾裡的dist目錄裡可以找到最新版本的echarts庫。

3.通過npm擷取 echarts，npm install echarts --save

4.cdn 引入，你可以在 cdnjs，npmcdn 或者國内的 bootcdn 上找到 ECharts 的最新版本

引入 ECharts

ECharts 3 開始不再強制使用 AMD 的方式按需引入，代碼裡也不再内置 AMD 加載器。是以引入方式簡單了很多，隻需要像普通的 JavaScript 庫一樣用 script 标簽引入

<script src="echarts.min.js"></script>           

繪制一個簡單的圖表

在繪圖前我們需要為 ECharts 準備一個具備高寬的 DOM 容器

<div id="main" style="width: 600px;height:400px;"></div>           

然後就可以通過 echarts.init 方法初始化一個 echarts 執行個體并通過 setOption 方法生成一個簡單的柱狀圖，下面是完整代碼

<div id="main" style="width: 600px;height:400px;"></div> <!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<script type="text/javascript">        
    var myChart = echarts.init(document.getElementById('main')); // 基于準備好的dom，初始化echarts執行個體        
    var option = { // 指定圖表的配置項和資料
        title: { text: 'ECharts 入門示例'},
        tooltip: {},
        legend: { data:['銷量'] },
        xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] },
        yAxis: {},
        series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }]
    };
    myChart.setOption(option); // 使用剛指定的配置項和資料顯示圖表
</script>           

自定義建構 ECharts

一般來說，可以直接從echarts下載下傳頁中擷取建構好的echarts，也可以從GitHub中的echarts/dist檔案夾中擷取建構好的echarts，這都可以直接在浏覽器端項目中使用。這些建構好的echarts提供了下面這幾種定制：

1.完全版：echarts/dist/echarts.js，體積最大，包含所有的圖表群組件

2.常用版：echarts/dist/echarts.common.js，體積适中，包含常見的圖表群組件

3.精簡版：echarts/dist/echarts.simple.js，體積較小，僅包含最常用的圖表群組件

如果對檔案體積有更嚴苛的要求，可以自己建構 echarts，能夠僅僅包括自己所需要的圖表群組件。自定義建構有幾種方式：

1.線上自定義建構：比較友善

2.使用 echarts/build/build.js 腳本自定義建構：比線上建構更靈活一點，并且支援多語言

3.直接使用建構工具（如 rollup、webpack、browserify）自己建構：也是一種選擇

下面我們舉些小例子，介紹後兩種方式

準備工作：建立自己的工程和安裝 echarts

使用指令行，建立自己的工程：

mkdir myProject
cd myProject           

在 myProject 目錄下使用指令行，初始化工程的 npm 環境并安裝 echarts（這裡前提是您已經安裝了 npm）：

npm init
npm install echarts --save           

通過 npm 安裝的 echarts 會出現在 myProject/node_modules 目錄下，進而可以直接在項目代碼中得到 echarts，例如：

1.使用 ES Module：

import * as echarts from 'echarts';           

2.使用 CommonJS：

var echarts = require('echarts')           

下面僅以使用 ES Module 的方式來舉例

使用 echarts 提供的建構腳本自定義建構

在這個例子中，我們要建立一個餅圖，并且想自定義建構一個隻含有餅圖的 echarts 檔案，進而能使 echarts 檔案的大小比較小一些。echarts 已經提供了建構腳本 echarts/build/build.js，基于 Node.js 運作。我們可以在 myProject 目錄下使用指令行，看到它的使用方式：

node node_modules/echarts/build/build.js --help           

其中我們在這個例子裡會用到的參數有：

-i：代碼入口檔案，可以是絕對路徑或者基于目前指令行路徑的相對路徑

-o：生成的 bundle 檔案，可以是絕對路徑或者基于目前指令行路徑的相對路徑

--min：是否壓縮檔案（預設不壓縮），并且去多餘的列印錯誤資訊的代碼，形成生産環境可用的檔案

--lang ：是否使用其他語言版本，預設是中文。例如：--lang en 表示使用英文，--lang my/langXX.js 表示建構時使用 /my/langXX.js 替代 echarts/lib/lang.js 檔案

--sourcemap：是否輸出 source map，以便于調試

--format：輸出的格式，可選 'umb'（預設）、'amd'、'iife'、'cjs'、'es'

既然我們想自定義建構一個隻含有餅圖的 echarts 檔案，我們需要建立一個入口檔案，可以命名為 myProject/echarts.custom.js，檔案裡會引用所需要的 echarts 子產品：

export * from 'echarts/src/echarts'; // 引入 echarts 主子產品
import 'echarts/src/chart/pie'; // 引入餅圖
// 在這個場景下，可以引用 `echarts/src` 或者 `echarts/lib` 下的檔案（但是不可混用）           

然後我們可以在 myProject 目錄下使用指令行，這樣開始建構：

node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js           

這樣，myProject/lib/echarts.custom.min.js 就生成了。我們可以建立html頁面來使用它：

<div id="main" style="width: 600px;height:400px;"></div>
<script>
    // 繪制圖表。
    echarts.init(document.getElementById('main')).setOption({
        series: {
            type: 'pie',
            data: [ {name: 'A', value: 1212}, {name: 'B', value: 2323}, {name: 'C', value: 1919} ]
        }
    });
</script>           

允許被引用的子產品

在自定義建構中，允許被引用的子產品，全聲明在 myProject/node_module/echarts/echarts.all.js 和 myProject/node_module/echarts/src/export.js 中。echarts 和 zrender 源代碼中的其他子產品，都是 echarts 的内部子產品，不應該去引用。因為在後續 echarts 版本更新中，内部子產品的接口和功能可能變化，甚至子產品本身也可能被移除

引用 echarts/lib/ 還是 echarts/src/

1.項目中如果直接引用 echarts 裡的一些子產品并自行建構，應該使用 echarts/lib/ 路徑，而不可使用 echarts/src/

2.當使用建構腳本 echarts/build/build.js 打包 bundle，那麼兩者可以選其一使用（不可混用），使用 echarts/src/** 可以獲得稍微小一些的檔案體積

原因是：目前，echarts/src/ 中是采用 ES Module 的源代碼，echarts/lib/ 中是 echarts/src/ 編譯成為 CommonJS 後的産物（編譯成 CommonJS 是為了向後相容一些不支援 ES Module 的老版本 NodeJS 和 webpack）。 因為曆史上，各個 echarts 擴充、各個使用者項目，一直是使用的包路徑是 echarts/lib/，是以這個路徑不應該改變，否則，可能導緻混合使用 echarts/src/ 和 echarts/lib/ 得到兩個不同的 echarts 名空間造成問題。而使用 echarts/build/build.js 打包 bundle 時沒有涉及這個問題，echarts/src/** 中的 ES Module 便于靜态分析進而得到稍微小些的檔案體積

直接使用 rollup 自定義建構

與如何使用 echarts 提供的腳本 echarts/build/build.js 自定義建構并列的另一種選擇是，我們直接使用建構工具（如 rollup、webpack、browserify）自定義建構，并且把 echarts 代碼和項目代碼在建構成一體。在一些項目中可能需要這麼做。下面我們僅僅介紹如何使用 rollup 來建構。webpack 和 browserify 與此類同述

首先我們在 myProject 目錄下使用 npm 安裝 rollup：

npm install rollup --save-dev
npm install rollup-plugin-node-resolve --save-dev
npm install rollup-plugin-uglify --save-dev           

接下來建立項目 JS 檔案 myProject/line.js 來繪制圖表，内容為：

import * as echarts from 'echarts/lib/echarts'; // 引入 echarts 主子產品
import 'echarts/lib/chart/line'; // 引入折線圖
import 'echarts/lib/component/tooltip'; // 引入提示框元件、标題元件、工具箱元件
import 'echarts/lib/component/title';
import 'echarts/lib/component/toolbox';
echarts.init(document.getElementById('main')).setOption({ // 基于準備好的dom，初始化 echarts 執行個體并繪制圖表
    title: {text: 'Line Chart'},
    tooltip: {},
    toolbox: {
        feature: {
            dataView: {},
            saveAsImage: { pixelRatio: 2 },
            restore: {}
        }
    },
    xAxis: {},
    yAxis: {},
    series: [{ type: 'line', smooth: true, data: [[12, 5], [24, 20], [36, 36], [48, 10], [60, 10], [72, 20]] }]
});           

對于不支援 ES Module 的浏覽器而言，剛建立的 myProject/line.js 還不能直接被網頁引用并在浏覽器中運作，需要進行建構。使用 rollup 建構前，需要建立它的配置檔案 myProject/rollup.config.js，内容如下：

import nodeResolve from 'rollup-plugin-node-resolve'; // 這個插件用于在 `node_module` 檔案夾（即npm用于管理子產品的檔案夾）中尋找子產品。比如，代碼中有`import 'echarts/lib/chart/line';` 時，這個插件能夠尋找到`node_module/echarts/lib/chart/line.js` 這個子產品檔案
import uglify from 'rollup-plugin-uglify'; // 用于壓縮建構出的代碼
// import ecLangPlugin from 'echarts/build/rollup-plugin-ec-lang'; // 用于多語言支援（如果不需要可忽略此 plugin）
export default {
    name: 'myProject',    
    input: './line.js', // 入口代碼檔案，就是剛才所建立的檔案
    plugins: [
        nodeResolve(),
        // ecLangPlugin({lang: 'en'}),
        // 消除代碼中的 __DEV__ 代碼段，進而不在控制台列印錯誤提示資訊。
        uglify()
    ],
    output: {        
        format: 'umd', // 以 UMD 格式輸出，進而能在各種浏覽器中加載使用      
        sourcemap: true, // 輸出 source map 便于調試      
        file: 'lib/line.min.js' // 輸出檔案的路徑
    }
};           

然後在 myProject 目錄下使用指令行，建構工程代碼 myProject/line.js：

./node_modules/.bin/rollup -c           

其中 -c 表示讓 rollup 使用我們剛才建立的 myProject/rollup.config.js 檔案作為配置檔案

建構生成的 myProject/lib/line.min.js 檔案包括了工程代碼和 echarts 代碼，并且僅僅包括我們所需要的圖群組件，并且可以直接在浏覽器中使用

<div id="main" style="width: 600px;height:400px;"></div>
<script src="lib/line.min.js"></script>           

在浏覽器裡打開會得到和上面代碼相同的結果

多語言支援

上面例子中能看到，工具箱元件（toolbox）的提示文字是中文。本質上，echarts 圖表顯示出來的文字，都可以通過 option 來定制，改成任意語言。但是如果想“預設就是某種語言”，則需要通過建構來實作。上面的例子中，可以在 echarts/build/build.js 的參數中指定語言：

node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang en           

表示使用内置的英文。此外還可以是 --lang fi

node node_modules/echarts/build/build.js --min -i echarts.custom.js -o lib/echarts.custom.min.js --lang my/langXX.js           

表示在建構時使用 myProject/my/langXX.js 檔案來替換 myProject/node_modules/echarts/lib/lang.js 檔案。這樣可以在 myProject/my/langXX.js 檔案中自定義語言。注意這種方式中，必須指定 -o 或者 --output。另外，上面的 rollup 插件 echarts/build/rollup-plugin-ec-lang 也可以傳入同樣的參數，實作同樣的功能

在 webpack 中使用 ECharts

npm 安裝 ECharts

在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方維護的，從 3.1.1 開始由官方 EFE 維護 npm 上 ECharts 和 zrender 的 package。可以使用如下指令通過 npm 安裝 ECharts

npm install echarts --save           

通過 npm 上安裝的 ECharts 和 zrender 會放在node_modules目錄下。可以直接在項目代碼中 require('echarts') 得到 ECharts

var echarts = require('echarts');
var myChart = echarts.init(document.getElementById('main')); // 基于準備好的dom，初始化echarts執行個體
myChart.setOption({ // 繪制圖表
    title: { text: 'ECharts 入門示例' },
    tooltip: {},
    xAxis: { data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子'] },
    yAxis: {},
    series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }]
});           

按需引入 ECharts 圖表群組件

預設使用 require('echarts') 得到的是已經加載了所有圖表群組件的 ECharts 包，是以體積會比較大，如果在項目中對體積要求比較苛刻，也可以隻按需引入需要的子產品。例如上面代碼隻用到了柱狀圖，提示框和标題元件，是以在引入的時候也隻需要引入這些子產品，可以有效的将打包後的體積從 400 多 KB 減小到 170 多 KB

var echarts = require('echarts/lib/echarts'); // 引入 ECharts 主子產品
require('echarts/lib/chart/bar'); // 引入柱狀圖
require('echarts/lib/component/tooltip'); // 引入提示框和标題元件
require('echarts/lib/component/title');           

個性化圖表的樣式

ECharts 提供了豐富的自定義配置選項，并且能夠從全局、系列、資料三個層級去設定資料圖形的樣式。下面我們來看如何使用 ECharts 實作南丁格爾圖：

繪制南丁格爾圖

這次要畫的是餅圖，餅圖主要是通過扇形的弧度表現不同類目的資料在總和中的占比，它的資料格式比柱狀圖更簡單，隻有一維的數值，不需要給類目。因為不在直角坐标系上，是以也不需要xAxis，yAxis

myChart.setOption({
    series : [
        {
            name: '通路來源',
            type: 'pie',
            radius: '55%',
            data:[ {value:235, name:'視訊廣告'}, {value:274, name:'聯盟廣告'}, {value:310, name:'郵件營銷'}, {value:335, name:'直接通路'}, {value:400, name:'搜尋引擎'} ]
        }
    ]
})           

上面代碼就能畫出一個簡單的餅圖；這裡data屬性值包含 name 和 value 屬性的對象，ECharts 中的資料項都是既可以隻設成數值，也可以設成一個包含有名稱、該資料圖形的樣式配置、标簽配置的對象。ECharts 中的餅圖也支援通過設定 roseType 顯示成南丁格爾圖

roseType: 'angle'           

南丁格爾圖會通過半徑表示資料的大小

陰影的配置

ECharts 中有一些通用的樣式，諸如陰影、透明度、顔色、邊框顔色、邊框寬度等，這些樣式一般都會在系列的 itemStyle 裡設定。例如陰影的樣式可以通過下面幾個配置項設定：

itemStyle: {    
    shadowBlur: 200, // 陰影的大小    
    shadowOffsetX: 0, // 陰影水準方向上的偏移    
    shadowOffsetY: 0, // 陰影垂直方向上的偏移    
    shadowColor: 'rgba(0, 0, 0, 0.5)' // 陰影顔色
}           

深色背景和淺色标簽

現在我們需要把整個主題改成開始的示例中那樣的深色主題，這就需要改背景色和文本顔色。背景色是全局的，是以直接在 option 下設定 backgroundColor

setOption({
    backgroundColor: '#2c343c'
})           

文本的樣式可以設定全局的 textStyle

setOption({
    textStyle: { color: 'rgba(255, 255, 255, 0.3)' }
})           

也可以每個系列分别設定，每個系列的文本設定在 label.textStyle

label: {
    textStyle: { color: 'rgba(255, 255, 255, 0.3)' }
}           

餅圖的話還要将标簽的視覺引導線的顔色設為淺色

labelLine: {
    lineStyle: { color: 'rgba(255, 255, 255, 0.3)' }
}           

跟itemStyle一樣，label和labelLine的樣式也有emphasis狀态

設定扇形的顔色

扇形的顔色也是在 itemStyle 中設定：

itemStyle: {    
    color: '#c23531', // 設定扇形的顔色
    shadowBlur: 200,
    shadowColor: 'rgba(0, 0, 0, 0.5)'
}           

跟我們要實作的效果已經挺像了，除了每個扇形的顔色，效果中陰影下面的扇形顔色更深，有種光線被遮住的感覺，進而會出現層次感和空間感。ECharts 中每個扇形的顔色可以通過分别設定 data 下的資料項實作

data: [{
    value:400,
    name:'搜尋引擎',
    itemStyle: { color: '#c23531' }
}, ...]           

如果隻有明暗度的變化，有種更快捷的方式是通過 visualMap 元件将數值的大小映射到明暗度

visualMap: {    
    show: false, // 不顯示 visualMap 元件，隻用于明暗度的映射    
    min: 80, // 映射的最小值為 80    
    max: 600, // 映射的最大值為 600
    inRange: {        
        colorLightness: [0, 1] // 明暗度的範圍是 0 到 1
    }
}           

ECharts 中的樣式簡介

這裡主要是大略概述，用哪些方法可以設定樣式，改變圖形元素或者文字的顔色、明暗、大小等；之是以用“樣式”這種可能不很符合資料可視化思維的詞，是因為，比較通俗易懂；這裡介紹的幾種方式，功能範疇可能會有交叉（即同一種細節的效果可能可以用不同的方式實作），但是他們各有各的場景偏好

1.顔色主題（Theme）

2.調色盤

3.直接樣式設定（itemStyle、lineStyle、areaStyle、label、...）

4.視覺映射（visualMap）

顔色主題（Theme）

最簡單的更改全局樣式的方式，是直接采用顔色主題（theme）。例如，在 示例集合 中，可以選擇 “Theme”，直接看到采用主題的效果。ECharts4 開始，除了一貫的預設主題外，新内置了兩套主題，分别為 'light' 和 'dark'。可以這麼來使用它們：

var chart = echarts.init(dom, 'light');
或
var chart = echarts.init(dom, 'dark');           

其他的主題，沒有内置在 ECharts 中，需要自己加載；這些主題可以在主題編輯器裡通路到，也可以使用這個主題編輯器自己編輯主題；下載下傳下來的主題可以這樣使用；如果主題儲存為JSON檔案，那麼可以自行加載和注冊，例如：

// 假設主題名稱是 "vintage"
$.getJSON('xxx/xxx/vintage.json', function (themeJSON) {
    echarts.registerTheme('vintage', JSON.parse(themeJSON))
    var chart = echarts.init(dom, 'vintage');
});           

如果儲存為 UMD 格式的 JS 檔案，那麼支援了自注冊，直接引入 JS 檔案即可：

// HTML 引入 vintage.js 檔案後（假設主題名稱是 "vintage"）
var chart = echarts.init(dom, 'vintage');
// ...           

調色盤

調色盤可以在option中設定，它給定了一組顔色，圖形、系列會自動從其中選擇顔色；可以設定全局的調色盤，也可以設定系列自己專屬的調色盤

option = {    
    color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'], // 全局調色盤
    series: [{
        type: 'bar',        
        color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'], // 此系列自己的調色盤
        ...
    }, {
        type: 'pie',        
        color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'], // 此系列自己的調色盤
        ...
    }]
}           

直接的樣式設定 itemStyle, lineStyle, areaStyle, label, ...

直接的樣式設定是比較常用設定方式；縱觀ECharts的option中，很多地方可以設定itemStyle、lineStyle、areaStyle、label等。這些的地方可以直接設定圖形元素的顔色、線寬、點的大小、标簽的文字、标簽的樣式等。一般來說，ECharts 的各個系列群組件，都遵從這些命名習慣，雖然不同圖表群組件中，itemStyle、label 等可能出現在不同的地方

高亮的樣式：emphasis

在滑鼠懸浮到圖形元素上時，一般會出現高亮的樣式；預設情況下，高亮的樣式是根據普通樣式自動生成的。但是高亮的樣式也可以自己定義，主要是通過emphasis屬性來定制。emphsis中的結構，和普通樣式的結構相同，例如：

option = {
    series: {
        type: 'scatter', //分散點       
        itemStyle: { // 普通樣式            
            color: 'red' // 點的顔色
        },
        label: {
            show: true,            
            formatter: 'This is a normal label.' // 标簽的文字
        },
        emphasis: { // 高亮樣式
            itemStyle: {                
                color: 'blue' // 高亮時點的顔色
            },
            label: {
                show: true,
                formatter: 'This is a emphasis label.' // 高亮時标簽的文字
            }
        }
    }
}           

注意：在 ECharts4 以前，高亮和普通樣式的寫法，是這樣的

option = {
    series: {
        type: 'scatter',
        itemStyle: { // 普通樣式
            normal: {
                color: 'red' // 點的顔色
            },
            emphasis: { // 高亮樣式                
                color: 'blue' // 高亮時點的顔色
            }
        },
        label: {
            normal: { // 普通樣式
                show: true,
                formatter: 'This is a normal label.' // 标簽的文字
            },            
            emphasis: { // 高亮樣式
                show: true,
                formatter: 'This is a emphasis label.' // 高亮時标簽的文字
            }
        }
    }
}           

這種寫法仍然被相容，但是不推薦。事實上，多數情況下，使用者隻會配置普通狀态下的樣式，而使用預設的高亮樣式。是以在ECharts4中，支援不寫normal的配置方法（即本文開頭的那種寫法），使得配置項更扁平簡單

通過 visualMap 元件設定樣式

visualMap 元件 能指定資料到顔色、圖形尺寸的映射規則

異步資料加載和更新

異步加載

之前章節資料是在初始化後setOption中直接填入的，但是很多時候可能資料需要異步加載後再填入；ECharts中實作異步資料的更新非常簡單，在圖表初始化後不管何時隻要通過jQuery等工具異步擷取資料後通過setOption填入資料和配置項就行

var myChart = echarts.init(document.getElementById('main'));
$.get('data.json').done(function (data) {
    myChart.setOption({
        title: { text: '異步資料加載示例' },
        tooltip: {},
        legend: { data:['銷量'] },
        xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] },
        yAxis: {},
        series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }]
    });
});           

或者先設定完其它的樣式，顯示一個空的直角坐标軸，然後擷取資料後填入資料

var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({ // 顯示标題，圖例和空的坐标軸
    title: { text: '異步資料加載示例' },
    tooltip: {},
    legend: { data:['銷量'] },
    xAxis: { data: [] },
    yAxis: {},
    series: [{ name: '銷量', type: 'bar', data: [] }]
});
$.get('data.json').done(function (data) { // 異步加載資料    
    myChart.setOption({ // 填入資料
        xAxis: {
            data: data.categories
        },
        series: [{            
            name: '銷量', // 根據名字對應到相應的系列
            data: data.data
        }]
    });
});           

ECharts 中在更新資料的時候需要通過name屬性對應到相應的系列，上面示例中如果name不存在也可以根據系列的順序正常更新，但是更多時候推薦更新資料的時候加上系列的name資料

loading 動畫

如果資料加載時間較長，一個空的坐标軸放在畫布上也會讓使用者覺得是不是産生bug了，是以需要一個loading的動畫來提示使用者資料正在加載。ECharts 預設有提供了一個簡單的加載動畫,隻需要調用showLoading方法顯示。資料加載完成後再調用hideLoading方法隐藏加載動畫

myChart.showLoading();
$.get('data.json').done(function (data) {
    myChart.hideLoading();
    myChart.setOption(...);
});           

資料的動态更新

ECharts由資料驅動，資料的改變驅動圖表展現的改變，是以動态資料的實作也變得異常簡單。所有資料的更新都通過setOption實作，你隻需要定時擷取資料，setOption填入資料，而不用考慮資料到底産生了那些變化，ECharts會找到兩組資料之間的差異然後通過合适的動畫去表現資料的變化；ECharts 3中移除了ECharts 2中的addData方法。如果隻需要加入單個資料，可以先data.push(value)後setOption

使用 dataset 管理資料

ECharts 4開始支援了dataset元件用于單獨的資料集聲明，進而資料可以單獨管理，被多個元件複用，并且可以基于資料指定資料到視覺的映射。這在不少場景下能帶來使用上的友善。ECharts 4 以前，資料隻能聲明在各個“系列（series）”中，例如：

option: {
    xAxis: { type: 'category', data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'] },
    yAxis: {}
    series: [
        { type: 'bar', name: '2015', data: [89.3, 92.1, 94.4, 85.4] },
        { type: 'bar', name: '2016', data: [95.8, 89.4, 91.2, 76.9] },
        { type: 'bar', name: '2017', data: [97.7, 83.1, 92.5, 78.1] }
    ]
}           

這種方式的優點是，直覺易了解，以及适于對一些特殊圖表類型進行一定的資料類型定制；但缺點是，為比對這種資料輸入形式，常需要有資料處理的過程，把資料分割設定到各個系列（和類目軸）中；此外，不利于多個系列共享一份資料，也不利于基于原始資料進行圖表類型、系列的映射安排。于是，ECharts 4提供了資料集（dataset）元件來單獨聲明資料，它帶來了這些效果：

1.能夠貼近這樣的資料可視化常見思維方式：基于資料（dataset元件來提供資料），指定資料到視覺的映射（由encode屬性來指定映射），形成圖表

2.資料和其他配置可以被分離開來，使用者相對便于進行單獨管理，也省去了一些資料處理的步驟

3.資料可以被多個系列或者元件複用，對于大資料，不必為每個系列建立一份

4.支援更多的資料的常用格式，例如二維數組、對象數組等，一定程度上避免使用者為了資料格式而進行轉換

資料到圖形的映射

本篇裡，我們制作資料可視化圖表的邏輯是這樣的：基于資料，在配置項中指定如何映射到圖形。概略而言，可以進行這些映射：

1.指定 dataset 的列（column）還是行（row）映射為圖形系列（series）。這件事可以使用 series.seriesLayoutBy 屬性來配置。預設是按照列（column）來映射。

2.指定次元映射的規則：如何從 dataset 的次元（一個“次元”的意思是一行/列）映射到坐标軸（如 X、Y 軸）、提示框（tooltip）、标簽（label）、圖形元素大小顔色等（visualMap）。這件事可以使用 series.encode 屬性，以及 visualMap 元件（如果有需要映射顔色大小等視覺次元的話）來配置。上面的例子中，沒有給出這種映射配置，那麼 ECharts 就按最常見的了解進行預設映射：X 坐标軸聲明為類目軸，預設情況下會自動對應到 dataset.source 中的第一列；三個柱圖系列，一一對應到 dataset.source 中後面每一列

按行還是按列做映射

有了資料表之後，使用者可以靈活得配置：資料如何對應到軸和圖形系列。使用者可以使用 seriesLayoutBy 配置項，改變圖表對于行列的了解。seriesLayoutBy 可取值：

1.'column': 預設值。系列被安放到 dataset 的列上面。

2.'row': 系列被安放到 dataset 的行上面。

次元（dimension）

介紹 encode 之前，首先要介紹“次元（dimension）”的概念。

常用圖表所描述的資料大部分是“二維表”結構，我們使用二維數組來容納二維表。現在，當我們把系列（series）對應到“列”的時候，那麼每一列就稱為一個“次元（dimension）”，而每一行稱為資料項（item）。反之，如果我們把系列（series）對應到表行，那麼每一行就是“次元（dimension）”，每一列就是資料項（item）。次元可以有單獨的名字，便于在圖表中顯示;次元名（dimension name）可以定義在 dataset 的第一行（或者第一列）,從第二行開始才是正式的資料。dataset.source 中第一行（列）到底包含不包含次元名，ECharts預設會自動探測。當然也可以設定 dataset.sourceHeader: true 顯示聲明第一行（列）就是次元，或者 dataset.sourceHeader: false 表明第一行（列）開始就直接是資料。次元的定義，也可以使用單獨的dataset.dimensions或者series.dimensions來定義，這樣可以同時指定次元名，和次元的類型（dimension type）：

var option = {
    dataset: {
        dimensions: [
            {name: 'score'},            
            'amount', // 可以簡寫為 string，表示次元名            
            {name: 'product', type: 'ordinal'} // 可以在 type 中指定次元類型
        ],
        source: [...]
    },
    series: {
        type: 'line',        
        dimensions: [ // 在系列中設定的 dimensions 會更優先采納
            null, // 可以設定為 null 表示不想設定次元名
            'amount',
            {name: 'product', type: 'ordinal'}
        ]
    },
    ...
};           

大多數情況下，我們并不需要去設定次元類型，因為會自動判斷；但是如果因為資料為空之類原因導緻判斷不足夠準确時，可以手動設定次元類型。次元類型（dimension type）可以取這些值：

'number': 預設，表示普通資料

'ordinal': 對于類目、文本這些string類型的資料，如果需要能在數軸上使用，須是 'ordinal' 類型。ECharts 預設會自動判斷這個類型。但是自動判斷也是不可能很完備的，是以使用者也可以手動強制指定

'time': 表示時間資料。設定成 'time' 則能支援自動解析資料成時間戳（timestamp），比如該次元的資料是 '2017-05-10'，會自動被解析。如果這個次元被用在時間數軸（axis.type 為 'time'）上，那麼會被自動設定為 'time' 類型

'float': 如果設定成 'float'，在存儲時候會使用 TypedArray，對性能優化有好處

'int': 如果設定成 'int'，在存儲時候會使用 TypedArray，對性能優化有好處

資料到圖形的映射（encode）

了解了次元的概念後，我們就可以使用 encode 來做映射

encode 聲明的基本結構如下，其中冒号左邊是坐标系、标簽等特定名稱，如 'x', 'y', 'tooltip' 等，冒号右邊是資料中的次元名（string 格式）或者次元的序号（number 格式，從0開始計數），可以指定一個或多個次元（使用數組）。通常情況下，下面各種資訊不需要所有的都寫，按需寫即可。下面是 encode 支援的屬性：

// 在任何坐标系和系列中，都支援：
encode: {    
    tooltip: ['product', 'score'] // 使用 “名為 product 的次元” 和 “名為 score 的次元” 的值在 tooltip 中顯示    
    seriesName: [1, 3], // 使用 “次元 1” 和 “次元 3” 的次元名連起來作為系列名。（有時候名字比較長，這可以避免在 series.name 重複輸入這些名字）    
    itemId: 2, // 表示使用 “次元2” 中的值作為 id。這在使用 setOption 動态更新資料時有用處，可以使新老資料用 id 對應起來，進而能夠産生合适的資料更新動畫    
    itemName: 3 // 指定資料項的名稱使用 “次元3” 在餅圖等圖表中有用，可以使這個名字顯示在圖例（legend）中
}
// 直角坐标系（grid/cartesian）特有的屬性：
encode: {    
    x: [1, 5, 'score'], // 把 “次元1”、“次元5”、“名為 score 的次元” 映射到 X 軸    
    y: 0 // 把“次元0”映射到 Y 軸
}
// 極坐标系（polar）特有的屬性：
encode: { radius: 3, angle: 2 }
// 地理坐标系（geo）特有的屬性：
encode: { lng: 3, lat: 2 }
// 對于一些沒有坐标系的圖表，例如餅圖、漏鬥圖等，可以是：
encode: { value: 3 }           

在圖表中加入互動元件

除了圖表外 ECharts 中，提供了很多互動元件。例如：圖例元件 legend、标題元件 title、視覺映射元件 visualMap、資料區域縮放元件 dataZoom、時間線元件 timeline；下面以 資料區域縮放元件 dataZoom 為例，介紹如何加入這種元件

資料區域縮放元件（dataZoom）介紹

『概覽資料整體，按需關注資料細節』是資料可視化的基本互動需求；dataZoom 元件能夠在直角坐标系（grid）、極坐标系（polar）中實作這一功能：

1.dataZoom元件是對數軸（axis）進行『資料視窗縮放』『資料視窗平移』操作；可以通過 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 來指定 dataZoom 控制哪個或哪些數軸

2.dataZoom 元件可同時存在多個，起到共同控制的作用。控制同一個數軸的元件，會自動關聯

3.dataZoom 的運作原理是通過『資料過濾』來達到『資料視窗縮放』的效果；資料過濾模式的設定不同，效果也不同

4.dataZoom 的資料視窗範圍的設定，目前支援兩種形式：百分比形式/絕對數值形式

dataZoom 元件現在支援幾種子元件：

1.内置型資料區域縮放元件（dataZoomInside）：内置于坐标系中

2.滑動條型資料區域縮放元件（dataZoomSlider）：有單獨的滑動條操作

3.框選型資料區域縮放元件（dataZoomSelect）：全屏的選框進行資料區域縮放。入口和配置項均在 toolbox中

移動端自适應

ECharts工作在使用者指定高寬的DOM節點（容器）中，ECharts的『元件』和『系列』都在這個DOM節點中，每個節點都可以由使用者指定位置。圖表庫内部并不适宜實作DOM文檔流布局，是以采用類似絕對布局的簡單容易了解的布局方式；但是容器尺寸極端時，這種方式并不能自動避免元件重疊的情況，尤其在移動端小屏的情況下。另外，有時會出現一個圖表需要同時在PC、移動端上展現的場景。這需要 ECharts 内部元件随着容器尺寸變化而變化的能力。為了解決這個問題，ECharts 完善了元件的定位設定，并且實作了類似 CSS Media Query 的自适應能力

ECharts元件的定位和布局

大部分『元件』和『系列』會遵循兩種定位方式：

left/right/top/bottom/width/height 定位方式

這六個量中，每個量都可以是『絕對值』或者『百分比』或者『位置描述』

1.絕對值：機關是浏覽器像素（px），用number形式書寫（不寫機關）；例如 {left: 23, height: 400}

2.百分比：表示占DOM容器高寬的百分之多少，用string形式書寫。例如 {right: '30%', bottom: '40%'}

3.位置描述:可以設定 left: 'center'/top: 'middle'，表示水準居中/垂直居中。

這六個量的概念，和 CSS 中六個量的概念類似：

left：距離 DOM 容器左邊界的距離；right：距離 DOM 容器右邊界的距離；top：距離 DOM 容器上邊界的距離；bottom：距離 DOM 容器下邊界的距離；width：寬度；height：高度

在橫向，left、right、width 三個量中，隻需兩個量有值即可，因為任兩個量可以決定元件的位置和大小，例如 left 和 right 或者 right 和 width 都可以決定元件的位置和大小。 縱向，top、bottom、height 三個量，和橫向類同不贅述

center / radius 定位方式

center：是一個數組，表示 [x, y]，其中，x、y可以是『絕對值』或者『百分比』，含義和前述相同

radius：是一個數組，表示 [内半徑, 外半徑]，其中，内外半徑可以是『絕對值』或者『百分比』，含義和前述相同

在自适應容器大小時，百分比設定是很有用的

橫向（horizontal）和縱向（vertical）

ECharts的『外觀狹長』型的元件（如 legend、visualMap、dataZoom、timeline等），大多提供了『橫向布局』『縱向布局』的選擇。例如，在細長的移動端螢幕上，可能适合使用『縱向布局』；在PC寬屏上，可能适合使用『橫向布局』。橫縱向布局的設定，一般在『元件』或者『系列』的 orient 或者 layout 配置項上，設定為 'horizontal' 或者 'vertical'

于 ECharts2 的相容

ECharts2 中的 x/x2/y/y2 的命名方式仍被相容，對應于 left/right/top/bottom，但是建議寫 left/right/top/bottom

位置描述中，為相容 ECharts2，可以支援一些看起來略奇怪的設定：left: 'right'、left: 'left'、top: 'bottom'、top: 'top'；這些語句分别等效于：right: 0、left: 0、bottom: 0、top: 0，寫成後者就不奇怪了

Media Query

Media Query 提供了『随着容器尺寸改變而改變』的能力；随着尺寸變化，legend 和 系列會自動改變布局位置和方式

要在 option 中設定 Media Query 須遵循如下格式：

option = {
    baseOption: { // 這裡是基本的『原子option』。
        title: {...},
        legend: {...},
        series: [{...}, {...}, ...],
        ...
    },
    media: [ // 這裡定義了 media query 的逐條規則。
        {
            query: {...},   // 這裡寫規則。
            option: {       // 這裡寫此規則滿足下的option。
                legend: {...},
                ...
            }
        },{
            query: {...},   // 第二個規則。
            option: {       // 第二個規則對應的option。
                legend: {...},
                ...
            }
        },{                   // 這條裡沒有寫規則，表示『預設』，
            option: {       // 即所有規則都不滿足時，采納這個option。
                legend: {...},
                ...
            }
        }
    ]
};           

上面格式中，baseOption、以及media每個option都是『原子option』，即普通的含有各元件、系列定義的option。而由原子option』組合成的整個option，我們稱為『複合 option』。baseOption是必然被使用的，此外，滿足了某個query條件時，對應的option會被使用chart.mergeOption()來merge進去

query

每個 query 類似于這樣

{ minWidth: 200, maxHeight: 300, minAspectRatio: 1.3 }           

現在支援三個屬性：width、height、aspectRatio（長寬比）。每個屬性都可以加上 min 或 max 字首。比如，minWidth: 200 表示『大于等于200px寬度』。兩個屬性一起寫表示『并且』，比如：{minWidth: 200, maxHeight: 300} 表示『大于等于200px寬度，并且小于等于300px高度』

option

media中的 option 既然是『原子 option』，理論上可以寫任何 option 的配置項。但是一般我們隻寫跟布局定位相關的，例如截取上面例子中的一部分 query option：

media: [
    ...,
    {
        query: {
            maxAspectRatio: 1           // 當長寬比小于1時。
        },
        option: {
            legend: {                   // legend 放在底部中間。
                right: 'center',
                bottom: 0,
                orient: 'horizontal'    // legend 橫向布局。
            },
            series: [                   // 兩個餅圖左右布局。
                {
                    radius: [20, '50%'],
                    center: ['50%', '30%']
                },
                {
                    radius: [30, '50%'],
                    center: ['50%', '70%']
                }
            ]
        }
    },
    {
        query: {
            maxWidth: 500               // 當容器寬度小于 500 時。
        },
        option: {
            legend: {
                right: 10,              // legend 放置在右側中間。
                top: '15%',
                orient: 'vertical'      // 縱向布局。
            },
            series: [                   // 兩個餅圖上下布局。
                {
                    radius: [20, '50%'],
                    center: ['50%', '30%']
                },
                {
                    radius: [30, '50%'],
                    center: ['50%', '75%']
                }
            ]
        }
    },
    ...
]           

多個 query 被滿足時的優先級

注意，可以有多個 query 同時被滿足，會都被 mergeOption，定義在後的後被 merge（即優先級更高）

預設 query

如果 media 中有某項不寫 query，則表示『預設值』，即所有規則都不滿足時，采納這個option

容器大小實時變化時的注意事項

在不少情況下，并不需要容器DOM節點任意随着拖拽變化大小，而是隻是根據不同終端設定幾個典型尺寸；但是如果容器DOM節點需要能任意随着拖拽變化大小，那麼目前使用時需要注意這件事：某個配置項，如果在某一個 query option 中出現，那麼在其他 query option 中也必須出現，否則不能夠回歸到原來的狀态。（left/right/top/bottom/width/height 不受這個限制。）

『複合 option』 中的 media 不支援 merge

也就是說，當第二（或三、四、五 ...）次 chart.setOption(rawOption) 時，如果 rawOption 是 複合option（即包含 media 清單），那麼新的 rawOption.media 清單不會和老的 media 清單進行 merge，而是簡單替代。當然，rawOption.baseOption 仍然會正常和老的 option 進行merge。

其實，很少有場景需要使用『複合 option』來多次 setOption，而我們推薦的做法是，使用 mediaQuery 時，第一次setOption使用『複合 option』，後面 setOption 時僅使用 『原子 option』，也就是僅僅用 setOption 來改變 baseOption

資料的視覺映射

資料可視化是資料到視覺元素的映射過程（這個過程也可稱為視覺編碼，視覺元素也可稱為視覺通道）；ECharts的每種圖表本身就内置了這種映射過程，比如折線圖把資料映射到『線』，柱狀圖把資料映射到『長度』。一些更複雜的圖表，如 graph、事件河流圖、treemap 也都會做出他們内置的映射；此外，ECharts還提供了visualMap元件 來提供通用的視覺映射。visualMap元件中可以使用的視覺元素有：

圖形類别（symbol）、圖形大小（symbolSize）

顔色（color）、透明度（opacity）、顔色透明度（colorAlpha）、

顔色明暗度（colorLightness）、顔色飽和度（colorSaturation）、色調（colorHue）

下面對 visualMap 元件的使用方式進行簡要的介紹

資料和次元

ECharts中的資料，一般存放于 series.data 中。根據圖表類型不同，資料的具體形式也可能有些許差異。比如可能是『線性表』、『樹』、『圖』等。但他們都有個共性：都是『資料項（dataItem）』的集合。每個資料項含有『資料值（value）』和其他資訊（如果需要的話）。每個資料值，可以是單一的數值（一維）或者一個數組（多元）

例如，series.data 最常見的形式，是『線性表』，即一個普通數組：

series: {
    data: [
        {       // 這裡每一個項就是資料項（dataItem）
            value: 2323, // 這是資料項的資料值（value）
            itemStyle: {...}
        },
        1212,   // 也可以直接是 dataItem 的 value，這更常見
        2323,   // 每個 value 都是『一維』的
        4343,
        3434
    ]
}
series: {
    data: [
        {                        // 這裡每一個項就是資料項（dataItem）
            value: [3434, 129,  '聖馬力諾'], // 這是資料項的資料值（value）
            itemStyle: {...}
        },
        [1212, 5454, '梵蒂岡'],   // 也可以直接是 dataItem 的 value，這更常見
        [2323, 3223, '諾魯'],     // 每個 value 都是『三維』的，每列是一個次元
        [4343, 23,   '吐瓦魯']    // 假如是『氣泡圖』，常見第一次元映射到x軸，第二次元映射到y軸，第三次元映射到氣泡半徑（symbolSize）
    ]
}           

在圖表中，往往預設把 value 的前一兩個次元進行映射，比如取第一個次元映射到x軸，取第二個次元映射到y軸。如果想要把更多的次元展現出來，可以借助 visualMap 。最常見的情況，氣泡圖（scatter） 使用半徑展現了第三個次元

visualMap 元件

visualMap 元件定義了把資料的『哪個次元』映射到『什麼視覺元素上』，現在提供如下兩種類型的visualMap元件，通過 visualMap.type 來區分；其定義結構例如：

option = {
    visualMap: [ // 可以同時定義多個 visualMap 元件。
        { // 第一個 visualMap 元件
            type: 'continuous', // 定義為連續型 viusalMap
            ...
        },
        { // 第二個 visualMap 元件
            type: 'piecewise', // 定義為分段型 visualMap
            ...
        }
    ],
    ...
};           

分段型視覺映射元件（visualMapPiecewise），有三種模式：

1.連續型資料平均分段: 依據 visualMap-piecewise.splitNumber 來自動平均分割成若幹塊

2.連續型資料自定義分段: 依據 visualMap-piecewise.pieces 來定義每塊範圍

3.離散資料（類别性資料）: 類别定義在 visualMap-piecewise.categories 中

視覺映射方式的配置

既然是『資料』到『視覺元素』的映射，visualMap 中可以指定資料的『哪個次元』映射到哪些『視覺元素』

例一：

option = {
    visualMap: [
        {
            type: 'piecewise'
            min: 0,
            max: 5000,
            dimension: 3,       // series.data 的第四個次元（即 value[3]）被映射
            seriesIndex: 4,     // 對第四個系列進行映射。
            inRange: {          // 選中範圍中的視覺配置
                color: ['blue', '#121122', 'red'], // 定義了圖形顔色映射的顔色清單，資料最小值映射到'blue'上，最大值映射到'red'上，其餘自動線性計算
                symbolSize: [30, 100]               // 定義了圖形尺寸的映射範圍，資料最小值映射到30上，最大值映射到100上，其餘自動線性計算
            },
            outOfRange: {       // 選中範圍外的視覺配置
                symbolSize: [30, 100]
            }
        },
        ...
    ]
};           

例二：

option = {
    visualMap: [
        {
            ...,
            inRange: {          // 選中範圍中的視覺配置
                colorLightness: [0.2, 1], // 映射到明暗度上。也就是對本來的顔色進行明暗度處理。本來的顔色可能是從全局色闆中選取的顔色，visualMap元件并不關心
                symbolSize: [30, 100]
            },
            ...
        },
        ...
    ]
};           

ECharts 中的事件和行為

在 ECharts 的圖表中使用者的操作将會觸發相應的事件；開發者可以監聽這些事件，然後通過回調函數做相應的處理，比如跳轉到一個位址，或者彈出對話框，或者做資料下鑽等等。在 ECharts 3 中綁定事件跟 2 一樣都是通過 on 方法，但是事件名稱比 2 更加簡單了。ECharts 3 中，事件名稱對應 DOM 事件名稱，均為小寫的字元串，如下是一個綁定點選操作的示例

myChart.on('click', function (params) {    
    console.log(params.name); // 控制台列印資料的名稱
});           

在 ECharts 中事件分為兩種類型，一種是使用者滑鼠操作點選，或者 hover 圖表的圖形時觸發的事件，還有一種是使用者在使用可以互動的元件後觸發的行為事件，例如在切換圖例開關時觸發的 'legendselectchanged' 事件（這裡需要注意切換圖例開關是不會觸發'legendselected'事件的），資料區域縮放時觸發的 'datazoom' 事件等等

滑鼠事件的處理

ECharts支援正常的滑鼠事件類型，包括'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu' 事件；所有的滑鼠事件包含參數 params，這是一個包含點選圖形的資料資訊的對象，如下格式：

{    
    componentType: string, // 目前點選的圖形元素所屬的元件名稱， 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等    
    seriesType: string, // 系列類型。值可能為：'line'、'bar'、'pie' 等。當 componentType 為 'series' 時有意義
    seriesIndex: number, // 系列在傳入的 option.series 中的 index。當 componentType 為 'series' 時有意義   
    seriesName: string, // 系列名稱。當 componentType 為 'series' 時有意義   
    name: string,  // 資料名，類目名
    dataIndex: number, // 資料在傳入的 data 數組中的 index   
    data: Object, // 傳入的原始資料項
    dataType: string, // sankey、graph 等圖表同時含有 nodeData 和 edgeData 兩種 data， dataType 的值會是 'node' 或者 'edge'，表示目前點選在 node 還是 edge 上；其他大部分圖表中隻有一種 data，dataType 無意義    
    value: number|Array // 傳入的資料值
    color: string // 資料圖形的顔色。當 componentType 為 'series' 時有意義
}           

如何區分滑鼠點選到了哪裡：

myChart.on('click', function (params) {
    if (params.componentType === 'markPoint') { // 點選到了 markPoint 上        
        if (params.seriesIndex === 5) {}  // 點選到了 index 為 5 的 series 的 markPoint 上
    }else if (params.componentType === 'series') {
        if (params.seriesType === 'graph') {
            if (params.dataType === 'edge') {} // 點選到了 graph 的 edge（邊）上            
            else {} // 點選到了 graph 的 node（節點）上  
        }
    }
});           

使用 query 隻對指定的元件的圖形元素的觸發回調：

chart.on(eventName, query, handler);           

query 可為 string 或者 Object。如果為 string 表示元件類型。格式可以是 'mainType' 或者 'mainType.subType'。例如：

chart.on('click', 'series', function () {...});
chart.on('click', 'series.line', function () {...});
chart.on('click', 'dataZoom', function () {...});
chart.on('click', 'xAxis.category', function () {...});           

如果為 Object，可以包含以下一個或多個屬性，每個屬性都是可選的：

{
    <mainType>Index: number // 元件 index
    <mainType>Name: string // 元件 name
    <mainType>Id: string // 元件 id
    dataIndex: number // 資料項 index
    name: string // 資料項 name
    dataType: string // 資料項 type，如關系圖中的 'node', 'edge'
    element: string // 自定義系列中的 el 的 name
}           

可以在回調函數中獲得這個對象中的資料名、系列名稱後在自己的資料倉庫中索引得到其它的資訊候更新圖表，顯示浮層等

myChart.on('click', function (parmas) {
    $.get('detail?q=' + params.name, function (detail) {
        myChart.setOption({
            series: [{
                name: 'pie',                
                data: [detail.data] // 通過餅圖表現單個柱子中的資料分布
            }]
        });
    });
});           

元件互動的行為事件

在 ECharts 中基本上所有的元件互動行為都會觸發相應的事件，常用的事件和事件對應參數在 events 文檔中有列出。下面是監聽一個圖例開關的示例：

myChart.on('legendselectchanged', function (params) { // 圖例開關的行為隻會觸發 legendselectchanged 事件    
    var isSelected = params.selected[params.name]; // 擷取點選圖例的選中狀态    
    console.log((isSelected ? '選中了' : '取消選中了') + '圖例' + params.name); // 在控制台中列印    
    console.log(params.selected); // 列印所有圖例的狀态
});           

代碼觸發 ECharts 中元件的行為

上面提到諸如'legendselectchanged'事件會由元件互動的行為觸發，那除了使用者的互動操作，有時候也會有需要在程式裡調用方法觸發圖表的行為，諸如顯示 tooltip，選中圖例。在 ECharts 2.x 是通過 myChart.component.tooltip.showTip 這種形式調用相應的接口觸發圖表行為，入口很深，而且涉及到内部元件的組織。相對地，在 ECharts 3 裡改為通過調用 myChart.dispatchAction({ type: '' }) 觸發圖表行為，統一管理了所有動作，也可以友善地根據需要去記錄使用者的行為路徑。

旭日圖

旭日圖（Sunburst）由多層的環形圖組成，在資料結構上，内圈是外圈的父節點。是以，它既能像餅圖一樣表現局部和整體的占比，又能像矩形樹圖一樣表現層級關系

建立旭日圖需要在 series 配置項中聲明類型為 'sunburst' 的系列，并且以樹形結構聲明其 data

顔色等樣式調整

預設情況下會使用全局調色盤 color 配置設定最内層的顔色，其餘層則與其父元素同色。在旭日圖中，扇形塊的顔色有以下三種設定方式：

在 series.data.itemStyle 中設定每個扇形塊的樣式/在 series.levels.itemStyle 中設定每一層的樣式/在 series.itemStyle 中設定整個旭日圖的樣式。

上述三者的優先級是從高到低的，也就是說，配置了 series.data.itemStyle 的扇形塊将會覆寫 series.levels.itemStyle 和 series.itemStyle 的設定

按層配置樣式

旭日圖是一種有層次的結構，為了友善同一層樣式的配置，我們提供了 levels 配置項。它是一個數組，其中的第 0 項表示資料下鑽後傳回上級的圖形，其後的每一項分别表示從圓心向外層的層級

資料下鑽

旭日圖預設支援資料下鑽，也就是說，當點選了扇形塊之後，将以該扇形塊的資料作為根節點，便于進一步了解該資料的細節;當資料下鑽後，中間會出現一個用于傳回上一層的圖形，該圖形的樣式可以通過 levels[0] 配置;如果不需要資料下鑽功能，可以通過将 nodeClick 設定為 false 關閉；或者将其設為 'link'，并将 data.link 設為點選扇形塊對應打開的連結

高亮相關扇形塊

旭日圖支援滑鼠移動到某扇形塊時，高亮相關資料塊的操作，可以通過設定 highlightPolicy，包括以下幾種高亮方式：

'descendant'（預設值）：高亮滑鼠移動所在扇形塊與其後代元素

'ancestor'：高亮滑鼠所在扇形塊與其祖先元素

'self'：僅高亮滑鼠所在扇形塊

'none'：不會淡化（downplay）其他元素

上面提到的“高亮”，對于滑鼠所在的扇形塊，會使用 emphasis 樣式；對于其他相關扇形塊，則會使用 highlight 樣式。通過這種方式，可以很友善地實作突出顯示相關資料的需求

自定義系列

自定義系列（custom series），是一種系列的類型。它把繪制圖形元素這一步留給開發者去做，進而開發者能在坐标系中自由繪制出自己需要的圖表。echarts 為什麼會要支援 自定義系列 呢？echarts 内置支援的圖表類型是最常見的圖表類型，但是圖表類型是難于窮舉的，有很多小衆的需求 echarts 并不能内置的支援。那麼就需要提供一種方式來讓開發者自己擴充。另一方面，所提供的擴充方式要盡可能得簡單，例如圖形元素建立和釋放、過渡動畫、tooltip、資料區域縮放（dataZoom）、視覺映射（visualMap）等功能，盡量在 echarts 中内置得處理，使開發者不必糾結于這些細節。綜上考慮形成了 自定義系列（custom series）

renderItem 方法

開發者自定義的圖形元素渲染邏輯，是通過書寫 renderItem 函數實作的

myChart.on('legendselectchanged', function (params) { // 圖例開關的行為隻會觸發 legendselectchanged 事件    
    var isSelected = params.selected[params.name]; // 擷取點選圖例的選中狀态    
    console.log((isSelected ? '選中了' : '取消選中了') + '圖例' + params.name); // 在控制台中列印    
    console.log(params.selected); // 列印所有圖例的狀态
});           

在渲染階段，對于 series.data 中的每個資料項（為友善描述，這裡稱為 dataItem)，會調用此 renderItem 函數。這個 renderItem 函數的職責，就是傳回一個（或者一組）圖形元素定義，圖形元素定義中包括圖形元素的類型、位置、尺寸、樣式等。echarts 會根據這些 圖形元素定義 來渲染出圖形元素

var option = {
    ...,
    series: [{
        type: 'custom',
        renderItem: function (params, api) { // 對于data中的每個dataItem，都會調用這個renderItem函數（但是注意，并不一定是按照 data 的順序調用）；這裡進行一些處理，例如，坐标轉換；這裡使用 api.value(0) 取出目前 dataItem 中第一個次元的數值            
            var categoryIndex = api.value(0);            
            var startPoint = api.coord([api.value(1), categoryIndex]); // 這裡使用 api.coord(...) 将數值在目前坐标系中轉換成為螢幕上的點的像素值
            var endPoint = api.coord([api.value(2), categoryIndex]);            
            var height = api.size([0, 1])[1] * 0.6; // 這裡使用 api.size(...) 獲得 Y 軸上數值範圍為 1 的一段所對應的像素長度            
            var rectShape = echarts.graphic.clipRectByRect({ // shape 屬性描述了這個矩形的像素位置和大小；其中特殊得用到了 echarts.graphic.clipRectByRect，意思是如果矩形超出了目前坐标系的包圍盒，則剪裁這個矩形；如果矩形完全被剪掉，會傳回 undefined
                // 矩形的位置和大小
                x: startPoint[0],
                y: startPoint[1] - height / 2,
                width: endPoint[0] - startPoint[0],
                height: height
            }, {
                // 目前坐标系的包圍盒
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
            });            
            return rectShape && { // 這裡傳回為這個 dataItem 建構的圖形元素定義
                // 表示這個圖形元素是矩形。還可以是 'circle', 'sector', 'polygon' 等等
                type: 'rect',
                shape: rectShape,                
                style: api.style() // 用 api.style(...) 得到預設的樣式設定。這個樣式設定包含了option 中 itemStyle 的配置和視覺映射得到的顔色
            };
        },
        data: [
            [12, 44, 55, 60], // 這是第一個 dataItem
            [53, 31, 21, 56], // 這是第二個 dataItem
            [71, 33, 10, 20], // 這是第三個 dataItem
            ...
        ]
    }]
}           

renderItem 函數提供了兩個參數：

1.params：包含了目前資料資訊（如 seriesIndex、dataIndex 等等）和坐标系的資訊（如坐标系包圍盒的位置和尺寸）

2.api：是一些開發者可調用的方法集合（如 api.value()、api.coord()）

renderItem 函數須傳回根據此 dataItem 繪制出的圖形元素的定義資訊；一般來說，renderItem 函數的主要邏輯，是将 dataItem 裡的值映射到坐标系上的圖形元素。這一般需要用到 renderItem.arguments.api 中的兩個函數：

1.api.value(...)，意思是取出 dataItem 中的數值。例如 api.value(0) 表示取出目前 dataItem 中第一個次元的數值

2.api.coord(...)，意思是進行坐标轉換計算。例如 var point = api.coord([api.value(0), api.value(1)]) 表示 dataItem 中的數值轉換成坐标系上的點

有時候還需要用到 api.size(...) 函數，表示得到坐标系上一段數值範圍對應的長度；傳回值中樣式的設定可以使用 api.style(...) 函數，他能得到 series.itemStyle 中定義的樣式資訊，以及視覺映射的樣式資訊。也可以用這種方式覆寫這些樣式資訊：api.style({fill: 'green', stroke: 'yellow'})；書寫完 renderItem 方法後，自定義系列的 90% 工作就做完了。剩下的是一些精化工作

使坐标軸的範圍自适應資料範圍

在 直角坐标系（grid）、極坐标系（polar） 中都有坐标軸；坐标軸的刻度範圍需要自适應目前顯示出的資料的範圍，否則繪制出的圖形會超出去。是以，例如在直角坐标系（grid）中使用自定義系列的開發者，需要設定data中的哪些次元會對應到x軸上，哪些次元會對應到y軸上。這件事通過encode來設定

option = {
    series: [{
        type: 'custom',
        renderItem: function () { ... },
        encode: {            
            x: [1, 2], // data 中『次元1』和『次元2』對應到 X 軸            
            y: 0 // data 中『次元0』對應到 Y 軸
        },
        data: [ // 次元0  次元1  次元2  次元3            
            [   12,   44,   55,   60   ], // 這是第一個 dataItem
            [   53,   31,   21,   56   ], // 這是第二個 dataItem
            [   71,   33,   10,   20   ], // 這是第三個 dataItem
            ...
        ]
    }]
};           

設定 tooltip

當然，使用 tooltip.formatter 可以任意定制 tooltip 中的内容。但是還有更簡單的方法，通過encode 和 dimensions 來設定：

option = {
    series: [{
        encode: {                        
            tooltip: [2, 3] // 表示『次元2』和『次元3』要顯示到 tooltip 中 （其他同上）
        },
    }]
};           

超出坐标系範圍的截取

與 dataZoom 結合使用的時候，常常使用會設定 dataZoom.filterMode 為 'weakFilter'。這個設定的意思是：當 dataItem 部分超出坐标系邊界的時候，dataItem 不會整體被過濾掉。例如：

option = {
    dataZoom: {
        xAxisIndex: 0,
        filterMode: 'weakFilter'
    },
    series: [{ ... }] //(此處内容同上)
};           

在這個例子中，『次元1』和『次元2』對應到 X 軸，dataZoom 元件控制 X 軸的縮放。假如在縮放的過程中，某個 dataItem 的『次元1』超出了 X 軸的範圍，『次元2』還在 X 軸的範圍中，那麼隻要設定 dataZoom.filterMode = 'weakFilter'，這個 dataItem 就不會被過濾掉，進而還能夠使用 renderItem 繪制圖形（可以使用上面提到過的 echarts.graphic.clipRectByRect 把圖形繪制成被坐标系剪裁過的樣子）

關于 dataIndex

開發者如果使用到的話應注意，renderItem.arguments.params 中的 dataIndex 和 dataIndexInside 是有差別的：

1.dataIndex 指的 dataItem 在原始資料中的 index

2.dataIndexInside 指的是 dataItem 在目前資料視窗中的index。

renderItem.arguments.api 中使用的參數都是 dataIndexInside 而非 dataIndex，因為從 dataIndex 轉換成 dataIndexInside 需要時間開銷

事件監聽

chart.setOption({
    // ...
    series: {
        type: 'custom',
        renderItem: function () {
            // ...
            return {
                type: 'group',
                children: [{
                    type: 'circle'
                    // ...
                }, {
                    type: 'circle',
                    name: 'aaa',                    
                    info: 12345, // 使用者指定的資訊，可以在 event handler 通路到
                    // ...
                }]
            };
        }
    }
});
chart.on('click', {element: 'aaa'}, function (params) { // 當 name 為 'aaa' 的圖形元素被點選時，此回調被觸發    
    console.log(params.info);
});           

自定義矢量圖形

自定義系列能支援使用 SVG PathData 定義矢量路徑。進而可以使用矢量圖工具中做出的圖形

富文本标簽

原先echarts中的文本标簽，隻能對整塊統一進行樣式設定，并且僅僅支援顔色和字型的設定，進而導緻不易于制作表達能力更強的文字描述資訊；echarts v3.7以後，支援了富文本标簽，能夠：

1.定制文本塊整體的樣式（如背景、邊框、陰影等）、位置、旋轉等

2.對文本塊中個别片段定義樣式（如顔色、字型、高寬、背景、陰影等）、對齊方式等

3.在文本中使用圖檔做小圖示或者背景

4.特定組合以上的規則，可以做出簡單表格、分割線等效果

開始下面的介紹之前，先說明下面會使用的兩個名詞的含義：

1.文本塊（Text Block）：文本标簽塊整體

2.文本片段（Text Fregment）：文本标簽塊中的部分文本

文本樣式相關的配置項

echarts 提供了豐富的文本标簽配置項，包括：

1.字型基本樣式設定：fontStyle、fontWeight、fontSize、fontFamily

2.文字顔色：color

3.文字描邊：textBorderColor、textBorderWidth

4.文字陰影：textShadowColor、textShadowBlur、textShadowOffsetX、textShadowOffsetY

5.文本塊或文本片段大小：lineHeight、width、height、padding

6.文本塊或文本片段的對齊：align、verticalAlign

7.文本塊或文本片段的邊框、背景（顔色或圖檔）：backgroundColor、borderColor、borderWidth、borderRadius

8.文本塊或文本片段的陰影：shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY

9.文本塊的位置和旋轉：position、distance、rotate

可以在各處的 rich 屬性中定義文本片段樣式。例如 series-bar.label.rich

label: {
    // 在文本中，可以對部分文本采用 rich 中定義樣式；這裡需要在文本中使用标記符号： `{styleName|text content text content}` 标記樣式名；注意，換行仍是使用 '\n'。
    formatter: [
        '{a|這段文本采用樣式a}',
        '{b|這段文本采用樣式b}這段用預設樣式{x|這段用樣式x}'
    ].join('\n'),
    // 這裡是文本塊的樣式設定：
    color: '#333', fontSize: 5, fontFamily: 'Arial', borderWidth: 3, backgroundColor: '#984455', padding: [3, 10, 10, 5], lineHeight: 20,    
    rich: { // rich 裡是文本片段的樣式設定
        a: { color: 'red', lineHeight: 10 },
        b: { backgroundColor: { image: 'xxx/xxx.jpg' }, height: 40 },
        x: { fontSize: 18, fontFamily: 'Microsoft YaHei', borderColor: '#449933', borderRadius: 4 },
        ...
    }
}           

注意：如果不定義 rich，不能指定文字塊的 width 和 height

文本、文本框、文本片段的基本樣式和裝飾

每個文本可以設定基本的字型樣式：fontStyle、fontWeight、fontSize、fontFamily

可以設定文字的顔色 color 和邊框的顔色 textBorderColor、textBorderWidth

文本框可以設定邊框和背景的樣式：borderColor、borderWidth、backgroundColor、padding

文本片段也可以設定邊框和背景的樣式：borderColor、borderWidth、backgroundColor、padding

标簽的位置

對于折線圖、柱狀圖、散點圖等，均可以使用 label 來設定标簽。标簽的相對于圖形元素的位置，一般使用 label.position、label.distance 來配置

注意：position 在不同的圖中可取值有所不同。distance 并不是在每個圖中都支援

标簽的旋轉

某些圖中，為了能有足夠長的空間來顯示标簽，需要對标簽進行旋轉；這種場景下，可以結合 align 和 verticalAlign 來調整标簽位置

注意，邏輯是，先使用 align 和 verticalAlign 定位，再旋轉

文本片段的排版和對齊

關于排版方式，每個文本片段，可以想象成 CSS 中的 inline-block，在文檔流中按行放置；每個文本片段的内容盒尺寸（content box size），預設是根據文字大小決定的；但也可以設定 width、height 來強制指定。文本片段的邊框盒尺寸（border box size），由上述本身尺寸，加上文本片段的padding來得到；隻有 'n' 是換行符，能導緻換行。一行内，會有多個文本片段，每行的實際高度由lineHeight最大的文本片段決定，文本片段的lineHeight可直接在rich中指定，也可以在rich的父層級中統一指定而采用到rich的所有項中，如果都不指定，則取文本片段的邊框盒尺寸（border box size）；在一行的 lineHeight 被決定後，一行内，文本片段的豎直位置，由文本片段的verticalAlign來指定（這裡和 CSS 中的規則稍有不同）：

'bottom'：文本片段的盒的底邊貼住行底/'top'：文本片段的盒的頂邊貼住行頂/'middle'：居行中

文本塊的寬度，可以直接由文本塊的width指定，否則由最長的行決定；寬度決定後，在一行中進行文本片段的放置；文本片段的align決定了文本片段在行中的水準位置：

首先，從左向右連續緊靠放置 align 為 'left' 的文本片段盒

然後，從右向左連續緊靠放置 align 為 'right' 的文本片段盒

最後，剩餘的沒處理的文本片段盒，緊貼着，在中間剩餘的區域中居中放置

關于文字在文本片段盒中的位置：

如果 align 為 'center'，則文字在文本片段盒中是居中的

如果 align 為 'left'，則文字在文本片段盒中是居左的

如果 align 為 'right'，則文字在文本片段盒中是居右的

特殊效果：圖示、分割線、标題塊、簡單表格

文本片段的 backgroundColor 可以指定為圖檔後，就可以在文本中使用圖示了：

rich: {
    Sunny: {        
        backgroundColor: { // 這樣設定 backgroundColor 就可以是圖檔了
            image: './data/asset/img/weather/sunny_128.png'
        },        
        height: 30 // 可以隻指定圖檔的高度，進而圖檔的寬度根據圖檔的長寬比自動得到
    }
}           

分割線實際是用 border 實作的：

rich: {
    hr: {
        borderColor: '#777',
        width: '100%', // 這裡把width設定為'100%'，表示分割線的長度充滿文本塊；注意，這裡是文本塊内容盒（content box）的100%，而不包含padding；雖然這和 CSS 相關的定義有所不同，但是在這類場景中更加友善
        borderWidth: 0.5,
        height: 0
    }
}           

标題塊是使用 backgroundColor 實作的

// 标題文字居左
formatter: '{titleBg|Left Title}',
rich: {
    titleBg: { backgroundColor: '#000', height: 30, borderRadius: [5, 5, 0, 0], padding: [0, 10, 0, 10], width: '100%', color: '#eee' }
}
// 标題文字居中； 這個實作有些 tricky，但是能夠不引入更複雜的排版規則而實作這個效果
formatter: '{tc|Center Title}{titleBg|}',
rich: {
    titleBg: { align: 'right', backgroundColor: '#000', height: 30, borderRadius: [5, 5, 0, 0], padding: [0, 10, 0, 10], width: '100%', color: '#eee'
    }
}           

簡單表格的設定，其實就是給不同行上縱向對應的文本片段設定同樣的寬度就可以了

服務端渲染

ECharts 可以在服務端進行渲染；服務端渲染可以使用流行的 headless 環境，例如 puppeteer、headless chrome、node-canvas、jsdom、PhantomJS 等

使用 Canvas 或者 SVG 渲染

浏覽器端圖表庫大多會選擇SVG或者Canvas進行渲染；對于繪制圖表來說，這兩種技術往往是可替換的，效果相近；但是在一些場景中，他們的表現和能力又有一定差異。于是，對它們的選擇取舍，就成為了一個一直存在的不易有标準答案的話題。ECharts 從初始一直使用 Canvas 繪制圖表（除了對 IE8- 使用 VML）。而 ECharts v4.0 釋出了 SVG 渲染器，進而提供了一種新的選擇。隻須在初始化一個圖表執行個體時，設定 renderer 參數 為 'canvas' 或 'svg' 即可指定渲染器，比較友善

SVG 和 Canvas 這兩種使用方式差異很大的技術，能夠做到同時被透明支援，主要歸功于 ECharts 底層庫 ZRender 的抽象和實作，形成可互換的 SVG 渲染器和 Canvas 渲染器

選擇哪種渲染器

一般來說，Canvas 更适合繪制圖形元素數量非常大（這一般是由資料量大導緻）的圖表（如熱力圖、地理坐标系或平行坐标系上的大規模線圖或散點圖等），也利于實作某些視覺 特效；但是，在不少場景中，SVG 具有重要的優勢：它的記憶體占用更低（這對移動端尤其重要）、渲染性能略高、并且使用者使用浏覽器内置的縮放功能時不會模糊；例如，我們在一些硬體環境中分别使用 Canvas 渲染器和 SVG 渲染器繪制中等資料量的折、柱、餅，統計初始動畫階段的幀率，得到性能對比結果：SVG 渲染器相比 Canvas 渲染器在移動端的總體表現更好。當然，這個實驗并非是全面的評測，在另一些資料量較大或者有圖表互動動畫的場景中，目前SVG渲染器的性能還比不過Canvas渲染器。但是同時有這兩個選項，為開發者們根據自己的情況優化性能提供了更廣闊的空間

選擇哪種渲染器，我們可以根據軟硬體環境、資料量、功能需求綜合考慮。

1.在軟硬體環境較好，資料量不大的場景下（例如 PC 端做商務報表），兩種渲染器都可以适用，并不需要太多糾結

2.在環境較差，出現性能問題需要優化的場景下，可以通過試驗來确定使用哪種渲染器。比如有這些經驗：

（1）在須要建立很多 ECharts 執行個體且浏覽器易崩潰的情況下（可能是因為 Canvas 數量多導緻記憶體占用超出手機承受能力），可以使用 SVG 渲染器來進行改善。大略得說，如果圖表運作在低端安卓機，或者我們在使用一些特定圖表如 水球圖 等，SVG 渲染器可能效果更好。

（2）資料量很大、較多互動時，可以選用 Canvas 渲染器

注：除了某些特殊的渲染可能依賴 Canvas：如炫光尾迹特效、帶有混合效果的熱力圖等，絕大部分功能 SVG 都是支援的。此外，目前的 SVG 版中，富文本、材質功能尚未實作

如何使用渲染器

ECharts 預設使用 Canvas 渲染；如果想使用 SVG 渲染，ECharts 代碼中須包括有 SVG 渲染器子產品

1.ECharts 的 預建構檔案 中，常用版 和 完整版 已經包含了 SVG 渲染器，可直接使用。而 精簡版 沒有包括

2.如果 線上自定義建構 ECharts，則需要勾上頁面下方的 “SVG 渲染”

3.如果 線下自定義建構 ECharts，則須引入 SVG 渲染器子產品，即：

import 'zrender/lib/svg/svg';           

然後，我們就可以在代碼中，初始化圖表執行個體時，傳入參數 選擇渲染器類型：

// 使用 Canvas 渲染器（預設）
var chart = echarts.init(containerDom, null, {renderer: 'canvas'});
// 等價于：
var chart = echarts.init(containerDom);
// 使用 SVG 渲染器
var chart = echarts.init(containerDom, null, {renderer: 'svg'});           

在圖表中支援無障礙通路

W3C制定了無障礙富網際網路應用規範集（WAI-ARIA，the Accessible Rich Internet Applications Suite），緻力于使得網頁内容和網頁應用能夠被更多殘障人士通路。ECharts 4.0遵從這一規範，支援自動根據圖表配置項智能生成描述，使得盲人可以在朗讀裝置的幫助下了解圖表内容，讓圖表可以被更多人群通路。預設關閉，需要通過将 aria.show設定為true開啟。開啟後，會根據圖表、資料、标題等情況，自動智能生成關于圖表的描述，使用者也可以通過配置項修改描述

對于配置項：

option = {
    aria: { show: true },
    title: { text: '某站點使用者通路來源', x: 'center' },
    series: [{
        name: '通路來源',
        type: 'pie',
        data: [ { value: 335, name: '直接通路' }, { value: 310, name: '郵件營銷' }, { value: 234, name: '聯盟廣告' }, { value: 135, name: '視訊廣告' }, { value: 1548, name: '搜尋引擎' } ]
    }]
};           

生成的圖表 DOM 上，會有一個 aria-label 屬性，在朗讀裝置的幫助下，盲人能夠了解圖表的内容

整體修改描述

對于有些圖表，預設生成的資料點的描述并不足以表現整體的資訊；比如散點圖，預設生成的描述可以包含資料點的坐标值，但是知道幾百幾千個點的坐标并不能幫助我們有效地了解圖表表達的資訊；這時候，使用者可以通過 aria.description 配置項指定圖表的整體描述

定制模闆描述

除了整體性修改描述外，我們還提供了生成描述的模闆，可以友善地進行細粒度的修改；生成描述的基本流程為，如果 aria.show 設定為 true，則生成無障礙通路描述，否則不生成。如果定義了 aria.description，則将其作為圖表的完整描述，否則根據模闆拼接生成描述。我們提供了預設的生成描述的算法，僅當生成的描述不太合适時，才需要修改這些模闆，甚至使用 aria.description 完全覆寫。

使用模闆拼接時，先根據是否存在标題 title.text 決定使用 aria.general.withTitle 還是 aria.general.withoutTitle 作為整體性描述。其中，aria.general.withTitle 配置項包括模闆變量 '{title}'，将會被替換成圖表标題。也就是說，如果 aria.general.withTitle 被設定為 '圖表的标題是：{title}。'，則如果包含标題 '價格分布圖'，這部分的描述為 '圖表的标題是：價格分布圖。'。

拼接完标題之後，會依次拼接系列的描述（aria.series），和每個系列的資料的描述（aria.data）。同樣，每個模闆都有可能包括模闆變量，用以替換實際的值

使用 ECharts GL 實作基礎的三維可視化

ECharts GL （後面統一簡稱 GL）為 ECharts 補充了豐富的三維可視化元件，這裡我們會簡單介紹如何基于 GL 實作一些常見的三維可視化作品。實際上如果你對 ECharts 有一定了解的話，也可以很快的上手 GL，GL 的配置項完全是按照 ECharts 的标準和上手難度來設計的

如何下載下傳和引入 ECharts GL

為了不再增加已經很大了的 ECharts 完整版的體積，我們将 GL 作為擴充包的形式提供，和諸如水球圖這樣的擴充類似，如果要使用 GL 裡的各種元件，隻需要在引入echarts.min.js的基礎上再引入一個echarts-gl.min.js。你可以從 官網 下載下傳最新版的 GL，然後在頁面中通過标簽引入：

<script src="lib/echarts.min.js"></script>
<script src="lib/echarts-gl.min.js"></script>           

如果你的項目使用 webpack 或者 rollup 來打包代碼的話，也可以通過 npm 安裝後引入

npm install echarts
npm install echarts-gl
// 通過 ES6 的 import 文法引入 ECharts 和 ECharts GL
import echarts from 'echarts';
import 'echarts-gl';           

聲明一個基礎的三維笛卡爾坐标系

引入ECharts和ECharts GL後，我們先來聲明一個基礎的三維笛卡爾坐标系用于繪制三維的散點圖，柱狀圖，曲面圖等常見的統計圖；在ECharts中我們有grid元件用于提供一個矩形的區域放置一個二維的笛卡爾坐标系，以及笛卡爾坐标系上的x軸（xAxis）和y軸（yAxis）。對于三維的笛卡爾坐标系，我們在GL中提供了grid3D 元件用于劃分一塊三維的笛卡爾空間，以及放置在這個grid3D上的xAxis3D,yAxis3D,zAxis3D

小提示：在 GL 中我們對除了 globe 之外所有的三維元件和系列都加了 3D 的字尾用以區分，例如三維的散點圖就是 scatter3D，三維的地圖就是 map3D 等

下面這段代碼就聲明了一個最簡單的三維笛卡爾坐标系

var option = {    
    grid3D: {}, // 需要注意的是我們不能跟 grid 一樣省略 grid3D    
    xAxis3D: {}, // 預設情況下, x, y, z 分别是從 0 到 1 的數值軸
    yAxis3D: {},
    zAxis3D: {}
}           

跟二維的笛卡爾坐标系一樣，每個軸都會有多種類型，預設是數值軸，如果需要是類目軸的話，簡單的設定為 type: 'category'就行了

繪制三維的散點圖

聲明好笛卡爾坐标系後，我們先試試用一份程式生成的正态分布資料在這個三維的笛卡爾坐标系中畫散點圖。

下面這段是生成正态分布資料的代碼，你可以先不用關心這段代碼是怎麼工作的，隻需要知道它生成了一份三維的正态分布資料放在data數組中

function makeGaussian(amplitude, x0, y0, sigmaX, sigmaY) {
    return function (amplitude, x0, y0, sigmaX, sigmaY, x, y) {
        var exponent = -( ( Math.pow(x - x0, 2) / (2 * Math.pow(sigmaX, 2))) + ( Math.pow(y - y0, 2) / (2 * Math.pow(sigmaY, 2))) );
        return amplitude * Math.pow(Math.E, exponent);
    }.bind(null, amplitude, x0, y0, sigmaX, sigmaY);
}
var gaussian = makeGaussian(50, 0, 0, 20, 20); // 建立一個高斯分布函數
var data = [];
for (var i = 0; i < 1000; i++) { // x, y 随機分布    
    var x = Math.random() * 100 - 50;
    var y = Math.random() * 100 - 50;
    var z = gaussian(x, y);
    data.push([x, y, z]);
}           

生成的正态分布的資料大概長這樣：

[
  [46.74395071259907, -33.88391024738553, 0.7754030099768191],
  [-18.45302873809771, 16.88114775416834, 22.87772504105404],
  [2.9908128281121336, -0.027699444453467947, 49.44400635911886],
  ...
]           

每一項都包含了x, y, z三個值，這三個值會分别被映射到笛卡爾坐标系的 x 軸，y 軸和 z 軸上。然後我們可以使用 GL 提供的 scatter3D 系列類型把這些資料畫成三維空間中正态分布的點

option = {
    grid3D: {},
    xAxis3D: {},
    yAxis3D: {},
    zAxis3D: { max: 100 },
    series: [{ type: 'scatter3D', data: data }]
}           

使用真實資料的三維散點圖

接下來我們來看一個使用真實多元資料的三維散點圖例子；格式化一下可以看到這份資料是很傳統轉成JSON後的表格格式；第一行是每一列資料的屬性名，可以從這個屬性名看出來每一列資料的含義，分别是個人所得，人均壽命，人口數量，國家和年份

[
    ["Income", "Life Expectancy", "Population", "Country", "Year"],
    [815, 34.05, 351014, "Australia", 1800],
    [1314, 39, 645526, "Canada", 1800],
    [985, 32, 321675013, "China", 1800],
    [864, 32.2, 345043, "Cuba", 1800],
    [1244, 36.5731262, 977662, "Finland", 1800],
    ...
]           

在 ECharts 4 中我們可以使用 dataset 元件非常友善地引入這份資料

$.get('data/asset/data/life-expectancy-table.json', function (data) {
    myChart.setOption({
        grid3D: {},
        xAxis3D: {},
        yAxis3D: {},
        zAxis3D: {},
        dataset: { source: data },
        series: [{ type: 'scatter3D', symbolSize: 2.5 }]
    })
});           

預設會把前三列，也就是收入（Income），人均壽命（Life Expectancy），人口（Population）分别放到x、y、z軸上；使用encode屬性我們還可以将指定列的資料映射到指定的坐标軸上，進而省去很多繁瑣的資料轉換代碼；例如我們将x軸換成是國家（Country），y軸換成年份（Year），z軸換成收入（Income），可以看到不同國家不同年份的個人所得分布

myChart.setOption({
    grid3D: {},
    xAxis3D: { type: 'category' }, // 因為 x 軸和 y 軸都是類目資料，是以需要設定 type: 'category' 保證正确顯示資料
    yAxis3D: { type: 'category' },
    zAxis3D: {},
    dataset: { source: data },
    series: [{
        type: 'scatter3D', symbolSize: 2.5,
        encode: {  // 次元的名字預設就是表頭的屬性名               
            x: 'Country', y: 'Year', z: 'Income',
            tooltip: [0, 1, 2, 3, 4]
        }
    }]
});           

利用 visualMap 元件對三維散點圖進行視覺編碼

剛才多元資料的例子中，我們還有幾個次元（列）沒能表達出來，利用 ECharts 内置的 visualMap 元件我們可以繼續将第四個次元編碼成顔色

myChart.setOption({
    grid3D: {
        viewControl: { projection: 'orthographic' } // 使用正交投影
    },
    xAxis3D: { type: 'category' }, // 因為 x 軸和 y 軸都是類目資料，是以需要設定 type: 'category' 保證正确顯示資料
    yAxis3D: { type: 'log' },
    zAxis3D: {},
    visualMap: {
        calculable: true,
        max: 100,        
        dimension: 'Life Expectancy', // 次元的名字預設就是表頭的屬性名
        inRange: { color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026'] }
    },
    dataset: { source: data },
    series: [
        {
            type: 'scatter3D', symbolSize: 5,
            encode: { x: 'Country', y: 'Population', z: 'Income', tooltip: [0, 1, 2, 3, 4] } // 次元的名字預設就是表頭的屬性名
        }
    ]
})           

這段代碼中我們又在剛才的例子基礎上加入了 visualMap 元件，将Life Expectancy這一列資料映射到了不同的顔色；除此之外我們還把原來預設的透視投影改成了正交投影。正交投影在某些場景中可以避免因為近大遠小所造成的表達錯誤

當然，除了 visualMap 元件，還可以利用其它的 ECharts 内置元件并且充分利用這些元件的互動效果，比如 legend。也可以像 三維散點圖和散點矩陣結合使用 這個例子一樣實作二維和三維的系列混搭；在實作 GL 的時候我們盡可能地把 WebGL 和 Canvas 之間的差異屏蔽了到最小，進而讓 GL 的使用可以更加友善自然

在笛卡爾坐标系上顯示其它類型的三維圖表

除了散點圖，我們也可以通過GL在三維的笛卡爾坐标系上繪制其它類型的三維圖表；比如剛才例子中将scatter3D類型改成bar3D就可以變成一個三維的柱狀圖；機器學習中會用到的三維曲面圖surface，三維曲面圖常用來表達平面上的資料走勢，剛才的正态分布資料我們也可以像下面這樣畫成曲面圖

var data = [];
// 曲面圖要求給入的資料是網格形式按順序分布
for (var y = -50; y <= 50; y++) {
    for (var x = -50; x <= 50; x++) {
        var z = gaussian(x, y); data.push([x, y, z]);
    }
}
option = {
    grid3D: {},
    xAxis3D: {},
    yAxis3D: {},
    zAxis3D: { max: 60 },
    series: [{ type: 'surface', data: data }]
}           

在微信小程式中使用 ECharts

Echarts和微信小程式官方團隊合作，提供了 ECharts 的微信小程式版本。開發者可以通過熟悉的 ECharts 配置方式，快速開發圖表，滿足各種可視化需求

下載下傳

為了相容小程式 Canvas，我們提供了一個小程式的元件，用這種方式可以友善地使用 ECharts

首先，下載下傳 GitHub 上的 ecomfe/echarts-for-weixin 項目；其中，ec-canvas 是我們提供的元件，其他檔案是如何使用該元件的示例；ec-canvas 目錄下有一個 echarts.js，預設我們會在每次 echarts-for-weixin 項目發版的時候替換成最新版的 ECharts。如有必要，可以自行從 ECharts 項目中下載下傳最新釋出版，或者從官網自定義建構以減小檔案大小

引入元件

在建立項目後，可以将下載下傳的 ecomfe/echarts-for-weixin 項目完全替換建立的項目，然後将修改代碼；或者僅拷貝 ec-canvas 目錄到建立的項目下，然後做相應的調整。如果采用完全替換的方式，需要将 project.config.json 中的 appid 替換成在公衆平台申請的項目id。pages 目錄下的每個檔案夾是一個頁面，可以根據情況删除不需要的頁面，并且在 app.json 中删除對應頁面。如果僅拷貝 ec-canvas 目錄，則可以參考 pages/bar 目錄下的幾個檔案的寫法。下面，我們具體地說明

建立圖表

首先，在 pages/bar 目錄下建立以下幾個檔案：index.js、 index.json、 index.wxml、 index.wxss。并且在 app.json 的 pages 中增加 'pages/bar/index'

index.json 配置如下：

{ "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" } }           

這一配置的作用是，允許我們在 pages/bar/index.wxml 中使用 元件。注意路徑的相對位置要寫對，如果目錄結構和本例相同，就應該像上面這樣配置。

index.wxml 中，我們建立了一個 元件，内容如下：

<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>           

其中 ec 是一個我們在 index.js 中定義的對象，它使得圖表能夠在頁面加載後被初始化并設定。index.js 的結構如下：

function initChart(canvas, width, height) {
  const chart = echarts.init(canvas, null, { width: width, height: height });
  canvas.setChart(chart);
  var option = { ... };
  chart.setOption(option);
  return chart;
}
Page({
  data: {
    ec: { onInit: initChart }
  }
});           

這對于所有 ECharts 圖表都是通用的，使用者隻需要修改上面 option 的内容，即可改變圖表

暫不支援的功能

ECharts 中的絕大部分功能都支援小程式版本，是以這裡僅說明不支援的功能，以及存在的問題。

1.Tooltip

2.圖檔

3.多個 zlevel 分層

此外，目前還有一些 bug 尚未修複，部分需要小程式團隊配合上線支援，但不影響基本的使用。已知的 bug 包括：

1.安卓平台：transform 的問題（會影響關系圖邊兩端的标記位置、旭日圖文字位置等）

2.iOS 平台：半透明略有變深的問題

3.iOS 平台：漸變色出現在定義區域之外的地方

API

echarts

全局 echarts 對象，在 script 标簽引入 echarts.js 檔案後獲得，或者在 AMD 環境中通過 require('echarts') 獲得；不能在單個容器上初始化多個 ECharts 執行個體

echarts.init

建立一個 ECharts 執行個體，傳回 echartsInstance，不能在單個容器上初始化多個 ECharts 執行個體

參數

1.dom：執行個體容器，一般是一個具有高寬的div元素。

注：如果div是隐藏的，ECharts 可能會擷取不到div的高寬導緻初始化失敗，這時候可以明确指定div的style.width和style.height，或者在div顯示後手動調用 echartsInstance.resize 調整尺寸

ECharts 3 中支援直接使用canvas元素作為容器，這樣繪制完圖表可以直接将 canvas 作為圖檔應用到其它地方，例如在 WebGL 中作為貼圖，這跟使用 echartsInstance.getDataURL 生成圖檔連結相比可以支援圖表的實時重新整理

2.theme

應用的主題。可以是一個主題的配置對象，也可以是使用已經通過 echarts.registerTheme 注冊的主題名稱

3.opts

附加參數。有下面幾個可選項：

devicePixelRatio：裝置像素比，預設取浏覽器的值window.devicePixelRatio

renderer：渲染器，支援 'canvas' 或者 'svg'

width：可顯式指定執行個體寬度，機關為像素。如果傳入值為 null/undefined/'auto'，則表示自動取 dom（執行個體容器）的寬度

height：可顯式指定執行個體高度，機關為像素。如果傳入值為 null/undefined/'auto'，則表示自動取 dom（執行個體容器）的高度

echarts.connect

多個圖表執行個體實作關聯

group：group的id，或者圖表執行個體的數組

// 分别設定每個執行個體的 group id
chart1.group = 'group1';
chart2.group = 'group1';
echarts.connect('group1');
// 或者可以直接傳入需要關聯的執行個體數組
echarts.connect([chart1, chart2]);           

echarts.disconnect

解除圖表執行個體的關聯，如果隻需要移除單個執行個體，可以将通過将該圖表執行個體 group 設為空

echarts.dispose

銷毀執行個體，執行個體銷毀後無法再被使用

echarts.getInstanceByDom

擷取 dom 容器上的執行個體

echarts.registerMap

注冊可用的地圖，必須在包括 geo 元件或者 map 圖表類型的時候才能使用

1.mapName:地圖名稱，在geo元件或者map圖表類型中設定的map對應的就是該值

2.geoJson:GeoJson格式的資料

3.specialAreas:可選；将地圖中的部分區域縮放到合适的位置，可以使得整個地圖的顯示更加好看

echarts.registerMap('USA', usaJson, {  
  Alaska: { // 把阿拉斯加移到美國主大陸左下方      
      left: -131, // 左上角經度      
      top: 25, // 左上角緯度      
      width: 15 // 經度橫跨的範圍
  },  
  Hawaii: { left: -110, top: 28, width: 5 }, // 夏威夷  
  'Puerto Rico': { left: -76, top: 26, width: 2 } // 波多黎各
});           

echarts.getMap

擷取已注冊的地圖，傳回的對象類型如下

{    
    geoJson: Object, // 地圖的 geoJson 資料    
    specialAreas: Object // 地圖的特殊區域，見 registerMap
}           

echarts.registerTheme

注冊主題，用于初始化執行個體的時候指定

echarts.graphic

圖形相關幫助方法

echarts.graphic.clipPointsByRect

輸入一組點，和一個矩形，傳回被矩形截取過的點

(    
    points: Array.<Array.<number>>, // 要被截取的點清單，如 [[23, 44], [12, 15], ...]    
    rect: { // 用于截取點的矩形
        x: number, y: number, width: number, height: number
    }
) => Array.<Array.<number>> // 截取結果           

echarts.graphic.clipRectByRect

輸入兩個矩形，傳回第二個矩形截取第一個矩形的結果

(
    targetRect: { // 要被截取的矩形
        x: number, y: number, width: number, height: number
    },    
    rect: { // 用于截取點的矩形
        x: number, y: number, width: number, height: number
    }
) => { // 截取結果
    x: number, y: number, width: number, height: number
}           

注意：如果矩形完全被截幹淨，會傳回 undefined

echartsInstance

通過 echarts.init 建立的執行個體

echartsInstance.group

圖表的分組，用于關聯

echartsInstance.setOption

設定圖表執行個體的配置項以及資料，萬能接口，所有參數和資料的修改都可以通過 setOption 完成，ECharts 會合并新的參數和資料，然後重新整理圖表。如果開啟動畫的話，ECharts 找到兩組資料之間的差異然後通過合适的動畫去表現資料的變化

注： ECharts 2.x 中的通過 addData , setSeries 方法設定配置項的方式将不再支援，在 ECharts 3 中統一使用 setOption

調用方式：

chart.setOption(option, notMerge, lazyUpdate);
或者
chart.setOption(option, {
    notMerge: ...,
    lazyUpdate: ...,
    silent: ...
});           

1.option：圖表的配置項和資料

2.notMerge：可選，是否不跟之前設定的 option 進行合并，預設為 false，即合并

3.lazyUpdate：可選，在設定完 option 後是否不立即更新圖表，預設為 false，即立即更新

4.silent：可選，阻止調用 setOption 時抛出事件，預設為 false，即抛出事件

echartsInstance.getWidth

擷取 ECharts 執行個體容器的寬度

echartsInstance.getHeight

擷取 ECharts 執行個體容器的高度

echartsInstance.getDom

擷取 ECharts 執行個體容器的 dom 節點

echartsInstance.getOption

擷取目前執行個體中維護的 option 對象，傳回的 option 對象中包含了使用者多次 setOption 合并得到的配置項和資料，也記錄了使用者互動的狀态，例如圖例的開關，資料區域縮放選擇的範圍等等。是以從這份 option 可以恢複或者得到一個新的一模一樣的執行個體

注意：傳回的 option 每個元件的屬性值都統一是一個數組，不管 setOption 傳進來的時候是單個元件的對象還是多個元件的數組。如下形式：

{ title: [{...}], legend: [{...}], grid: [{...}] }           

另外不推薦下面這種寫法：

var option = myChart.getOption();
option.visualMap[0].inRange.color = ...;
myChart.setOption(option);           

因為 getOption 擷取的是已經合并過預設值了的，是以在修改了某些配置項後會導緻原本是根據這些配置項值去設定的預設值失效；是以我們更推薦通過setOption去修改部配置設定置

myChart.setOption({
    visualMap: {
        inRange: { color: ... }
    }
})           

echartsInstance.resize

改變圖表尺寸，在容器大小發生改變時需要手動調用

opts：可預設。有下面幾個可選項：

1.width：可顯式指定執行個體寬度，機關為像素。如果傳入值為 null/undefined/'auto'，則表示自動取 dom（執行個體容器）的寬度

2.height：可顯式指定執行個體高度，機關為像素。如果傳入值為 null/undefined/'auto'，則表示自動取 dom（執行個體容器）的高度

silent：是否禁止抛出事件。預設為 false

Tip: 有時圖表會放在多個标簽頁裡，那些初始隐藏的标簽在初始化圖表的時候因為擷取不到容器的實際高寬，可能會繪制失敗，是以在切換到該标簽頁時需要手動調用 resize 方法擷取正确的高寬并且重新整理畫布，或者在 opts 中顯示指定圖表高寬。

echartsInstance.dispatchAction

觸發圖表行為，例如圖例開關legendToggleSelect, 資料區域縮放dataZoom，顯示提示框showTip等等，payload 參數可以通過batch屬性同時觸發多個行為

注：在 ECharts 2.x 是通過 myChart.component.tooltip.showTip 這種形式調用相應的接口觸發圖表行為，入口很深，而且涉及到内部元件的組織。是以在 ECharts 3 裡統一改為 dispatchAction 的形式

myChart.dispatchAction({ type: 'dataZoom', start: 20, end: 30 });
myChart.dispatchAction({ // 可以通過 batch 參數批量分發多個 action
    type: 'dataZoom',
    batch: [{ // 第一個 dataZoom 元件        
        start: 20, end: 30
    }, { // 第二個 dataZoom 元件        
        dataZoomIndex: 1, start: 10, end: 20
    }]
})           

echartsInstance.on

綁定事件處理函數；ECharts 中的事件有兩種，一種是滑鼠事件，在滑鼠點選某個圖形上會觸發，還有一種是 調用 dispatchAction 後觸發的事件。每個 action 都會有對應的事件；如果事件是外部 dispatchAction 後觸發，并且 action 中有 batch 屬性觸發批量的行為，則相應的響應事件參數裡也會把屬性都放在 batch 屬性中

1.eventName：事件名稱，全小寫，例如'click'，'mousemove', 'legendselected'

注： ECharts 2.x 中會使用 config 對象中的 CLICK 等屬性作為事件名稱。在 ECharts 3 中統一使用跟 dom 事件一樣的全小寫字元串作為事件名

2.query：可選的過濾條件，能夠隻在指定的元件或元素上進行響應。可為 string 或 Object；如果為 string 表示元件類型，格式可以是 'mainType' 或者 'mainType.subType'。例如：

chart.on('click', 'series', function () {...});
chart.on('click', 'series.line', function () {...});
chart.on('click', 'dataZoom', function () {...});
chart.on('click', 'xAxis.category', function () {...});           

{
    <mainType>Index: number // 元件 index
    <mainType>Name: string // 元件 name
    <mainType>Id: string // 元件 id
    dataIndex: number // 資料項 index
    name: string // 資料項 name
    dataType: string // 資料項 type，如關系圖中的 'node', 'edge'
    element: string // 自定義系列中的 el 的 name
}           

例如：

chart.setOption({
     // ...
     series: [{
         name: 'uuu'
         // ...
     }]
 });
 chart.on('mouseover', {seriesName: 'uuu'}, function () {
     // series name 為 'uuu' 的系列中的圖形元素被 'mouseover' 時，此方法被回調
 });
 或
 chart.setOption({
      // ...
      series: [{
          // ...
      }, {
          // ...
          data: [
              {name: 'xx', value: 121},
              {name: 'yy', value: 33}
          ]
      }]
  });
  chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function () {
      // series index 1 的系列中的 name 為 'xx' 的元素被 'mouseover' 時，此方法被回調
  });
或
chart.setOption({
    // ...
    series: [{
        type: 'graph',
        nodes: [{name: 'a', value: 10}, {name: 'b', value: 20}],
        edges: [{source: 0, target: 1}]
    }]
});
chart.on('click', {dataType: 'node'}, function () {
    // 關系圖的節點被點選時此方法被回調
});
chart.on('click', {dataType: 'edge'}, function () {
    // 關系圖的邊被點選時此方法被回調
});
或
chart.setOption({
      // ...
      series: {
          // ...
          type: 'custom',
          renderItem: function (params, api) {
              return {
                  type: 'group',
                  children: [{
                      type: 'circle',
                      name: 'my_el',
                      // ...
                  }, {
                      // ...
                  }]
              }
          },
          data: [[12, 33]]
      }
  })
  chart.on('mouseup', {element: 'my_el'}, function () {
      // name 為 'my_el' 的元素被 'mouseup' 時，此方法被回調
  });           

3.handler：事件處理函數。格式為: (event: Object)

4.context：可選。回調函數内部的context，即this的指向

echartsInstance.off

解綁事件處理函數

eventName：事件名稱

handler：可選，可以傳入需要解綁的處理函數，不傳的話解綁所有該類型的事件函數

echartsInstance.convertToPixel

轉換坐标系上的點到像素坐标值

(    
    finder: { // finder 用于訓示『使用哪個坐标系進行轉換』；通常地，可以使用 index 或者 id 或者 name 來定位
        seriesIndex?: number,
        seriesId?: string,
        seriesName?: string,
        geoIndex?: number,
        geoId?: string,
        geoName?: string,
        xAxisIndex?: number,
        xAxisId?: string,
        xAxisName?: string,
        yAxisIndex?: number,
        yAxisId?: string,
        yAxisName?: string,
        gridIndex?: number,
        gridId?: string
        gridName?: string
    },    
    value: Array|string // 要被轉換的值    
) => Array|string // 轉換的結果為像素坐标值，以 echarts 執行個體的 dom 節點的左上角為坐标 [0, 0] 點           

例1：在地理坐标系（geo）上，把某個點的經緯度坐标轉換成為像素坐标

// [128.3324, 89.5344] 表示 [經度，緯度]，使用第一個 geo 坐标系進行轉換：
chart.convertToPixel('geo', [128.3324, 89.5344]); // 參數 'geo' 等同于 {geoIndex: 0}
// 使用第二個 geo 坐标系進行轉換：
chart.convertToPixel({geoIndex: 1}, [128.3324, 89.5344]);
// 使用 id 為 'bb' 的 geo 坐标系進行轉換：
chart.convertToPixel({geoId: 'bb'}, [128.3324, 89.5344]);           

例2：在直角坐标系（cartesian，grid）上，把某個點的坐标轉換成為像素坐标

// [300, 900] 表示該點 x 軸上對應刻度值 300，y 軸上對應刻度值 900；一個 grid 可能含有多個 xAxis 和多個 yAxis，任何一對 xAxis-yAxis 形成一個 cartesian；使用第三個 xAxis 和 id 為 'y1' 的 yAxis 形成的 cartesian 進行轉換：
chart.convertToPixel({xAxisIndex: 2, yAxisId: 'y1'}, [300, 900]);
// 使用 id 為 'g1' 的 grid 的第一個 cartesian 進行轉換：
chart.convertToPixel({gridId: 'g1'}, [300, 900]);           

例3：把某個坐标軸的點轉換成像素坐标：

// id 為 'x0' 的 xAxis 的刻度 3000 位置所對應的橫向像素位置：
chart.convertToPixel({xAxisId: 'x0'}, 3000); // 傳回一個 number
// 第二個 yAxis 的刻度 600 位置所對應的縱向像素位置：
chart.convertToPixel({yAxisIndex: 1}, 600); // 傳回一個 number           

例4：把關系圖（graph）的點轉換成像素坐标：

// 因為每個 graph series 自己持有一個坐标系，是以我們直接在 finder 中指定 series：
chart.convertToPixel({seriesIndex: 0}, [2000, 3500]);
chart.convertToPixel({seriesId: 'k2'}, [100, 500]);           

例5：在某個系列所在的坐标系（無論是 cartesian、geo、graph 等）中，轉換某點成像素坐标：

// 使用第一個系列對應的坐标系：
chart.convertToPixel({seriesIndex: 0}, [128.3324, 89.5344]);
// 使用 id 為 'k2' 的系列所對應的坐标系：
chart.convertToPixel({seriesId: 'k2'}, [128.3324, 89.5344]);           

echartsInstance.convertFromPixel

轉換像素坐标值到邏輯坐标系上的點。是 convertToPixel 的逆運算

(    
    finder: { // finder 用于訓示『使用哪個坐标系進行轉換』；通常地，可以使用 index 或 id 或 name 來定位
        seriesIndex?: number,
        seriesId?: string,
        seriesName?: string,
        geoIndex?: number,
        geoId?: string,
        geoName?: string,
        xAxisIndex?: number,
        xAxisId?: string,
        xAxisName?: string,
        yAxisIndex?: number,
        yAxisId?: string,
        yAxisName?: string,
        gridIndex?: number,
        gridId?: string
        gridName?: string
    },    
    value: Array|string // 要被轉換的值，為像素坐标值，以 echarts 執行個體的 dom 節點的左上角為坐标 [0, 0] 點    
) => Array|string // 轉換的結果，為邏輯坐标值           

echartsInstance.containPixel

判斷給定的點是否在指定的坐标系或者系列上；目前支援在這些坐标系和系列上進行判斷：grid, polar, geo, series-map, series-graph, series-pie

// 判斷 [23, 44] 點是否在 geoIndex 為 0 的 geo 坐标系上
chart.containPixel('geo', [23, 44]); // 'geo' 等同于 {geoIndex: 0}
// 判斷 [23, 44] 點是否在 gridId 為 'z' 的 grid 上
chart.containPixel({gridId: 'z'}, [23, 44]);
// 判斷 [23, 44] 點是否在 index 為 1，4，5 的系列上
chart.containPixel({seriesIndex: [1, 4, 5]}, [23, 44]);
// 判斷 [23, 44] 點是否在 index 為 1，4，5 的系列或者 gridName 為 'a' 的 grid 上
chart.containPixel({seriesIndex: [1, 4, 5], gridName: 'a'}, [23, 44]);           

echartsInstance.showLoading

顯示加載動畫效果；可以在加載資料前手動調用該接口顯示加載動畫，在資料加載完成後調用 hideLoading 隐藏加載動畫

1.type：可選，加載動畫類型，目前隻有一種'default'

2.opts：可選，加載動畫配置項，跟type有關，下面是預設配置項：

default: {
  text: 'loading',
  color: '#c23531',
  textColor: '#000',
  maskColor: 'rgba(255, 255, 255, 0.8)',
  zlevel: 0
}           

echartsInstance.hideLoading

隐藏動畫加載效果

echartsInstance.getDataURL

(opts: {    
    type?: string, // 導出的格式，可選 png, jpeg    
    pixelRatio?: number, // 導出的圖檔分辨率比例，預設為 1    
    backgroundColor?: string, // 導出的圖檔背景色，預設使用 option 裡的 backgroundColor    
    excludeComponents?: Array.<string> // 忽略元件的清單，例如要忽略 toolbox 就是 ['toolbox']
}) => string           

導出圖表圖檔，傳回一個 base64 的 URL，可以設定為Image的src

var img = new Image();
img.src = myChart.getDataURL({
    pixelRatio: 2,
    backgroundColor: '#fff'
});           

echartsInstance.getConnectedDataURL

導出關聯的圖表圖檔，傳回一個 base64 的 url，可以設定為Image的src。導出圖檔中每個圖表的相對位置跟容器的相對位置有關

(opts: {    
    type?: string,// 導出的格式，可選 png, jpeg
    pixelRatio?: number,// 導出的圖檔分辨率比例，預設為 1
    backgroundColor?: string,// 導出的圖檔背景色，預設使用 option 裡的 backgroundColor    
    excludeComponents?: Array.<string>// 忽略元件的清單，例如要忽略 toolbox 就是 ['toolbox']
}) => string           

echartsInstance.appendData

此接口用于在大資料量（百萬以上）的渲染場景，分片加載資料和增量渲染。在大資料量的場景下（例如地理數的打點），就算資料使用二進制格式，也會有幾十或上百兆，在網際網路環境下，往往需要分片加載。appendData 接口提供了分片加載後增量渲染的能力，渲染新加入的資料塊時不會清除原有已經渲染的部分

(opts: {
    seriesIndex?: string,// 要增加資料的系列序号
    data?: Array|TypedArray,// 增加的資料
}) => string           

注意：

1.現在不支援 系列（series） 使用 dataset 同時使用 appendData，隻支援系列使用自己的 series.data 時使用 appendData

2.目前并非所有的圖表都支援分片加載時的增量渲染。目前支援的圖有：ECharts 基礎版本的 散點圖（scatter） 和 線圖（lines）。ECharts GL 的 散點圖（scatterGL）、線圖（linesGL） 和 可視化建築群（polygons3D）

echartsInstance.clear

清空目前執行個體，會移除執行個體中所有的元件和圖表。清空後調用 getOption 方法傳回一個{}空對象

echartsInstance.isDisposed

目前執行個體是否已經被釋放

echartsInstance.dispose

銷毀執行個體，銷毀後執行個體無法再被使用

action

ECharts 中支援的圖表行為，通過 dispatchAction 觸發。

注： 代碼中的 ?: 表示該屬性是可選的。EVENT: 是 action 對應觸發的事件

action.highlight

高亮指定的資料圖形；通過seriesName或者seriesIndex指定系列，如果要再指定某個資料可以再指定dataIndex或者name

dispatchAction({
    type: 'highlight',    
    seriesIndex?: number|Array,// 可選，系列 index，可以是一個數組指定多個系列    
    seriesName?: string|Array,// 可選，系列名稱，可以是一個數組指定多個系列    
    dataIndex?: number,// 可選，資料的 index    
    name?: string// 可選，資料的 名稱
})           

action.legend

圖例元件相關的行為，必須引入圖例元件後才能使用

action.legend.legendSelect

選中圖例

dispatchAction({
    type: 'legendSelect',    
    name: string // 圖例名稱
})           

action.legend.legendUnSelect

取消選中圖例

dispatchAction({
    type: 'legendUnSelect',    
    name: string // 圖例名稱
})           

action.legend.legendToggleSelect

切換圖例的選中狀态

dispatchAction({
    type: 'legendToggleSelect',    
    name: string // 圖例名稱
})           

action.legend.legendScroll

控制圖例的滾動。當 legend.type 為 'scroll' 時有效

dispatchAction({
    type: 'legendScroll',
    scrollDataIndex: number,
    legendId: string
})           

action.tooltip

提示框元件相關的行為，必須引入提示框元件後才能使用

action.tooltip.showTip

顯示提示框；有下面兩種使用方式：

1 指定在相對容器的位置處顯示提示框，如果指定的位置無法顯示則無效

dispatchAction({
    type: 'showTip',    
    x: number, // 螢幕上的 x 坐标    
    y: number, // 螢幕上的 y 坐标    
    position: Array.<number>|string|Function // 本次顯示 tooltip 的位置，隻在本次 action 中生效， 預設則使用 option 中定義的 tooltip 位置
})           

2 指定資料圖形，根據 tooltip 的配置項顯示提示框。

dispatchAction({
    type: 'showTip',
    seriesIndex?: number, // 系列的 index，在 tooltip 的 trigger 為 axis 的時候可選
    dataIndex?: number, // 資料的 index，如果不指定也可以通過 name 屬性根據名稱指定資料
    name?: string, // 可選，資料名稱，在有 dataIndex 的時候忽略
    position: Array.<number>|string|Function, // 本次顯示 tooltip 的位置，隻在本次 action 中生效，預設則使用 option 中定義的 tooltip 位置
})           

參數position同tooltip.position相同

action.tooltip.hideTip

隐藏提示框

dispatchAction({
    type: 'hideTip'
})           

action.dataZoom

資料區域縮放元件相關的行為，必須引入資料區域縮放元件後才能使用

action.dataZoom.dataZoom

資料區域縮放

dispatchAction({
    type: 'dataZoom',    
    dataZoomIndex: number, // 可選，dataZoom 元件的 index，多個 dataZoom 元件時有用，預設為 0    
    start: number, // 開始位置的百分比，0 - 100    
    end: number, // 結束位置的百分比，0 - 100    
    startValue: number, // 開始位置的數值    
    endValue: number // 結束位置的數值
})           

action.dataZoom.takeGlobalCursor

啟動或關閉 toolbox 中 dataZoom 的刷選狀态

myChart.dispatchAction({
    type: 'takeGlobalCursor',
    key: 'dataZoomSelect',    
    dataZoomSelectActive: true // 啟動或關閉
});           

action.visualMap

視覺映射元件相關的行為，必須引入視覺映射元件後才能使用

action.visualMap.selectDataRange

選取映射的數值範圍

dispatchAction({
    type: 'selectDataRange',    
    visualMapIndex: number, // 可選，visualMap 元件的 index，多個 visualMap 元件時有用，預設為 0    
    selected: Object|Array // 連續型 visualMap 和 離散型 visualMap 不一樣；連續型的是一個表示數值範圍的數組；離散型的是一個對象，鍵值是類目或者分段的索引。值是 `true`, `false`
})           

action.timeline

時間軸元件相關的行為，必須引入時間軸元件後才能使用

action.timeline.timelineChange

設定目前的時間點

dispatchAction({
    type: 'timelineChange',    
    currentIndex: number // 時間點的 index
})           

action.timeline.timelinePlayChange

切換時間軸的播放狀态

dispatchAction({
    type: 'timelinePlayChange',    
    playState: boolean // 播放狀态，true 為自動播放
})           

action.toolbox

工具欄元件相關的行為，必須引入工具欄元件後才能使用

action.toolbox.restore

重置 option

dispatchAction({
    type: 'restore'
})           

action.pie

餅圖相關的行為，必須引入餅圖後才能使用

action.pie.pieSelect

選中指定的餅圖扇形

dispatchAction({
    type: 'pieSelect',    
    seriesIndex?: number|Array, // 可選，系列 index，可以是一個數組指定多個系列    
    seriesName?: string|Array, // 可選，系列名稱，可以是一個數組指定多個系列    
    dataIndex?: number, // 資料的 index，如果不指定也可以通過 name 屬性根據名稱指定資料    
    name?: string // 可選，資料名稱，在有 dataIndex 的時候忽略
})           

action.pie.pieUnSelect

取消選中指定的餅圖扇形

dispatchAction({
    type: 'pieUnSelect',    
    seriesIndex?: number|Array, // 可選，系列 index，可以是一個數組指定多個系列    
    seriesName?: string|Array, // 可選，系列名稱，可以是一個數組指定多個系列    
    dataIndex?: number, // 資料的 index，如果不指定也可以通過 name 屬性根據名稱指定資料    
    name?: string // 可選，資料名稱，在有 dataIndex 的時候忽略
})           

action.pie.pieToggleSelect

切換指定的餅圖扇形選中狀态

dispatchAction({
    type: 'pieToggleSelect',    
    seriesIndex?: number|Array, // 可選，系列 index，可以是一個數組指定多個系列    
    seriesName?: string|Array, // 可選，系列名稱，可以是一個數組指定多個系列    
    dataIndex?: number, // 資料的 index，如果不指定也可以通過 name 屬性根據名稱指定資料    
    name?: string // 可選，資料名稱，在有 dataIndex 的時候忽略
})           

action.geo

地圖元件相關的行為，必須引入地圖元件後才能使用

action.geo.geoSelect

選中指定的地圖區域

dispatchAction({
    type: 'geoSelect',    
    seriesIndex?: number|Array, // 可選，系列 index，可以是一個數組指定多個系列    
    seriesName?: string|Array, // 可選，系列名稱，可以是一個數組指定多個系列    
    dataIndex?: number, // 資料的 index，如果不指定也可以通過 name 屬性根據名稱指定資料    
    name?: string // 可選，資料名稱，在有 dataIndex 的時候忽略
})           

action.geo.geoUnSelect

取消選中指定的地圖區域

dispatchAction({
    type: 'geoUnSelect',    
    seriesIndex?: number|Array, // 可選，系列 index，可以是一個數組指定多個系列    
    seriesName?: string|Array, // 可選，系列名稱，可以是一個數組指定多個系列    
    dataIndex?: number, // 資料的 index，如果不指定也可以通過 name 屬性根據名稱指定資料    
    name?: string // 可選，資料名稱，在有 dataIndex 的時候忽略
})           

action.geo.geoToggleSelect

切換指定的地圖區域選中狀态

dispatchAction({
    type: 'geoToggleSelect',    
    seriesIndex?: number|Array, // 可選，系列 index，可以是一個數組指定多個系列    
    seriesName?: string|Array, // 可選，系列名稱，可以是一個數組指定多個系列    
    dataIndex?: number, // 資料的 index，如果不指定也可以通過 name 屬性根據名稱指定資料    
    name?: string // 可選，資料名稱，在有 dataIndex 的時候忽略
})           

action.map

地圖圖表相關的行為，必須引入地圖圖表後才能使用

action.map.mapSelect

dispatchAction({
    type: 'mapSelect',    
    seriesIndex?: number|Array, // 可選，系列 index，可以是一個數組指定多個系列    
    seriesName?: string|Array, // 可選，系列名稱，可以是一個數組指定多個系列    
    dataIndex?: number, // 資料的 index，如果不指定也可以通過 name 屬性根據名稱指定資料    
    name?: string // 可選，資料名稱，在有 dataIndex 的時候忽略
})           

action.map.mapUnSelect

dispatchAction({
    type: 'mapUnSelect',    
    seriesIndex?: number|Array, // 可選，系列 index，可以是一個數組指定多個系列    
    seriesName?: string|Array, // 可選，系列名稱，可以是一個數組指定多個系列    
    dataIndex?: number, // 資料的 index，如果不指定也可以通過 name 屬性根據名稱指定資料    
    name?: string // 可選，資料名稱，在有 dataIndex 的時候忽略
})           

action.map.mapToggleSelect

dispatchAction({
    type: 'mapToggleSelect',    
    seriesIndex?: number|Array, // 可選，系列 index，可以是一個數組指定多個系列    
    seriesName?: string|Array, // 可選，系列名稱，可以是一個數組指定多個系列    
    dataIndex?: number, // 資料的 index，如果不指定也可以通過 name 屬性根據名稱指定資料    
    name?: string // 可選，資料名稱，在有 dataIndex 的時候忽略
})           

action.graph

關系圖 相關的行為，必須引入 關系圖 後才能使用

action.graph.focusNodeAdjacency

将指定的節點以及其所有鄰接節點高亮

dispatchAction({
    type: 'focusNodeAdjacency',
    // 使用 seriesId 或 seriesIndex 或 seriesName 來定位 series
    seriesId: 'xxx',
    seriesIndex: 0,
    seriesName: 'nnn',
    // 使用 dataIndex 來定位節點
    dataIndex: 12
})           

最後會抛出 focusNodeAdjacency 事件

action.graph.unfocusNodeAdjacency

dispatchAction({
    type: 'unfocusNodeAdjacency',
    // 使用 seriesId 或 seriesIndex 或 seriesName 來定位 series.
    seriesId: 'xxx',
    seriesIndex: 0,
    seriesName: 'nnn'
})           

最後會抛出 unfocusNodeAdjacency 事件

action.brush

區域選擇相關的行為

action.brush.brush

觸發此 action 可設定或删除 chart 中的選框，例如：

myChart.dispatchAction({
    type: 'brush',
    areas: [ // areas 表示選框的集合，可以指定多個選框；如果 areas 為空，則删除所有選框；注意這并非增量接口而是全量接口，是以應包括所有的選框
        { // 選框一：指定此選框是“坐标系選框”，屬于 index 為 0 的 geo 坐标系；也可以通過 xAxisIndex 或 yAxisIndex 來指定此選框屬于直角坐标系；如果沒有指定，則此選框屬于“全局選框”，不屬于任何坐标系；屬于『坐标系選框』，可以随坐标系一起縮放平移。屬于全局的選框不行
            geoIndex: 0,
            // xAxisIndex: 0,
            // yAxisIndex: 0,            
            brushType: 'polygon', // 指定選框的類型。可以為 'polygon', 'rect', 'lineX', 'lineY'
            range: [ // 如果是“全局選框”，則使用 range 來描述選框的範圍（裡面是像素坐标）
                ...
            ],            
            coordRange: [ // 如果是“坐标系選框”，則使用 coordRange 來指定選框的範圍（裡面是坐标系坐标）                
                [119.72,34.85],[119.68,34.85],[119.5,34.84],[119.19,34.77] // 這個例子中，因為指定了 geoIndex，是以 coordRange 裡機關是經緯度
            ]
        },
        ... // 選框二、三、四、...
    ]
});           

其中，areas 中的 range 和 coordRange 的格式，根據 brushType 不同而不同：

1.brushType 為 'rect' range 和 coordRange 的格式為：[[minX, maxX], [minY, maxY]]

2.brushType 為 'lineX' 或 'lineY' range 和 coordRange 的格式為：[min, maxX]

3.brushType 為 'polygon' range 和 coordRange 的格式為：[[point1X, point1X], [point2X, point2X], ...]

range 和 coordRange 的差別是：

1.當此選框為『全局選框』時，使用 range。

2.當此選框為『坐标系選框』時（即指定了 geoIndex 或 xAxisIndex 或 yAxisIndex 時），使用 coordRange。

3.range 的機關為 像素，coordRange 的機關為 坐标系機關，比如 geo 中，coordRange 機關為經緯度，直角坐标系中，coordRange 機關為對應軸的資料的機關

action.brush.takeGlobalCursor

刷選模式的開關。使用此 action 可将目前滑鼠變為可刷選狀态；事實上，點選 toolbox 中的 brush 按鈕時，就是通過這個 action，将目前普通滑鼠變為刷選器的

此 action 對應的事件為 globalCursorTaken

api.dispatchAction({
    type: 'takeGlobalCursor',    
    key: 'brush', // 如果想變為“可刷選狀态”，必須設定。不設定則會關閉“可刷選狀态”
    brushOption: {        
        brushType: string, // 參見 brush 元件的 brushType。如果設定為 false 則關閉“可刷選狀态”        
        brushMode: string // 參見 brush 元件的 brushMode。如果不設定，則取 brush 元件的 brushMode 設定
    }
});           

events

在 ECharts 中主要通過 on 方法添加事件處理函數，該文檔描述了所有 ECharts 的事件清單；ECharts 中的事件分為兩種，一種是滑鼠事件，在滑鼠點選某個圖形上會觸發，還有一種是 調用 dispatchAction 後觸發的事件

myChart.on('click', function (params) {
    console.log(params);
});
myChart.on('legendselectchanged', function (params) {
    console.log(params);
});
chart.on('click', 'series.line', function (params) {
    console.log(params);
});
chart.on('mouseover', {seriesIndex: 1, name: 'xx'}, function (params) {
    console.log(params);
});           

events.滑鼠事件

滑鼠事件的事件參數是事件對象的資料的各個屬性，對于圖表的點選事件，基本參數如下，其它圖表諸如餅圖可能會有部分附加參數。例如餅圖會有percent屬性表示百分比，具體見各個圖表類型的 label formatter 回調函數的 params

{    
    componentType: string, // 目前點選的圖形元素所屬的元件名稱，其值如 'series'、'markLine'、'markPoint'、'timeLine' 等
    seriesType: string, // 系列類型。值可能為：'line'、'bar'、'pie' 等。當 componentType 為 'series' 時有意義
    seriesIndex: number, // 系列在傳入的 option.series 中的 index。當 componentType 為 'series' 時有意義
    seriesName: string, // 系列名稱。當 componentType 為 'series' 時有意義
    name: string, // 資料名，類目名
    dataIndex: number, // 資料在傳入的 data 數組中的 index
    data: Object, // 傳入的原始資料項
    dataType: string, // sankey、graph 等圖表同時含有 nodeData 和 edgeData 兩種 data，dataType 的值會是 'node' 或者 'edge'，表示目前點選在 node 還是 edge 上；其他大部分圖表中隻有一種 data，dataType 無意義
    value: number|Array, // 傳入的資料值
    color: string, // 資料圖形的顔色。當 componentType 為 'series' 時有意義
    info: * // 使用者自定義的資料。隻在 graphic component 和自定義系列（custom series）中生效，如果節點定義上設定了如：{type: 'circle', info: {some: 123}}
}           

滑鼠事件包括 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu'。

events.legendselectchanged

ACTION: legendToggleSelect 切換圖例選中狀态後的事件；圖例元件使用者切換圖例開關會觸發該事件

{
    type: 'legendselectchanged',    
    name: string // 切換的圖例名稱    
    selected: Object // 所有圖例的選中狀态表
}           

events.legendselected

ACTION: legendSelect 圖例選中後的事件

{
    type: 'legendselected',    
    name: string // 切換的圖例名稱    
    selected: Object // 所有圖例的選中狀态表
}           

注： ECharts 2.x 中使用者開關圖例對應的事件從 legendselected 改為 legendselectchanged

events.legendunselected

ACTION: legendUnSelect 圖例取消選中後的事件

{
    type: 'legendunselected',    
    name: string // 切換的圖例名稱    
    selected: Object // 所有圖例的選中狀态表
}           

events.legendscroll

ACTION: legendscroll 圖例滾動事件

{
    type: 'legendscroll',
    scrollDataIndex: number
    legendId: string
}           

events.datazoom

ACTION: dataZoom

資料區域縮放後的事件

{
    type: 'datazoom',    
    start: number // 縮放的開始位置的百分比，0 - 100    
    end: number // 縮放的結束位置的百分比，0 - 100    
    startValue?: number // 縮放的開始位置的數值，隻有在工具欄縮放行為的事件中存在
    endValue?: number // 縮放的結束位置的數值，隻有在工具欄縮放行為的事件中存在
}           

events.datarangeselected

ACTION: selectDataRange 視覺映射元件中，range 值改變後觸發的事件

{
    type: 'datarangeselected',    
    selected: Object|Array // 連續型 visualMap 和 離散型 visualMap 不一樣；連續型的是一個表示數值範圍的數組；離散型的是一個對象，鍵值是類目或者分段的索引。值是`true`或`false`
}           

events.timelinechanged

ACTION: timelineChange 時間軸中的時間點改變後的事件

{
    type: 'timelinechanged',    
    currentIndex: number // 時間點的 index
}           

events.timelineplaychanged

ACTION: timelinePlayChange 時間軸中播放狀态的切換事件

{
    type: 'timelineplaychanged',    
    playState: boolean // 播放狀态，true 為自動播放
}           

events.restore

ACTION: restore 重置 option 事件

{ type: 'restore' }           

events.dataviewchanged

工具欄中資料視圖的修改事件

{ type: 'dataviewchanged' }           

events.magictypechanged

工具欄中動态類型切換的切換事件

{
    type: 'magictypechanged',    
    currentType: string // 點選切換的目前類型，同 echarts 2.x 中的 type 屬性
 }           

events.geoselectchanged

ACTION: geoToggleSelect；geo中地圖區域切換選中狀态的事件，使用者點選選中會觸發該事件

{
    type: 'geoselectchanged',    
    seriesId: string // 系列 ID，可以在 option 中傳入    
    name: name, // 資料名稱    
    selected: Object // 所有資料的選中狀态表
}           

events.geoselected

ACTION: geoSelect；geo 中地圖區域選中後的事件；使用dispatchAction可觸發此事件，使用者點選不會觸發此事件（使用者點選事件請使用 geoselectchanged）

{
    type: 'geoselected',    
    seriesId: string // 系列 ID，可以在 option 中傳入    
    name: name, // 資料名稱
    selected: Object // 所有資料的選中狀态表
}           

events.geounselected

ACTION: geoUnSelect；geo 中地圖區域取消選中後的事件；使用dispatchAction可觸發此事件，使用者點選不會觸發此事件（使用者點選事件請使用 geoselectchanged）

{
    type: 'geounselected',
    seriesId: string // 系列 ID，可以在 option 中傳入
    name: name, // 資料名稱
    selected: Object // 所有資料的選中狀态表
}           

events.pieselectchanged

ACTION: pieToggleSelect；series-pie 中餅圖扇形切換選中狀态的事件；使用者點選選中會觸發該事件

{
    type: 'pieselectchanged',
    seriesId: string // 系列 ID，可以在 option 中傳入
    name: name, // 資料名稱
    selected: Object // 所有資料的選中狀态表
}           

注： 該事件同 ECharts 2 中的 pieSelected 事件相同

events.pieselected

ACTION: pieSelect；series-pie 中餅圖扇形選中後的事件；使用dispatchAction可觸發此事件，使用者點選不會觸發此事件（使用者點選事件請使用 pieselectchanged）

{
    type: 'pieselected',
    seriesId: string // 系列 ID，可以在 option 中傳入
    name: name, // 資料名稱
    selected: Object // 所有資料的選中狀态表
}           

注： ECharts 2.x 中使用者開關圖例對應的事件從 pieselected 改為 pieselectchanged

events.pieunselected

ACTION: pieUnSelect；series-pie 中餅圖扇形取消選中後的事件；使用dispatchAction可觸發此事件，使用者點選不會觸發此事件（使用者點選事件請使用 pieselectchanged）

{
    type: 'pieunselected',
    seriesId: string // 系列 ID，可以在 option 中傳入
    name: name, // 資料名稱
    selected: Object // 所有資料的選中狀态表
}           

events.mapselectchanged

ACTION: mapToggleSelect；series-map 中地圖區域切換選中狀态的事件；使用者點選選中會觸發該事件

{
    type: 'mapselectchanged',
    seriesId: string // 系列 ID，可以在 option 中傳入
    name: name, // 資料名稱
    selected: Object // 所有資料的選中狀态表
}           

注： 該事件同 ECharts 2 中的 mapSelected 事件相同

events.mapselected

ACTION: mapSelect；series-map 中地圖區域選中後的事件；使用dispatchAction可觸發此事件，使用者點選不會觸發此事件（使用者點選事件請使用 mapselectchanged）

{
    type: 'mapselected',
    seriesId: string // 系列 ID，可以在 option 中傳入
    name: name, // 資料名稱
    selected: Object // 所有資料的選中狀态表
}           

注： ECharts 2.x 中使用者開關圖例對應的事件從 mapselected 改為 mapselectchanged

events.mapunselected

ACTION: mapUnSelect；series-map 中地圖區域取消選中後的事件；使用dispatchAction可觸發此事件，使用者點選不會觸發此事件（使用者點選事件請使用 mapselectchanged）

{
    type: 'mapunselected',
    seriesId: string // 系列 ID，可以在 option 中傳入
    name: name, // 資料名稱
    selected: Object // 所有資料的選中狀态表
}           

events.axisareaselected

平行坐标軸 (Parallel)範圍選取事件；當進行坐标軸範圍選取時，可以用如下方式擷取目前高亮的線所對應的 data indices （即 series 的 data 中的序号清單）

chart.on('axisareaselected', function () {
    var series0 = chart.getModel().getSeries()[0];
    var series1 = chart.getModel().getSeries()[1];
    var indices0 = series0.getRawIndicesByActiveState('active');
    var indices1 = series1.getRawIndicesByActiveState('active');
    console.log(indices0, indices1);
});           

events.focusnodeadjacency

graph的鄰接節點高亮事件

events.unfocusnodeadjacency

graph的鄰接節點取消高亮事件

events.brush

選框添加事件。即發出 brush action 得到的事件

events.brushselected

對外通知目前選中了什麼；這個事件在 setOption 時不會發出，在其他的 dispatchAction 時，或者使用者在界面中建立、删除、修改選框時會發出

事件參數内容為：

{
    type: 'brushselected',
    batch: [
        {
            brushId: string, // brush 元件的 id，大多數情況隻使用一個 brush 元件，是以不必理會
            brushIndex: number, // brush 元件的 index
            brushName: string, // brush 元件的 name
            areas: [ // 各個選框
                { // 第一個選框；則此處使用 range 或者 coordRange 記錄了選框目前的形狀，其值參見 brush action 中 range/coordRange 的解釋；
                    range: Array.<number>, //如果此選框是“全局選框”（即并不屬于哪個坐标系），則使用 range 機關是像素
                    coordRange: Array.<number>, // 如果此選框是“坐标系選框”，則使用 coordRange 和 coordRanges，機關為坐标系機關
                    coordRanges: Array.<Array.<number>>, // 其中，如果選框屬于直角坐标系（grid）的某個軸（例如指定了 xAxisIndex: 0），且此軸對應于多個 cartesian（例如，對應兩個 yAxis），那麼這裡 coordRanges是每個 cartesian 中的選框的範圍值。而 coordRange 是 coordRanges[0]
                },
                ...
            ],
            selected: [ // 每個系列被選中的項；如果某個系列不支援 brush，但是還是會在這裡出現對應的項；也就是說，selected 可以使用 seriesIndex 來直接找到對應的項
                { // series 0 被選中的項
                    seriesIndex: number,
                    dataIndex: [ 3, 6, 12, 23 ] // 用這些 dataIndex，可以去原始資料中找到真正的值
                },
                { // series 1 被選中的項
                    seriesIndex: number,
                    dataIndex: []
                },
                ...
            ]
        },
        ...
    ]
}           

事件使用方式例如：

var dataBySeries = [
    [ 12, 23, 54, 6 ], // series 0 的資料
    [ 34, 34433, 2223, 21122, 1232, 34 ] // series 1 的資料
];
chart.setOption({
    ...,
    brush: {
        ...
    },
    series: [
        { // series 0
            data: dataBySeries[0]
        },
        { // series 1
            data: dataBySeries[1]
        }
    ]
});
chart.on('brushSelected', function (params) {
    var brushComponent = params.batch[0];
    var sum = 0; // 統計選中項的資料值的和
    for (var sIdx = 0; sIdx < brushComponent.selected.length; sIdx++) { // 對于每個 series：        
        var dataIndices = brushComponent.selected[sIdx].dataIndex;
        for (var i = 0; i < dataIndices.length; i++) {
            var dataIndex = dataIndices[i];
            sum += dataBySeries[sIdx][dataIndex];
        }
    }
    console.log(sum); // 用某種方式輸出統計值。
});           

如果想避免此事件頻繁觸發，可以使用 brush.throttleType

events.globalCursorTaken

參見 takeGlobalCursor

events.rendered

渲染結束事件。注意 rendered 事件并不代表渲染動畫（參見 animation 相關配置）或者漸進渲染（參見 progressive 相關配置）停止，隻代表本幀的渲染結束

var snapshotImage = new Image();
document.body.append(snapshotImage);
chart.on('rendered', function () {
    snapshotImage.src = chart.getDataURL();
});           

events.finished

渲染完成事件。當渲染動畫（參見 animation 相關配置）或者漸進渲染（參見 progressive 相關配置）停止時觸發

var snapshotImage = new Image();
document.body.append(snapshotImage);
chart.on('finished', function () {
    snapshotImage.src = chart.getDataURL();
});