在使用echarts製作數據圖表時,由於一張圖表中包含多個series並且是多種類型數據(折線圖,散點圖,自定義圖等),最初所有數據都是在各自的series.tooltip中定義提示信息,這種情況下默認tooltip的觸發方式是‘item’的方式,但是折線圖在這種方式下的使用就很蛋疼了,必須要點中數據點,提示才會出來,但是數據點又比較小,很難點中,用戶反饋很不好用;
爲了用戶體驗更好,只好改代碼了,本來打算只對折線圖採用座標觸發(‘axis’),但是series.tooltip無法設置觸發方式,只好更改option.tooptip觸發方式爲‘axis’,;在這裏又碰到了問題,修改後的觸發方式作用在所有的series上了,也就是之前自定義的series.tooltip全都無效了,查echarts官方文檔才發現:series.tooltip 僅在 tooltip.trigger 爲 'item' 時有效。如意算盤落空了,沒法子對不同類型的圖採用不同的觸發方式了;
沒辦法,因爲折線圖的體驗效果實在太差,必須要改,只好硬着頭皮改了,所有的數據都採用‘axias’觸發,然後針對不同的圖表給出不同的提示,方法就是:在series.tooltip中使用formatter函數來自定義提示信息,依據params參數的seriesIndex(數據在series裏位置)屬性來判斷圖表類型;代碼實現如下:
drawChart1_2() {
this.chart1_2 = echarts.init(document.getElementById('chart1_2'));
this.chart1_2.setOption({
tooltip:{
trigger:'axis',
axisPointer:{
type:'line',
lineStyle:{color:'#333',}
},
backgroundColor:'#333',
formatter:function(params){
let tip = auth.formatterTip(params);/*調用auth.js中的formatterTip函數,傳入觸發點信息參數params*/
return tip ;
},
},
xAxis: [],
yAxis: [],
grid: this.grid,
series: [/*多個series*/
{
type: 'line',
name:'Basal',
data:this.DataBasal,
},
{
type: 'bar',
name:'Bolus',
data:this.DataBolus,
},
{
type: 'custom',
name:'Extend bolus',
data:this.extend_bolus,
},
{
type: 'scatter',
name:'Alert',
data: this.pump_alarm,
symbol:'image://static/legend/Alert.png',
},
]
});
},
auth.js中定義函數,對不同類型數據做處理:
formatterTip(params){
// console.log(params);
let that = this;
let tipArray = [0,0,0,0,0,0,0,0,0],tip = '',timeDetail ='';
params.map(function (e,i) {
if(e.value[0]!==10){/*去除custom類型數據初始化的影響*/
let index = e.seriesIndex;
let name = e.seriesName;
let value = e.value[1];
let date = e.value[0];
let time = that.formatterDate5(date);
let day = that.formatterDate4(date.getTime()/1000);
timeDetail = day+' '+time[0]+':'+time[1]+'<br>';/*設置提示框頭部時間信息*/
/*判斷數據類型以及是否有數據*/
if((index===0||index===2)&&value)){
/*每一條提示前設置對應顏色的小圓點*/
let icon =" <div style='background: #00ff4c;height: 8px;width: 8px;border-radius: 8px;margin-top:7px;margin-right: 4px;float: left;display: inline-block'></div>"; tipArray[index]= icon + name+' : '+value+'U/H'; }
if(index===1&&value){
let icon =" <div style='background: #ff0000;height: 8px;width: 8px;border-radius: 8px;margin-top:7px;margin-right: 4px;float: left;display: inline-block'></div>";
tipArray[1] = icon +' Manual Suspend';
}
if(index===3&&value){
let icon =" <div style='background: #182f82;height: 8px;width: 8px;border-radius: 8px;margin-top:7px;margin-right: 4px;float: left;display: inline-block'></div>";
tipArray[3] = icon + name+' : '+e.value[2]+', '+value+'U';
}
}
});
tip =tip+timeDetail;
tipArray.map(function (e,i) {
if(e){
tip = tip+e+'<br>';/*組合所有提示信息*/
}
});
return tip;/*返回處理好的提示*/
},
這樣就完成 了echarts座標軸觸發方式下的多個series的tooltip自定義功能;上述函數中只給出了一部分series的處理方法;
完成後效果還不錯,可惜沒法截圖;