常見效果

地圖和散點(diǎn)圖結(jié)合

• 1.給series下增加新的對(duì)象
• 2.準(zhǔn)備好散點(diǎn)數(shù)據(jù), 設(shè)置新對(duì)象的data
• 3.配置新對(duì)象的type

type:effectScatter

• 4.讓散點(diǎn)圖使用地圖坐標(biāo)系統(tǒng)
• 5.讓漣漪的效果更加明顯

rippleEffect: {
    scale: 10
}

代碼實(shí)例

// 1.給series下增加一個(gè)新的對(duì)象
      // 2.準(zhǔn)備數(shù)據(jù)散點(diǎn)數(shù)據(jù), 配置給series下的另外一個(gè)對(duì)象
      // 3.配置series下的新對(duì)象的type值為effectScatter
      // 4.指明散點(diǎn)圖的坐標(biāo)系統(tǒng)為geo
      // 5.調(diào)整漣漪動(dòng)畫效果
      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: "內(nèi)蒙古", 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: "臺(tái)灣", 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, // 將空氣質(zhì)量的數(shù)據(jù)和第0個(gè)geo配置關(guān)聯(lián)在一起
              type: 'map'
            },
            {
              data: scatterData, // 配置散點(diǎn)的坐標(biāo)數(shù)據(jù)
              type: 'effectScatter',
              coordinateSystem: 'geo', // 指明散點(diǎn)使用的坐標(biāo)系統(tǒng) geo的坐標(biāo)系統(tǒng)
              rippleEffect: {
                scale: 10 // 設(shè)置漣漪動(dòng)畫縮放的比例
              }
            }
          ],
          visualMap: {
            min: 0,
            max: 300,
            inRange: {
              color: ['white', 'red'] // 控制顏色漸變的范圍
            },
            calculable: true // 出現(xiàn)滑塊, 控制篩選
          }
        };
        myCharts.setOption(option);
      });