echarts lengend格式化和换行

大家好，欢迎来到IT知识分享网。

想要的效果：lengend即格式化又换成两行

第一步：格式化文字部分：

在lengend属性内加入

formatter: function (name) { //这个data数据其实就是series里要用到的data           let data = [{"name":"20岁以下","value":"500"},{"name":"20-40岁","value":"2"},{"name":"40-60岁","value":"1"},{"name":"60岁以上","value":"0"}]           let total = 0;// 统计总量           let tarValue = 0; // 目前的数值，由于data数据是string型，所以有这步 // 遍历去给上门两个变量赋值，并返回新的格式化数据           if (data) {             for (let i = 0, l = data.length; i < l; i++) {               total += parseInt(data[i].value);               if (data[i].name == name) {                 tarValue = parseInt(data[i].value);               }             }             let p = ((tarValue / total) * 100).toFixed(0);             return name + ' ' + ' ' + p + '%';           } else {             return name           }         }

2.第二步换行，lengend内加入

orient: 'horizontal',  //水平排列显示 align: 'left', //图例在左，文字在右 top: '75%',// 这个是重要信息，因为是横着排列，如果这个值过大，没有空间换行 width: '230',// 这个定义图例的总宽度， textStyle: {           color: '#fff',         // 这个宽度和上一级的宽度，有关系，这个宽度略小于上一级的一半，则第三个就会换行           width: 106,           overflow: 'break',         },

这样做的结果：

发现后面环图图例第二行的第二个，没有对齐，测试又叨叨一回

第二版：

格式化没问题就是换行有问题，

orient: ‘vertical’,  //垂直排列显示

修改这个属性后，顺序是竖着排列，