非常詳細的Echarts介紹

原創 yf_csdn_bilibili 2018-08-26 22:11

非常詳細的介紹（轉）

簡介

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

支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達 圖）、和絃圖、力導向佈局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交 互組件，支持多圖表、組件的聯動和混搭展現。

Echarts Architecture

名詞解析

基本名詞

名詞 描述
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擴展類地圖應用，如室內地圖、運動場、物件構造等。
heatmap 熱力圖。用於展現密度分佈信息，支持與地圖、百度地圖插件聯合使用。
gauge 儀表盤。用於展現關鍵指標數據，常見於BI類系統。
funnel 漏斗圖。用於展現數據經過篩選、過濾等流程處理後發生的數據變化，常見於BI類系統。
evnetRiver 事件河流圖。常用於展示具有時間屬性的多個事件，以及事件隨時間的演化。
treemap 矩形式樹狀結構圖，簡稱：矩形樹圖。用於展示樹形數據結構，優勢是能最大限度展示節點的尺寸特徵。
venn 韋恩圖。用於展示集合以及它們的交集。
tree 樹圖。用於展示樹形數據結構各節點的層級關係
wordCloud 詞雲。詞雲是關鍵詞的視覺化描述，用於彙總用戶生成的標籤或一個網站的文字內容

圖表類型

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

標準圖表類型

單圖表類型：line

折線圖      
折線圖      

單圖表類型：bar

柱形圖      
柱形圖      

單圖表類型：scatter

散點圖  
散點圖    

單圖表類型：k

K線圖
K線圖  

單圖表類型：pie

餅圖    
餅圖    

單圖表類型：radar

雷達圖  
雷達圖  

單圖表類型：chord

和絃圖
和絃圖  

單圖表類型：force

力導向佈局圖。
力導向佈局圖    

單圖表類型：map

     
中國地圖    
     
子區域模式    

單圖表類型：heatmap

熱力圖
熱力圖    

單圖表類型：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 0 一級層疊控制。每一個不同的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 0 時間軸右下角縱座標，數值單位px，支持百分比（字符串），如'50%'(顯示區域縱向中心)
{number}width 自適應 時間軸寬度，默認爲總寬度 - x - x2，數值單位px，指定width後將忽略x2。見下圖。 
支持百分比（字符串），如'50%'(顯示區域一半的寬度)
{number}height 50 時間軸高度，數值單位px，支持百分比（字符串），如'50%'(顯示區域一半的高度)
{color}backgroundColor 'rgba(0,0,0,0)' 背景顏色，默認透明。
{number}borderWidth 0 邊框線寬
{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 0 當前索引位置，對應options數組，用於指定顯示特定系列
{Array}data [] 時間軸列表，同時也是軸label內容

時間軸

title

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

名稱 默認值 描述
{boolean}show true 顯示策略，可選爲：true（顯示） | false（隱藏）
{number}zlevel 0 一級層疊控制。每一個不同的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 0 標題邊框線寬，單位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 0 一級層疊控制。每一個不同的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 0 工具箱邊框線寬，單位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 0 提示邊框線寬，單位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觸發
item觸發 axis觸發

legend

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

名稱 默認值 描述
{boolean} show true 顯示策略，可選爲：true（顯示） | false（隱藏）
{number} zlevel 0 一級層疊控制。每一個不同的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 0 圖例邊框線寬，單位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 0 一級層疊控制。每一個不同的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 0 值域控件邊框線寬，單位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 小數精度，默認爲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 0 一級層疊控制。每一個不同的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 數據縮放，選擇起始比例，默認爲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 0 一級層疊控制。每一個不同的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 0 縮放漫遊組件邊框線寬，單位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 0 一級層疊控制。每一個不同的zlevel將產生一個獨立的canvas，相同zlevel的組件或圖標將在同一個canvas上渲染。zlevel越高越 靠頂層，canvas對象增多會消耗更多的內存和性能，並不建議設置過多的zlevel，大部分情況可以通過二級層疊控制z實現層疊控制。
{number} z 0 二級層疊控制，同一個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 0 通用 一級層疊控制。每一個不同的zlevel將產生一個獨立的canvas，相同zlevel的組件或圖標將在同一個canvas上渲染。zlevel越高越 靠頂層，canvas對象增多會消耗更多的內存和性能，並不建議設置過多的zlevel，大部分情況可以通過二級層疊控制z實現層疊控制。
{number} z 0 通用 二級層疊控制，同一個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

 

axis屬性說明

 

axisDetail

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 通用 標籤旋轉角度，默認爲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 0 一級層疊控制。每一個不同的zlevel將產生一個獨立的canvas，相同zlevel的組件或圖標將在同一個canvas上渲染。zlevel越高越 靠頂層，canvas對象增多會消耗更多的內存和性能，並不建議設置過多的zlevel，大部分情況可以通過二級層疊控制z實現層疊控制。
{number}z 0 二級層疊控制，同一個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 0 通用 一級層疊控制。每一個不同的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 0 折線圖，柱狀圖，散點圖 ，K線圖 xAxis座標軸數組的索引，指定該系列數據所用的橫座標軸
{number}yAxisIndex 0 折線圖，柱狀圖，散點圖，K線圖 yAxis座標軸數組的索引，指定該系列數據所用的縱座標軸
{number | string} barGap '30%' 柱狀圖 柱間距離，默認爲柱形寬度的30%，可設固定值
{number | string} barCategoryGap '20%' 柱狀圖 類目間柱形距離，默認爲類目間距的20%，可設固定值
{number}barMinHeight 0 柱狀圖 柱條最小高度，可用於防止某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 0 最小角度，可用於防止某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 0 極座標索引
{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 0 地圖數值計算結果小數精度，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上
{Object} heatmap null 疊加在地圖上的熱力圖，數據位置爲經緯度。配置同 series（熱力圖）

series（熱力圖）

驅動圖表生成的數據內容數組，數組中每一項爲一個系列的選項及數據：

名稱 默認值 描述
{number}blurSize 30 一個熱力圖數據點的模糊範圍，單位是像素
{Array}gradientColors ['blue', 'cyan', 'lime', 'yellow', 'red'] 可以是一個包含 offset 和 color 的 Object 的數組，如 [{ offset: 0.2, color: 'blue' }, { offset 0.8, color: 'cyan' }]；也可以是一個顏色字符串的數組如 ['blue', 'cyan', 'lime', 'yellow', 'red']，顏色將均勻分佈。
{number}minAlpha 0.05 當均一化後的數據點的值小於這個值時，將被設爲該值。該值保證了數據值很小的數據也能在地圖上展示。
{number}valueScale 1 所有數據點的值將乘以這個值再進行繪製。
{number}opacity 1 整個熱力圖的不透明度。

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 0 指定的最小值
{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 0 指定的最小值
{number} max 100 指定的最大值
{string} minSize '0%' 最小值min映射到總寬度的比例，如果需要最小值的圖形並不是尖端三角，可設置minSize實現
{string} maxSize '100%' 最大值max映射到總寬度的比例
{string} sort 'descending' 數據排序， 可以取ascending, descending
{number} gap 0 數據圖形間距
{boolean}legendHoverLink true 是否啓用圖例（legend）hover時的聯動響應（高亮顯示）

series（事件河流圖）

驅動圖表生成的數據內容數組，數組中每一項爲一個系列的選項及數據：

名稱 默認值 描述
{number} xAxisIndex 0 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）和百分比
{string} root '' 當前顯示的根節點的名字
{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'
{string} direction '' 方向反轉，可選：'inverse'
{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
{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
{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 0 柱形圖 柱形邊框圓角，單位px，默認爲0，支持傳入數組分別指定柱形4個圓角半徑，如:[5, 5, 0, 0]（順時針左上，右上，右下，左下）
{number}barBorderWidth 0 柱形圖 柱形邊框線寬，單位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 0 節點的 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();
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章