Echarts 中堆叠柱状图之百分⽐显⽰
需求：tooltip
显⽰其数量之外，还需在旁边显⽰该数量所占总数的百分⽐，具体效果图如下：
相关资料
echarts的tooltip中的⼀个属性formatter：提⽰框浮层内容格式器，⽀持字符串模板和回调函数两种形式。
# 字符串模板
折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类⽬值），{c}（数值）, {d}（⽆）
注意： 类⽬值就是对应的横坐标。
例⼦：margin属性值可以为百分比
# 回调函数
回调函数格式：(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string 例⼦
tooltip: {
trigger: 'axis',
axisPointer: {
type : 'shadow'
},
formatter: '{b} <br /> {a0}: {c0}<br />{a1}: {c1} <br /> {a2}: {c2}' + "%"},
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 ></span>' return dotColor + item.seriesName + ":" + item.value + '(' + percent + '%' + ')' + '</br>'
})
return obj.join('') // 去除','
}
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。