直接上图
效果图.右边就是 legend,上面的"无约束断面"几个字是我用p 标签定位上去的
需求
公司给的设计图就是如上图所示,图例中的字体颜色都是不一样的.找了官网示例发现写的不太清楚.
于是自己扒拉了一遍代码,总算写出了自己想要的样式.在此只贴上 legend 部分代码.
legend: {
orient: 'vertical',
icon: "circle",
x: '40%',
y: 'center',
textStyle: {
color: '#FBFBFB',
fontSize: 16,
rich: {
0: {
color: '#F1C40F',
fontSize: 32,
fontWeight: 700
},
1: {
color: '#65F7CB',
fontSize: 32,
fontWeight: 700
},
},
},
data: ['无约束越限', '无约束未越限'],
formatter: function (val) {
var index = 0;
var datas = option.series[0].data;
var totalNum = 0;
datas.forEach(function (v, i) {
totalNum += v.value;
})
var legendData = option.legend.data;
legendData.forEach(function (v, i) {
if (v == val) {
index = i;
}
})
console.log(datas)//打印结果见下图
return val + ' {' + index + '|' + datas[index].value + '} 个 | ' + ((datas[index].value / totalNum) * 100).toFixed(2) + '%';
}
}
这是datas打印结果
至于为什么要把rich 里的配置名称设为 0和 1,这是因为图例中文字上下的颜色是不一样的,所以我是根据索引来区分的.
而且我只有两组数据,所以只需要定义两种颜色,比较简单.
写出来之后回过头来再看官方文档就会恍然大悟了.
that's all~~
