天天看點
傳回

圖表制作工具之ECharts

簡介

ECharts，縮寫來自Enterprise Charts，商業級資料圖表，一個純Javascript的圖表庫，可以流暢的運作在PC和移動裝置上，相容目前絕大部分浏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴輕量級的Canvas類庫ZRender，提供直覺，生動，可互動，可高度個性化定制的資料可視化圖表。創新的拖拽重計算、資料視圖、值域漫遊等特性大大增強了使用者體驗，賦予了使用者對資料進行挖掘、整合的能力。

支援折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和弦圖、力導向布局圖、地圖、儀表盤、漏鬥圖、事件河流圖等12類圖表，同時提供标題，詳情氣泡、圖例、值域、資料區域、時間軸、工具箱等7個可互動元件，支援多圖表、元件的關聯和混搭展現。

名詞解析

基本名詞

名詞 描述
chart 是指一個完整的圖表，如折線圖，餅圖等“基本”圖表類型或由基本圖表組合而成的“混搭”圖表，可能包括坐标軸、圖例等
axis 直角坐标系中的一個坐标軸，坐标軸可分為類目型、數值型或時間型
xAxis 直角坐标系中的橫軸，通常并預設為類目型
yAxis 直角坐标系中的縱軸，通常并預設為數值型
grid 直角坐标系中除坐标軸外的繪圖網格，用于定義直角系整體布局
legend 圖例，表述資料和圖形的關聯
dataRange 值域選擇，常用于展現地域資料時選擇值域範圍
dataZoom 資料區域縮放，常用于展現大量資料時選擇可視範圍
roamController 縮放漫遊元件，搭配地圖使用
toolbox 輔助工具箱，輔助功能，如添加标線，框選縮放等
tooltip 氣泡提示框，常用于展現更詳細的資料
timeline 時間軸，常用于展現同一系列資料在時間次元上的多份資料
series 資料系列，一個圖表可能包含多個系列，每一個系列可能包含多個資料

圖表名詞

名詞 描述
line 折線圖，堆積折線圖，區域圖，堆積區域圖。
bar 柱形圖（縱向），堆積柱形圖，條形圖（橫向），堆積條形圖。
scatter 散點圖，氣泡圖。散點圖至少需要橫縱兩個資料，更高次元資料加入時可以映射為顔色或大小，當映射到大小時則為氣泡圖
k K線圖，蠟燭圖。常用于展現股票交易資料。
pie 餅圖，圓環圖。餅圖支援兩種（半徑、面積）南丁格爾玫瑰圖模式。
radar 雷達圖，填充雷達圖。高次元資料展現的常用圖表。
chord 和弦圖。常用于展現關系資料，外層為圓環圖，可展現資料占比關系，内層為各個扇形間互相連接配接的弦，可展現關系資料
force 力導布局圖。常用于展現複雜關系網絡聚類布局。
map 地圖。内置世界地圖、中國及中國34個省市自治區地圖資料、可通過标準GeoJson擴充地圖類型。支援svg擴充類地圖應用，如室内地圖、運動場、物件構造等。
gauge 儀表盤。用于展現關鍵名額資料，常見于BI類系統。
funnel 漏鬥圖。用于展現資料經過篩選、過濾等流程處理後發生的資料變化，常見于BI類系統。
evnetRiver 事件河流圖。常用于展示具有時間屬性的多個事件，以及事件随時間的演化。
funnel 漏鬥圖。用于展現資料經過篩選、過濾等流程處理後發生的資料變化，常見于BI類系統。
evnetRiver 事件河流圖。常用于展示具有時間屬性的多個事件，以及事件随時間的演化。
treemap 矩形式樹狀結構圖，簡稱：矩形樹圖。用于展示樹形資料結構，優勢是能最大限度展示節點的尺寸特征。
venn 韋恩圖。用于展示集合以及它們的交集。

圖表類型

圖表庫标準包含單圖表類型的标準圖表以及多圖表類型混合的混搭圖表：

單圖表類型：line

折線圖 堆積折線圖 區域圖 堆積區域圖

單圖表類型：bar

柱形圖 堆積柱形圖 條形圖 堆積條形圖

單圖表類型：scatter

散點圖 氣泡圖

單圖表類型：k

K線圖

單圖表類型：pie

餅圖 圓環圖 南丁格爾玫瑰圖

單圖表類型：radar

雷達圖 填充雷達圖

單圖表類型：chord

和弦圖

單圖表類型：force

力導向布局圖。

單圖表類型：map

中國地圖 全國34個省市自治區 世界地圖
子區域模式 标準GeoJson擴充 SVG擴充

單圖表類型：gauge

儀表盤

單圖表類型：funnel

漏鬥圖

單圖表類型：eventRiver

事件河流圖

單圖表類型：treemap

矩形樹圖

單圖表類型：venn

韋恩圖類型

單圖表類型：tree

樹圖

單圖表類型：wordCloud

字元雲

引入ECharts

echarts提供多種引入方式，請根據你的項目類型選擇合适的方式：

子產品化包引入

如果你熟悉子產品化開發，你的項目本身就是子產品化且遵循AMD規範的，那引入echarts将很簡單，使用一個符合AMD規範的子產品加載器，如esl.js，隻需要配置好packages路徑指向src即可，你将享受到圖表的按需加載等最大的靈活性，由于echarts依賴底層zrender，你需要同時下載下傳zrender到本地，可參考demo，你需要配置如下。

需要注意的是，包引入提供了開發階段最大的靈活性，但并不适合直接上線，減少請求的檔案數量是前端性能優化中最基本但很重要的規則，務必在上線時做檔案的連接配接壓縮。

//from echarts example
require.config({
    packages: [
        {
            name: \'echarts\',
            location: \'../../src\',
            main: \'echarts\'
        },
        {
            name: \'zrender\',
            location: \'../../../zrender/src\', // zrender與echarts在同一級目錄
            main: \'zrender\'
        }
    ]
});

子產品化單檔案引入（推薦）

如果你使用子產品化開發但并沒有自己的打包合并環境，或者說你不希望在你的項目裡引入第三方庫的源檔案，我們建議你使用單檔案引入，同子產品化包引入一樣，你需要熟悉子產品化開發。

自2.1.8起，我們為echarts開發了專門的合并壓縮工具echarts-optimizer。如你所發現的，build檔案夾下已經包含了由echarts-optimizer生成的單檔案：

  • dist（檔案夾） : 經過合并、壓縮的單檔案
    • echarts.js : 這是包含AMD加載器的echarts主檔案，需要通過script最先引入
    • chart（檔案夾） : echarts-optimizer通過依賴關系分析同時去除與echarts.js的重複子產品後為echarts的每一個圖表類型單獨打包生成一個獨立檔案，根據應用需求可實作圖表類型按需加載
      • line.js : 折線圖（如需折柱動态類型切換，require時還需要echarts/chart/bar）
      • bar.js : 柱形圖（如需折柱動态類型切換，require時還需要echarts/chart/line）
      • scatter.js : 散點圖
      • k.js : K線圖
      • pie.js : 餅圖（如需餅漏鬥圖動态類型切換，require時還需要echarts/chart/funnel）
      • radar.js : 雷達圖
      • map.js : 地圖
      • force.js : 力導向布局圖（如需力導和弦動态類型切換，require時還需要echarts/chart/chord）
      • chord.js : 和弦圖（如需力導和弦動态類型切換，require時還需要echarts/chart/force）
      • funnel.js : 漏鬥圖（如需餅漏鬥圖動态類型切換，require時還需要echarts/chart/pie）
      • gauge.js : 儀表盤
      • eventRiver.js : 事件河流圖
      • treemap.js : 矩陣樹圖
      • venn.js : 韋恩圖
  • source（檔案夾） : 經過合并，但并沒有壓縮的單檔案，内容同dist，可用于調試

采用單一檔案使用例子見ECharts單一檔案引入，存放在example/www下，首先你需要通過script标簽引入echarts主檔案

//from echarts example
<body>
    <div id="main" style="height:400px;"></div>
    ...
    <script src="./js/echarts.js"></script>
</body>

在主檔案引入後你将獲得一個AMD環境，配置require.conifg如下：

//from echarts example
<body>
    <div id="main" style="height:400px;"></div>
    ...
    <script src="./js/echarts.js"></script>
    <script type="text/javascript">
        require.config({
            paths: {
                echarts: \'./js/dist\'
            }
        });
    </script>
</body>

require.config配置後就可以通過動态加載使用echarts

//from echarts example
<body>
    <div id="main" style="height:400px;"></div>
    ...
    <script src="./js/echarts.js"></script>
    <script type="text/javascript">
        require.config({
            paths: {
                echarts: \'./js/dist\'
            }
        });
        require(
            [
                \'echarts\',
                \'echarts/chart/line\',   // 按需加載所需圖表，如需動态類型切換功能，别忘了同時加載相應圖表
                \'echarts/chart/bar\'
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById(\'main\'));
                var option = {
                    ...
                }
                myChart.setOption(option);
            }
        );
    </script>
</body>

總結來說，子產品化單檔案引入ECharts，你需要如下4步：

  1. 為ECharts準備一個具備大小（寬高）的Dom（當然可以是動态生成的）
  2. 通過script标簽引入echarts主檔案
  3. 為子產品加載器配置echarts的路徑，從目前頁面連結到echarts.js所在目錄，見上述說明
  4. 動态加載echarts及所需圖表然後在回調函數中開始使用（容我羅嗦一句，當你確定同一頁面已經加載過echarts，再使用時直接require(\'echarts\').init(dom)就行）

詳見入門教程 ( Getting started ) »

标簽式單檔案引入

自1.3.5開始，ECharts提供标簽式引入。如果你的項目本身并不是基于子產品化開發的，或者是基于CMD規範（如使用的是seajs），那麼引入基于AMD子產品化的echarts可能并不友善，我們建議你采用srcipt标簽式引入，忘掉require。Srcipt标簽引入echarts後将可以直接使用兩個全局的命名空間：echarts，zrender，可參考ECharts标簽式引入，需要注意的是excanvas依賴body标簽插入Canvas節點去判斷Canvas的支援，如果你把引用echarts的script标簽放置head内在IE8-的浏覽器中會出現報錯，解決的辦法就是把标簽移動到body内（後）。

标簽式引入環境中，常用子產品的引用可通過命名空間直取，同子產品化下的路徑結構，如：

echarts.config = require(\'echarts/config\')， zrender.tool.color = require(\'zrender/tool/color\')

//from echarts example
<body>
    <div id="main" style="height:400px;"></div>
    ...
    <script src="example/www2/js/dist/echarts-all.js"></script>
    <script>
        var myChart = echarts.init(document.getElementById(\'main\'));
        var option = {
            ...
        }
        myChart.setOption(option);
    </script>
</body>

可以直接引入的單檔案如下：

  • dist/echarts-all.js : 經過壓縮，全圖表，包含world，china以及34個省市級地圖資料
  • source/echarts-all.js : 未壓縮，全圖表，包含world，china以及34個省市級地圖資料，可用于調試

詳見入門教程 ( Getting started ) »

自定義建構echarts單檔案

詳見 echarts-optimizer 安裝使用說明：README.md

初始化

通過require獲得echarts接口（或者命名空間）後可執行個體化圖表，echarts接口僅有一個方法init，執行init時傳入一個具備大小的dom節點（width、height可被計算得到即可，不一定可見）後即可執行個體化出圖表對象，圖表庫實作為多執行個體的，同一頁面可在多個dom上init出多個圖表，同一個dom上多次init将自動釋放已有執行個體（1.4.0+）。init方法說明如下：

名稱 參數 描述
{ECharts}init

{dom} dom, 

{string | Object =} theme

初始化接口，傳回ECharts執行個體，其中dom為圖表所在節點，theme為可選的主題，内置主題（\'macarons\', \'infographic\'）直接傳入名稱，自定義擴充主題可傳入主題對象。如： 

var myCharts = echarts.init(document.getElementById(\'main\'), \'macarons\')；

圖表執行個體可用方法見方法

引入ECharts後的的初始化代碼如下：

// 作為入口
require(
    [
        \'echarts\',
        \'echarts/chart/pie\'
    ],
    function (ec) {
        var myChart = ec.init(document.getElementById(\'main\'));
        myChart.setOption({...});
    }
);

// -----------------------------

// 非入口或再次使用，圖表已被加載注冊
require(\'echarts\').init(dom).setOption({...});

// 如果需要再次使用ECharts的圖表執行個體，建議你還是儲存init傳回的圖表執行個體吧
var myChart = require(\'echarts\').init(dom);
myChart.setOption({...});

熟悉子產品化的你可以跳過了下面代碼了

// 不習慣子產品化的你當然可以
var echarts;
require([\'echarts\'], function (ec){
    echarts = ec;
});
// 是的，把echarts加載後儲存起來作為命名空間使用

執行個體方法

執行個體指的就是接口init()傳回的對象，即上述代碼中的“myChart”，非get接口均傳回自身self支援鍊式調用

名稱 參數 描述
{self}setOption

{Object} option, 

{boolean=}notMerge

萬能接口，配置圖表執行個體任何可配置選項（詳見option），多次調用時option選項預設是合并（merge）的，merge的設計可以讓setOption很友善的成為更新任何屬性的萬能方法，比如你僅需要改title文字，則僅需要：

    setOption({title : {text : \'新标題\'}}); 

如果不需要，可以通過notMerger參數為true阻止與上次option的合并，如多次setOption間資料改變、長度不一緻等的場景。 

2.0.0起支援timeline元件，option中包含timeline（詳見timeline）時每一個獨立的option應該放置到命名為options的數組内，如

myCharts.setOption({
    timeline : {...},
    options : [
        {                // option1
            title : {...},
            series : [...]
        },
        {...},           // option2
        ...
    ]
});
{Object}getOption {void} 傳回内部持有的目前顯示option克隆（拷貝）。
{self}setSeries

{Array} series, 

{boolean=}notMerge

 資料接口，驅動圖表生成的資料内容（詳見series），效果等同調用 setOption({series : {...}}, notMerge)
{Object}getSeries {void} 傳回内部持有的目前顯示series克隆（拷貝），效果同 getOption().series
{self}addData

單組資料： 

{number} seriesIdx 

{number | Object}data 

{boolean=} isHead 

{boolean=}dataGrow 

{string=}additionData 

多組資料添加： 

{Array} params

動态資料接口，try this (Line & Bar) » try this (Scatter & K) » try this (Pie & Radar) » 

seriesIdx 系列索引 

data 增加資料 

isHead 是否隊頭加入，預設，不指定或false時為隊尾插入 

dataGrow 是否增長資料隊列長度，預設，不指定或false時移出目标數組對位資料 

additionData 是否增加類目軸(餅圖為圖例)資料，附加操作同isHead和dataGrow 

多組資料添加時參數為： 

params == [[seriesIdx, data, isHead, dataGrow, additionData], [...]]
{self}addMarkPoint

{number} seriesIdx 

{Object} markData

新增标注接口，其中 

seriesIdx 系列索引 

markData [标注]對象，同series.markPoint，支援多個
{self}addMarkLine

{number} seriesIdx 

{Object} markData

新增标線接口，其中 

seriesIdx 系列索引 

markData [标線]對象，同series.markLine，支援多個
{self}delMarkPoint

{number} seriesIdx 

{string} markName

删除單個标注接口，其中 

seriesIdx 系列索引 

markName [标注]名稱
{self}delMarkLine

{number} seriesIdx 

{string} markName

删除單個标線接口，其中 

seriesIdx 系列索引 

markName [标線]名稱，已建構的标線名稱預設為markLine資料中起始點的name，如果同時終點也有name屬性，如地圖示線，則标線名稱等于“nameStart > nameEnd”，如markLine的data為 

[{name:\'北京\', value:100}, {name:\'上海\'}] 

則删除該标線時傳入的markName為 "北京 > 上海"
{self} on

{string} eventName, 

{Function}eventListener

事件綁定，事件命名統一挂載到require(\'echarts/config\').EVENT（非子產品化為echarts.config.EVENT）命名空間下，建議使用此命名空間作為事件名引用，目前版本支援事件有： 

-----------------------基礎事件----------------------- 

REFRESH（重新整理）， 

RESTORE（還原）， 

RESIZE（顯示空間變化）， 

CLICK（點選）， 

DBLCLICK（輕按兩下）， 

HOVER（懸浮）， 

MOUSEOUT（滑鼠離開資料圖形）， 

---------------------互動邏輯事件-------------------- 

DATA_CHANGED（資料修改，如拖拽重計算）， 

DATA_VIEW_CHANGED（資料視圖修改）， 

MAGIC_TYPE_CHANGED（動态類型切換）， 

TIMELINE_CHANGED（時間軸變化）， 

DATA_ZOOM（資料區域縮放）， 

DATA_RANGE（值域漫遊）， 

DATA_RANGE_SELECTED（值域開關選擇）， 

DATA_RANGE_HOVERLINK（值域漫遊hover）， 

LEGEND_SELECTED（圖例開關選擇）， 

LEGEND_HOVERLINK（圖例hover）， 

MAP_ROAM（地圖漫遊）， 

MAP_SELECTED（地圖選擇）， 

PIE_SELECTED（餅圖選擇）， 

FORCE_LAYOUT_END（力導向布局結束） 

事件調試 »
{self} un

{string} eventName, 

{Function}eventListener

 事件解綁定
{self}setTheme {string | Object}theme 設定主題，内置主題（\'macarons\', \'infographic\'）直接傳入名稱，自定義擴充主題可傳入主題對象
{self} connect {ECharts | Array <ECharts>}connectTarget

多圖關聯，傳入關聯目标為EChart執行個體，支援數組。多圖關聯支援直角系下tooltip關聯，儲存圖檔的自動拼接，同時支援的關聯事件有： 

REFRESH，RESTORE，MAGIC_TYPE_CHANGED 

DATA_ZOOM，DATA_RANGE，LEGEND_SELECTED 

多圖關聯 »
{self}disConnect {ECharts | Array <ECharts>}connectTarget 解除已連結的多圖關聯
{self}showLoading {Object}loadingOption 過渡控制（詳見loadingOption），顯示loading（讀取中） try this »
{self}hideLoading {void} 過渡控制，隐藏loading（讀取中）
{ZRender}getZrender {void} 擷取目前圖表所用ZRender執行個體，可用于添加額外圖形或進行深度定制，zrender接口詳見ZRender
{string}getDataURL {string=} imgType 擷取目前圖表的Base64圖檔dataURL，IE8-不支援，imgType 圖檔類型，支援png|jpeg，預設為png
{Dom}getImage {string=} imgType 擷取一個目前圖表的img，imgType 圖檔類型，支援png|jpeg，預設為png
{self} resize {void} ECharts沒有綁定resize事件，顯示區域大小發生改變内部并不知道，使用方可以根據自己的需求綁定關心的事件，主動調用resize達到自适應的效果，常見如window.onresize = myChart.resize。
{self} refresh {void} 重新整理圖表，圖例選擇、資料區域縮放，拖拽狀态均保持。
{self} restore {void} 還原圖表，各種狀态均被清除，還原為最初展現時的狀态。
{self} clear {void} 清空繪畫内容，清空後執行個體可用
{void}dispose {void} 釋放圖表執行個體，釋放後執行個體不再可用

選項

option

圖表選項，包含圖表執行個體任何可配置選項： 公共選項 ， 元件選項 ， 資料選項

名稱 描述
{color}backgroundColor 全圖預設背景，（詳見backgroundColor），支援rgba，預設為無，透明
{Array} color 數值系列的顔色清單，（詳見color），可配數組，eg：[\'#87cefa\', \'rgba(123,123,123,0.5)\',\'...\']，當系列數量個數比顔色清單長度大時将循環選取
{boolean}renderAsImage 非IE8-支援渲染為圖檔，（詳見renderAsImage）
{boolean}calculable 是否啟用拖拽重計算特性，預設關閉，（詳見calculable，相關的還有 calculableColor， calculableHolderColor，nameConnector， valueConnector）
{boolean}animation 是否開啟動畫，預設開啟，（詳見 animation，相關的還有 addDataAnimation， animationThreshold， animationDuration，animationDurationUpdate ， animationEasing）
{Object} timeline 時間軸（詳見timeline），每個圖表最多僅有一個時間軸控件
{Object} title 标題（詳見title），每個圖表最多僅有一個标題控件
{Object} toolbox 工具箱（詳見toolbox），每個圖表最多僅有一個工具箱
{Object} tooltip 提示框（詳見tooltip），滑鼠懸浮互動時的資訊提示
{Object} legend 圖例（詳見legend），每個圖表最多僅有一個圖例，混搭圖表共享
{Object}dataRange 值域選擇（詳見dataRange）,值域範圍
{Object}dataZoom 資料區域縮放（詳見dataZoom）,資料展現範圍選擇
{Object}roamController 漫遊縮放元件（詳見roamController）,搭配地圖使用
{Object} grid 直角坐标系内繪圖網格（詳見grid）
{Array | Object}xAxis 直角坐标系中橫軸數組（詳見xAxis），數組中每一項代表一條橫軸坐标軸，标準（1.0）中規定最多同時存在2條橫軸
{Array | Object}yAxis 直角坐标系中縱軸數組（詳見yAxis），數組中每一項代表一條縱軸坐标軸，标準（1.0）中規定最多同時存在2條縱軸
{Array} series 驅動圖表生成的資料内容（詳見series），數組中每一項代表一個系列的特殊選項及資料

timeline

時間軸，每個圖表最多僅有一個時間軸控件，try bar »、scatter »、pie »、map »

名稱 預設值 描述
{boolean} show true 顯示政策，可選為：true（顯示） | false（隐藏）
{number} zlevel 一級層疊控制。每一個不同的zlevel将産生一個獨立的canvas，相同zlevel的元件或圖示将在同一個canvas上渲染。zlevel越高越靠頂層，canvas對象增多會消耗更多的記憶體和性能，并不建議設定過多的zlevel，大部分情況可以通過二級層疊控制z實作層疊控制。
{number} z 4 二級層疊控制，同一個canvas（相同zlevel）上z越高約靠頂層。
{string} type \'time\' 模式是時間類型，時間軸間隔根據時間跨度自動計算，可選為：\'number\'
{boolean}notMerge false 時間軸上多個option切換時是否進行merge操作，同setOption第二個參數（詳見執行個體方法）
{boolean}realtime true 拖拽或點選改變時間軸是否實時顯示，在不支援Canvas的浏覽器中該值自動強制置為false
{number | string} x 80 時間軸左上角橫坐标，數值機關px，支援百分比（字元串），如\'50%\'(顯示區域橫向中心)
{number | string} y null 時間軸左上角縱坐标，數值機關px，支援百分比（字元串），預設無，随y2定位，如\'50%\'(顯示區域縱向中心)
{number | string} x2 80 時間軸右下角橫坐标，數值機關px，支援百分比（字元串），如\'50%\'(顯示區域橫向中心)
{number | string} y2 時間軸右下角縱坐标，數值機關px，支援百分比（字元串），如\'50%\'(顯示區域縱向中心)
{number} width 自适應

時間軸寬度，預設為總寬度 - x - x2，數值機關px，指定width後将忽略x2。見下圖。 

支援百分比（字元串），如\'50%\'(顯示區域一半的寬度)
{number} height 50 時間軸高度，數值機關px，支援百分比（字元串），如\'50%\'(顯示區域一半的高度)
{color}backgroundColor \'rgba(0,0,0,0)\' 背景顔色，預設透明。
{number}borderWidth 邊框線寬
{color}borderColor \'#ccc\' 邊框顔色。
{number | Array} padding 5 内邊距，機關px，預設各方向内邊距為5，接受數組分别設定上右下左邊距，同css，見下圖
{string}controlPosition \'left\' 播放控制器位置，可選為：\'left\' | \'right\' | \'none\'
{boolean}autoPlay false 是否自動播放
{boolean} loop true 是否循環播放
{number}playInterval 2000 播放時間間隔，機關ms
{Object}lineStyle 
{
    color: \'#666\',
    width: 1,
    type: \'dashed\'
}
時間軸軸線樣式，lineStyle控制線條樣式，（詳見lineStyle）
{Object} label 
{
    show: true,
    interval: \'auto\',
    rotate: 0,
    formatter: null,
    textStyle: {
        color: \'#333\'
    }
}

時間軸标簽文本

show : 是否顯示 

interval : 挑選間隔，預設為\'auto\'，可選為：\'auto\'（自動隐藏顯示不下的） | 0（全部顯示） | {number} 

rotate : 旋轉角度，預設為0，不旋轉，正值為逆時針，負值為順時針，可選為：-90 ~ 90 

formatter ： 間隔名稱格式器：{string}（Template） | {Function} 

textStyle : 文字樣式（詳見textStyle）
{Object}checkpointStyle 
{
    symbol : \'auto\',
    symbolSize : \'auto\',
    color : \'auto\',
    borderColor : \'auto\',
    borderWidth : \'auto\',
    label: {
        show: false,
        textStyle: {
            color: \'auto\'
        }
    }
}

時間軸目前點

symbol : 目前點symbol，預設随軸上的symbol 

symbolSize : 目前點symbol大小，預設随軸上symbol大小 

color : 目前點symbol顔色，預設為随目前點顔色，可指定具體顔色，如無則為\'#1e90ff\' 

borderColor ： 目前點symbol邊線顔色 

borderWidth ： 目前點symbol邊線寬度 

label同上
{Object}controlStyle 
{
    itemSize: 15,
    itemGap: 5,
    normal : {
        color : \'#333\'
    },
    emphasis : {
        color : \'#1e90ff\'
    }
}
時間軸控制器樣式，可指定itemSize按鈕大小，itemGap按鈕間隔，normal.color正常和emphasis.color高亮顔色
{string} symbol \'emptyDiamond\' 軸點symbol，同serie.symbol
{number}symbolSize 4 軸點symbol，同serie.symbolSize
{number}currentIndex 目前索引位置，對應options數組，用于指定顯示特定系列
{Array} data [] 時間軸清單，同時也是軸label内容

title

标題，每個圖表最多僅有一個标題控件，每個标題控件可設主副标題。

名稱 預設值 描述
{boolean} show true 顯示政策，可選為：true（顯示） | false（隐藏）
{number} zlevel 一級層疊控制。每一個不同的zlevel将産生一個獨立的canvas，相同zlevel的元件或圖示将在同一個canvas上渲染。zlevel越高越靠頂層，canvas對象增多會消耗更多的記憶體和性能，并不建議設定過多的zlevel，大部分情況可以通過二級層疊控制z實作層疊控制。
{number} z 6 二級層疊控制，同一個canvas（相同zlevel）上z越高約靠頂層。
{string} text \'\' 主标題文本，\'\n\'指定換行
{string} link \'\' 主标題文本超連結
{string} target null 指定視窗打開主标題超連結，支援\'self\' | \'blank\'，不指定等同為\'blank\'（新視窗）
{string} subtext \'\' 副标題文本，\'\n\'指定換行
{string} sublink \'\' 副标題文本超連結
{string}subtarget null 指定視窗打開副标題超連結，支援\'self\' | \'blank\'，不指定等同為\'blank\'（新視窗）
{string | number} x \'left\' 水準安放位置，預設為左側，可選為：\'center\' | \'left\' | \'right\' | {number}（x坐标，機關px）
{string | number} y \'top\' 垂直安放位置，預設為全圖頂端，可選為：\'top\' | \'bottom\' | \'center\' | {number}（y坐标，機關px）
{string} textAlign null 水準對齊方式，預設根據x設定自動調整，可選為： left\' | \'right\' | \'center
{color}backgroundColor \'rgba(0,0,0,0)\' 标題背景顔色，預設透明
{string}borderColor \'#ccc\' 标題邊框顔色
{number}borderWidth 标題邊框線寬，機關px，預設為0（無邊框）
{number | Array} padding 5 标題内邊距，機關px，預設各方向内邊距為5，接受數組分别設定上右下左邊距，同css，見下圖
{number}itemGap 5 主副标題縱向間隔，機關px，預設為10
{Object}textStyle 
{
    fontSize: 18,
    fontWeight: \'bolder\',
    color: \'#333\'
}
主标題文本樣式（詳見textStyle）
{Object}subtextStyle 
{
    color: \'#aaa\'
}
副标題文本樣式（詳見textStyle）

toolbox

工具箱，每個圖表最多僅有一個工具箱。try this »

名稱 預設值 描述
{boolean} show false 顯示政策，可選為：true（顯示） | false（隐藏）
{number} zlevel 一級層疊控制。每一個不同的zlevel将産生一個獨立的canvas，相同zlevel的元件或圖示将在同一個canvas上渲染。zlevel越高越靠頂層，canvas對象增多會消耗更多的記憶體和性能，并不建議設定過多的zlevel，大部分情況可以通過二級層疊控制z實作層疊控制。
{number} z 6 二級層疊控制，同一個canvas（相同zlevel）上z越高約靠頂層。
{string} orient \'horizontal\' 布局方式，預設為水準布局，可選為：\'horizontal\' | \'vertical\'
{string | number} x \'right\' 水準安放位置，預設為全圖居中，可選為：\'center\' | \'left\' | \'right\' | {number}（x坐标，機關px）
{string | number} y \'top\' 垂直安放位置，預設為全圖頂端，可選為：\'top\' | \'bottom\' | \'center\' | {number}（y坐标，機關px）
{color}backgroundColor \'rgba(0,0,0,0)\' 工具箱背景顔色，預設透明
{color}borderColor \'#ccc\' 工具箱邊框顔色
{number}borderWidth 工具箱邊框線寬，機關px，預設為0（無邊框）
{number | Array} padding 5 工具箱内邊距，機關px，預設各方向内邊距為5，接受數組分别設定上右下左邊距，同css，見下圖
{number}itemGap 10 各個item之間的間隔，機關px，預設為10，橫向布局時為水準間隔，縱向布局時為縱向間隔，見下圖
{number}itemSize 16 工具箱icon大小，機關（px）
{Array <color>}color [\'#1e90ff\',\'#22bb22\',\'#4b0082\',\'#d2691e\'] 工具箱icon顔色序列，循環使用，同時支援在具體feature内指定color
{color}disableColor \'#ddd\' 禁用顔色定義
{color}effectiveColor \'red\' 生效顔色定義
{boolean}showTitle true 是否顯示工具箱文字提示，預設啟用
{Object}textStyle {} 工具箱提示文字樣式，（詳見textStyle）
{Object} feature 
{
    mark : {
        show : false,
        title : {
            mark : \'輔助線開關\',
            markUndo : \'删除輔助線\',
            markClear : \'清空輔助線\'
        },
        lineStyle : {
            width : 2,
            color : \'#1e90ff\',
            type : \'dashed\'
        }
    },
    dataZoom : {
        show : false,
        title : {
            dataZoom : \'區域縮放\',
            dataZoomReset : \'區域縮放後退\'
        }
    },
    dataView : {
        show : false,
        title : \'資料視圖\',
        readOnly: false,
        lang: [\'資料視圖\', \'關閉\', \'重新整理\']
    },
    magicType: {
        show : false,
        title : {
            line : \'折線圖切換\',
            bar : \'柱形圖切換\',
            stack : \'堆積\',
            tiled : \'平鋪\',
            force: \'力導向布局圖切換\',
            chord: \'和弦圖切換\',
            pie: \'餅圖切換\',
            funnel: \'漏鬥圖切換\'
        },
        option: {
            // line: {...},
            // bar: {...},
            // stack: {...},
            // tiled: {...},
            // force: {...},
            // chord: {...},
            // pie: {...},
            // funnel: {...}
        },
        type : []
    },
    restore : {
        show : false,
        title : \'還原\'
    },
    saveAsImage : {
        show : false,
        title : \'儲存為圖檔\',
        type : \'png\',
        lang : [\'點選儲存\']
    }
}
啟用功能，目前支援feature見下，工具箱自定義功能回調處理，見try this »
    • mark，輔助線标志，上圖icon左數1/2/3，分别是啟用，删除上一條，删除全部，可設定更多屬性
      • 可傳入lineStyle（詳見lineStyle）控制線條樣式
    • dataZoom，框選區域縮放，自動與存在的dataZoom控件同步，上圖icon左數4/5，分别是啟用，縮放後退
    • dataView，資料視圖，上圖icon左數6，打開資料視圖，可設定更多屬性
      • {boolean=} readOnly 預設資料視圖為隻讀，可指定readOnly為false打開編輯功能
      • {Function=} optionToContent 自主編排資料視圖的顯示内容
      • {Function=} contentToOption 當資料視圖readOnly為false時，會出現重新整理按鈕，如果是自主編排的顯示内容，如何翻轉也請自理
      • {Array=} lang 資料視圖上有三個話術，預設是[\'資料視圖\', \'關閉\', \'重新整理\']，如需改寫，可自定義
    • magicType，動态類型切換，支援直角系下的折線圖、柱狀圖、堆積、平鋪轉換，上圖icon左數6~14，分别是切換為堆積，切換為平鋪，切換折線圖，切換柱形圖，切換為力導向布局圖，切換為和弦圖，切換為餅圖，切換為漏鬥圖
      • {Array} type [\'line\', \'bar\', \'stack\', \'tiled\', \'force\', \'chord\', \'pie\', \'funnel\']
      • {Object=} option 可選，可傳入切換是動态修改的配置，将複寫series内的數組項
    • restore，還原，複位原始圖表，上圖icon右數2
  • saveAsImage，儲存圖檔（IE8-不支援），上圖icon最右，可設定更多屬性
    • {string=} type 預設儲存圖檔類型為\'png\'，需改為\'jpeg\'
    • {string=} name 指定圖檔名稱，如不指定，則用圖表title标題，如無title标題則圖檔名稱預設為“ECharts”
    • {string=} lang 非IE浏覽器支援點選下載下傳，有儲存話術，預設是“點選儲存”，可修改

tooltip

提示框，滑鼠懸浮互動時的資訊提示。try this »

名稱 預設值 描述
{boolean} show true 顯示政策，可選為：true（顯示） | false（隐藏）
{number} zlevel 1 一級層疊控制。每一個不同的zlevel将産生一個獨立的canvas，相同zlevel的元件或圖示将在同一個canvas上渲染。zlevel越高越靠頂層，canvas對象增多會消耗更多的記憶體和性能，并不建議設定過多的zlevel，大部分情況可以通過二級層疊控制z實作層疊控制。
{number} z 8 二級層疊控制，同一個canvas（相同zlevel）上z越高約靠頂層。
{boolean}showContent true

tooltip主體内容顯示政策，隻需tooltip觸發事件或顯示axisPointer而不需要顯示内容時可配置該項為false，

可選為：true（顯示） | false（隐藏）
{string} trigger \'item\' 觸發類型，預設資料觸發，見下圖，可選為：\'item\' | \'axis\'
{Array | Function}position null 位置指定，傳入{Array}，如[x, y]， 固定位置[x, y]；傳入{Function}，如function([x, y]) {return [newX,newY]}，預設顯示坐标為輸入參數，使用者指定的新坐标為輸出傳回。
{string | Function}formatter null 内容格式器：{string}（Template） | {Function}，支援異步回調見表格下方
{string | Function}islandFormatter \'{a} < br/>{b} : {c}\' 拖拽重計算獨有，資料孤島内容格式器：{string}（Template） | {Function}，見表格下方
{number}showDelay 20 顯示延遲，添加顯示延遲可以避免頻繁切換，特别是在詳情内容需要異步擷取的場景，機關ms
{number}hideDelay 100 隐藏延遲，機關ms
{number}transitionDuration 0.4 動畫變換時長，機關s，如果你希望tooltip的跟随實時響應，showDelay設定為0是關鍵，同時transitionDuration設0也會有互動體驗上的差别。
{boolean}enterable false 滑鼠是否可進入詳情氣泡中，預設為false，如需詳情内互動，如添加連結，按鈕，可設定為true。
{color}backgroundColor \'rgba(0,0,0,0.7)\' 提示背景顔色，預設為透明度為0.7的黑色
{string}borderColor \'#333\' 提示邊框顔色
{number}borderRadius 4 提示邊框圓角，機關px，預設為4
{number}borderWidth 提示邊框線寬，機關px，預設為0（無邊框）
{number | Array}padding 5 提示内邊距，機關px，預設各方向内邊距為5，接受數組分别設定上右下左邊距，同css
{Object}axisPointer 
{
    type: \'line\',
    lineStyle: {
        color: \'#48b\',
        width: 2,
        type: \'solid\'
    },
    crossStyle: {
        color: \'#1e90ff\',
        width: 1,
        type: \'dashed\'
    },
    shadowStyle: {
        color: \'rgba(150,150,150,0.3)\',
        width: \'auto\',
        type: \'default\'
    }
}

坐标軸訓示器，預設type為line，可選為：\'line\' | \'cross\' | \'shadow\' | \'none\'(無)，指定type後對應style生效，見下 

lineStyle設定直線訓示器（詳見lineStyle）, 

crossStyle設定十字準星訓示器（詳見lineStyle）, 

shadowStyle設定陰影訓示器（詳見areaStyle），areaStyle.size預設為\'auto\'自動計算，可指定具體寬度
{Object} textStyle { color:\'#fff\' } 文本樣式，預設為白色字型（詳見textStyle）

内容格式器formatter：try this »

  • {string}，模闆（Template），其變量為：
    • {a} | {a0}
    • {b} | {b0}
    • {c} | {c0}
    • {d} | {d0} （部分圖表類型無此項）
    • {e} | {e0} （部分圖表類型無此項）
    • 多值下則存在多套{a1}, {b1}, {c1}, {d1}, {a2}, {b2}, {c2}, {d2}, ...
    • 其中變量a、b、c、d在不同圖表類型下代表資料含義為：
      • 折線（區域）圖、柱狀（條形）圖、K線圖 : a（系列名稱），b（類目值），c（數值）, d（無）
      • 散點圖（氣泡）圖 : a（系列名稱），b（資料名稱），c（數值數組）, d（無）
      • 地圖 : a（系列名稱），b（區域名稱），c（合并數值）, d（無）
      • 餅圖、雷達圖、儀表盤、漏鬥圖: a（系列名稱），b（資料項名稱），c（數值）, d（餅圖：百分比 | 雷達圖：名額名稱）
      • 力導向圖, 和弦圖 :
        • 節點 : a（系列名稱），b（節點名稱），c（節點值）, d(節點類目索引)
        • 邊 : a（系列名稱），b（邊名稱，預設為大端節點名稱-小端節點名稱），c（link.value）, d(大端節點 name 或者 index), e(小端節點 name 或者 index)
  • {Function}，傳遞參數清單為[params, ticket, callback]，詳見下：
    • <Array> params : 數組内容同模闆變量， 
      [
    {

        seriesIndex: 0,
        seriesName: \'一周銷量\',
        name: \'周一\',
        dataIndex: 0,
        data: data,
        name: name,
        value: value,
        percent: special,       // 餅圖
        indicator: special,     // 雷達圖、力導向、和弦
        value2: special2,       // 力導向、和弦
        indicator2: special2    // 力導向、和弦
    },
    {..},
    ...
]
    • <String> ticket : 異步回調辨別
    • <Function> callback : 異步回調，回調時需要兩個參數，第一個為前面提到的ticket，第二個為填充内容html
    • *函數回調時this指針指向目前圖表執行個體（myChart）

觸發類型：

item觸發 axis觸發

legend

圖例，每個圖表最多僅有一個圖例。try this »

名稱 預設值 描述
{boolean} show true 顯示政策，可選為：true（顯示） | false（隐藏）
{number} zlevel 一級層疊控制。每一個不同的zlevel将産生一個獨立的canvas，相同zlevel的元件或圖示将在同一個canvas上渲染。zlevel越高越靠頂層，canvas對象增多會消耗更多的記憶體和性能，并不建議設定過多的zlevel，大部分情況可以通過二級層疊控制z實作層疊控制。
{number} z 4 二級層疊控制，同一個canvas（相同zlevel）上z越高約靠頂層。
{string} orient \'horizontal\' 布局方式，預設為水準布局，可選為：\'horizontal\' | \'vertical\'
{string | number} x \'center\' 水準安放位置，預設為全圖居中，可選為：\'center\' | \'left\' | \'right\' | {number}（x坐标，機關px）
{string | number} y \'top\' 垂直安放位置，預設為全圖頂端，可選為：\'top\' | \'bottom\' | \'center\' | {number}（y坐标，機關px）
{color}backgroundColor \'rgba(0,0,0,0)\' 圖例背景顔色，預設透明
{string}borderColor \'#ccc\' 圖例邊框顔色
{number}borderWidth 圖例邊框線寬，機關px，預設為0（無邊框）
{number | Array} padding 5 圖例内邊距，機關px，預設各方向内邊距為5，接受數組分别設定上右下左邊距，同css，見下圖
{number}itemGap 10 各個item之間的間隔，機關px，預設為10，橫向布局時為水準間隔，縱向布局時為縱向間隔，見下圖
{number}itemWidth 20 圖例圖形寬度
{number}itemHeight 14 圖例圖形高度
{Object}textStyle {color: \'#333\'} 預設隻設定了圖例文字顔色（詳見textStyle） ，更個性化的是，要指定文字顔色跟随圖例，可設color為\'auto\'
{string | Function}formatter null 文本格式器：{string}（Template） | {Function}，模闆變量為\'{name}\'，函數回調參數為name
{boolean | string}selectedMode true 選擇模式，預設開啟圖例開關，可選single，multiple
{Object} selected null 配置預設選中狀态，可配合LEGEND.SELECTED事件做動态資料載入，try this »
{Array} data [ ]

圖例内容數組，數組項通常為{string}，每一項代表一個系列的name，預設布局到達邊緣會自動分行（列），傳入空字元串\'\'可實作手動分行（列）。 

使用根據該值索引series中同名系列所用的圖表類型和itemStyle，如果索引不到，該item将預設為沒啟用狀态。 

如需個性化圖例文字樣式，可把數組項改為{Object}，指定文本樣式和個性化圖例icon，格式為 

{

  name : {string}, 

  textStyle : {Object}, 

  icon : {string}

}

dataRange

值域選擇，每個圖表最多僅有一個值域控件。try this »

名稱 預設值 描述
{boolean} show true 顯示政策，可選為：true（顯示） | false（隐藏）
{number} zlevel 一級層疊控制。每一個不同的zlevel将産生一個獨立的canvas，相同zlevel的元件或圖示将在同一個canvas上渲染。zlevel越高越靠頂層，canvas對象增多會消耗更多的記憶體和性能，并不建議設定過多的zlevel，大部分情況可以通過二級層疊控制z實作層疊控制。
{number} z 4 二級層疊控制，同一個canvas（相同zlevel）上z越高約靠頂層。
{string} orient \'vertical\' 布局方式，預設為垂直布局，可選為：\'horizontal\' | \'vertical\'
{string | number} x \'left\' 水準安放位置，預設為全圖左對齊，可選為：\'center\' | \'left\' | \'right\' | {number}（x坐标，機關px）
{string | number} y \'bottom\' 垂直安放位置，預設為全圖底部，可選為：\'top\' | \'bottom\' | \'center\' | {number}（y坐标，機關px）
{color}backgroundColor \'rgba(0,0,0,0)\' 值域控件背景顔色，預設透明
{string}borderColor \'#ccc\' 值域控件邊框顔色
{number}borderWidth 值域控件邊框線寬，機關px，預設為0（無邊框）
{number | Array} padding 5 值域控件内邊距，機關px，預設各方向内邊距為5，接受數組分别設定上右下左邊距，同css，見下圖
{number}itemGap 10 各個item之間的間隔，機關px，預設為10，橫向布局時為水準間隔，縱向布局時為縱向間隔，見下圖
{number}itemWidth 20 值域控件圖形寬度
{number}itemHeight 14 值域控件圖形高度
{number} min null 指定的最小值，eg: 0，預設無，必須參數，唯有指定了splitList時可預設min。
{number} max null 指定的最大值，eg: 100，預設無，必須參數，唯有指定了splitList時可預設max
{number}precision 小數精度，預設為0，無小數點，當 min ~ max 間在目前精度下無法整除splitNumber份時，精度會自動提高以滿足均分，不支援不等劃分
{number}splitNumber 5 分割段數，預設為5，為0時為線性漸變，calculable為true是預設均分100份
{Array.<Object>}splitList null

自定義分割方式，支援不等距分割。splitList被指定時，splitNumber将被忽略。

splitList是一個（不可為空的）Array，Array的每一項為一個Object，含有如下屬性：

{ 

  start: 10     本項的資料範圍起點（>=），如果不設定表示負無窮。

  end: 30     本項的資料範圍終點（<=），如果不設定表示正無窮。

      如果想本項隻對應一個值，那麼start和end設同樣的數就可以了。

  label: \'10 to 30\'     本項的顯示标簽，預設則自動生成label 

  color: \'#333\'     本項的顔色，預設則自動計算color 

} 

詳見例子 this 》
{Object} range null

用于設定dataRange的初始選中範圍。calculable為true時有效。

其值型如：{start: 10, end: 50}。
{boolean | string}selectedMode true 選擇模式，預設開啟值域開關，可選single，multiple
{boolean}calculable false 是否啟用值域漫遊，啟用後無視splitNumber和splitList，值域顯示為線性漸變
{boolean}hoverLink true 是否啟用地圖hover時的關聯響應（詳情披露）
{boolean}realtime true 值域漫遊是否實時顯示，在不支援Canvas的浏覽器中該值自動強制置為false。
{Array} color [\'#1e90ff\',\'#f0ffff\'] 值域顔色辨別，顔色數組長度必須>=2，顔色代表從數值高到低的變化，即顔色數組低位代表數值高的顔色辨別 ，支援Alpha通道上的變化（rgba）
{string | Function}formatter null 内容格式器：{string}（Template） | {Function}，模闆變量為\'{value}\'和\'{value2}\'，代表數值起始值和結束值，函數參數兩個，含義同模闆變量，當calculable為true時模闆變量僅有\'{value}\'，try this »
{Array} text null 值域文字顯示，splitNumber生效時預設以計算所得數值作為值域文字顯示，可指定長度為2的文本數組顯示簡介的值域文本，如[\'高\', \'低\']，\'\n\'指定換行
{Object}textStyle {color: \'#333\'} 預設隻設定了值域控件文字顔色（詳見textStyle）

dataZoom

資料區域縮放。與toolbox.feature.dataZoom同步，僅對直角坐标系圖表有效。try this »

名稱 預設值 描述
{number} zlevel 一級層疊控制。每一個不同的zlevel将産生一個獨立的canvas，相同zlevel的元件或圖示将在同一個canvas上渲染。zlevel越高越靠頂層，canvas對象增多會消耗更多的記憶體和性能，并不建議設定過多的zlevel，大部分情況可以通過二級層疊控制z實作層疊控制。
{number} z 4 二級層疊控制，同一個canvas（相同zlevel）上z越高約靠頂層。
{boolean} show false 是否顯示，當show為true時則接管使用指定類目軸的全部系列資料，如不指定則接管全部直角坐标系資料。
{string} orient \'horizontal\' 布局方式，預設為水準布局，可選為：\'horizontal\' | \'vertical\'
{number} x 自适應 水準安放位置，預設為根據grid參數适配，縱向布局預設左側，可指定 {number}（左上角x坐标，機關px）
{number} y 自适應 垂直安放位置，預設為根據grid參數适配，縱向布局預設下方，可指定 {number}（左上角y坐标，機關px）
{number} width 自适應 | 30 指定寬度，橫向布局時預設為根據grid參數适配，縱向布局是預設為30，可指定 {number}（寬度，機關px）
{number} height 自适應 | 30 指定高度，縱向布局時預設為根據grid參數适配，橫向布局是預設為30，可指定 {number}（高度，機關px）
{color}backgroundColor \'rgba(0,0,0,0)\' 背景顔色，預設透明
{color}dataBackgroundColor \'#eee\' 資料縮略背景顔色，僅以第一個系列的資料作為縮量圖顯示
{color} fillerColor \'rgba(144,197,237,0.2)\' 選擇區域填充顔色
{color} handleColor \'rgba(70,130,180,0.8)\' 控制搖桿顔色
{number} handleSize 8 控制搖桿大小
{Array | number}xAxisIndex null 當不指定時預設控制所有橫向類目，可通過數組指定多個需要控制的橫向類目坐标軸Index，僅一個時可直接為數字
{Array | number}yAxisIndex null 當不指定時預設控制所有縱向類目，可通過數組指定多個需要控制的縱向類目坐标軸Index，僅一個時可直接為數字
{number} start 資料縮放，選擇起始比例，預設為0（%），從首個資料起選擇。
{number} end 100 資料縮放，選擇結束比例，預設為100（%），到最後一個資料選擇結束。
{boolean} showDetail true 縮放變化是否顯示定位詳情。
{boolean} realtime false 縮放變化是否實時顯示，在不支援Canvas的浏覽器中該值自動強制置為false。
{boolean} zoomLock false 資料縮放鎖，預設為false，當設定為true時選擇區域不能伸縮，即(end - start)值保持不變，僅能做資料漫遊。

roamController

縮放漫遊元件，僅對地圖有效。try this »

名稱 預設值 描述
{boolean} show true 顯示政策，可選為：true（顯示） | false（隐藏）。
{number} zlevel 一級層疊控制。每一個不同的zlevel将産生一個獨立的canvas，相同zlevel的元件或圖示将在同一個canvas上渲染。zlevel越高越靠頂層，canvas對象增多會消耗更多的記憶體和性能，并不建議設定過多的zlevel，大部分情況可以通過二級層疊控制z實作層疊控制。
{number} z 4 二級層疊控制，同一個canvas（相同zlevel）上z越高約靠頂層。
{string | number} x \'left\' 水準安放位置，預設為左側，可選為：\'center\' | \'left\' | \'right\' | {number}（x坐标，機關px）
{string | number} y \'top\' 垂直安放位置，預設為全圖頂端，可選為：\'top\' | \'bottom\' | \'center\' | {number}（y坐标，機關px）
{number} width 80 指定寬度，決定4向漫遊圓盤大小，可指定 {number}（寬度，機關px）
{number} height 120 指定高度，縮放控制鍵預設會在指定高度的最下方最大化顯示，可指定 {number}（高度，機關px）
{color}backgroundColor \'rgba(0,0,0,0)\' 縮放漫遊元件背景顔色，預設透明
{string}borderColor \'#ccc\' 縮放漫遊元件邊框顔色
{number}borderWidth 縮放漫遊元件邊框線寬，機關px，預設為0（無邊框）
{number | Array} padding 5 縮放漫遊元件内邊距，機關px，預設各方向内邊距為5，接受數組分别設定上右下左邊距，同css，見下圖
{color} fillerColor \'#fff\' 漫遊元件文字填充顔色
{color}handleColor \'#6495ed\' 控制搖桿主體顔色
{number} step 15 4向漫遊移動步伐，機關px
{Object}mapTypeControl null

必須，指定漫遊元件可控地圖類型，如：{ china: true }

當同一圖表内同時呈現多個地圖時，可以單獨指定所需控制地圖類型，如：{ china: false, \'北京\': true}

grid

直角坐标系内繪圖網格

名稱 預設值 描述
{number} zlevel 一級層疊控制。每一個不同的zlevel将産生一個獨立的canvas，相同zlevel的元件或圖示将在同一個canvas上渲染。zlevel越高越靠頂層，canvas對象增多會消耗更多的記憶體和性能，并不建議設定過多的zlevel，大部分情況可以通過二級層疊控制z實作層疊控制。
{number} z 二級層疊控制，同一個canvas（相同zlevel）上z越高約靠頂層。
{number | string} x 80 直角坐标系内繪圖網格左上角橫坐标，數值機關px，支援百分比（字元串），如\'50%\'(顯示區域橫向中心)
{number | string} y 60 直角坐标系内繪圖網格左上角縱坐标，數值機關px，支援百分比（字元串），如\'50%\'(顯示區域縱向中心)
{number | string} x2 80 直角坐标系内繪圖網格右下角橫坐标，數值機關px，支援百分比（字元串），如\'50%\'(顯示區域橫向中心)
{number | string} y2 60 直角坐标系内繪圖網格右下角縱坐标，數值機關px，支援百分比（字元串），如\'50%\'(顯示區域縱向中心)
{number} width 自适應

直角坐标系内繪圖網格（不含坐标軸）寬度，預設為總寬度 - x - x2，數值機關px，指定width後将忽略x2，見下圖。 

支援百分比（字元串），如\'50%\'(顯示區域一半的寬度)
{number} height 自适應

直角坐标系内繪圖網格（不含坐标軸）高度，預設為總高度 - y - y2，數值機關px，指定height後将忽略y2，見下圖。

支援百分比（字元串），如\'50%\'(顯示區域一半的高度)
{color}backgroundColor \'rgba(0,0,0,0)\' 背景顔色，預設透明。
{number}borderWidth 1 邊框線寬
{color}borderColor \'#ccc\' 邊框顔色。

xAxis

直角坐标系中橫軸數組，數組中每一項代表一條橫軸坐标軸，僅有一條時可省略數組。最多同時存在2條橫軸，單條橫軸時可指定安放于grid的底部（預設）或頂部，2條同時存在時位置互斥，預設第一條安放于底部，第二條安放于頂部。

坐标軸有三種類型，類目型、數值型和時間型（差別詳見axis），橫軸通常為類目型，但條形圖時則橫軸為數值型，散點圖時則橫縱均為數值型，具體參數詳見axis。

yAxis

直角坐标系中縱軸數組，數組中每一項代表一條縱軸坐标軸，僅有一條時可省略數組。最多同時存在2條縱軸，單條縱軸時可指定安放于grid的左側（預設）或右側，2條同時存在時位置互斥，預設第一條安放于左側，第二條安放于右側。

坐标軸有三種類型，類目型、數值型和時間型（差別詳見axis），縱軸通常為數值型，但條形圖時則縱軸為類目型，具體參數詳見axis。

axis

坐标軸有三種類型，類目型、數值型和時間型，他們的差別在于：

  • 類目型：需要指定類目清單，坐标軸内有且僅有這些指定類目坐标
  • 數值型：需要指定數值區間，不指定時則自定計算數值範圍，坐标軸内包含數值區間内容全部坐标
  • 時間型：時間型坐标軸用法同數值型，隻是目标處理和格式化顯示時會自動轉變為時間，并且随着時間跨度的不同自動切換需要顯示的時間粒度

下面是坐标軸的全部選項，其中個别選項僅在個别類型時有效，請注意适用類型。try this »

名稱 預設值 适用類型 描述
{string} type \'category\' | \'value\' | \'time\' | \'log\' 通用 坐标軸類型，橫軸預設為類目型\'category\'，縱軸預設為數值型\'value\'
{boolean}show true 通用 顯示政策，可選為：true（顯示） | false（隐藏）
{number}zlevel 通用 一級層疊控制。每一個不同的zlevel将産生一個獨立的canvas，相同zlevel的元件或圖示将在同一個canvas上渲染。zlevel越高越靠頂層，canvas對象增多會消耗更多的記憶體和性能，并不建議設定過多的zlevel，大部分情況可以通過二級層疊控制z實作層疊控制。
{number} z 通用 二級層疊控制，同一個canvas（相同zlevel）上z越高約靠頂層。
{string}position \'bottom\' | \'left\' 通用 坐标軸類型，橫軸預設為類目型\'bottom\'，縱軸預設為數值型\'left\'，可選為：\'bottom\' | \'top\' | \'left\' | \'right\'
{string} name \'\' 數值型，時間型 坐标軸名稱，預設為空
{string}nameLocation \'end\' 數值型，時間型 坐标軸名稱位置，預設為\'end\'，可選為：\'start\' | \'end\'
{Object}nameTextStyle {} 數值型，時間型 坐标軸名稱文字樣式，預設取全局配置，顔色跟随axisLine主色，可設
{boolean}boundaryGap true 類目型 類目起始和結束兩端空白政策，見下圖，預設為true留白，false則頂頭
{Array}boundaryGap [0, 0] 數值型，時間型 坐标軸兩端空白政策，數組内數值代表百分比，[原始資料最小值與最終最小值之間的差額，原始資料最大值與最終最大值之間的差額]
{number} min null 數值型，時間型 指定的最小值，eg: 0，預設無，會自動根據具體數值調整，指定後将忽略boundaryGap[0]
{number} max null 數值型，時間型 指定的最大值，eg: 100，預設無，會自動根據具體數值調整，指定後将忽略boundaryGap[1]
{boolean}scale false 數值型，時間型 脫離0值比例，放大聚焦到最終_min，_max區間
{number}splitNumber null 數值型，時間型 分割段數，不指定時根據min、max算法調整
{number}logLabelBase null value axis.type === \'log\'時生效。指定時，axisLabel顯示為指數形式，如指定為4時，axisLabel可顯示為4²、4³。不指定時，顯示為普通形式，如 1,000,000
{Object}logPositive null value axis.type === \'log\'時生效。指明是否使用反向log數軸（進而支援value為負值）。預設自适應，即如果value全為負值，則logPositive自動設為false，否則為true。
{Object}axisLine 各異 通用 坐标軸線，預設顯示，詳見下方
{Object}axisTick 各異 通用 坐标軸小标記，預設不顯示，詳見下方
{Object}axisLabel 各異 通用 坐标軸文本标簽，詳見下方
{Object}splitLine 各異 通用 分隔線，預設顯示，，詳見下方
{Object}splitArea 各異 通用 分隔區域，預設不顯示，詳見下方
{Array} data [] 類目型 類目清單，同時也是label内容，詳見axis.data

boundaryGap端空白政策

設定 boundaryGap: true boundaryGap: false
效果

scale政策

設定 scale: false scale: true
效果

axis屬性說明

axis.axisLine

坐标軸線，預設顯示且帶如下樣式：

名稱 預設值 适用類型 描述
{boolean} show true 通用 是否顯示，預設為true，設為false後下面都沒意義了
{boolean} onZero true 通用 定位到垂直方向的0值坐标上
{Object} lineStyle 
{
    color: \'#48b\',
    width: 2,
    type: \'solid\'
}
通用 屬性lineStyle控制線條樣式，（詳見lineStyle）
axis.axisTick

坐标軸小标記，數值軸和時間軸預設不顯示，類目軸預設顯示，預設樣式見下：

名稱 預設值 适用類型 描述
{boolean} show

false（數值軸和時間軸）

true（類目軸）

 通用 是否顯示，預設為false，設為true後下面為預設樣式
{string | number | function}interval \'auto\' 類目型

小标記顯示挑選間隔，預設為\'auto\'，可選為： 

\'auto\'（随axisLabel，自動隐藏顯示不下的） | 0（全部顯示） | 

{number}（使用者指定選擇間隔） 

{function}函數回調，傳遞參數[index，data[index]]，傳回true顯示，傳回false隐藏
{boolean} onGap null 類目型 小标記是否顯示為間隔，預設等于boundaryGap
{boolean} inside false 通用 小标記是否顯示為在grid内部，預設在外部
{number} length 5 通用 屬性length控制線長
{Object} lineStyle 
{
    color: \'#333\',
    width: 1
}
通用 屬性lineStyle控制線條樣式，（詳見lineStyle）
axis.axisLabel

坐标軸文本标簽選項

名稱 預設值 适用類型 描述
{boolean} show true 通用 是否顯示，預設為true，設為false後下面都沒意義了
{string | number | function} interval \'auto\' 類目型

标簽顯示挑選間隔，預設為\'auto\'，可選為： 

\'auto\'（自動隐藏顯示不下的） | 0（全部顯示） | 

{number}（使用者指定選擇間隔） 

{function}函數回調，傳遞參數[index，data[index]]，傳回true顯示，傳回false隐藏
{number} rotate 通用 标簽旋轉角度，預設為0，不旋轉，正值為逆時針，負值為順時針，可選為：-90 ~ 90
{number} margin 8 通用 坐标軸文本标簽與坐标軸的間距，預設為8，機關px
{boolean} clickable false 通用 坐标軸文本标簽是否可點選
{string | Function}formatter null 通用 間隔名稱格式器：{string}（Template） | {Function}
{Object} textStyle 
{
    color: \'#333\'
}
通用 文本樣式（詳見textStyle），其中當坐标軸為數值型和時間型時，color接受方法回調，實作個性化的顔色定義，support #226 »

間隔名稱格式器formatter：

  • {string}，模闆（Template），其變量為：
    • {value}: 内容或值
  • {Function}，傳遞參數同模闆變量：
    • eg：function (value){return "星期" + "日一二三四五六".charAt(value);\'}
axis.splitLine

分隔線，預設顯示且帶如下樣式：

名稱 預設值 适用類型 描述
{boolean} show true 通用 是否顯示，預設為true，設為false後下面都沒意義了
{boolean} onGap null 類目型 分隔線是否顯示為間隔，預設等于boundaryGap
{Object} lineStyle 
{
    color: [\'#ccc\'],
    width: 1,
    type: \'solid\'
}
通用 屬性lineStyle控制線條樣式，（詳見lineStyle）
axis.splitArea

分隔區域，預設不顯示：

名稱 預設值 适用類型 描述
{boolean} show false 通用 是否顯示，預設為false，設為true後帶如下預設樣式
{boolean} onGap null 類目型 分隔區域是否顯示為間隔，預設等于boundaryGap
{Object} areaStyle 
{
    color: [
        \'rgba(250,250,250,0.3)\',
        \'rgba(200,200,200,0.3)\'
    ]
}
通用 屬性areaStyle（詳見areaStyle）控制區域樣式，顔色數組實作間隔變換。
axis.data

類目型坐标軸文本标簽數組，指定label内容。 數組項通常為文本，\'\n\'指定換行，如:

[\'Jan\', \'Feb\', \'Mar\', \'Apr\', \'May\', \'Jun\', ..., \'Dec\']

當需要對個别标簽進行個性化定義時，數組項可用對象，接受textStyle設定個性化标簽，如：

[
    \'Jav\', \'Feb\', \'Mar\',
     {
        value:\'Apr\',            //文本内容，如指定間隔名稱格式器formatter，則這個值将被作為模闆變量值或參數傳入
        textStyle:{             //詳見textStyle
            color : \'red\'
            ...
        }
     },
    \'May\', \'...\'
]

polar

極坐标：

名稱 預設值 描述
{number}zlevel 一級層疊控制。每一個不同的zlevel将産生一個獨立的canvas，相同zlevel的元件或圖示将在同一個canvas上渲染。zlevel越高越靠頂層，canvas對象增多會消耗更多的記憶體和性能，并不建議設定過多的zlevel，大部分情況可以通過二級層疊控制z實作層疊控制。
{number} z 二級層疊控制，同一個canvas（相同zlevel）上z越高約靠頂層。
{Array}center [\'50%\', \'50%\'] 圓心坐标，支援絕對值（px）和百分比，百分比計算min(width, height) * 50%
{number}radius \'75%\' 半徑，支援絕對值（px）和百分比，百分比計算min(width, height) / 2 * 75%,
{number}startAngle 90 開始角度, 有效輸入範圍：[-180,180]
{number}splitNumber 5 分割段數，預設為5
{Object}name 
{
    show: true,
    formatter: null,
    textStyle: {
        color:#333
    }
}
坐标軸名稱
{Array}boundaryGap [0, 0] 數值軸兩端空白政策，數組内數值代表百分比，[原始資料最小值與最終最小值之間的差額，原始資料最大值與最終最大值之間的差額]
{boolean}scale false 脫離0值比例，放大聚焦到最終_min，_max區間
{Object}axisLine {show : true} 坐标軸線，預設顯示，屬性show控制顯示與否，屬性lineStyle（詳見lineStyle）控制線條樣式
{Object}axisLabel {show : false} 坐标軸文本标簽，詳見axis.axisLabel
{Object}splitLine {show : true} 分隔線，預設顯示，屬性show控制顯示與否，屬性lineStyle（詳見lineStyle）控制線條樣式
{Object}splitArea {show : true} 分隔區域，預設不顯示，屬性show控制顯示與否，屬性areaStyle（詳見areaStyle）控制區域樣式
{String} type \'polygon\' 極坐标的形狀，\'polygon\'|\'circle\' 多邊形|圓形
{Array}indicator [] 雷達名額清單，同時也是label内容，例子見下 
indicator : [
    {text : \'外觀\'},
    {text : \'拍照\', min : 0},
    {text : \'系統\', min : 0, max : 100},
    {text : \'性能\', axisLabel: {...}},
    {text : \'螢幕\'}
]

series（通用）

驅動圖表生成的資料内容數組，數組中每一項為一個系列的選項及資料，其中個别選項僅在部分圖表類型中有效，請注意适用類型：

名稱 預設值 适用類型 描述
{number}zlevel 通用 一級層疊控制。每一個不同的zlevel将産生一個獨立的canvas，相同zlevel的元件或圖示将在同一個canvas上渲染。zlevel越高越靠頂層，canvas對象增多會消耗更多的記憶體和性能，并不建議設定過多的zlevel，大部分情況可以通過二級層疊控制z實作層疊控制。
{number}z 2 通用 二級層疊控制，同一個canvas（相同zlevel）上z越高約靠頂層。
{string}type null 通用

圖表類型，必要參數！如為空或不支援類型，則該系列資料不被顯示。可選為： 

\'line\'（折線圖） | \'bar\'（柱狀圖） | \'scatter\'（散點圖） | \'k\'（K線圖） 

\'pie\'（餅圖） | \'radar\'（雷達圖） | \'chord\'（和弦圖） | \'force\'（力導向布局圖） | \'map\'（地圖）
{string}name null 通用 系列名稱，如啟用legend，該值将被legend.data索引相關
{Object}tooltip null 通用 提示框樣式，僅對本系列有效，如不設則用option.tooltip（詳見tooltip）,滑鼠懸浮互動時的資訊提示
{boolean}clickable true 通用 資料圖形是否可點選，預設開啟，如果沒有click事件響應可以關閉
{Object}itemStyle null 通用 圖形樣式（詳見itemStyle）
{Array}data [] 通用 資料（詳見series.data）
{Array}markPoint {} 通用 标注（詳見series.markPoint）
{Array}markLine {} 通用 标線（詳見series.markLine）
series（直角系）

驅動圖表生成的資料内容數組，數組中每一項為一個系列的選項及資料，其中個别選項僅在部分圖表類型中有效，請注意适用類型：

名稱 預設值 适用類型 描述
{string} stack null 折線圖，柱狀圖 組合名稱，雙數值軸時無效，多組資料的堆積圖時使用，eg：stack:\'group1\'，則series數組中stack值等于\'group1\'的資料做堆積計算
{number}xAxisIndex 折線圖，柱狀圖，散點圖 ，K線圖 xAxis坐标軸數組的索引，指定該系列資料所用的橫坐标軸
{number}yAxisIndex 折線圖，柱狀圖，散點圖，K線圖 yAxis坐标軸數組的索引，指定該系列資料所用的縱坐标軸
{number | string} barGap \'30%\' 柱狀圖 柱間距離，預設為柱形寬度的30%，可設固定值
{number | string}barCategoryGap \'20%\' 柱狀圖 類目間柱形距離，預設為類目間距的20%，可設固定值
{number}barMinHeight 柱狀圖 柱條最小高度，可用于防止某item的值過小而影響互動
{number}barWidth 自适應 柱狀圖 ，K線圖 柱條（K線蠟燭）寬度，不設時自适應
{number}barMaxWidth 自适應 柱狀圖 ，K線圖 柱條（K線蠟燭）最大寬度，不設時自适應
{string} symbol null 折線圖，散點圖

标志圖形類型，預設自動選擇（8種類型循環使用，不顯示标志圖形可設為\'none\'），預設循環選擇類型有：

\'circle\' | \'rectangle\' | \'triangle\' | \'diamond\' |

\'emptyCircle\' | \'emptyRectangle\' | \'emptyTriangle\' | \'emptyDiamond\' 

另外，還支援五種更特别的标志圖形\'heart\'（心形）、\'droplet\'（水滴）、\'pin\'（标注）、\'arrow\'（箭頭）和\'star\'（五角星），這并不出現在正常的8類圖形中，但無論是在系列級還是資料級上你都可以指定使用，同時，\'star\' + n（n>=3)可變化出N角星，如指定為\'star6\'則可以顯示6角星 

自1.3.5起支援symbol為自定義圖檔，格式為\'image://\' + \'圖檔路徑\'， 如\'image://../asset/ico/favicon.png\' 

詳見例子 this 》
{number | Function | Array}symbolSize 2 | 4 折線圖 (2)，散點圖(4) 标志圖形大小，可計算特性啟用情況建議增大以提高互動體驗。可以是單個值，如果在 symbol 為圖檔的時候想要分别設定寬高防止圖檔被拉伸，可以使用數組，其中數組第一個值是高，第二個值是寬。 實作氣泡圖時symbolSize需為Function，氣泡大小取決于該方法傳回值，傳入參數為目前資料項（value數組）。
{number}symbolRotate null 折線圖 ，散點圖 标志圖形旋轉角度[-180,180]
{boolean}showAllSymbol false 折線圖 标志圖形預設隻有主軸顯示（随主軸标簽間隔隐藏政策），如需全部顯示可把showAllSymbol設為true
{boolean}smooth false 折線圖 平滑曲線顯示，smooth為true時lineStyle不支援虛線
{boolean}dataFilter \'nearst\' 折線圖

ECharts 會在折線圖的資料數量大于實際顯示的像素寬度（高度）的時候會啟用優化，對顯示在一個像素寬度内的資料做篩選，該選項是指明資料篩選的政策。

可選 \'nearest\', \'min\', \'max\', \'average\'。或者是使用自定義的篩選函數
{boolean} large false 散點圖 啟動大規模散點圖
{number}largeThreshold 2000 散點圖 大規模散點圖自動切換閥值，large為true下有效
{boolean}legendHoverLink true 折線圖，柱狀圖，散點圖 是否啟用圖例（legend）hover時的關聯響應（高亮顯示）
series（餅圖）

驅動圖表生成的資料内容數組，數組中每一項為一個系列的選項及資料：

名稱 預設值 描述
{Array} center [\'50%\', \'50%\'] 圓心坐标，支援絕對值（px）和百分比，百分比計算min(width, height) * 50%
{number | Array} radius [0, \'75%\'] 半徑，支援絕對值（px）和百分比，百分比計算比，min(width, height) / 2 * 75%， 傳數組實作環形圖，[内半徑，外半徑]
{number} startAngle 90 開始角度, 餅圖（90）、儀表盤（225），有效輸入範圍：[-360,360]
{number} minAngle 最小角度，可用于防止某item的值過小而影響互動
{boolean} clockWise true 顯示是否順時針
{string} roseType null 南丁格爾玫瑰圖模式，\'radius\'（半徑） | \'area\'（面積）
{number} selectedOffset 10 選中是扇區偏移量
{boolean | string}selectedMode null 選中模式，預設關閉，可選single，multiple
{boolean} legendHoverLink true 是否啟用圖例（legend）hover時的關聯響應（高亮顯示）
series（雷達圖）

驅動圖表生成的資料内容數組，數組中每一項為一個系列的選項及資料：

名稱 預設值 描述
{number} polarIndex 極坐标索引
{string} symbol null 同series（直角系）
{number | Function | Array} symbolSize 2 同series（直角系）
{number} symbolRotate null 同series（直角系）
{boolean} legendHoverLink true 是否啟用圖例（legend）hover時的關聯響應（高亮顯示）
series（地圖）

驅動圖表生成的資料内容數組，數組中每一項為一個系列的選項及資料：

名稱 預設值 描述
{boolean | string}selectedMode null 選中模式，預設關閉，可選single，multiple
{string} mapType \'china\'

地圖類型，支援world，china及全國34個省市自治區。省市自治區的mapType直接使用簡體中文： 

新疆， 西藏， 内蒙古， 青海， 四川， 黑龍江， 甘肅， 雲南， 廣西， 湖南， 陝西， 

廣東，吉林， 河北， 湖北， 貴州， 山東， 江西， 河南， 遼甯， 山西， 安徽， 福建， 

浙江， 江蘇，重慶， 甯夏， 海南， 台灣， 北京， 天津， 上海， 香港， 澳門\' 

支援子區域模式，通過主地圖類型擴充出所包含的子區域地圖，格式為\'主地圖類型|子區域名稱\'，如 

\'world|Brazil\'，\'china|廣東\'，詳見例子 this 》
{boolean} hoverable true 非數值顯示（如僅用于顯示标注标線時），可以通過hoverable:false關閉區域懸浮高亮
{boolean}dataRangeHoverLink true 是否啟用值域漫遊元件（dataRange）hover時的關聯響應（詳情披露）
{Object} mapLocation {x:\'center\',y:\'center\'} 地圖位置設定，預設隻适應上下左右居中可配x，y，width，height，任意參數為空都将根據其他參數自适應
{string}mapValueCalculation \'sum\' 地圖數值計算方式，預設為加和，可選為：\'sum\'（總數） | \'average\'（均值）
{number}mapValuePrecision 地圖數值計算結果小數精度，mapValueCalculation為average時有效，預設為取整，需要小數精度時設定大于0的整數
{boolean}showLegendSymbol true 顯示圖例顔色辨別（系列辨別的小圓點），存在legend時生效
{boolean | string} roam false 是否開啟滾輪縮放和拖拽漫遊，預設為false（關閉），其他有效輸入為true（開啟），\'scale\'（僅開啟滾輪縮放），\'move\'（僅開啟拖拽漫遊）
{Object} scaleLimit null 滾輪縮放的極限控制，可指定{max:number, min:number}，其中max為放大系數，有效值應大于1，min為縮小系數，有效值應小于1
{Object} nameMap null 自定義地區的名稱映射，如{\'China\' : \'中國\'}
{Object} textFixed null 地區的名稱文本位置修正，數值機關為px，正值為左下偏移，負值為右上偏移，如{\'China\' : [10, -10]}
{Object} geoCoord null 通過絕對經緯度指定地區的名稱文本位置，如{\'Islands\':[113.95, 22.26]}，香港離島區名稱顯示定位到東經113.95，北緯22.26上
series（力導向布局圖）

驅動圖表生成的資料内容數組，數組中每一項為一個系列的選項及資料：

名稱 預設值 描述
{Array} categories null 節點分類, 詳見圖資料結構表示中的categories
{Array}nodes(data) [] 力導向圖的頂點資料, 詳見圖資料結構表示中的nodes(data), 力導向中獨有的項：
名稱 預設值 描述
{Array} initial 強制指定節點的初始值，在不指定的時候會在某個範圍内随機生成
{boolean} fixX false 是否固定節點在 X 軸上的值，配合 initial 使用
{boolean} fixY false 是否固定節點在 Y 軸上的值，配合 initial 使用
{boolean} ignore false 是否忽略該節點
{boolean} draggable 節點是否能被拖拽
{number} category 節點的 category index
{Array} links [] 力導向圖的邊資料, 和matrix二選一 詳見圖資料結構表示中的links
{Array} matrix [] 力導向圖的鄰接矩陣, 和links二選一 詳見圖資料結構表示中的matrix
{Array} center [\'50%\', \'50%\'] 布局中心，可以是絕對值或者相對百分比
{number} size 100% 布局大小，可以是絕對值或者相對百分比
{number}minRadius 10 頂點資料映射成圓半徑後的最小半徑
{number}maxRadius 20 頂點資料映射成圓半徑後的最大半徑
{string} symbol \'circle\' 同series（直角系）
{number|Array}symbolSize 節點的大小
{string} linkSymbol \'none\' 力導向圖的邊兩端圖形樣式，可指定為\'arrow\', 詳見symbolList
{Array}linkSymbolSize [10, 15] 力導向圖的邊兩端圖形大小
{number} scaling 1 布局縮放系數，并不完全精确, 效果跟布局大小類似
{number} gravity 1 向心力系數，系數越大則節點越往中心靠攏
{boolean}draggable true 節點是否能被拖拽
{boolean} large false 在 500+ 頂點的圖上建議設定 large 為 true, 會使用 Barnes-Hut simulation, 同時開啟 useWorker 并且把 steps 值調大
{boolean}useWorker false 是否在浏覽器支援 web worker 的時候把布局計算放入 web worker 中
{number} steps 1 每一幀布局計算的疊代次數，因為每一幀繪制的時間經常會比布局時間長很多，是以在使用 web worker 的時候可以把 steps 調大來平衡兩者的時間進而達到效率最優化
{boolean | string}roam false 是否開啟滾輪縮放和拖拽漫遊，預設為false（關閉），其他有效輸入為true（開啟），\'scale\'（僅開啟滾輪縮放），\'move\'（僅開啟拖拽漫遊）
series（和弦圖）

驅動圖表生成的資料内容數組，數組中每一項為一個系列的選項及資料：

名稱 預設值 描述
{Array}categories null 節點分類, 詳見圖資料結構表示中的categories
{Array}nodes(data) [] 和弦圖的頂點資料, 詳見圖資料結構表示中的nodes(data)
{Array} links [] 和弦圖的邊資料, 和matrix二選一 詳見圖資料結構表示中的links
{Array} matrix [] 和弦圖的鄰接矩陣, 和links二選一 詳見圖資料結構表示中的matrix
{boolean}ribbonType true ribbonType的和弦圖節點使用扇形繪制，邊使用有大小端的ribbon繪制，可以表示出邊的權重，圖的節點邊之間必須是雙向邊，非ribbonType的和弦圖節點使用symbol繪制，邊使用貝塞爾曲線，不能表示邊的權重，但是可以使用單向邊
{string}symbol \'circle\' 同series（直角系）, ribbonType為false時有效
{number} symbolSize 節點的大小, ribbonType為false時有效
{number}minRadius 10 頂點資料映射成symbol半徑後的最小半徑, ribbonType為false時有效
{number}maxRadius 20 頂點資料映射成symbol半徑後的最大半徑, ribbonType為false時有效
{boolean}showScale false 是否顯示刻度, ribbonType為true時有效
{boolean}showScaleText false 是否顯示刻度文字, ribbonType為true時有效
{number}padding 2 每個sector之間的間距(用角度表示)
{string} sort \'none\' 資料排序， 可以取none, ascending, descending
{string}sortSub \'none\' 資料排序（弦）， 可以取none, ascending, descending
{boolean}clockWise false 顯示是否順時針
series（儀表盤）

驅動圖表生成的資料内容數組，數組中每一項為一個系列的選項及資料：

名稱 預設值 描述
{Array} center [\'50%\', \'50%\'] 圓心坐标，支援絕對值（px）和百分比，百分比計算min(width, height) * 50%
{number | Array}radius [0, \'75%\']

半徑，支援絕對值（px）和百分比，百分比計算比，min(width, height) / 2 * 75%， 

傳數組實作環形圖，[内半徑，外半徑]
{number} startAngle 225 開始角度, 餅圖（90）、儀表盤（225），有效輸入範圍：[-360,360]
{number} endAngle -45 結束角度,有效輸入範圍：[-360,360]，保證startAngle - endAngle為正值
{number} min 指定的最小值
{number} max 100 指定的最大值
{number} splitNumber 10 分割段數，預設為10
{Object} axisLine 
{
    show: true,
    lineStyle: {
        color: [
            [0.2, \'#228b22\'],
            [0.8, \'#48b\'],
            [1, \'#ff4500\']
        ],
        width: 30
    }
}

坐标軸線，預設顯示 

屬性show控制顯示與否， 

屬性lineStyle（詳見lineStyle）控制線條樣式， 

比較特殊的是這裡的lineStyle.color是一個二維數組，用于把儀表盤軸線分成若幹份， 

并且可以給每一份指定具體的顔色，格式為:[[百分比, 顔色值], [...]]
{Object} axisTick 
{
    show: true,
    splitNumber: 5,
    length :8,
    lineStyle: {
        color: \'#eee\',
        width: 1,
        type: \'solid\'
    }
}

坐标軸小标記，預設顯示 

屬性show控制顯示與否， 

屬性lineStyle（詳見lineStyle）控制線條樣式， 

屬性splitNumber控制每份split細分多少段 

屬性length控制線長
{Object} axisLabel 
{
    show: true,
    formatter: null,
    textStyle: {
        color: \'auto\'
    }
}

坐标軸文本标簽（詳見axis.axislabel） 

屬性formatter可以格式化文本标簽， 

屬性textStyle（詳見textStyle）控制文本樣式
{Object} splitLine 
{
    show: true,
    length :30,
    lineStyle: {
        color: \'#eee\',
        width: 2,
        type: \'solid\'
    }
}

主分隔線，預設顯示 

屬性show控制顯示與否， 

屬性length控制線長 

屬性lineStyle（詳見lineStyle）控制線條樣式，
{Object} pointer 
{
    length : \'80%\',
    width : 8,
    color : \'auto\'
}

指針樣式 

屬性length控制線長，百分比相對的是儀表盤的外半徑 

屬性width控制指針最寬處， 

屬性color控制指針顔色
{Object} title 
{
    show : true,
    offsetCenter: [0, \'-40%\'],
    textStyle: {
        color: \'#333\',
        fontSize : 15
    }
}

儀表盤标題 

屬性show控制顯示與否， 

屬性offsetCenter用于标題定位，數組為橫縱相對儀表盤圓心坐标偏移，支援百分比（相對外半徑）， 

屬性textStyle（詳見textStyle）控制文本樣式
{Object} detail 
{
    show : true,
    backgroundColor: \'rgba(0,0,0,0)\',
    borderWidth: 0,
    borderColor: \'#ccc\',
    width: 100,
    height: 40,
    offsetCenter: [0, \'40%\'],
    formatter: null,
    textStyle: {
        color: \'auto\',
        fontSize : 30
    }
}

儀表盤詳情 

屬性show控制顯示與否， 

屬性backgroundColor控制邊框顔色， 

屬性borderWidth控制邊框線寬， 

屬性borderColor控制邊框顔色， 

屬性width控制詳情寬度， 

屬性height控制詳情高度， 

屬性offsetCenter用于詳情定位，數組為橫縱相對儀表盤圓心坐标偏移，支援百分比（相對外半徑）， 

屬性formatter可以格式化文本， 

屬性textStyle（詳見textStyle）控制文本樣式
{boolean}legendHoverLink true 是否啟用圖例（legend）hover時的關聯響應（高亮顯示）
series（漏鬥圖）

驅動圖表生成的資料内容數組，數組中每一項為一個系列的選項及資料：

名稱 預設值 描述
{number | string} x 80 左上角橫坐标，數值機關px，支援百分比（字元串），如\'50%\'(顯示區域橫向中心)
{number | string} y 60 左上角縱坐标，數值機關px，支援百分比（字元串），如\'50%\'(顯示區域縱向中心)
{number | string} x2 80 右下角橫坐标，數值機關px，支援百分比（字元串），如\'50%\'(顯示區域橫向中心)
{number | string} y2 60 右下角縱坐标，數值機關px，支援百分比（字元串），如\'50%\'(顯示區域縱向中心)
{number | string}width null 總寬度，預設為繪圖區總寬度 - x - x2，數值機關px，指定width後将忽略x2，支援百分比（字元串），如\'50%\'(顯示區域一半的寬度)
{number | string}height null 總高度，預設為繪圖區總高度 - y - y2，數值機關px，指定height後将忽略y2，支援百分比（字元串），如\'50%\'(顯示區域一半的高度)
{string} funnelAlign \'center\' 水準方向對齊布局類型，預設居中對齊，可用選項還有：\'left\' | \'right\' | \'center\'
{number} min 指定的最小值
{number} max 100 指定的最大值
{string} minSize \'0%\' 最小值min映射到總寬度的比例，如果需要最小值的圖形并不是尖端三角，可設定minSize實作
{string} maxSize \'100%\' 最大值max映射到總寬度的比例
{string} sort \'descending\' 資料排序， 可以取ascending, descending
{number} gap 資料圖形間距
{boolean}legendHoverLink true 是否啟用圖例（legend）hover時的關聯響應（高亮顯示）
series（事件河流圖）

驅動圖表生成的資料内容數組，數組中每一項為一個系列的選項及資料：

名稱 預設值 描述
{number} xAxisIndex xAxis坐标軸數組的索引，指定該系列資料所用的橫坐标軸
{number} weight 1 該事件類别的權重
{Array} data [] 事件清單，每一個數組項為Object {}，内容如下：
名稱 預設值 描述
{string} name null 事件名稱
{number} weight 1 事件權重
{Array} evolution [] 同一事件的的演化過程，每一個數組項為Object {}，内容如下
名稱 描述
{Date} time 事件發生的時間，Javascript中的Date類型
{number} value 事件的熱度值，如該事件涉及到的新聞報道數量
{Object} detail 事件的詳細資訊
名稱 描述
{string} link 該事件報道的新聞連結
{string} text 該事件的文字描述
{string} img 該事件的圖檔連結
{boolean} legendHoverLink true 是否啟用圖例（legend）hover時的關聯響應（高亮顯示）
series（矩形樹圖）

驅動圖表生成的資料内容數組，數組中每一項為一個系列的選項及資料：

名稱 預設值 描述
{Array} center [\'50%\', \'50%\'] 中心坐标，支援絕對值（px）和百分比
{Array} size [\'80%\', \'80%\'] 大小，支援絕對值（px）和百分比
{Object} itemStyle {} 參見itemStyle，以下是treemap獨有屬性
名稱 預設值 描述
{Object} breadcrumb 
{
    show: true,
    textStyle: {}
}
面包屑
名稱 預設值 描述
{Boolean} show true 是否展示面包屑
{Object} textStyle null 參見textStyle
{number} childBorderWidth 1 二級邊框寬度
{string} childBorderColor \'\' 二級邊框顔色
{Array} data [] 資料清單，每一個數組項為Object {}，内容如下：
名稱 預設值 描述
{string} name null 資料名稱
{number} value null 資料值
{Array} children [] 子節點，每項的屬性和父節點相同
{Object} itemStyle {} 參見 itemStyle ，權重最高
series（樹圖）

驅動圖表生成的資料内容數組，數組中每一項為一個系列的選項及資料：

名稱 預設值 描述
{Object} rootLocation 各異 根節點坐标，支援絕對值（px）、字元和百分比 
{
    x: \'center\' | \'left\' | \'right\' | \'x%\' | {number},
    y: \'center\' | \'top\' | \'bottom\' | \'y%\' | {number}
}
{number}layerPadding 100 層間距
{number}nodePadding 30 節點間距
{string} orient \'vertical\' 樹的方向可選：\'vertical\' | \'horizontal\' | \'radial\'
{boolean | string}roam false 是否開啟滾輪縮放和拖拽漫遊，預設為false（關閉），其他有效輸入為true（開啟），\'scale\'（僅開啟滾輪縮放），\'move\'（僅開啟拖拽漫遊）
{string} symbol \'circle\' 同series（直角系）
{number|Array} symbolSize 20 所有該類目的節點的大小
{Object} itemStyle {} 參見itemStyle
{Array} data [] 隻有一項的數組，為Object {}，内容如下：
名稱 預設值 描述
{string} name null 資料名稱
{number} value null 資料值
{string} symbol \'circle\' 同series（直角系）
{number|Array} symbolSize 20 所有該類目的節點的大小
{Array} children [] 子節點，每項的屬性和父節點相同
{Object} itemStyle {} 參見 itemStyle ，權重最高
series（維恩圖）

驅動圖表生成的資料内容數組，數組中每一項為一個系列的選項及資料：

名稱 預設值 描述
{Object} itemStyle {} 參見itemStyle
{Array} data [] 資料清單，長度為3，前兩項分别表示兩個集合，第三項表示交集。每一個數組項為Object {}，内容如下：
名稱 預設值 描述
{string} name null 資料名稱
{Number} value null 資料值
{Object} itemStyle {} 參見 itemStyle
series（字元雲）

驅動圖表生成的資料内容數組，數組中每一項為一個系列的選項及資料：

名稱 預設值 描述
{Array}center 
[\'50%\', \'50%\']
字元雲中心位置，支援絕對值（px）和百分比
{Array} size 
[\'40%\', \'40%\']
字元雲大小，支援絕對值（px）和百分比
{Array}textRotation 
[0, 90]
文字旋轉角度可選清單，預設會随機從水準（0）和垂直（90）兩個方向中選擇，可以設定多個可選角度，例如 [0, -45, 45, 90]
{Object}autoSize 
{ 
    enable: true,
    minSize: 12
}
字型大小自動計算配置，預設開啟自動計算，程式會根據每個資料的 value 大小以及畫布的大小控制字型大小以達到最佳的顯示效果。minSize 可以強制最小字型。 關閉的時候字型大小取 itemStyle.normal.textStyle.fontSize，建議開啟。
{Object}itemStyle {} 參見itemStyle
series.data

系列中的資料内容數組，折線圖以及柱狀圖時數組長度等于所使用類目軸文本标簽數組axis.data的長度，并且他們間是一一對應的。數組項通常為數值，如:

[12, 34, 56, ..., 10, 23]

當某類目對應資料不存在時（ps：\'不存在\' 不代表值為 0），可用\'-\'表示，無資料在折線圖中表現為折線在該點斷開，在柱狀圖中表現為該點無柱形，如：

[12, \'-\', 56, ..., 10, 23]

當需要對個别内容進行個性化定義時，數組項可用對象，如：

[
    12, 34,
    {
        value : 56,
        tooltip:{},             //自定義特殊tooltip，僅對該item有效，詳見tooltip
        itemStyle:{}            //自定義特殊itemStyle，僅對該item有效，詳見itemStyle
    },
    ..., 10, 23
]

當圖表類型為scatter（散點圖或氣泡圖）時，其數值設定比較特殊，他的橫縱坐标軸都可能為數值型，并且氣泡圖時需要指定氣泡大小，是以scatter型圖表設定為：

[
    {
        value : [10, 25, 5]     //[xValue, yValue, rValue]，數組内依次為橫值，縱值，大小(可選)
    },
    [12, 15, 1]
    ...
]

當圖表類型為K線圖時，其數值設定比較特殊，他的數值内容為長度為4的數組，分别代表[開盤價，收盤價，最低值，最高值]

[
    {
        value : [2190.1, 2148.35, 2126.22, 2190.1] // // 開盤，收盤，最低，最高
    },
    [2242.26, 2210.9, 2205.07, 2250.63],
    ...
]

當圖表類型為餅圖時，需要說明每部分資料的名稱name，可設定選中狀态，是以設定為：

[
    {
        value : 12，
        name : \'apple\'          //每部分資料的名稱
    },
    ...
]

當圖表類型為地圖時，需要說明每部分資料對應的省份，可設定選中狀态，是以設定為：

[
    {
        name: \'北京\',
        value: 1234,
        selected: true
    },
    {
        name: \'天津\',
        value: 321
    },
    ...
]
series.markPoint

系列中的資料标注内容

名稱 預設值 描述
{boolean} clickable true 資料圖形是否可點選，預設開啟，如果沒有click事件響應可以關閉
{string} symbol \'pin\' 标注類型，同series中的symbol
{number | Array | Function}symbolSize 10 标注大小，同series中的symbolSize
{number} symbolRotate null 标注圖形旋轉角度，同series中的symbolRotate
{boolean} large false 是否啟動大規模标注模式
{Object} effect 
{
    show: false,
    type: \'scale\',
    loop: true,
    period: 15,
    scaleSize : 2,
    bounceDistance: 10,
    color : null,
    shadowColor : null,
    shadowBlur : 0
}

标注圖形炫光特效: 

show 是否開啟，預設關閉 

type 特效類型，預設為\'scale\'（放大），可選還有\'bounce\'（跳動） 

loop 循環動畫，預設開啟, 

period 運動周期，無機關，值越大越慢，預設為15 

scaleSize 放大倍數，以markPoint symbolSize為基準，type為scale時有效 

bounceDistance 跳動距離，機關為px，type為bounce時有效 

color 炫光顔色，預設跟随markPoint itemStyle定義顔色, 

shadowColor 光影顔色，預設跟随color 

shadowBlur 光影模糊度，預設為0 

百度遷徙（模拟） »
{Object} itemStyle {...} 标注圖形樣式屬性，同series中的itemStyle
{Object} geoCoord {} 地圖特有，标注圖形定位坐标，同series中的geoCoord
{Array} data [] 标注圖形資料，見下
series.markPoint.data

标注的資料内容數組，最直接的資料項可直接指定标注位置（x，y）以及相關名稱（name）和值（value），在餅圖、雷達圖、力導、和弦圖中基本如下:

data : [
    {name: \'标注1\', value: 100, x: 50, y: 20},
    {name: \'标注2\', value: 200, x: 150, y: 120},
    ...
]

在存在直角坐标系的圖表如折線、柱形、K線、散點圖中，除了通過直接指定位置外，如果希望标注基于直角系的定位，可以通過xAxis，yAxis實作，這兩個值都會根據坐标軸類型以及傳入參數的不同自動換算如下：

data : [
    {name: \'标注1\', value: 100, xAxis: 1, yAxis: 20},      // 當xAxis為類目軸時，數值1會被了解為類目軸的index
    {name: \'标注2\', value: 100, xAxis: \'周三\', yAxis: 20}, // 當xAxis為類目軸時，字元串\'周三\'會被了解為與類目軸的文本進行比對
    {name: \'标注3\', value: 200, xAxis: 10, yAxis: 20},     // 當xAxis或yAxis為數值軸時，不管傳入是什麼，都被了解為數值後做空間位置換算
    ...
]

更為實用的，在折線、柱形、散點圖中，可以直接使用如下幾個開箱即用的特殊點标注

data : [
    {type : \'max\', name: \'自定義名字\'},    // 最大值
    {type : \'min\', name: \'自定義名字\'}     // 最小值
]

标注資料比較特殊也最為常用的地圖上，除了直接位置定位外，如果希望基于地理坐标标注，并且能夠随地圖漫遊縮放，需要為markPoint提供一份geoCoord，如下

data : [
    {name: \'北京\', value: 100},
    {name: \'上海\', value: 200},
    ...
],
geoCoord : {
    "北京":[116.46,39.92],           // 支援數組[經度，次元]
    "上海": {x: 121.48, y: 31.22},   // 支援對象{x:經度,y:緯度}
    ...
}
series.markLine

系列中的資料标線内容

名稱 預設值 描述
{boolean} clickable true 資料圖形是否可點選，預設開啟，如果沒有click事件響應可以關閉
{Array | string} symbol [\'circle\', \'arrow\'] 标線起始和結束的symbol介紹類型，如果都一樣，可以直接傳string，同series中的symbol
{Array | number | Function}symbolSize [2, 4] 标線起始和結束的symbol大小，半寬（半徑）參數，如果都一樣，可以直接傳number或function，同series中的symbolSize
{Array | number}symbolRotate null 标線起始和結束的symbol旋轉控制，同series中的symbolRotate
boolean large false

是否啟用大規模标線模式，預設關閉。 

大規模标線模式下會優化标線繪制，同個系列的的所有标線都會使用同一種樣式，并且忽略标線兩端 symbol 的繪制。
{boolean} smooth false 平滑曲線顯示，smooth為true時lineStyle不支援虛線
{number} smoothness 0.2 平滑曲線弧度，smooth為true時有效，指定平滑曲線弧度
{number} precision 2 小數精度，使用開箱即用的均線markLine時有效
{Object} bundling 
{
    enable: false,
    maxTurningAngle: 45
}

邊捆綁： 

enable 是否使用邊捆綁，預設關閉 

maxTurningAngle 邊捆綁算法參數，可選 [0, 90] 的角度，配置捆綁後的邊最大拐角, 預設為 45 度 

注：捆綁算法使用 Multilevel Agglomerative Edge Bundling for Visualizing Large Graphs
{Object} effect 
{
    show: false,
    loop: true,
    period: 15,
    scaleSize : 2,
    color : null,
    shadowColor : null,
    shadowBlur : null
}

标線圖形炫光特效: 

show 是否開啟，預設關閉 

loop 循環動畫，預設開啟, 

period 運動周期，無機關，值越大越慢，預設為15 

scaleSize 放大倍數，以markLine lineWidth為基準 

color 炫光顔色，預設跟随markLine itemStyle定義顔色, 

shadowColor 光影顔色，預設跟随color 

shadowBlur 光影模糊度，預設根據scaleSize計算 

百度遷徙（模拟） »
{Object} itemStyle {...} 标線圖形樣式屬性，同series中的itemStyle
{Object} geoCoord {} 地圖特有，标線圖形定位坐标，同series中的geoCoord
{Array} data [] 标線圖形資料，見下
series.markLine.data

标線的資料内容數組，最直接的資料項可直接指定标線起始和結束位置（x，y）以及相關名稱（name）和值（value），在餅圖、雷達圖、力導、和弦圖中基本如下:

data : [
    [
        {name: \'标線1起點\', value: 100, x: 50, y: 20},
        {name: \'标線1終點\', x: 150, y: 120}
    ],
    [
        {name: \'标線2起點\', value: 200, x: 30, y: 80},
        {name: \'标線2終點\', x: 270, y: 190}
    ],
    ...
]

在存在直角坐标系的圖表如折線、柱形、K線、散點圖中，除了通過直接指定位置外，如果希望标線基于直角系的定位，可以通過xAxis，yAxis實作，這兩個值都會根據坐标軸類型以及傳入參數的不同自動換算如下：

data : [
    [
        {name: \'标線1起點\', value: 100, xAxis: 1, yAxis: 20},      // 當xAxis為類目軸時，數值1會被了解為類目軸的index，通過xAxis:-1|MAXNUMBER可以讓線到達grid邊緣
        {name: \'标線1終點\', xAxis: \'周三\', yAxis: 20},             // 當xAxis為類目軸時，字元串\'周三\'會被了解為與類目軸的文本進行比對
    ],
    [
        {name: \'标線2起點\', value: 200, xAxis: 10, yAxis: 20},     // 當xAxis或yAxis為數值軸時，不管傳入是什麼，都被了解為數值後做空間位置換算
        {name: \'标線2終點\', xAxis: 270, yAxis: 190}
    ],
    ...
]

更為實用的，在折線、柱形、散點圖中，可以直接使用如下幾個開箱即用的特殊點作為标線類型

data : [
    {type : \'max\', name: \'自定義名字\'},    // 最大值水準線或垂直線
    {type : \'min\', name: \'自定義名字\'},    // 最小值水準線或垂直線
    {type : \'average\', name: \'自定義名字\'},// 平均值水準線或垂直線

    // 最小值指向最大值的連線
    [
        {type : \'min\', name: \'自定義名字\'},
        {type : \'max\', name: \'自定義名字\'}
    ],

    // 散點圖中存在兩個數值型坐标，預設用縱軸值計算特殊點，可以通過valueIndex:0指定為橫軸特殊點
    {type : \'max\', name: \'自定義名字\', valueIndex:0}
]

标線資料比較特殊也最為常用的地圖上，除了直接位置定位外，如果希望基于地理坐标标線，并且能夠随地圖漫遊縮放，需要為markLine提供一份geoCoord，如下

data : [
    [
        {name: \'北京\', value: 100},
        {name:\'上海\'}
    ],
    [
        {name: \'北京\', value: 100},
        {name:\'廣州\'}
    ],
    ...
],
geoCoord : {
    "北京":[116.46,39.92],           // 支援數組[經度，次元]
    "廣州":[113.23,23.16],
    "上海": {x: 121.48, y: 31.22},   // 支援對象{x:經度,y:緯度}
    ...
}

itemStyle

圖形樣式，可設定圖表内圖形的預設樣式和強調樣式（懸浮時樣式）：

itemStyle: {
    normal: {
        ...
    },
    emphasis: {
        ...
    }
}

其中normal和emphasis屬性為對象，其包含：

名稱 預設值 适用類型 描述
{color | Function} color 圖表各異 通用

顔色，主色 ，函數回調參數為

{seriesIndex:x, series:xxx, dataIndex:y, data:yyy}
{Object} lineStyle 圖表各異 折線圖，K線圖，markLine 線條樣式，詳見lineStyle
{Object}areaStyle 圖表各異 堆積折線圖，地圖 區域樣式，詳見areaStyle
{Object}chordStyle 圖表各異 和弦圖 弦樣式，詳見chordStyle
{Object}nodeStyle 圖表各異 力導向圖 節點樣式，詳見nodeStyle
{Object} linkStyle 圖表各異 力導向圖 邊樣式，詳見linkStyle
{string}borderColor 各異 折線圖（symbol），散點圖（symbole），餅圖，地圖，markPoint 邊框顔色
{number}borderWidth 各異 折線圖（symbol），散點圖（symbole），餅圖，地圖，markPoint 邊框線寬，機關px
{string}barBorderColor \'#fff\' 柱形圖 邊框顔色
{number | Array}barBorderRadius 柱形圖 柱形邊框圓角，機關px，預設為0，支援傳入數組分别指定柱形4個圓角半徑，如:[5, 5, 0, 0]（順時針左上，右上，右下，左下）
{number}barBorderWidth 柱形圖 柱形邊框線寬，機關px，預設為0
{Object} label 
{
    show: true,
    position:\'outer\'
}
折線圖，柱形圖，K線圖，散點圖，餅圖 ，地圖，力導向，漏鬥圖，markPoint，markLine

标簽，餅圖預設顯示在外部，離餅圖距離由labelLine.length決定， 

漏鬥圖預設顯示在右側，離圖形距離由labelLine.length決定 

地圖示簽不可指定位置， 

折線圖，柱形圖，K線圖，散點圖可指定position見下
{Object}labelLine {show: true} 餅圖，漏鬥圖 标簽視覺引導線，預設顯示

其中标簽label屬性為對象，其包含：

名稱 預設值 描述
{boolean} show true 标簽顯示政策，可選為：true（顯示） | false（隐藏）
{string} position \'outer\' | null

标簽顯示位置，地圖示簽不可指定位置 

餅圖可選為：\'outer\'（外部） | \'inner\'（内部）， 

漏鬥圖可選為：\'inner\'（内部）| \'left\' | \'right\'（預設）， 

折線圖，柱形圖，K線圖，散點圖預設根據布局自适應為\'top\'或者\'right\'，可選的還有：\'inside\' | \'left\' | \'bottom\' 

柱形圖可選的還有，\'insideLeft\' | \'insideRight\' | \'insideTop\' | \'insideBottom\'
{boolean} rotate false 和弦圖有效，文本标簽自動旋轉
{number} distance 10

和弦圖: 文本标簽旋轉後于弦的間隔 

餅圖: 當label position為inner時有效，為label位置到圓心的距離與圓半徑(環狀圖為内外半徑和)的比例系數，預設為0.5。
{string | Function}formatter null 标簽文本格式器，通用，同Tooltip.formatter，支援模闆、方法回調，不支援異步回調
{Object} textStyle null 标簽的文本樣式（詳見textStyle）
{Number} x 各異 僅矩形樹圖使用，标簽橫坐标
{Number} y 各異 僅矩形樹圖使用，标簽縱坐标

其中标簽視覺引導線labelLine屬性為對象，其包含：

名稱 預設值 描述
{boolean} show true 餅圖示簽視覺引導線顯示政策，可選為：true（顯示） | false（隐藏）
{number} length 40 線長 ，從圖形外邊緣起計算，可為負值。漏鬥圖支援\'auto\'
{Object} lineStyle 各異 線條樣式，詳見lineStyle

通過有效設定itemStyle的normal和emphasis選項可實作個性化的顯示政策，比如希望餅圖文字标簽預設隐藏，并在滑鼠懸浮時通過一條紅色的視覺引導線顯示在餅圖外部區域，可以如下設定：

itemStyle: {
    normal: {
        label: {
            show: false
        }
        labelLine: {
            show: false
        }
    } ,
    emphasis: {
        label: {
            show: true,
            position: \'outer\'
        }
        labelLine: {
            show: true,
            lineStyle: {
                color: \'red\'
            }
        }
    }
}

高度個性化：

折線圖 try this »， 柱狀圖 try this »， K線圖 try this »， 散點圖try this »， 餅圖 try this »， 和弦圖 try this »， 力導向布局 try this »， 地圖 try this »， 儀表盤 try this »， 漏鬥圖 try this »

lineStyle

線條（線段）樣式

名稱 預設值 描述
{color} color 各異 顔色
{string} type \'solid\' 線條樣式，可選為：\'solid\' | \'dotted\' | \'dashed\'， 樹圖還可以選：\'curve\' | \'broken\'
{number} width 各異 線寬
{color=} shadowColor rgba(0,0,0,0) 折線主線(IE8+)有效，陰影色彩，支援rgba
{number=} shadowBlur 5 折線主線(IE8+)有效，陰影模糊度，大于0有效
{number=} shadowOffsetX 3 折線主線(IE8+)有效，陰影橫向偏移，正值往右，負值往左
{number=} shadowOffsetY 3 折線主線(IE8+)有效，陰影縱向偏移，正值往下，負值往上

areaStyle

區域填充樣式

名稱 預設值 描述
{color} color 各異 顔色
{string} type \'default\' 填充樣式，目前僅支援\'default\'(實填充)

chordStyle

和弦圖中的弦樣式

名稱 預設值 描述
{number} width 1 貝塞爾曲線的線寬, ribbonType是false時有效
{string} color 1 貝塞爾曲線的顔色, ribbonType是false時有效
{string} borderWidth 1 ribbon的描邊線寬, ribbonType是true時有效
{string} borderColor 1 ribbon的描邊顔色, ribbonType是true時有效

nodeStyle

力導向圖中的節點樣式

名稱 預設值 描述
{color} color \'#f08c2e\' 填充顔色
{color} borderColor \'#5182ab\' 描邊顔色
{number} borderWidth 1 描邊線寬

linkStyle

力導向圖中的邊樣式

名稱 預設值 描述
{string} type \'line\' 線條類型，可選為：\'curve\'（曲線） | \'line\'（直線）
{color} color \'#5182ab\' 線條顔色
{number} width 1 線寬

textStyle

文字樣式

名稱 預設值 描述
{color} color 各異 顔色
{string} decoration \'none\' 修飾，僅對tooltip.textStyle生效
{string} align 各異 水準對齊方式，可選為：\'left\' | \'right\' | \'center\'
{string} baseline 各異 垂直對齊方式，可選為：\'top\' | \'bottom\' | \'middle\'
{string} fontFamily \'Arial, Verdana, sans-serif\' 字型系列
{number} fontSize 12 字号 ，機關px
{string} fontStyle \'normal\' 樣式，可選為：\'normal\' | \'italic\' | \'oblique\'
{string | number} fontWeight \'normal\' 粗細，可選為：\'normal\' | \'bold\' | \'bolder\' | \'lighter\' | 100 | 200 |... | 900

loadingOption

過渡顯示，loading（讀取中）的選項。try this »

名稱 預設值 描述
{string} text \'資料讀取中...\' 顯示話術 ，\'\n\'指定換行
{string | number} x \'center\' 水準安放位置，預設為全圖居中，可選為：\'center\' | \'left\' | \'right\' | {number}（x坐标，機關px）
{string | number} y \'center\' 垂直安放位置，預設為全圖居中，可選為：\'center\' | \'bottom\' | \'top\' | {number}（y坐标，機關px）
{Object} textStyle null 顯示話術的文本樣式（詳見textStyle）
{string | Function} effect \'spin\' loading效果，可選為：\'spin\' | \'bar\' | \'ring\' | \'whirling\' | \'dynamicLine\' | \'bubble\'，支援外部裝載
{Object} effectOption null loading效果選項，詳見zrender
{number} progress null 指定目前進度[0~1]，個别效果有效。

noDataLoadingOption

無資料提示，loading動畫選項。

名稱 預設值 描述
{string} text \'暫無資料\' 顯示話術 ，\'\n\'指定換行
{string | number} x \'center\' 水準安放位置，預設為全圖居中，可選為：\'center\' | \'left\' | \'right\' | {number}（x坐标，機關px）
{string | number} y \'center\' 垂直安放位置，預設為全圖居中，可選為：\'center\' | \'bottom\' | \'top\' | {number}（y坐标，機關px）
{Object} textStyle null 顯示話術的文本樣式（詳見textStyle）
{string | Function} effect \'bubble\' loading效果，可選為：\'spin\' | \'bar\' | \'ring\' | \'whirling\' | \'dynamicLine\' | \'bubble\'，支援外部裝載
{Object} effectOption null loading效果選項，詳見zrender
{number} progress null 指定目前進度[0~1]，個别效果有效。

backgroundColor

{color} null，全圖預設背景，預設為null，同\'rgba(0,0,0,0)\'

color

{Array} [ 

    \'#ff7f50\', \'#87cefa\', \'#da70d6\', \'#32cd32\', \'#6495ed\', 

    \'#ff69b4\', \'#ba55d3\', \'#cd5c5c\', \'#ffa500\', \'#40e0d0\', 

    \'#1e90ff\', \'#ff6347\', \'#7b68ee\', \'#00fa9a\', \'#ffd700\', 

    \'#6b8e23\', \'#ff00ff\', \'#3cb371\', \'#b8860b\', \'#30e0e0\' 

]，預設顔色序列，循環使用

symbolList

{Array} [ 

    \'circle\', \'rectangle\', \'triangle\', \'diamond\', 

    \'emptyCircle\', \'emptyRectangle\', \'emptyTriangle\', \'emptyDiamond\' 

]，預設标志圖形類型清單，循環使用

renderAsImage

{boolean | string} false，非IE8-支援渲染為圖檔，可設為true或指定圖檔格式（png | jpeg），渲染為圖檔後執行個體依然可用（如setOption，resize等），但各種互動失效

calculable

{boolean} false，是否啟用拖拽重計算特性，預設關閉

calculableColor

{color} \'rgba(255,165,0,0.6)\'，拖拽重計算提示邊框顔色

calculableHolderColor

{color} \'#ccc\'，可計算占位提示顔色

nameConnector

{string} \' & \'，資料合并名字間連接配接符

valueConnector

{string} \' : \'，資料合并名字與數值間連接配接符

animation

{boolean} true，是否啟用圖表初始化動畫，預設開啟，建議IE8-關閉

addDataAnimation

{boolean} true，是否啟用動态資料接口動畫效果，預設開啟，建議IE8-關閉

animationThreshold

{number} 2500，動畫元素閥值，産生的圖形原素超過2500不出動畫，建議IE8-關閉

animationDuration

{number} 2000，進入動畫時長，機關ms

animationDurationUpdate

{number} 500，更新動畫時長，機關ms

animationEasing

{string} \'BounceOut\'，主元素的緩動效果，詳見zrender.animation.easing，可選有：

\'Linear\',

\'QuadraticIn\', \'QuadraticOut\', \'QuadraticInOut\',

\'CubicIn\', \'CubicOut\', \'CubicInOut\',

\'QuarticIn\', \'QuarticOut\', \'QuarticInOut\',

\'QuinticIn\', \'QuinticOut\', \'QuinticInOut\',

\'SinusoidalIn\', \'SinusoidalOut\', \'SinusoidalInOut\',

\'ExponentialIn\', \'ExponentialOut\', \'ExponentialInOut\',

\'CircularIn\', \'CircularOut\', \'CircularInOut\',

\'ElasticIn\', \'ElasticOut\', \'ElasticInOut\',

\'BackIn\', \'BackOut\', \'BackInOut\',

\'BounceIn\', \'BounceOut\', \'BounceInOut\'

圖資料表示

和弦圖和力導向圖等圖的資料表示需要一個圖的資料結構，Echarts中可以使用nodes或者data來表示節點資料，用links或者鄰接矩陣matrix表示邊, 對于每個節點可以通過一個額外的category配置節點的分類。

categories
名稱 預設值 描述
{string} name 類目名稱
{string} symbol \'circle\' 同series（直角系）
{number|Array} symbolSize 所有該類目的節點的大小
itemStyle 詳見 itemStyle，注意力導向圖單個 category 的 itemStyle 中沒有 nodeStyle 的配置項，而是直接使用 normal(emphasis) 下的 color, borderWidth 和 borderColor
nodes(data)
名稱 預設值 描述
{string} name 節點名稱
{string} label 節點标簽名稱，預設顯示name作為标簽
{number} value 節點值，如果不設定會取所有邊的權重(weight)和
{boolean} ignore false 是否忽略該節點
{string} symbol \'circle\' 同series（直角系）
{number|Array} symbolSize 強制指定節點的大小
{number} category 節點的 category index
itemStyle 詳見 itemStyle，注意力導向圖單個節點的 itemStyle 中沒有 nodeStyle 的配置項，而是直接使用 normal(emphasis) 下的 color, borderWidth 和 borderColor
links
名稱 預設值 描述
{string|number} source 源節點的index或者源節點的name
{string|number} target 目标節點的index或者目标節點的name
{number} weight 1 邊的權重
itemStyle see linkStyle
matrix

關系資料，用二維數組表示，項 [i][j] 的數值表示 i 到 j 的關系資料

多級控制設計

簡單的說，你可以通過這三級滿足不同level的定制和個性化需求：

  • 通過 option.* 設定全局統一配置；
  • 通過 option.series.* 設定特定系列特殊配置，其優先級高于 option 内的同名配置；
  • 通過 option.series.data.* 設定特定資料項的特殊配置，最高優先級；

附錄：地圖擴充

支援百度地圖作為地圖源疊加echarts可視化功能， 文檔， 例子1， 例子2， by 楊骥

支援标準GeoJson動态擴充地圖類型，try HK 》 USA 》

// step1: 找到目标地區的geoJson資料檔案，如HK_geo.json

// step2: 在require(\'echarts/util/mapData/params\').params中命名你的地圖類型，如HK

// step3: 命名指派為對象{}, 實作接口方法getGeoJson，通過callback傳回目标地區geoJson資料檔案
require(\'echarts/util/mapData/params\').params.HK = {
    getGeoJson: function (callback) {
        $.getJSON(\'geoJson/HK_geo.json\',callback);
    }
}

// step3*: 對于資料地圖類型，一般不需要特殊的投射算法，ECharts統一使用了簡化的投射算法，因而對于個别地區可能需要人為調整，可以通過specialArea指定個别地區安的經緯度坐标和區間大小，如
require(\'echarts/util/mapData/params\').params.USA = {
    getGeoJson: function (callback) {
        $.getJSON(\'geoJson/USA_geo.json\', callback);
    },
    specialArea : {
        Alaska : {              // 把阿拉斯加移到美國主大陸左下方
            left : -131,        // 安放位置起始點：西經113度
            top : 31,           // 安放位置起始點：北緯31度
            width : 15,         // 區間大小寬高不大于15度
            height : 15
        },
        Hawaii : {
            left : -112,        // 夏威夷
            top : 29,
            width : 5,
            height : 5
        },
        \'Puerto Rico\' : {       // 波多黎各
            left : -76,
            top : 26,
            width : 2,
            height : 2
        }
    }
}

// step4: 已經有這個地圖類型了，可以在option中使用了
option.series = [
        {
            type: \'map\',
            mapType: \'HK\', // 自定義擴充圖表類型
            ...
         }
 ]

附錄：元件和圖表的執行個體接口

為了實作更進階的功能和需求定制，ECharts團隊做了個艱難的決定，開放元件和圖表執行個體接口。這些元件和圖表執行個體都被挂載到init所得到的執行個體上（如myChart），分别存放在chart和component下，如可以通過myChart.chart.map得到目前地圖執行個體并可以讀取并調用裡面的各種屬性和方法。

【重要】請注意，ECharts接口基于資料驅動設計，這些執行個體并不為開放準備，雖然你可以無限制的通路，甚至動态的覆寫重寫，但這可能會導緻圖表無法正常工作或随着版本更新無法得到相容，是以我們僅列出如下部分方法和屬性作為使用上的參考（或者說限制），我們會盡最大的努力去保證這些方法或屬性的穩定和向下相容，并且保證在出現無法相容的更新時在changelog上通告。如果你使用了并不出現在下述文檔中的方法或屬性将得不到這份保證，請諒解。

元件執行個體接口

ECharts包含元件有：timeline、title、legend、dataRange、toolbox、tooltip、dataZoom、grid、xAxis、yAxis、polar

timeline

時間軸，每個圖表最多僅有一個時間軸。可使用的屬性和方法有：

類型 名稱 描述
{string} type 元件類型，等于config.COMPONENT_TYPE_TIMELINE
{Function} play

播放 

參數：{number=} index， {boolean=} autoPlay，（見下） 

傳回：{number} currendIndex，目前播放的options數組位置索引 

index ：指定需要播放的options數組位置索引，不指定則從目前index開始播放 

autoPlay ：是否自動播放，不指定則自動播放
{Function} stop

暫停 

參數：無 

傳回：{number} currendIndex，目前播放的options數組位置索引
{Function} next

下一個 

參數：無 

傳回：{number} currendIndex，目前播放的options數組位置索引
{Function} last

上一個 

參數：無 

傳回：{number} currendIndex，目前播放的options數組位置索引

tooltip

提示框，滑鼠懸浮互動時的資訊提示，每個圖表最多僅有一個提示框。可使用的屬性和方法有：

類型 名稱 描述
{string} type 元件類型，等于config.COMPONENT_TYPE_LEGEND
{Function} showTip

顯示提示框。

參數：{Object} param （見下）

傳回：null 

參數格式：{ seriesIndex: 0, seriesName:\'\', dataIndex:0 } // line、bar、scatter、k、radar，其中dataIndex必須，seriesIndex、seriesName指定一個即可 

參數格式：{ seriesIndex: 0, seriesName:\'\', name:\'\' } // map、pie、chord，其中name必須，seriesIndex、seriesName指定一個即可
{Function} hideTip

隐藏提示框。

參數：無

傳回：null

legend

圖例，每個圖表最多僅有一個圖例。可使用的屬性和方法有：

類型 名稱 描述
{string} type 元件類型，等于config.COMPONENT_TYPE_LEGEND
{Function} isSelected

圖例開關相關，判斷傳入的名稱目前是否處于開啟狀态。

參數：{string} name （名稱）

傳回：{boolean} true為開啟，false為關閉
{Function} getSelectedMap

圖例開關相關，擷取目前的全部圖例開關狀态圖。

參數：無

傳回：{Object} {name:value}的鍵值表，name為名稱，value為狀态值，true為開啟，false為關閉
{Function} getColor

圖例顔色相關，擷取傳入的名稱所對應的顔色，如果傳入名稱未出現在已有的圖例資料項中，将生成一個新的顔色與傳入名稱比對并傳回該顔色

參數：{string} name （名稱）

傳回：{color} 比對顔色
{Function} setColor

圖例顔色相關，設定某一系列（資料）對應的顔色，改變顔色圖表并不會自動重新整理，如果需要更新調用執行個體的refresh方法 

參數：{string} name （名稱），{color} color 比對顔色

傳回：null
{Function} setSelected

設定某一系列（資料）的選擇狀态 

參數：{string} name （名稱），{boolean} status 狀态

傳回：null

dataRange

值域選擇，每個圖表最多僅有一個值域控件。可使用的屬性和方法有：

類型 名稱 描述
{string} type 元件類型，等于config.COMPONENT_TYPE_DATARANGE
{Function} getColor

值域控件顔色相關，擷取傳入的值所對應的顔色

參數：{number} value （值）

傳回：{color} 比對顔色

dataZoom

資料區域縮放。與toolbox.feature.dataZoom同步，僅對直角坐标系圖表有效。可使用的屬性和方法有：

類型 名稱 描述
{string} type 元件類型，等于config.COMPONENT_TYPE_DATAZOOM
{Function} absoluteZoom

資料區域縮放控制

參數：{Object} {start : value, end : value, start2 : value, end2 : value} （縮放參數）

傳回：無，作用：根據傳入的value改變資料顯示區域，value有效值為[0,100]，一般僅指定主區域控制start、end即可，在散點圖中可以同時做兩個次元的區域縮放，可通過額外指定start2、end2實作。

grid

直角坐标系内繪圖網格。可使用的屬性和方法有：

類型 名稱 描述
{string} type 元件類型，等于config.COMPONENT_TYPE_GRID
{Function} getX

網格左上角在圖形顯示中的橫坐标，機關px。

參數：無 

傳回：{number} 坐标值
{Function} getXend

網格右下角在圖形顯示中的橫坐标，機關px。

參數：無 

傳回：{number} 坐标值
{Function} getY

網格左上角在圖形顯示中的縱坐标，機關px。

參數：無 

傳回：{number} 坐标值
{Function} getYend

網格右上角在圖形顯示中的縱坐标，機關px。

參數：無 

傳回：{number} 坐标值
{Function} getWidth

網格在圖形顯示中的實際寬度，機關px。

參數：無 

傳回：{number} 寬度值
{Function} getHeight

網格在圖形顯示中的實際高度，機關px。

參數：無 

傳回：{number} 高度值
{Function} getArea

網格實際區域資料，等同一次傳回getX，getY，getWidth，getHeight。

參數：無 

傳回：{Object} {x : value, y : value, width : value, height : value}

xAxis/yAxis

橫縱坐标軸。可使用的屬性和方法有：

類型 名稱 描述
{Function} getAxis

擷取傳入index的坐标軸執行個體，存在最多上下左右4條坐标軸，坐标軸可以為類目軸或數值軸，擷取坐标軸執行個體和可用的坐标軸方法見下節

參數：{number} 0/1 （坐标軸index）

傳回：{categoryAxis | valueAxis} 指定index的坐标軸執行個體，可以是類目軸或數值軸

categoryAxis

類目軸。可使用的屬性和方法有：

類型 名稱 描述
{string} type 元件類型，等于config.COMPONENT_TYPE_AXIS_CATEGORY
{Function} getCoord

根據類目名字值換算繪圖位置，機關px

參數：{string} name （名字）

傳回：{number} 坐标值，重名類目值傳回第一個比對的
{Function} getCoordByIndex

根據類目軸資料索引換算繪圖位置，機關px

參數：{number} index （索引）

傳回：{number} 坐标值，index小于0傳回坐标起點，大于類目長度傳回重點
{Function} getNameByIndex

根據類目軸資料索引換算類目軸名稱

參數：{number} index （索引）

傳回：{string} 名字
{Function} getIndexByName

根據類目軸名稱換算類目軸資料索引

參數：{string} name （名字）

傳回：{number} 索引，重名類目值傳回第一個比對的

valueAxis

數值軸。可使用的屬性和方法有：

類型 名稱 描述
{string} type 元件類型，等于config.COMPONENT_TYPE_AXIS_VALUE
{Function} getCoord

根據數值換算繪圖位置，機關px

參數：{number} value （數值）

傳回：{number} 坐标值
{Function} getExtremum

傳回目前坐标軸的極值

參數：null，

傳回：{Object} {min:{number}, max:{number}}

polar

極坐标。可使用的屬性和方法有：

類型 名稱 描述
{string} type 元件類型，等于config.COMPONENT_TYPE_POLAR
{Function} getVector

擷取每個名額上某個value對應的坐标，機關px

參數：{number} polarIndex （極坐标索引）, {number} indicatorIndex （名額索引）, {number} value （數值）

傳回：{Array} [x, y] 坐标值

圖表執行個體接口

ECharts支援的圖表有：line、bar、scatter、k、pie、radar、chord、force、map

map

地圖。可使用的屬性和方法有：

類型 名稱 描述
{string} type 圖表類型，等于config.CHART_TYPE_MAP
{Function} getPosByGeo

經緯度轉平面坐标，機關px

參數：{string} mapType （地圖類型）, {Array} [ew,ns] （經緯度）

傳回：{Array} [x, y] 坐标值
{Function} getGeoByPos

平面坐标轉經緯度，機關px

參數：{string} mapType （地圖類型）, {Array} [x, y] （坐标值 ）

傳回：{Array} [ew,ns] 經緯度

附錄：一個直覺的事例

檢視更多執行個體 example，或者使用這個demo 或 ECharts單一檔案引入作為你的模闆

// 圖表執行個體化------------------
// srcipt标簽式引入
var myChart = echarts.init(document.getElementById(\'main\'));

// 過渡---------------------
myChart.showLoading({
    text: \'正在努力的讀取資料中...\',    //loading話術
});

// ajax getting data...............

// ajax callback
myChart.hideLoading();

// 圖表使用-------------------
var option = {
    legend: {                                   // 圖例配置
        padding: 5,                             // 圖例内邊距，機關px，預設上下左右内邊距為5
        itemGap: 10,                            // Legend各個item之間的間隔，橫向布局時為水準間隔，縱向布局時為縱向間隔
        data: [\'ios\', \'android\']
    },
    tooltip: {                                  // 氣泡提示配置
        trigger: \'item\',                        // 觸發類型，預設資料觸發，可選為：\'axis\'
    },
    xAxis: [                                    // 直角坐标系中橫軸數組
        {
            type: \'category\',                   // 坐标軸類型，橫軸預設為類目軸，數值軸則參考yAxis說明
            data: [\'Jan\', \'Feb\', \'Mar\', \'Apr\', \'May\', \'Jun\', \'Jul\', \'Aug\', \'Sep\', \'Oct\', \'Nov\', \'Dec\']
        }
    ],
    yAxis: [                                    // 直角坐标系中縱軸數組
        {
            type: \'value\',                      // 坐标軸類型，縱軸預設為數值軸，類目軸則參考xAxis說明
            boundaryGap: [0.1, 0.1],            // 坐标軸兩端空白政策，數組内數值代表百分比
            splitNumber: 4                      // 數值軸用，分割段數，預設為5
        }
    ],
    series: [
        {
            name: \'ios\',                        // 系列名稱
            type: \'line\',                       // 圖表類型，折線圖line、散點圖scatter、柱狀圖bar、餅圖pie、雷達圖radar
            data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
        },
        {
            name: \'android\',                    // 系列名稱
            type: \'line\',                       // 圖表類型，折線圖line、散點圖scatter、柱狀圖bar、餅圖pie、雷達圖radar
            data: [45, 123, 145, 526, 233, 343, 44, 829, 33, 123, 45, 13]
        }
    ]
};
myChart.setOption(option);

...

// 增加些資料------------------
option.legend.data.push(\'win\');
option.series.push({
        name: \'win\',                            // 系列名稱
        type: \'line\',                           // 圖表類型，折線圖line、散點圖scatter、柱狀圖bar、餅圖pie、雷達圖radar
        data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
});
myChart.setOption(option);

...

// 圖表清空-------------------
myChart.clear();

// 圖表釋放-------------------
myChart.dispose();
上一篇: matplotlib制作圖表資料
下一篇: Excel制作圖表的方法