最近因为公司项目需展示大量图表,所以用到echarts超多,而且ui总是有自己的想法,为了满足只能自己不断地去探索,要实现效果如图所示:
一般柱状图label不是在左就是在右,而且只有一个;像这种内外兼有且样式不同,少;找了很久没找到,只能回官网看配置项,嘿,还真让我发现了;超简单!
series: [
{
data: data,
type: 'bar',
barMaxWidth: 20,
label: {
show: true,
color: '#fff',
position: 'right',
formatter: (params) => {
return [
`{a|${params.value}} {b|${params.value / sum === 1 ? '100%' : (params.value / sum * 100).toFixed(2) + '%'}}`
]
},
rich: {
a: {
lineHeight: 10,
padding: [0, 0, 0, -30],
color: '#ffffff'
},
b: {
color: '#333333',
padding: [0, 0, 0, 10],
height: 35
}
}
}
]
首先是在formatter给两个值赋予不同的样式a、b;然后在rich里写不同的样式;最重要的是需要让label一部分在柱状图里一部分在柱状图外,是通过position: 'right’和rich里的每个样式的padding来控制的。a是要展示在柱状图里的内容给一个负的padding这样它就到了柱状条里了!如果大家有更好的实现方式,欢迎留言~