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

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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM