echarts 纵向柱状图
时间: 2024-12-31 18:26:08 浏览: 129
### 如何使用 ECharts 创建纵向柱状图
为了创建一个纵向柱状图,在ECharts中需要调整`xAxis`和`yAxis`的设置,使横轴成为类目轴而纵轴成为数值轴。具体来说,可以通过交换原本用于定义横向柱状图中的`xAxis`与`yAxis`属性来实现这一点[^2]。
下面是一个简单的例子,展示了如何通过JavaScript代码构建这样的图表:
```javascript
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
title: {
text: '示例纵向柱状图'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value' // 设置为数值型
},
yAxis: {
type: 'category', // 类目型
data: ['类别一', '类别二', '类别三', '类别四', '类别五']
},
series: [
{
name: '销量',
type: 'bar',
data: [24210, 32524, 50434, 52421, 98742],
label: {
show: true,
position: 'insideRight'
}
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
```
这段脚本初始化了一个名为`myChart`的对象,并设置了其选项参数以显示一个基本的纵向条形图。其中最关键的部分在于`xAxis`被设为数值类型(`type:'value'`),而`yAxis`则作为分类轴并指定了具体的类别数据。
此外,还可以进一步自定义样式和其他功能特性,比如添加提示框、网格线以及标签等元素,从而让图表更加美观易读。
阅读全文
相关推荐


















