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

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

  • 相关阅读:
    算法作业实验三
    牛客练习赛53 B 美味果冻
    牛客练习赛53 C 富豪凯匹配串
    bitmat
    牛客挑战赛33 B 鸽天的放鸽序列
    树状数组
    线段树
    2019牛客国庆集训派对day7 A 2016
    背包
    作业三 -并查集
  • 原文地址:https://www.cnblogs.com/wangqi2019/p/11850485.html
Copyright © 2011-2022 走看看