此篇博文分享自己對於入門學習echart的思路及對常見組件的用法記錄，如serise.data和坐標軸對應關系，多個坐標軸，多個grid的對齊，tooltip的超出處理，坐標軸/tooltipformatter的使用等等。
一.思路:
- 記錄常用組件的重要屬性，知道常用組件實現了什么。
- 基於常用組件屬性的認識，可以分析常見圖表組成的組件。
- 屬性記錄結合實際開發使用進行注釋及實例說明。
- echarts能實現的交互樣式非常豐富，一般提出需求的交互樣式多能實現，重要的是懂查看官方文檔。遇見實現不了的樣式，可查找官方實例和社區實例，或者直接百度迅速實現。
二.使用步驟:
1.為ECharts准備一個具備大小（寬高）的Dom 並且設置必須為id去獲取dom（vue中可使用refs去獲取dom），不能設置為class去獲取dom
<div id="main" style="width: 600px（100%）;height:400px;"></div>
2.基於准備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
3.指定圖表的配置項和數據
var option = {}
4.使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
三.配置項:
1.grid:
//grid 組件：直角坐標系內繪圖網格，一般情況下單個 grid 組件最多只能放上下（左右）兩個 x （y）軸，多於兩個 x(y) 軸需要通過配置 offset 屬性防止同個位置多個 x 軸的重疊。 grid:{ //grid.left/top/right/bottom 組件離容器的距離。 left:'10%',//默認距離 top:'60',//默認距離 width:'auto',//grid 組件的寬度。默認自適應 height:'auto',//grid 組件的高度。默認自適應 //grid 區域是否包含坐標軸的刻度標簽。這常用於『防止標簽溢出』的場景。 //當true時，grid.left/right/top/bottom grid.width/height 決定的是包括了坐標軸標簽在內的所有內容所形成的矩形的位置。
//為false是用於多個grid的對齊 containLabel:true, },
2.xAxis:
//直角坐標系 grid 中的 x 軸 xAxis:[{ //坐標軸類型，'value' 數值軸，適用於連續數據。 //'category' 類目軸，適用於離散的類目數據，為該類型時必須通過 data 設置類目數據。 //'time' 時間軸，適用於連續的時序數據 //'log' 對數軸。適用於對數數據。 type:'category' //默認值 //坐標軸兩邊留白策略,類目軸和非類目軸的設置和表現不一樣。 //類目軸中 boundaryGap 可以配置為 true 和 false。默認為 true，這時候刻度只是作為分隔線，標簽和數據點都會在兩個刻度之間的帶(band)中間。 //非類目軸，包括時間，數值，對數軸，boundaryGap是一個兩個值的數組，分別表示數據最小值和最大值的延伸范圍,在設置 min 和 max 后無效。 boundaryGap:true //坐標軸軸線相關設置。 axisLine:{ //是否顯示坐標軸軸線。 show:true, } //坐標軸刻度相關設置 axisTick:{ show:true,//默認顯示 //坐標軸刻度標簽的顯示間隔，在類目軸中有效 //默認會采用標簽不重疊的策略間隔顯示標簽。 //可以設置成 0 強制顯示所有標簽。 interval:'auto', //坐標軸刻度是否朝內，默認朝外。 inside:false } //坐標軸刻度標簽 axisLabel:{ //刻度標簽與軸線之間的距離。 margin:8, rotate:45, //坐標欄文字傾斜 //刻度標簽的內容格式器 // 使用字符串模板，模板變量為刻度默認標簽 {value} formatter: '{value} kg' 參數一為刻度數值，參數二刻度的索引 formatter:function(value,index){ console.log(value)//會發現value會一次次打印出來 return value.length>6?value.substring(0,6)+'...':value //對坐標軸文字做文字超出限制 } //刻度標簽文字的顏色，默認取 axisLine.lineStyle.color。支持回調函數，格式如下 textStyle: { color: function (value, index) { return value >= 0 ? 'green' : 'red'; } } } }, { //第二個x軸 } ]
3.yAxis:
//直角坐標系 grid 中的 y 軸(配置屬性同x軸) yAxis:[{ axisLabel:{ //刻度標簽與軸線之間的距離。(配合grid的left，right等及containLabel:false,進行多個grid的對齊) margin:8, } }]
多個grid對齊：containLabel為false，axisLabel的margin一致，grid的left一致。
4.series:
//系列列表,聲明數據的方式 //當坐標軸上每個區間要多個圖表，series數組就加一項對象。如每個坐標區間有折線圖和柱狀圖 //與type為line為例 series:[{//區間的圖表一 //每個系列通過 type 決定自己的圖表類型 type:'line', //系列名稱，用於tooltip的顯示，legend 的圖例篩選 name:'line1', //系列中的數據內容數組。數組項通常為具體的數據項。 data:[], //數據堆疊，同個類目軸上系列配置相同的stack值后，后一個系列的值會在前一個系列的值上相加。 stack:'string', //標記的圖形,標記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'. //可以通過 'image://url' 設置為圖片 symbol:'emptyCircle', //折線拐點標志的樣式。 itemStyle:{ //圖形顏色，默認從全局調色盤 option.color 獲取顏色， color:'', //color支持回調函數 color：function(params){ let color = colorArr;//colorArr為定義的顏色數組 return color[params.dataIndex]; } }, //線條樣式。 lineStyle:{}, //圖形的高亮樣式。 emphasis:{} },{ type:'bar' //區間的圖表二 }]
series.data:感受數據對應關系
通常來說，數據用一個二維數組表示。如下，每一列被稱為一個『維度』。
series: [{ data: [ // 維度X 維度Y 其他維度 ... [ 3.4, 4.5, 15, 43], [ 4.2, 2.3, 20, 91], [ 10.8, 9.5, 30, 18], [ 7.2, 8.8, 18, 57] ] }]
在 直角坐標系 (grid) 中『維度X』和『維度Y』會默認對應於 xAxis 和 yAxis。
在 極坐標系 (polar) 中『維度X』和『維度Y』會默認對應於 radiusAxis 和 angleAxis。
后面的其他維度是可選的，可以在別處被使用，例如：
在 visualMap 中可以將一個或多個維度映射到顏色，大小等多個圖形屬性上。
在 series.symbolSize 中可以使用回調函數，基於某個維度得到 symbolSize 值。
使用 tooltip.formatter 或 series.label.formatter 可以把其他維度的值展示出來。
特別地，當只有一個軸為類目軸（axis.type 為 'category'）的時候，數據可以簡化用一個一維數組表示。例如：
xAxis: { data: ['a', 'b', 'm', 'n'] }, series: [{ // 與 xAxis.data 一一對應。 data: [23, 44, 55, 19] // 它其實是下面這種形式的簡化： // data: [[0, 23], [1, 44], [2, 55], [3, 19]] }]
『值』與 軸類型 的關系：
當某維度對應於類目軸（axis.type 為 'category'）的時候：
其值須為類目的『序數』（從 0 開始）或者類目的『字符串值』。例如：
xAxis: { type: 'category', data: ['星期一', '星期二', '星期三', '星期四'] }, yAxis: { type: 'category', data: ['a', 'b', 'm', 'n', 'p', 'q'] }, series: [{ data: [ // xAxis yAxis [ 0, 0, 2 ], // 意思是此點位於 xAxis: '星期一', yAxis: 'a'。 [ '星期四', 2, 1 ], // 意思是此點位於 xAxis: '星期四', yAxis: 'm'。 [ 2, 'p', 2 ], // 意思是此點位於 xAxis: '星期三', yAxis: 'p'。 [ 3, 3, 5 ] ] }]
5.tooltip:
提示框組件可以設置在多種地方：
可以設置在全局，即 option.tooltip
可以設置在坐標系中，即 grid.tooltip等，為本坐標系特定的 tooltip 設定。
可以設置在系列中，即 series[i].tooltip,為本系列特定的 tooltip 設定。
可以設置在系列的每個數據項中，即 series.data.tooltip
//提示框組件。 tooltip:{ //觸發類型， //可取值item，數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。 //取值axis，坐標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。 //取值none，什么都不觸發。 trigger:'item',//默認 //坐標軸指示器配置項。 //tooltip.axisPointer 是配置坐標軸指示器的快捷方式。實際上坐標軸指示器的全部功能，都可以通過軸上的 axisPointer 配置項完成。 axisPointer:{ //指示器類型。'line' 直線指示器，'shadow' 陰影指示器，'none' 無指示器，'cross' 十字准星指示器。 type:'line',//默認值 }, //是否將 tooltip 框限制在圖表的區域內。 // tooltip 超出外界被截斷時，此配置比較有用。當confine也無法改變被外界截斷需配合extraCssText屬性。 confine:false, //提示框浮層的位置，默認不設置時位置會跟隨鼠標的位置。 //通過數組表示提示框浮層的位置，支持數字設置絕對位置，百分比設置相對位置。 //也可通過回調函數 position:['50%', '50%'],// 相對位置，放置在容器正中間， //提示框浮層內容格式器，支持字符串模板和回調函數兩種形式。 formatter:'', //額外附加到浮層的 css 樣式。如下當浮層溢出容器時設置寬度和折行使之不溢出（需配合confine:true）： extraCssText: 'word-wrap: normal;display: block;max-width: 70%;' }
formatter:
1.字符串模板（支持寫入dom）:
formatter: '{b0}: {c0}<br />{b1}: {c1}'
模板變量有 {a}, {b}，{c}，{d}，{e}，分別表示系列名，數據名，數據值等。 在 trigger 為 'axis' 的時候，會有多個系列的數據，
此時可以通過 {a0}, {a1}, {a2} 這種后面加索引的方式表示系列的索引。 不同圖表類型下的 {a}，{b}，{c}，{d} 含義不一樣。
其中變量{a}, {b}, {c}, {d}在不同圖表類型下代表數據含義為：
折線（區域）圖、柱狀（條形）圖、K線圖 : {a}（系列名稱），{b}（類目值），{c}（數值）, {d}（無）
散點圖（氣泡）圖 : {a}（系列名稱），{b}（數據名稱），{c}（數值數組）, {d}（無）
地圖 : {a}（系列名稱），{b}（區域名稱），{c}（合並數值）, {d}（無）
餅圖、儀表盤、漏斗圖: {a}（系列名稱），{b}（數據項名稱），{c}（數值）, {d}（百分比）
更多其它圖表模板變量的含義可以見相應的圖表的 label.formatter 配置項。
實例代碼：
tooltip: { trigger: 'axis', axisPointer: { type: 'none' }, formatter:`{b}</br> <div style="display:inline-block;background-color:#003366; width:16px;height:10px;border-radius:3px; margin-right:4px;"> </div> {a0}:{c0}個</br> <div style="display:inline-block;background-color:#006699; width:16px;height:10px;border-radius:3px; margin-right:4px;"> </div> {a1}:{c1}個</br> <div style="display:inline-block;background-color:#4cabce; width:16px;height:10px;border-radius:3px; margin-right:4px;"> </div> {a2}:{c2}個</br> <div style="display:inline-block;background-color:#e5323e; width:16px;height:10px;border-radius:3px; margin-right:4px;"> </div> {a3}:{c3}個</br>` },
2.回調函數：
回調函數格式：(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
第一個參數 params 是 formatter 需要的數據集，為Object還是Array看data數組中的數據為數組還是對象。格式如下：
{ componentType: 'series', // 系列類型 seriesType: string, // 系列在傳入的 option.series 中的 index seriesIndex: number, // 系列名稱 seriesName: string, // 數據名，類目名 name: string, // 數據在傳入的 data 數組中的 index dataIndex: number, // 傳入的原始數據項 data: Object, // 傳入的數據值。在多數系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中） value: number|Array|Object, // 坐標軸 encode 映射信息， // key 為坐標軸（如 'x' 'y' 'radius' 'angle' 等） // value 必然為數組，不會為 null/undefied，表示 dimension index 。 // 其內容如： // { // x: [2] // dimension index 為 2 的數據映射到 x 軸 // y: [0] // dimension index 為 0 的數據映射到 y 軸 // } encode: Object, // 維度名列表 dimensionNames: Array<String>, // 數據的維度 index，如 0 或 1 或 2 ... // 僅在雷達圖中使用。 dimensionIndex: number, // 數據圖形的顏色 color: string, // 餅圖的百分比 percent: number, }
實例圖片：
實例代碼：
formatter:function(params){ console.log(params) res=params[0].name+'<br/>' for(let i = 0;i<params.length;i++){ res+=`<div style="display:inline-block;width:20px;height:10px; border-radius:2px;margin-right:6px; background-color:${params[i].color};"></div> ${params[i].seriesName}:${params[i].value}個 </br>` } return res }
當為坐標軸params參數中會有axis的信息，如下圖：
使用formmatter，參數一的屬性可以實現許多功能，要多加思考：
如dataIndex的使用：y軸的label標簽進行了字數多余限定字符個數后用省略號代替，這樣當tooltip使用時，會導致也顯示省略的，把label的原數據也重新賦值一份，用dataIndex屬性去取對應沒省略的數據。
3.字符串模板和回調函數的比較：
字符串模板不適合在多個legend個性化內容情景：會產生切換legend時發生問題，如下圖：
6.legend:
//圖例組件:展現了不同系列的標記，顏色（不同顏色圖形）和名字（文本），顏色和名字樣式多可設置。可以通過點擊圖例控制哪些系列不顯示 legend：{ //data.left/right/top/bottom 圖例組件離容器左右上下側的距離。 //值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對於容器高寬的百分比,，也可以是 'left', 'center', 'right'。 left:'center', //如果要設置單獨一項的樣式，也可以把該項寫成配置項對象。此時必須使用 name 屬性對應表示系列的 name。 data: [{ //圖例項的名稱，應等於某系列的name值 name: '系列1', // 圖例項的 icon。 icon: 'circle',//包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'，'image://url' 設置為圖片 // 設置文本為紅色 textStyle: { color: 'red' } }] },
6.color:
調色盤顏色列表。如果系列沒有設置顏色，則會依次循環從該列表中取顏色作為系列顏色。
默認為：
color:['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']