echarts图例换行时icon对齐方式
今天的开发中,遇到问题如下:
下图是UI需要的效果图
legend: [
{
orient: "vertical",
right: "1%", //所处位置
top: "0%",
textStyle: {
color: "#fff",
fontSize: 14,
lineHeight: 18
},
icon: "circle",
itemGap: 10,
itemWidth: 10,
itemHeight: 14,
formatter: params => {
for (let a = 0; a < this.data.length; a++) {
// this.data 这个数据中有名称和次数
if (this.data[a].name === params) {
//两个名称进行对比,取出对应的次数
return params + "\n" + this.data[a].value; //然后return你需要的legend格式即可
}
}
}
}
],
效果如下:
发现icon并没有和首行文字对齐
于是借鉴百度经验上一位老哥的回答,修改lengend中formatter配置
formatter: params => {
for (let a = 0; a < this.data.length; a++) {
// this.data 这个数据中有名称和次数
if (this.data[a].name === params) {
//两个名称进行对比,取出对应的次数
let params1 = params + "\n" + this.data[a].value; //然后return你需要的legend格式即可
console.log(params1);
let tmp = params1.split("\n");
let res = "" + params1;
for (let i in tmp) {
res = res.replace(tmp[i], "");
}
return res + params1;
}
}
}
效果如下图所示,完美解决