地图常见效果, 与散点图的结合

常见效果

地图和散点图结合

• 1.给series下增加新的对象
• 2.准备好散点数据, 设置新对象的data
• 3.配置新对象的type

type:effectScatter

• 4.让散点图使用地图坐标系统
• 5.让涟漪的效果更加明显

rippleEffect: {
    scale: 10
}

代码实例

// 1.给series下增加一个新的对象
      // 2.准备数据散点数据, 配置给series下的另外一个对象
      // 3.配置series下的新对象的type值为effectScatter
      // 4.指明散点图的坐标系统为geo
      // 5.调整涟漪动画效果
      var airData = [
        { name: "北京", value: 39.92 },
        { name: "天津", value: 39.13 },
        { name: "上海", value: 31.22 },
        { name: "重庆", value: 66 },
        { name: "河北", value: 147 },
        { name: "河南", value: 113 },
        { name: "云南", value: 25.04 },
        { name: "辽宁", value: 50 },
        { name: "黑龙江", value: 114 },
        { name: "湖南", value: 175 },
        { name: "安徽", value: 117 },
        { name: "山东", value: 92 },
        { name: "新疆", value: 84 },
        { name: "江苏", value: 67 },
        { name: "浙江", value: 84 },
        { name: "江西", value: 96 },
        { name: "湖北", value: 273 },
        { name: "广西", value: 59 },
        { name: "甘肃", value: 99 },
        { name: "山西", value: 39 },
        { name: "内蒙古", value: 58 },
        { name: "陕西", value: 61 },
        { name: "吉林", value: 51 },
        { name: "福建", value: 29 },
        { name: "贵州", value: 71 },
        { name: "广东", value: 38 },
        { name: "青海", value: 57 },
        { name: "西藏", value: 24 },
        { name: "四川", value: 58 },
        { name: "宁夏", value: 52 },
        { name: "海南", value: 54 },
        { name: "台湾", value: 88 },
        { name: "香港", value: 66 },
        { name: "澳门", value: 77 },
        { name: "南海诸岛", value: 55 }
      ];
      var scatterData = [
        {
          value: [117.283042, 31.86119]
        }
      ]
      var myCharts = echarts.init(document.querySelector("div"));
      $.get("json/map/china.json", function(res) {
        console.log(res);
        echarts.registerMap("chinaMap", res);
        var option = {
          geo: {
            type: "map",
            map: "chinaMap",
            zoom: 1.2,
            label: {
              show: true
            }
          },
          series: [
            {
              data: airData,
              geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
              type: 'map'
            },
            {
              data: scatterData, // 配置散点的坐标数据
              type: 'effectScatter',
              coordinateSystem: 'geo', // 指明散点使用的坐标系统 geo的坐标系统
              rippleEffect: {
                scale: 10 // 设置涟漪动画缩放的比例
              }
            }
          ],
          visualMap: {
            min: 0,
            max: 300,
            inRange: {
              color: ['white', 'red'] // 控制颜色渐变的范围
            },
            calculable: true // 出现滑块, 控制筛选
          }
        };
        myCharts.setOption(option);
      });