echarts 饼图文字图例多种颜色

小白有点菜

已于 2022-08-23 14:04:44 修改

阅读量4.7k

点赞数 8

文章标签： javascript 前端 html

于 2022-07-21 13:44:57 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_49516521/article/details/125910564

版权

图例百分比多种样式设置的方法找了好多天，全都是竖着一列一列设置样式的，像这种。

需要这种的话，把最后面完整的代码段里的 formatter，跟textStyle直接替换成下面这两张图的代码就行了，主要就是改变了一下formatter 里return的返回方式。

          formatter: name => {
            var data = this.option.series[0].data;
            var total = 0;
            var tarValue;
            for (var i = 0; i < data.length; i++) {
              total += data[i].value;
              if (data[i].name == name) {
                tarValue = data[i].value;
              }
            }
            var v = tarValue;
            var b = Math.round((tarValue / total) * 100); 
            return (
              "{name| " + name + "} " + "{b| " + b + "%}" + "{v| " + v + "次}"
            );
          },

          textStyle: {
            color: "#000",
            rich: {
              name: {
                align: "left",
                width: fontSize(72),
                color: "rgba(255, 255, 255, 1)"
              },
              b: {
                align: "left",
                width: fontSize(36),
                color: "rgba(255, 255, 255, 1)"
              },
              v: {
                align: "left",
                color: "rgba(255, 255, 255, 1)"
              }
            }
          }

下面的才是我要最终效果。对我这种不太写echarts的来说真是，太难了！！！！！！重点是不知道怎么搜索关键词，，所以一直找不到࿰