echarts怎么绘制横轴日期时分秒纵轴为类别的散点图
时间: 2023-09-16 22:08:48 浏览: 121
要绘制横轴为日期时分秒,纵轴为类别的散点图,你可以使用 ECharts 中的时间轴组件来实现。下面是一个简单的示例代码,演示如何使用时间轴和散点图绘制横轴为日期时分秒,纵轴为类别的图表:
```javascript
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('myChart'));
// 指定图表的配置项和数据
var option = {
xAxis: {
type: 'time',
name: '时间'
},
yAxis: {
type: 'category',
data: ['类别1', '类别2', '类别3', '类别4']
},
tooltip: {
trigger: 'item',
},
series: [{
type: 'scatter',
data: [
['2021-09-01 10:00:00', '类别1'],
['2021-09-02 12:30:00', '类别2'],
['2021-09-03 15:10:00', '类别3'],
['2021-09-04 09:45:00', '类别4'],
['2021-09-05 18:20:00', '类别1'],
['2021-09-06 22:00:00', '类别2'],
['2021-09-07 08:50:00', '类别3'],
['2021-09-08 11:25:00', '类别4']
].map(function (item) {
return {
value: [
item[0],
item[1]
],
itemStyle: {
color: 'green'
}
};
}),
symbolSize: 10
}]
};
// 使用刚指定的配置项和数据显示图表
myChart.setOption(option);
```
在上述代码中,我们首先初始化了一个 ECharts 实例,并指定了要渲染的 DOM 元素。然后,我们通过配置项 `xAxis` 和 `yAxis` 分别指定了横轴和纵轴的类型和名称。
接着,我们使用时间轴组件来支持横轴为日期时分秒格式。在散点图的 `data` 属性中,我们传入了一组包含日期和类别的数据,以及每个散点的样式。
最后,我们通过 `setOption` 方法将配置项和数据传入图表实例中进行渲染。
阅读全文