echarts圖表tooltip浮動框顯示單位——散點圖
阿新 • • 發佈:2018-11-01
專案中要求在圖表的浮動提示窗上顯示相對應的單位如圖:
方法有二,如下:
方法1:
利用自定義提示框進行拼接:
但是這樣的話根據後臺返回的資料格式的不同進行處理,在tooltip的formatter中進行拼接即可,注意這樣的話要考慮的情況比較多。
方法2(如果和後臺商量好可以要求返回值的格式的話就很簡單了):
引入echarts的js後,設定:
var myChart = echarts.init(document.getElementById('div1'));
option = {
tooltip : {
trigger: 'axis' ,
showDelay : 0,
//下面註釋掉的formatter是因為我專案的後臺返回的單位是個陣列,需要進行拼接的處理的程式碼
// formatter : function (params) {
// console.log(params);
// if (params.length > 1) {
// var returnData = '';
// for(let g in params){
// returnData += params[g].seriesName + ':'
// + params[g].value[1 ] + params[g].value[2] + '<br/>';
// }
// return returnData;
// }else {
// return params[0].seriesName + ' :<br/>'
// + params[0].value[0] + ':' + params[0].value[1];
// }
// },
axisPointer:{
show: true,
type : 'cross' ,
lineStyle: {
type : 'dashed',
width : 1
}
}
},
legend: {
data:["沙烏地阿拉伯", "俄羅斯"]
},
xAxis : [
{type : 'category',
scale:true,name: "", data: ["石油產量1", "石油產量2"]}
],
yAxis : [
{
type : 'value',
scale:true,
axisLabel : {
formatter: '{value}'
}
}
],
series : [
{
name:'沙烏地阿拉伯',
type:'scatter',
data: [["石油產量1", 567.75,"噸"], ["石油產量2", 1267.75,"萬噸"]],
},
{
name:'俄羅斯',
type:'scatter',
data:[["石油產量1", 640.74,"噸"], ["石油產量2", 1040.74,"萬噸"]],
}
]
};
myChart.setOption(option);
其實就是直接把單位跟在資料的後面即可,這樣不需要在進行自定義的拼接,直接可以顯示出來。