您可以使用 ECharts 的柱状图（Bar Chart）来满足您的需求。根据您的描述，以下是一个示例代码，展示了如何使用 ECharts
创建柱状图，并根据数据生成横坐标和纵坐标的内容：
```html
<template>
<div id="bar-chart" style="width: 600px; height: 400px;"></div>
</template>
<script>
import echarts from 'echarts';
export default {
mounted() {
this.renderChart();
},
methods: {
renderChart() {
const chartData = [
{ startTime: '
2022-03-
04 11:
11:00', endTime: '
2022-03-05
11:
11:00' },
// ... 其他数据项
];
// 获取最早的开始时间和最晚的结束时间
const startTime = chartData
.map((item) => new Date(item.startTime))
.sort((a, b) => a - b)[0];
const endTime = chartData
.map((item) => new Date(item.endTime))
.sort((a, b) => b - a)[0];
// 生成横坐标的时间范围
const xAxisData = [];
let currentDate = new Date(startTime);
while (currentDate <= endTime) {
xAxisData.push(currentDate.toLocaleString());
currentDate.setDate(currentDate.getDate() + 1);
}
// 生成纵坐标的数据
const yAxisData = chartData.map((item, index) => index + 1);
//
创建图表实例
const chartInstance = echarts.init(document.getElementById('bar-chart'));
// 配置图表选项
const options = {
xAxis: {
type: 'category',
data: xAxisData,
},
yAxis: {
type: 'value',
},
series: [
{
type: 'bar',
data: yAxisData,
},
],
};
// 渲染图表
chartInstance.setOption(options);
},
},
};
</script>
```
在上述示例中，我们首先根据数据获取最早的开始时间和最晚的结束时间，然后根据这个时间范围生成横坐标的数据。纵坐标的数据则是根据数组的长度生成的。最后，使用 ECharts 的 `init` 方法
创建图表实例，并通过设置图表的配置选项来
创建柱状图。
请注意，上述代码中的日期处理可能需要根据具体情况进行调整，以适应您的数据格式和需求。另外，您需要在项目中引入 ECharts 库，可以通过 npm 安装，并在代码中使用 `import` 引入。
191
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
