# 请教一下*echarts 中横向柱状图怎样实现类目名称显示在图表上方*的问题

2020-11-18 09:43:12 +08:00
 Ixiqiuqiu

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'
            },
        },
       
    ]
};
1480 次点击
所在节点    前端开发
1 条回复
c6h6benzene
2020-11-18 11:04:39 +08:00
这应该是 label.position 控制的。你现在应该是把类目名当做了 Y 轴的 label 。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/726523

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX