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

 

 

 

记录进步！！