Echarts 环形图图例内容+数据+换行

由于legen.formatter return的数据并不支持直接换行所以只能用/n进行换行。但是使用 后的内容并不能很好的进行对齐,刚开始也是困扰了我很久,毕竟UI图已经定稿只能硬着头皮上了。

说一下我的方法:

1.使用formatter 先拿到想要的数据然后用 进行换行

formatter: function (name) {
        var target;
        for (var j = 0; j < legenddata.length; j++) {
            if (legenddata[j].name === name) {
            target = legenddata[j].value
            }
        }
        return "{a|"+[name]+"}"+
+"{b|"+总金额+[target]+"}"
    },

2. 换行后用rich进行控制

textStyle:{
              rich:{
                  a:{
                      align:center,
                      color:#222222,
                      padding:[25,0,10,0],//主要是通过padding来控制位置
                      fontSize:14,
                      fontWeight:400
                  },
                  // 控制
                  b:{
                      align:center,
                      color:#999999,
                      position:absolute,
                      padding:[0,0,0,-40],//主要是通过padding来控制位置
                      fontSize:12,
                      fontWeight:400
                  }
              }
       }

最后给大家贴一段示例代码

经验分享 程序员 微信小程序 职场和发展