Echarts自定义y轴数据的散点图

先看效果图，我只造了4组假数据，未对接口，如符合大家需要可继续往下看

参考Echarts官网散点图，

Vue3全部代码如下：

<template>
  <div ref="chartRef" style="width: 900px; height: 400px"></div>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import * as echarts from 'echarts';
  const chartRef = ref<HTMLDivElement | null>(null);

  onMounted(() => {
    let myChart = echarts.init(chartRef.value);
    let option;
    option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            width: 1,
            color: '#019680',
          },
        },
      },
      xAxis: {
        scale: true,
        data: [
          '2023-03-1',
          '2023-03-2',
          '2023-03-3',
          '2023-03-4',
          '2023-03-5',
          '2023-03-6',
          '2023-03-7',
          '2023-03-8',
        ],
      },
      yAxis: {
        scale: true,
        data: [
          '访问恶意网站',
          '遭受暴力破解',
          '遭受漏洞攻击',
          '与bogon地址通讯',
          '木马通信',
          '间谍软件通信',
          '发起暴力破解',
          '发起漏洞攻击',
          '发生垃圾邮件',
        ],
      },
      series: [
        {
          type: 'scatter',
          symbolSize: [10, 15],
          symbol: 'roundRect',
          // prettier-ignore
          data: [
            ['2023-03-1','访问恶意网站',1050],
            ['2023-03-3','访问恶意网站',1050],
            ['2023-03-4','访问恶意网站',1050],
            ['2023-03-5','访问恶意网站',1050],
          ],
        },
        {
          type: 'scatter',
          symbolSize: [10, 15],
          symbol: 'roundRect',
          // prettier-ignore
          data: [
            ['2023-03-1','遭受暴力破解',1050],
            ['2023-03-3','遭受暴力破解',1050],
            ['2023-03-4','遭受暴力破解',1050],
            ['2023-03-5','遭受暴力破解',1050],
          ],
        },
        {
          type: 'scatter',
          symbolSize: [10, 15],
          symbol: 'roundRect',
          // prettier-ignore
          data: [
            ['2023-03-1','木马通信',1150],
            ['2023-03-3','木马通信',1250],
            ['2023-03-4','木马通信',1350],
            ['2023-03-5','木马通信',1450],
          ],
        },
        {
          type: 'scatter',
          symbolSize: [10, 15],
          symbol: 'roundRect',
          // prettier-ignore
          data: [
            ['2023-03-1','与bogon地址通讯',250],
            ['2023-03-2','与bogon地址通讯',1250],
            ['2023-03-4','与bogon地址通讯',950],
            ['2023-03-7','与bogon地址通讯',750],
          ],
        },
      ],
    };

    option && myChart.setOption(option);
  });
</script>

麻烦大家给个👍