饼图legend显示百分比

有时候我们需要在饼图的legend上显示百分比
饼图legend显示百分比_第1张图片

var option = {
        title: {},
        tooltip: {
          trigger: "item",
          formatter: "{a} 
{b} : {c} ({d}%)" }, legend: { orient: "vertical", x: 50, y: 10, textStyle: { color: "#fff" }, // 使用回调函数 formatter: function(name) { var data = option.series[0].data; var total = 0; var tarValue; for (var i = 0, l = data.length; i < l; i++) { total += data[i].value; if (data[i].name == name) { tarValue = data[i].value; } } var p = ((tarValue / total) * 100); return name + " " + " " + p + "%"; }, }, toolbox: { show: true, feature: { mark: { show: true }, magicType: { show: true, type: ["pie", "funnel"] } } }, calculable: true, series: [ { name: "面积模式", type: "pie", radius: [30, 110], center: ["60%", "60%"], roseType: "area", data: [ { value: 40, name: "泽兰" }, { value: 15, name: "竹叶" }, { value: 13, name: "香叶" }, { value: 10, name: "紫苏" }, { value: 8, name: "香叶2" }, { value: 6, name: "地丁" }, { value: 4, name: "荷叶" }, { value: 3, name: "鹅不食草" }, { value: 1, name: "车前草" } ], labelLine: { normal: { length: 3, // 改变标示线的长度 lineStyle: { color: "#fff" // 改变标示线的颜色 } } }, label: { normal: { textStyle: { color: "#fff" // 改变标示文字的颜色 } } } } ], //样式修改 color: [ "#74E93A", "#FEB23E", "#FFF100", "#F6B37F", "#E56E6E", "#40B18E", "#409EFF", "#FEB763", "#F19EC2" ] };

饼图legend显示百分比_第2张图片

label: {
              // 使用回调函数
              formatter: "{d}% {b}",
              textStyle: {
                color: "#fff" // 改变标示文字的颜色
              }

你可能感兴趣的:(echarts)