V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Ixiqiuqiu
V2EX  ›  前端开发

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

  •  
  •   Ixiqiuqiu · 2020-11-18 09:43:12 +08:00 · 1432 次点击
    这是一个创建于 1247 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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'
                },
            },
           
        ]
    };
    
    1 条回复    2020-11-18 11:04:39 +08:00
    c6h6benzene
        1
    c6h6benzene  
       2020-11-18 11:04:39 +08:00 via iPhone
    这应该是 label.position 控制的。你现在应该是把类目名当做了 Y 轴的 label 。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1026 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 22:33 · PVG 06:33 · LAX 15:33 · JFK 18:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.