echarts时间分布
时间: 2023-07-20 16:43:04 浏览: 51
如果您想在 ECharts 中显示时间分布,可以使用时间轴组件和散点图或者折线图等系列。具体步骤如下:
1. 引入 ECharts 库和时间轴组件。
```html
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/component/axis/Axis.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/component/axisPointer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/component/timeline.js"></script>
```
2. 准备数据。时间数据可以使用 JavaScript 中的 Date 对象表示。
```js
var data = [
['2021-01-01', 10],
['2021-01-02', 20],
['2021-01-03', 15],
['2021-01-04', 30],
['2021-01-05', 25]
];
```
3. 配置 ECharts 图表。
```js
var chart = echarts.init(document.getElementById('chart'));
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
}
},
series: [{
type: 'line',
data: data
}],
timeline: {
axisType: 'time',
data: ['2021-01-01', '2021-01-02', '2021-01-03', '2021-01-04', '2021-01-05'],
autoPlay: true,
playInterval: 2000
}
};
chart.setOption(option);
```
这样就可以在 ECharts 图表中显示时间分布了。如果想显示多组数据,可以使用多个系列,并在时间轴组件中配置多个时间点。
相关推荐
![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)