需求描述
- 柱子横向显示
- 标题显示在柱子上方
- 颜色不同,且使用渐变效果
- 显示横向刻度线,不显示其他坐标轴及刻度线
要求效果
配置代码
xAxis: {
type: 'value',
show: true,
splitLine: {
show: true,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
},
yAxis: {
type: 'category',
data: [...],
axisLabel: {
show: true,
inside: true,
textStyle: {
color: '#93A0AC',
verticalAlign: 'bottom',
fontSize: 12,
align: 'left',
padding: [0, 0, 15, -5],
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
inverse: true,
},
series: [
{
name: '',
type: 'bar',
label: {
position: 'right',
show: true,
},
barWidth: 20,
emphasis: {
focus: 'series',
},
data: [...],
itemStyle: {
color: (params) => {
const index = params.dataIndex
return new echarts.graphic.LinearGradient(1, 0, 0, 0,
[
{
offset: 0,
color: BAR_COLOR_LIST[index][0],
},
{
offset: 1,
color: BAR_COLOR_LIST[index][1],
},
])
},
},
},
],