Echart legend 注释显示 占比 的方法
关键部分：option 的 legend 定义 formatter
legend: {
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
formatter: function(name) {
var data = option.series[0].data;
var total = 0;
var tarValue;
for (var i = 0; i < data.length; i++) {
total += data[i].value;
if (data[i].name == name) {
tarValue = data[i].value;
}
}
var v = tarValue;
var p = Math.round(((tarValue / total) * 100));
return `${name} ${p}%`;
}
},<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
var data = getData();
console.log('data',data);
option = {
title: {
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{b} : {d}%'
},
legend: {
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
formatter: function(name) {
var data = option.series[0].data;
var total = 0;
var tarValue;
for (var i = 0; i < data.length; i++) {
total += data[i].value;
if (data[i].name == name) {
tarValue = data[i].value;
}
}
var v = tarValue;
var p = Math.round(((tarValue / total) * 100));
return `${name} ${p}%`;
}
},
series: [
{
name: '',
type: 'pie',
radius: '55%',
center: ['40%', '50%'],
data: data.seriesData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
function getData(){
var objData = {};
objData.seriesData = [
{
name: "餐饮",
value: 30
},
{name: "药店", value: 20},
{name: "商店", value: 20},
{name: "加油站", value: 20},
{name: "学校食堂", value: 20},
{name: "小餐饮", value: 20}
];
return objData;
}
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>