echarts柱状图各种颜色的设置

XCMNO • 2025-01-14 18:55 • 编程

一、echarts柱状图边框设置

柱状图的边框设置通常有两种方法，一种是通过在样式中设置，另一种是通过在xAxis的axisLine、axisLabel和axisTick中设置。

第一种方法：

option = {
    ...
    series: [
        {
            type: 'bar',
            itemStyle: {
                borderColor: '#000',
                borderWidth: 2
            },
            data: ...
        }
    ]
}

第二种方法：

option = {
    ...
    xAxis: {
        axisLine: {
            lineStyle: {
                color: '#000',
                width: 2
            }
        },
        axisLabel: {
            show: false
        },
        axisTick: {
            show: false
        }
    },
    yAxis: {
        ...
    },
    series: [
        {
            type: 'bar',
            data: ...
        }
    ]
}

二、echarts柱状图大小设置

柱状图的大小设置需要通过指定系列中柱状图的宽度（barWidth）和高度（barMaxWidth和barMinHeight）来实现。

option = {
    ...
    series: [
        {
            type: 'bar',
            barWidth: 20,
            barMaxWidth: 50,
            barMinHeight: 10,
            data: ...
        }
    ]
}

三、echarts柱状图位置设置

通过指定系列中的x和y来设置柱状图的位置。

option = {
    ...
    series: [
        {
            type: 'bar',
            x: '50%',
            y: '50%',
            data: ...
        }
    ]
}

四、echarts柱状图高度设置

通过在系列中的series.barHeight中设置柱状图的高度来实现。

option = {
    ...
    series: [
        {
            type: 'bar',
            barHeight: 20,
            data: ...
        }
    ]
}

五、echarts柱状图宽度设置

通过在系列中的series.barWidth中设置柱状图的宽度来实现。

option = {
    ...
    series: [
        {
            type: 'bar',
            barWidth: '50%',
            data: ...
        }
    ]
}

六、echarts柱状图刻度设置

通过在xAxis或yAxis中设置interval值来控制刻度线的密度。

option = {
    ...
    xAxis: {
        interval: 0,
        data: ...
    },
    yAxis: {
        interval: 1,
        data: ...
    },
    series: [
        {
            type: 'bar',
            data: ...
        }
    ]
}

七、echarts柱状图设置背景

设置echarts柱状图的背景有两种方法，一种是通过在grid中设置背景颜色，另一种是在visualMap中设置颜色。

第一种方法：

option = {
    ...
    grid: {
        backgroundColor: '#fff'
    },
    series: [
        {
            type: 'bar',
            data: ...
        }
    ]
}

第二种方法：

option = {
    ...
    visualMap: {
        show: false,
        min: 0,
        max: 100,
        inRange: {
            color: ['#fff', '#000']
        }
    },
    series: [
        {
            type: 'bar',
            data: ...
        }
    ]
}

八、echarts设置柱状图间距

设置柱状图的间距可以通过在系列中的barGap和barCategoryGap中设置值来实现。

option = {
    ...
    series: [
        {
            type: 'bar',
            barGap: '30%',
            barCategoryGap: '50%',
            data: ...
        }
    ]
}

原创文章，作者：XCMNO，如若转载，请注明出处：https://www.506064.com/n/329449.html