Echart 横想柱状图

最新推荐文章于 2025-08-02 13:40:10 发布

m0_46068617

最新推荐文章于 2025-08-02 13:40:10 发布

阅读量203

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 javascript 服务器

本文链接：https://blog.csdn.net/m0_46068617/article/details/147933128


option = {
    backgroundColor: '#000',
    grid: {
        left: '5%',
        right: '5%',
        bottom: 0,
        top: '15%',
        containLabel: false,
    },
    xAxis: {
        show: false,
        max: 600
    },
    yAxis: [
        {
            type: "category",
            data: ['水稻', '花生', '大豆', '小麦'],
            axisTick: "none",
            axisLine: "none",
            axisLabel: {
                show: true,
                color: '#D0DEEE',  // 亮蓝色柱子
                align: 'top',
                verticalAlign: 'bottom',
                padding: [0, 0, 25, 10],
                fontSize: 20
            },
        }, {
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
                fontSize: 20,
                position: 'insideRight', // 在上方显示
                color: '#D0DEEE',
                align: 'top',
                verticalAlign: 'bottom',
                padding: [0, 0, 25, -50],
            },
            data: [100, 200, 420, 500],
        }
    ],
    series: [
        {
            name: 'value',
            type: 'bar',
            zlevel: 1,
            showBackground: true,
            backgroundStyle: {
                opacity: 0.098,
                color: '#FFFFFF',  // 亮蓝色柱子
                borderRadius: 20  // 右侧圆角
            },
            itemStyle: {
                color: '#36A5FF',  // 亮蓝色柱子
                borderRadius: 20  // 右侧圆角
            },
            barWidth: '20%',
            data: [100, 200, 420, 500],
        }
    ],
}