echarts 使用dataset, source 是数组对象,xAxis type 为time 自定义时间横坐标要怎么设置
时间: 2024-03-31 13:33:54 浏览: 75
如果你想自定义时间横坐标,你可以在 `source` 数组对象中给时间字段赋值一个 `Date` 对象,然后在 `xAxis` 的 `axisLabel` 中设置时间的格式化方式即可。例如,如果你的 `source` 数组对象中有一个名为 `time` 的时间字段,你可以按照以下方式设置:
```javascript
// 假设你的 source 数组对象如下:
const source = [
{ time: new Date('2022-09-01 00:00:00'), value: 10 },
{ time: new Date('2022-09-02 00:00:00'), value: 20 },
{ time: new Date('2022-09-03 00:00:00'), value: 30 },
// ...
];
// 在 option 中设置 xAxis
option = {
xAxis: {
type: 'time',
axisLabel: {
formatter: function (value) {
return echarts.format.formatTime('yyyy-MM-dd', value);
}
}
},
// ...
// 在 series 中使用 source
series: [{
type: 'line',
datasetIndex: 0,
encode: {
x: 'time',
y: 'value'
}
}],
// 使用 dataset
dataset: {
source: source
}
};
```
上面的代码中,我们首先定义了一个数组对象 `source`,其中的 `time` 字段使用 `new Date()` 方法赋值为 `Date` 对象。然后,在 `xAxis` 中设置 `axisLabel` 的 `formatter` 属性,使用 `echarts.format.formatTime()` 方法将时间格式化为 'yyyy-MM-dd' 的字符串格式。最后,在 `series` 中使用 `encode` 将 `x` 轴绑定到 `time` 字段,使用 `datasetIndex` 指定使用哪个数据集,同时在 `dataset` 中设置 `source` 属性为我们定义的数据源 `source`。
阅读全文