echarts表格,x轴为datetime格式,现在会多显示时间点,怎么设置可以不显示没有的时间
时间: 2024-05-10 17:21:14 浏览: 12
点呢?
可以使用echarts中的dataZoom组件来实现只显示有数据的时间点。具体操作如下:
1. 在option中加入dataZoom组件:
```
dataZoom: {
type: 'slider',
xAxisIndex: 0,
filterMode: 'empty'
}
```
2. 设置x轴的type为"time",并在data中添加数据:
```
xAxis: {
type: 'time'
},
series: [{
data: [
['2022-01-01', 10],
['2022-01-02', 20],
['2022-01-05', 30],
['2022-01-07', 40],
['2022-01-10', 50]
],
type: 'line'
}]
```
3. 在dataZoom组件中设置filterMode为"empty",表示只显示有数据的时间点。
完整代码示例:
```
option = {
xAxis: {
type: 'time'
},
yAxis: {
type: 'value'
},
series: [{
data: [
['2022-01-01', 10],
['2022-01-02', 20],
['2022-01-05', 30],
['2022-01-07', 40],
['2022-01-10', 50]
],
type: 'line'
}],
dataZoom: {
type: 'slider',
xAxisIndex: 0,
filterMode: 'empty'
}
};
```
运行结果:图表只显示有数据的时间点。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)