echars 时间堆叠柱状图 x轴日期 y轴时间
时间: 2023-12-21 22:24:02 浏览: 44
如果需要在 echarts 中实现时间堆叠柱状图,其中 x 轴显示日期,y 轴显示时间,可以使用 echarts 中的时间轴组件和直角坐标系组件来实现。下面是一个示例代码,供参考:
HTML 代码:
```html
<div id="chart" style="height: 400px;"></div>
```
JavaScript 代码:
```javascript
// 初始化 echarts 实例
var myChart = echarts.init(document.getElementById('chart'));
// 配置项
var option = {
// 时间轴组件
tooltip: {},
legend: {
data: ['类别1', '类别2', '类别3']
},
xAxis: {
type: 'time',
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
splitLine: {
show: false
}
},
// 堆叠柱状图
series: [{
name: '类别1',
type: 'bar',
stack: '总量',
data: [['2022-01-01', '08:00:00'], ['2022-01-02', '10:00:00'], ['2022-01-03', '12:00:00'], ['2022-01-04', '14:00:00'], ['2022-01-05', '16:00:00'], ['2022-01-06', '18:00:00']]
}, {
name: '类别2',
type: 'bar',
stack: '总量',
data: [['2022-01-01', '06:00:00'], ['2022-01-02', '08:00:00'], ['2022-01-03', '10:00:00'], ['2022-01-04', '12:00:00'], ['2022-01-05', '14:00:00'], ['2022-01-06', '16:00:00']]
}, {
name: '类别3',
type: 'bar',
stack: '总量',
data: [['2022-01-01', '04:00:00'], ['2022-01-02', '06:00:00'], ['2022-01-03', '08:00:00'], ['2022-01-04', '10:00:00'], ['2022-01-05', '12:00:00'], ['2022-01-06', '14:00:00']]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
在上面的代码中,xAxis 的 type 属性设置为 'time',表示 x 轴显示时间类型的数据。同时,堆叠柱状图中的数据需要以二维数组的形式传入,第一个元素表示日期,第二个元素表示时间。如果需要自定义 x 轴和 y 轴的刻度,可以通过 xAxis 和 yAxis 中的 axisLabel 属性进行设置。