echarts 柱状图竖向
时间: 2024-06-16 16:01:55 浏览: 30
ECharts是一个强大的JavaScript图表库,它支持多种类型的图表,包括柱状图。在ECharts中,创建竖向(也称为垂直)柱状图可以通过设置`xAxis`和`yAxis`的方向来实现。下面是基本的步骤:
1. **引入ECharts库**:
首先,你需要在HTML文件中引入ECharts的CDN链接,或者本地引入ECharts.js文件。
2. **初始化图表**:
使用ECharts的构造函数创建一个新的实例,并设置容器ID。
```javascript
var myChart = echarts.init(document.getElementById('main'));
```
3. **配置数据和选项**:
在配置项里,设置`xAxis`和`yAxis`的方向为`reverse`或`true`,以及数据系列的系列type为`bar`。
```javascript
var option = {
xAxis: {
type: 'category',
direction: 'vertical' // 或者 'reverse'
},
yAxis: {
type: 'value'
},
series: [{
name: '数据',
type: 'bar', // 柱状图
data: [/* 数据数组 */]
}]
};
```
4. **渲染图表**:
将配置项应用到图表上,调用`setOption`方法。
```javascript
myChart.setOption(option);
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)