echarts柱狀圖各種顏色的設置

一、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: ...
        }
    ]
}