zoukankan      html  css  js  c++  java
  • 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: ["未知", "工作", "待机", "停机", "故障", "调试中种子"]
           },

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

  • 相关阅读:
    vnode之update 还是没太懂
    vnodec创建之标签
    1054 求平均值
    1053 住房空置率
    1052 卖个萌
    1051 复数乘法
    1050 螺旋矩阵
    1049 数列的片段和
    1048 数字加密
    1047 编程团体赛
  • 原文地址:https://www.cnblogs.com/wangqi2019/p/11850485.html
Copyright © 2011-2022 走看看