vue eacharts散点图

1 initJs() { // 在eacharts中引入地图 // echarts.registerMap("jiangsu", jiangsu);

  echarts.registerMap("nanjing", nanjing);
  let chart = echarts.init(this.$refs.map, "macarons");
  //随着屏幕大小调节图表
  window.addEventListener("resize", () => {
    chart.resize();
  });
  // 散点在地图上的坐标
  var geoCoordMap = {
    //自定义城市坐标
    南京银行总行: [118.79772, 32.04856],
    南京银行洪武支行: [118.788391, 32.037144],
    南京银行新港支行: [118.88064, 32.11352],
    南京银行华侨路支行: [118.76427, 32.04489],
  };
  let randomData = () => {
    return Math.round(Math.random() * 300);
  };
  // 将坐标与值对应并反映在地图上
  let data = [    { name: "南京银行总行", value: randomData() },    { name: "南京银行洪武支行", value: 100 },    { name: "南京银行新港支行", value: randomData() },    { name: "南京银行华侨路支行", value: 500 },  ];

  let convertData = function (data) {
    let res = [];
    for (var i = 0; i < data.length; i++) {
      var geoCoord = geoCoordMap[data[i].name];

      if (geoCoord) {
        res.push({
          name: data[i].name,
          value: geoCoord.concat(data[i].name),
        });
      }
    }
    return res;
  };
  chart.setOption({
    visualMap: {
      show: false,
      min: 0,
      max: 500,
      splitNumber: 5,
      inRange: {
        color: ["#d94e5d", "#eac736", "#50a3ba"].reverse(),
      },
      textStyle: {
        color: "#fff",
      },
    },
    geo: {
      map: "nanjing",
      show: true,
      emphasis: {
        label: {
          show: false,
        },
      },
      calculable: true,
      seriesIndex: [1],
      tooltip: {
        show: false,
      },
      roam: true,
      zoom: 1.5,
      layoutCenter: ["50%", "70%"],
      layoutSize: "120%",
      itemStyle: {
        // 定义样式
        borderColor: "#48E9FE",
        borderWidth: 1,
        areaColor: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(9,66,166, 0.6)",
            },
            {
              offset: 1,
              color: "rgba(9,66,166, 0.2)",
            },
          ],
          globalCoord: false,
        },
        shadowColor: "rgba(9,66,166, 1)",
        shadowOffsetX: -2,
        shadowOffsetY: 2,
        shadowBlur: 10,
      },
      label: {
        color: "#fff",
      },
      // 高亮状态下的样式
      emphasis: {
        itemStyle: {
          areaColor: "rgba(9,66,166, 1)",
          borderWidth: 0,
        },
        label: {
          color: "#fff",
        },
      },
    },

    series: [
      // 地图
      // {
      //   type: 'map',
      //   // map: mapName,
      //   geoIndex: 0,
      //   aspectScale: 0.75, // 地图长宽比
      //   showLegendSymbol: false,
      //   label: {
      //     normal: {
      //       show: true
      //     },
      //     emphasis: {
      //       show: false,
      //       textStyle: {
      //         color: '#fff'
      //       }
      //     }
      //   },
      //   roam: true,
      //   animation: false,
      //   data: data
      // },
      // 气泡散点图，红色气泡
      // {
      //   name: '气泡散点图',
      //   type: 'scatter',
      //   coordinateSystem: 'geo',
      //   symbol: 'pin', //气泡
      //   symbolSize: function (val) {
      //       return val[2] / 10;
      //     },
      //   label: {
      //     normal: {
      //       show: true,
      //       formatter: "{b}",
      //       textStyle: {
      //         color: '#fff',
      //         fontSize: 9,
      //       }
      //     }
      //   },
      //   itemStyle: {
      //     normal: {
      //       // 气泡颜色
      //       color: '#F62157',
      //     }
      //   },
      //   zlevel: 6,
      //   data: convertData(data),
      // },
      {
        //   name: 'Top 5',
        type: "effectScatter",
        coordinateSystem: "geo",
        effectType: "ripple", //涟漪特效
        showEffectOn: "render",
        data: convertData(data),
        //   data: convertData(data.sort(function (a, b) {
        //   return b.value - a.value;
        // }).slice(0, 5)),
        //散点大小
        symbolSize: 15,
        // 散点样式
        rippleEffect: {
          period: 4, // 涟漪特效的动画周期
          brushType: "stroke", // 涟漪特效的波纹绘制方式
          scale: 4, // 涟漪特效动画中波纹的最大缩放比例
        },
        hoverAnimation: true,
        label: {
          normal: {
            formatter: "{b}",
            position: "right",
            show: true,
            fontSize: 16,
          },
        },
        itemStyle: {
          show: true,
          color: "#0bc7f3",
        },
        emphasis: {
          itemStyle: {
            show: true,
            color: "#0bc7f3",
          },
          label: {
            color: "#0bc7f3",
          },
        },
        zlevel: 2,
      },
    ],
  });
},