echarts 如何使柱状图左右展示_# 请教一下*echarts 中横向柱状图怎样实现类目名称显示在图表上方*的问题...

echarts 版本

V4.7.0

预期效果

想还原设计图里的，横向柱状图将类目名称显示在图表上方的效果(如图)

实际效果

按官方示例 Demo 改了一个，但总是没法更改 Y 轴类目名位置的问题

配置代码

option = {

backgroundColor: '#071021',

tooltip: {

trigger: 'axis',

axisPointer: { // 坐标轴指示器，坐标轴触发有效

type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'

}

},

legend: {

data: ['违法数', '事故数', '死亡数'],

// right: '35%',

bottom: 'bottom',

itemGap: 10,

padding: [16,0],

itemWidth: 20,

itemHeight: 10,

textStyle: {

fontSize: 12,

fontWeight: 600,

color: '#C4D3F5'

}

},

grid: {

left: '3%',

right: '4%',

bottom: '3%',

containLabel: true

},

xAxis: {

type: 'value',

show: false,

},

yAxis: {

type: 'category',

show: true,

// itemStyle: {

// color: '#fff'

// },

data: ['西安纵横交通设施工程有限公司', '西安市双生吉福搬家服务部', '陕西明通交通设施工程有限公司', '扬力集团股份有限公司', '陕西西安路路通交通设施有限公司', '西安智达交通有限责任公司', '西安天畅交通设施有限责任公司','陕西中旺能源交通开发有限责任公司','蓝天巴士集团','西安菱力物流设备有限公司']

},

series: [

{

name: '违法数',

type: 'bar',

stack: '总量',

barGap: '-10%',

barWidth: '50%',

showBackground: true,

backgroundStyle: {

color: 'rgba(255,255,255,0.1)'

},

label: {

show: true,

position: 'inside',

// position: 'right',

color: '#ffffff',

fontSize: 15

},

data: [320, 302, 301, 334, 390, 330, 320,301, 334, 390],

itemStyle: {

color: '#0E9BD8',

// normal: {

// // show: true,

// // position: "top",

// }

},

},

{

name: '事故数',

type: 'bar',

stack: '总量',

label: {

show: true,

position: 'inside'

},

data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101],

itemStyle: {

color: '#FEA900'

},

},

{

name: '死亡数',

type: 'bar',

stack: '总量',

label: {

show: true,

position: 'insideRight'

},

data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191],

itemStyle: {

color: '#FF3D3D'

},

},

]

};