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