标签：const 0.00 散点图 rgba vue3 100 80 echarts Math

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

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

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}]

标签：const,0.00,散点图,rgba,vue3,100,80,echarts,Math
来源： https://www.cnblogs.com/huchong-bk/p/16634788.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。