echarts饼图，自定义legend，解决legend字数太多和太长的问题，翻页处理

绝地灬酷狼 2022-10-17 00:40 19阅读 0赞

[https://blog.csdn.net/weixin\_43899935/article/details/107185591][https_blog.csdn.net_weixin_43899935_article_details_107185591]

版权  
\{  
        tooltip: \{  
          trigger: "item",  
          formatter: "\{a\} <br/>\{b\}: \{c\} (\{d\}%)"  
        \},  
        legend: \{  
          type: "scroll",  
          orient: "vertical",  
          right: 20,  
          top: 5,  
          bottom: 10,  
          pageIconColor: "white",//激活的分页按钮颜色  
          pageIconInactiveColor: "\#2f4554",//没激活的分页按钮颜色  
          //设置自定义legend 的重点  
          formatter: function(name) \{  
            // 获取legend显示内容  
            let data = data1;//这个是展示的数据  
            let total = 0;  
            let tarValue = 0;  
            let value = 0;  
            for (let i = 0, l = data.length; i < l; i++) \{  
              total += data\[i\].value;  
              if (data\[i\].name == name) \{  
                tarValue = data\[i\].value;  
                value = data\[i\].value;  
              \}  
            \}  
            let p = total== 0? 0 ：((tarValue / total) \* 100).toFixed(1);  
            return \[  
              "\{a|" +  
                echarts.format.truncateText(  
                  name,  
                  80,  
                  "14px Microsoft Yahei",  
                  "…"//如果宽度超过80会出现...  
                ) +  
                "\}",  
              "\{b|" + p + "%\}",  
              "\{x|" + value + "\}"  //a、b、x、跟下面的rich对应  
            \].join(" ");  
          \},  
          tooltip: \{  
            show: true//这个为true的话悬停到legend上会出现tooltip  
          \},  
          textStyle: \{  
            rich: \{  
              a: \{  
                color: "white",  
                width: 80,  
                align: "left"  
              \},  
              b: \{  
                width: 50,  
                align: "left",  
                color: "white"  
              \},  
              x: \{  
                width: 30,  
                align: "left",  
                color: "white"  
              \}  
            \}  
          \}  
        \},  
        graphic: \{//环形中间的字  
          elements: \[  
            \{  
              type: "text",  
              left: "28%",  
              top: "43%",  
              style: \{  
                text: "666666",  
                textAlign: "center",  
                fill: "\#fff",  
                fontSize: 32  
              \}  
            \},  
            \{  
              type: "text",  
              left: "28%",  
              top: "56%",  
              style: \{  
                text: "总人数（人）",  
                textAlign: "center",  
                fill: "\#fff",  
                fontSize: 14  
              \}  
            \}  
          \]  
        \},  
        series: \[  
          \{  
            name: "访问来源",  
            type: "pie",  
            radius: \["50%","70%"\],//环形图  
            center: \["35%", "50%"\],  
            labelLine: \{  
              show: false  
            \},  
            label: \{  
              show: false  
            \},  
            data: data1  
          \}  
        \]  
      \};  
  
原文链接：https://blog.csdn.net/weixin\_43899935/article/details/107185591

[https_blog.csdn.net_weixin_43899935_article_details_107185591]: https://blog.csdn.net/weixin_43899935/article/details/107185591