最近一直在使用echarts，當然也被其中的各種屬性整的頭大，記錄一下其中遇到的問題。
tooltip：鼠標懸浮時顯示的提示框。
今天想要記錄的是【自定義提示框的內容】，如下圖，鼠標懸浮時提示框內顯示的內容格式為：年份 類型 <br> 裝機容量：數據 單位<br> 增長率：百分比，那么如何才能自定義出來咱們想要的效果呢，代碼如下：
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
},
formatter: function (params) {
// console.log(params); // 當我們想要自定義提示框內容時，可以先將鼠標懸浮的數據打印出來，然后根據需求提取出來即可
let firstParams = params[0];
let sndParams = params[1];
return firstParams.name + ' ' + firstParams.seriesName + '<br>' + '裝機：' + firstParams.data + ' 億千瓦<br>增長率：' + sndParams.data +' %';
}
},
如代碼注釋中寫到的一樣，如果我們想要自定義鼠標懸浮時提示框的內容，那么我們就可以先把數據打印出來然后根據需求提取即可。
PS：如果有人想要做如上圖一樣點擊圖例互斥的效果，可以通過這個屬性：selectedMode: 'single'
legend: {
top: '2%',
data:['全部','火電','水電','風電', '光伏', '核電', '電源結構變化'],
textStyle: { color: '#fff' },
selectedMode: 'single' // 只展示一條數據，參數可有：single、multiple、false
},
最后，網上搜到一篇介紹tooltip詳解的文章，學習一下：
tooltip ={ //提示框組件
trigger: 'item', //觸發類型,'item'數據項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。 'axis'坐標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。
triggerOn:"mousemove", //提示框觸發的條件,'mousemove'鼠標移動時觸發。'click'鼠標點擊時觸發。'mousemove|click'同時鼠標移動和點擊時觸發。'none'不在 'mousemove' 或 'click' 時觸發
showContent:true, //是否顯示提示框浮層
alwaysShowContent:true, //是否永遠顯示提示框內容
showDelay:0, //浮層顯示的延遲，單位為 ms
hideDelay:100, //浮層隱藏的延遲，單位為 ms
enterable:false, //鼠標是否可進入提示框浮層中
confine:false, //是否將 tooltip 框限制在圖表的區域內
transitionDuration:0.4, //提示框浮層的移動動畫過渡時間，單位是 s,設置為 0 的時候會緊跟着鼠標移動
position:['50%', '50%'], //提示框浮層的位置，默認不設置時位置會跟隨鼠標的位置,[10, 10],回掉函數，inside鼠標所在圖形的內部中心位置，top、left、bottom、right鼠標所在圖形上側，左側，下側，右側，
formatter:"{b0}: {c0}<br />{b1}: {c1}", //提示框浮層內容格式器，支持字符串模板和回調函數兩種形式,模板變量有 {a}, {b}，{c}，{d}，{e}，分別表示系列名，數據名，數據值等
backgroundColor:"transparent", //標題背景色
borderColor:"#ccc", //邊框顏色
borderWidth:0, //邊框線寬
padding:5, //圖例內邊距，單位px 5 [5, 10] [5,10,5,10]
textStyle:mytextStyle, //文本樣式
};