echarts 四象限氣泡圖--option

這里只有option配置：

option: {
        legend: {
          right: "10%",
          top: "3%",
          data: ["金葵花以上", "手機APP"],
        },
        grid: {
          left: "8%",
          top: "15%",
        },
        xAxis: {
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        yAxis: {
          name: "招行客戶滿意度 %",
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
          scale: true,
        },
        series: [
          {
            name: "金葵花以上",
            data: [],
            type: "scatter",
            symbolSize: function (data) {
              return Math.sqrt(data[2]) / 5e2;
            },
            label: {
              show: true,
              formatter: function (param) {
                return param.data[3];
              },
              position: "top",
            },
            markLine: {
              label: {
                show: true,
              },
              lineStyle: {
                normal: {
                  color: "#626c91",
                  type: "solid",
                  width: 1,
                },
                emphasis: {
                  color: "#d9def7",
                },
              },
              data: [
                {
                  xAxis: 0.5,
                  name: "營業額平均線",
                  itemStyle: {
                    normal: {
                      color: "#b84a58",
                    },
                  },
                },
                {
                  yAxis: 50,
                  name: "服務能力平均線",
                  itemStyle: {
                    normal: {
                      color: "#b84a58",
                    },
                  },
                },
              ],
            },
            itemStyle: {
              shadowBlur: 10,
              shadowColor: "rgba(120, 36, 50, 0.5)",
              shadowOffsetY: 5,
              color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                {
                  offset: 0,
                  color: "rgb(251, 118, 123)",
                },
                {
                  offset: 1,
                  color: "rgb(204, 46, 72)",
                },
              ]),
            },
          },
          {
            name: "手機APP",
            data: [],
            type: "scatter",
            symbolSize: function (data) {
              return Math.sqrt(data[2]) / 5e2;
            },
            label: {
              show: true,
              formatter: function (param) {
                return param.data[3];
              },
              position: "top",
            },
            itemStyle: {
              shadowBlur: 10,
              shadowColor: "rgba(25, 100, 150, 0.5)",
              shadowOffsetY: 5,
              color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [
                {
                  offset: 0,
                  color: "rgb(129, 227, 238)",
                },
                {
                  offset: 1,
                  color: "rgb(25, 183, 207)",
                },
              ]),
            },
          },
        ],
      },

2.生成data

this.dataList1 = [];
      this.dataList2 = [];
      const dataMapList = [
        "信用卡_接受賬單還款",
        "信貸_申請住房按揭",
        "財富_產品贖回",
        "信用卡_消費",
        "支付結算_卡片服務",
        "支付結算_客戶福利活動",
        "財富_查詢信息",
        "信用卡_分期產品",
        "信用卡_消費",
        "信貸_申請個人消費貸",
      ]; // 這里是你自己的數據map字典數據
      dataMapList.forEach((q) => {
        const arr1 = [
          +Math.random().toFixed(2), // 橫坐標
          getRandomNum({ max: 100, min: 0 }), // 縱坐標
          getRandomNum({ max: 1000000000, min: 10000000 }), // 氣泡的大小，不要太小，用我這個就可以
          q,
          "金葵花以上", // 類別數據名稱
        ];
        const arr2 = [
          +Math.random().toFixed(2),
          getRandomNum({ max: 100, min: 0 }),
          getRandomNum({ max: 1000000000, min: 10000000 }),
          q,
          "手機APP",
        ];
        this.dataList1.push(arr1);
        this.dataList2.push(arr2);
      });
      this.option.series[0].data = this.dataList1;
      this.option.series[1].data = this.dataList2;

3. 獲取隨機數函數

// 獲取隨機數
export function getRandomNum({ max = 100, min = 0 } = {}) {
  return Math.floor(Math.random() * (max - min)) + min;
}

 

 

 

記錄進步！！