Echarts中堆疊柱狀圖之百分比顯示
阿新 • • 發佈:2019-02-11
需求:tooltip顯示其數量之外,還需在旁邊顯示該數量所佔總數的百分比,具體效果圖如下:
相關資料
echarts的tooltip中的一個屬性formatter:提示框浮層內容格式器,支援字串模板和回撥函式兩種形式。
# 字串模板
折線(區域)圖、柱狀(條形)圖、K線圖 : {a}(系列名稱),{b}(類目值),{c}(數值), {d}(無)
注意: 類目值就是對應的橫座標。
例子:
tooltip: {
trigger: 'axis',
axisPointer: {
type : 'shadow'
},
formatter: '{b} <br /> {a0}: {c0}<br />{a1}: {c1} <br /> {a2}: {c2}' + "%"
},
# 回撥函式
回撥函式格式:(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
例子
tooltip: {
trigger: 'item',
position:'right',
formatter : function(params, ticket, callback) {
if (params.value == undefined || params.value !== params.value ) {
params.value = 0;
}
return params.seriesName +" <br />" + params.name + ":" + params.value + "%";
}
},
需求實現
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "shadow",
"textStyle": {
"color": "#fff"
},
"label": {
"precision" : 2,
}
},
formatter : function(params, ticket, callback) {
let obj = params.map((item, index) => {
if (item.value == undefined || item.value !== item.value) {
item.value = 0;
}
let percent = ((item.value / params[params.length - 1].value) * 100).toFixed(2)
// 小圓點顯示
let dotColor = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>'
return dotColor + item.seriesName + ":" + item.value + '(' + percent + '%' + ')' + '</br>'
})
return obj.join('') // 去除','
}
},