echarts横向柱状图

发布时间：2023-05-23

一、概览

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中的横向柱状图，实现更加出色的数据可视化效果。

推荐文章