echarts柱状图左右滑动
时间: 2023-07-08 10:55:30 浏览: 82
要实现 echarts 柱状图的左右滑动,可以在 option 中配置 dataZoom 组件。具体步骤如下:
1. 在 option 中配置 xAxis,设置 xAxis 的 type 为 'category',并设置对应的 data。
2. 在 option 中配置 yAxis,设置 yAxis 的 type 为 'value'。
3. 在 option 中配置 series,设置 series 的 type 为 'bar',并设置对应的 data。
4. 在 option 中配置 dataZoom,设置 dataZoom 的 type 为 'slider',并设置对应的 startValue 和 endValue。
以下是一个示例代码:
```javascript
option = {
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [{
type: 'bar',
data: [120, 200, 150, 80, 70, 110, 130]
}],
dataZoom: {
type: 'slider',
startValue: '周三',
endValue: '周五'
}
};
```
在以上代码中,通过配置 dataZoom 组件,实现了柱状图的左右滑动功能。你可以根据自己的需求,更改对应的数据和样式。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)
![](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)