echarts怎么绘制横轴为时间纵轴为类别的散点图
时间: 2023-11-27 20:54:54 浏览: 266
echart散点图
要绘制横轴为时间,纵轴为类别的散点图,可以按照以下步骤:
1. 准备数据
准备一个包含时间和类别的数据集,每个数据点包含时间、类别和对应的数值。
2. 配置 echarts
在 echarts 中,可以使用 scatter 图表来绘制散点图。需要配置 xAxis 和 yAxis,其中 xAxis 的 type 属性设置为 'time',yAxis 的 type 属性设置为 'category'。
3. 绘制散点图
使用数据集中的时间作为 x 轴的值,类别作为 y 轴的值,数值作为散点图的大小。
下面是一个示例代码:
```javascript
// 准备数据
var data = [
['2021-01-01', '类别A', 10],
['2021-01-02', '类别B', 20],
['2021-01-03', '类别C', 30],
['2021-01-04', '类别D', 40],
['2021-01-05', '类别E', 50],
];
// 配置 echarts
var option = {
xAxis: {
type: 'time',
name: '时间',
},
yAxis: {
type: 'category',
name: '类别',
data: ['类别A', '类别B', '类别C', '类别D', '类别E'],
},
series: [{
type: 'scatter',
data: data.map(function (item) {
return [item[0], item[1], item[2]];
}),
symbolSize: function (val) {
return val[2];
},
}],
};
// 绘制图表
var myChart = echarts.init(document.getElementById('chart'));
myChart.setOption(option);
```
在这个示例中,数据集中包含了五个数据点,分别表示五个类别在不同的时间下的数值。xAxis 的 type 属性设置为 'time',yAxis 的 type 属性设置为 'category',data 属性设置为类别的数组。series 中的 type 属性设置为 'scatter',data 属性设置为绘制散点图所需的数据格式,symbolSize 属性设置为数值大小,表示散点图的大小。
阅读全文