首页 > 其他 > 详细

echarts 饼图-->如何修改legend模板?

时间:2019-11-13 17:14:50      阅读:218      评论:0      收藏:0      [点我收藏+]

首先需要在初始化图表的方法中过滤一下数据 ,将你需要的 名称  所占百分比 所占数量  筛选出来

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

技术分享图片

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

echarts 饼图-->如何修改legend模板?

原文:https://www.cnblogs.com/wangqi2019/p/11850485.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!