echarts橫向柱狀圖

一、概覽

ECharts是百度前端開發部開發的一個開源可視化庫,它可以幫助開發者輕鬆的實現各種數據可視化。

橫向柱狀圖是ECharts中一個非常常見的圖表類型，可以用於展示一組數據中的大小比較。

橫向柱狀圖可以非常清晰地展示數據量之間的差別，適用於可以接收到縱向數據標籤的場景。

二、基礎使用

ECharts中使用橫向柱狀圖需初始化一個基礎配置實例，在實例中配置好所需的樣式和數據即可。

以下是一個基本的橫向柱狀圖代碼示例:

var myChart = echarts.init(document.getElementById('main'));

var option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['2011年', '2012年']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        type: 'category',
        data: ['北京', '上海', '廣州', '深圳']
    },
    series: [
        {
            name: '2011年',
            type: 'bar',
            data: [18203, 23489, 29034, 104970]
        },
        {
            name: '2012年',
            type: 'bar',
            data: [19325, 23438, 31000, 121594]
        }
    ]
};

myChart.setOption(option);

上述代碼會生成一個包含了北京、上海、廣州和深圳四個城市在2011年和2012年的銷售額數據的橫向柱狀圖。

三、自定義樣式

在ECharts中可以通過修改配置項的方式來達到定製化的目的，以下介紹一些自定義樣式的方法。

1. 修改顏色

在ECharts中可以通過修改series下的itemStyle來修改每一項數據的樣式，包括顏色。

代碼如下:

var option = {
    ...
    series: [
        {
            name: '2011年',
            type: 'bar',
            itemStyle: {
                normal: {
                    color: '#1E90FF'
                }
            },
            data: [18203, 23489, 29034, 104970]
        },
        {
            name: '2012年',
            type: 'bar',
            itemStyle: {
                normal: {
                    color: '#FF7F50'
                }
            },
            data: [19325, 23438, 31000, 121594]
        }
    ]
};

上述代碼將2011年的數據柱子顏色修改為藍色, 2012年的數據柱子顏色修改為橙色。

2. 自定義x軸和y軸樣式

ECharts中可以修改xAxis和yAxis中的axisLine、axisLabel、splitLine等樣式配置項來實現x軸和y軸的樣式自定義。

例如，修改xAxis和yAxis中的顏色、字型大小和字體樣式，代碼如下:

var option = {
    ...
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        axisLabel: {
            color: '#333',
            fontSize: 14,
            fontFamily: 'Arial'
        },
        axisLine: {
            lineStyle: {
                color: '#eee'
            }
        },
        axisTick: {
            show: false
        }
    },
    yAxis: {
        type: 'category',
        data: ['北京', '上海', '廣州', '深圳'],
        axisLabel: {
            color: '#333',
            fontSize: 14,
            fontFamily: 'Arial'
        },
        axisLine: {
            lineStyle: {
                color: '#eee'
            }
        },
        axisTick: {
            show: false
        },
        splitLine: {
            lineStyle: {
                type: 'dashed'
            }
        }
    },
    ...
};

上述代碼修改了xAxis和yAxis中的樣式，包括顏色、字型大小和字體樣式。

四、數據操作

在實際數據可視化開發中，經常需要對數據進行增刪改查等操作。ECharts支持通過setOption方法實現動態修改數據和切換視圖等操作。

1. 增加數據

可以通過調用option中的series的data數組的push方法來增加新的數據項：

option.series[0].data.push(12345);
option.series[1].data.push(23456);
myChart.setOption(option);

上述代碼會將2011年和2012年的北京、上海、廣州和深圳四個城市的數據都增加12345和23456兩個新的數據。

2. 刪除數據

可以通過調用option中的series的data數組的splice方法來刪除數據項：

option.series[0].data.splice(0, 1);
option.series[1].data.splice(0, 1);
myChart.setOption(option);

上述代碼會將2011年和2012年的北京的數據刪除。

3. 修改數據

可以通過直接修改option中的series的data數組中的數據來修改數據項：

option.series[0].data[0] = 12345;
option.series[1].data[0] = 23456;
myChart.setOption(option);

上述代碼會將2011年和2012年的北京的數據都修改為12345和23456。

五、數據標籤定製化

ECharts中可以通過label樣式配置項來實現數據標籤的定製化操作。

1. 隱藏數據標籤

可以通過設置itemStyle的normal下的label為null來隱藏數據標籤。

var option = {
    ...
    series: [
        {
            name: '2011年',
            type: 'bar',
            itemStyle: {
                normal: {
                    color: '#1E90FF',
                    label: {
                        show: false
                    }
                }
            },
            data: [18203, 23489, 29034, 104970]
        }
    ]
};

上述代碼會隱藏橫向柱狀圖的數據標籤。

2. 修改數據標籤顏色和字型大小

可以通過設置itemStyle的normal下的label的color和fontSize屬性來修改數據標籤顏色和字型大小。

var option = {
    ...
    series: [
        {
            name: '2011年',
            type: 'bar',
            itemStyle: {
                normal: {
                    color: '#1E90FF',
                    label: {
                        show: true,
                        position: 'insideRight',
                        color: '#333',
                        fontSize: 14
                    }
                }
            },
            data: [18203, 23489, 29034, 104970]
        }
    ]
};

上述代碼會將橫向柱狀圖的數據標籤顏色修改為黑色，字型大小修改為14px。

六、總結

本文介紹了ECharts中橫向柱狀圖的基本用法和樣式定製化方法，以及數據操作和數據標籤定製化。希望讀者能夠通過本文的介紹，更好地運用ECharts中的橫向柱狀圖，實現更加出色的數據可視化效果。