用eacharts 做一个y轴为时分的 甘特图时间计划 并且每个柱子上 有五处文字提示说明信息

首先，需要准备一个数据集，包含每个事件的开始时间和结束时间，以及事件的名称和说明信息。假设数据集如下：

var data = [
  {name: '事件1', start: '2021-08-01 08:00', end: '2021-08-01 12:00', info: ['信息1', '信息2', '信息3']},
  {name: '事件2', start: '2021-08-01 09:00', end: '2021-08-01 11:00', info: ['信息4', '信息5', '信息6']},
  {name: '事件3', start: '2021-08-01 10:00', end: '2021-08-01 13:00', info: ['信息7', '信息8', '信息9']}
];

接下来，我们可以使用 ECharts 中的 Gantt Chart 组件来绘制甘特图。首先需要引入 ECharts 的库文件，并创建一个容器：

<div id="chart" style="width: 800px; height: 600px;"></div>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>

然后，创建一个基本的甘特图：

var chart = echarts.init(document.getElementById('chart'));

var option = {
  tooltip: {},
  xAxis: {
    type: 'time'
  },
  yAxis: {
    type: 'category',
    data: ['时分']
  },
  series: [{
    type: 'bar',
    data: []
  }]
};

chart.setOption(option);

接下来，我们需要将数据集中的每个事件转换为 ECharts 中的数据格式，同时在柱子上添加提示信息。具体代码如下：

var dataZoomStart = 0;
var dataZoomEnd = 100;

var seriesData = [];

for (var i = 0; i < data.length; i++) {
  var start = new Date(data[i].start);
  var end = new Date(data[i].end);

  seriesData.push({
    name: data[i].name,
    value: [start, end],
    label: {
      formatter: function(params) {
        var info = data[i].info;
        var html = '<div style="text-align: left;">' + data[i].name + '</div>';
        for (var j = 0; j < info.length; j++) {
          html += '<div>' + info[j] + '</div>';
        }
        return html;
      },
      position: 'top'
    }
  });
}

var option = {
  tooltip: {},
  dataZoom: [{
    type: 'slider',
    xAxisIndex: 0,
    filterMode: 'empty',
    start: dataZoomStart,
    end: dataZoomEnd
  }],
  xAxis: {
    type: 'time'
  },
  yAxis: {
    type: 'category',
    data: ['时分']
  },
  series: [{
    type: 'bar',
    data: seriesData
  }]
};

chart.setOption(option);

这样就完成了一个带有提示信息的甘特图。需要注意的是，由于 ECharts 默认的数据缩放区间是 0 到 100，如果数据点数量非常多，可能会导致数据点重叠。这时可以通过调整 `dataZoomStart` 和 `dataZoomEnd` 的值来缩小数据缩放区间，使得数据点更加分散。