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'
},
},
]
};
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.