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: ["未知", "工作", "待机", "停机", "故障", "调试中种子"]
       },

效果如上图!!!!!!!

posted @ 2019-11-13 16:15  我是一名好程序员  阅读(4993)  评论(0编辑  收藏  举报