echarts-散点图-vue3-内阴影

以上为效果图
但是有一个问题是，一开始需要定义位置和颜色数组，当数据量过多的时候会重叠而且要提前声明很多数据

后面我决定用关系图来做了，先放上散点图代码供参考

function initReport(sdata) {
  const myChart0 = echarts.init(main0.value);
  const offsetData = [
    [10, 20],
    [40, 40],
    [60, 80],
    [90, 28],
    [30, 50],
    [20, 50],
    [30, 80],
    [40, 30],
    [50, 10],
  ];
  const colorData = [
    ["rgba(254,86,55,0.00)", "#FE5637"],
    ["rgba(254,192,203,0.00)", "#FEC0CB"],
    ["rgba(255,230,1800,0.00)", "#FFE612"],
    ["rgba(3,228,236,0.00)", "#03E4EC"],
    ["rgba(231,115,200,0.00)", "#E773C8"],
    ["rgba(0,217,138,0.00)", "#00D98A "],
    ["rgba(255,230,18,0.00)", "#B8860A"],
    ["rgba(184,134,10,0.00)", "#FFE612"],
    ["rgba(3,228,236,0.00)", "#03E4EC"],
  ];
  const symbolSizeData = [80, 100, 90, 120, 120,70,60,60,80];
  const optiondata = [];
  for (var i = 0; i < sdata.length; i++) {
    if (sdata.length > 9) {
      offsetData.push([
        Math.floor(Math.random() * (100 - 40)) + 40,
        Math.floor(Math.random() * (100 - 30)) + 30,
      ]);
      colorData.push(["rgba(255,230,1800,0.00)", "#FFE612"]);
      symbolSizeData.push(Math.floor(Math.random() * (120 - 80)) + 80)
    }
    const item = sdata[i];
    optiondata.push({
      name: item.name,
      number: item.count,
      value: offsetData[i],
      symbolSize: symbolSizeData[i],
      color: colorData[i],
      itemStyle: {
        normal: {
          color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
            {
              offset: 0,
              color: colorData[i][0],
            },
            {
              offset: 1,
              color: colorData[i][1],
            },
          ]),
          opacity: 0.9,
          shadowColor: "transparent",
        },
      },
    });
  }
  const option0 = {
    grid: {
      top: 0,
      bottom: 0,
    },
    xAxis: [
      {
        type: "value",
        show: false,
        min: 0,
        max: 100,
      },
    ],
    yAxis: [
      {
        show: false,
        min: 0,
        max: 100,
      },
    ],

    series: [
      {
        type: "scatter",
        symbol: "circle",
        label: {
          normal: {
            show: true,
            formatter: function (params) {
              var res = params.data.name + "\n" + params.data.number;
              return res;
            },
            color: "#fff",
            textStyle: {
              fontSize: "14",
            },
          },
        },
        animationDurationUpdate: 500,
        animationEasingUpdate: 500,
        animationDelay: function (idx) {
          return idx * 100;
        },
        data: optiondata,
      },
    ],
  };
  myChart0.setOption(option0);

  window.addEventListener("resize", () => {
    myChart0.resize();
  });
}

是在vue3框架里面写的，里面的数据格式为：

[{name: '可乐', count: 49}]