echarts怎么绘制横轴为时间纵轴为类别的散点图

要绘制横轴为时间纵轴为类别的散点图，可以使用 ECharts 中的散点图（scatter）和时间轴（time）组合。具体实现步骤如下：

1. 在 HTML 文件中引入 ECharts 库的 JS 文件和主题文件。

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/theme/macarons.js"></script>

2. 创建一个具有宽度和高度的 DOM 容器。

<div id="scatter-chart" style="width: 800px; height: 600px;"></div>

3. 在 JavaScript 文件中定义数据和配置项，并创建 ECharts 实例。

// 定义横轴时间数据
var timeData = ['2021-01-01', '2021-01-02', '2021-01-03', '2021-01-04', '2021-01-05', '2021-01-06'];

// 定义纵轴类别数据
var categoryData = ['A', 'B', 'C', 'D', 'E'];

// 定义散点数据，每个数组元素为一个对象，包含三个属性：时间、类别和值
var scatterData = [
  { time: '2021-01-01', category: 'A', value: 10 },
  { time: '2021-01-02', category: 'B', value: 20 },
  { time: '2021-01-03', category: 'C', value: 30 },
  { time: '2021-01-04', category: 'D', value: 40 },
  { time: '2021-01-05', category: 'E', value: 50 },
  { time: '2021-01-06', category: 'A', value: 60 },
];

// 定义配置项
var option = {
  // 设置主题
  theme: 'macarons',
  // 设置标题
  title: {
    text: '散点图',
  },
  // 设置横轴类型为时间轴
  xAxis: {
    type: 'time',
    data: timeData,
  },
  // 设置纵轴类型为类目轴
  yAxis: {
    type: 'category',
    data: categoryData,
  },
  // 设置系列数据
  series: [
    {
      // 设置系列类型为散点图
      type: 'scatter',
      // 设置数据
      data: scatterData.map(function (item) {
        return [item.time, item.category, item.value];
      }),
    },
  ],
};

// 创建 ECharts 实例
var myChart = echarts.init(document.getElementById('scatter-chart'));

// 渲染图表
myChart.setOption(option);

在上述代码中，我们使用了 ECharts 中的时间轴（xAxis.type: 'time'）和类目轴（yAxis.type: 'category'）来绘制横轴为时间纵轴为类别的散点图。同时，我们将散点数据格式化为 ECharts 所需的二维数组格式（[time, category, value]），并通过 map() 方法将散点数据转换成 ECharts 所需的格式。最后，我们创建 ECharts 实例并调用 setOption() 渲染图表。