echarts 饼图-->如何修改legend模板?
首先需要在初始化图表的方法中过滤一下数据 ,将你需要的 名称 所占百分比 所占数量 筛选出来
let dataFilter = [ { value: 20, name: "未知", percent: "10%" }, { value: 10, name: "工作", percent: "10%" }, { value: 40, name: "待机", percent: "10%" }, { value: 30, name: "停机", percent: "10%" }, { value: 20, name: "故障", percent: "10%" }, { value: 8, name: "调试中种子", percent: "10%" } ];
对legend进行配置
legend: { formatter: function(name) { let pieLegendVale = {}; dataFilter.filter((item,index) => { if (item.name == name) { pieLegendVale = item; } }); if(pieLegendVale.name.length == 5){ return pieLegendVale.name + " " + pieLegendVale.percent +" " + pieLegendVale.value + "项" ; }else{ return pieLegendVale.name + " " + pieLegendVale.percent +" " + pieLegendVale.value + "项" ; } }, itemGap: 16, // 设置legend的间距 itemWidth: 30, // 设置宽度 itemHeight: 14, // 设置高度 orient: "vertical", //垂直显示还是水平显示 right: 0, //legend相对位置 bottom: 0, //legend相对位置 textStyle: { fontSize: "14" }, //legend字体大小 data: ["未知", "工作", "待机", "停机", "故障", "调试中种子"] },
效果如上图!!!!!!!