使用Echarts制作地图

 {

    var dqmap = "deqing.json";
    var mapname = dqmap;

    var mapDate = [
      {
        name: '凤村镇',
        value: [112.089, 23.235, 299],
      },
      {
        name: '高良镇',
        value: [111.953, 23.281, 600],
      },
      {
        name: '永丰镇',
        value: [112.125, 23.331, 29999],
      },
      {
        name: '莫村镇',
        value: [112.125, 23.409, 29999],
      },
      {
        name: '武垄镇',
        value: [112.201, 23.31, 29999],
      },
      {
        name: '播植镇',
        value: [112.171, 23.242, 29999],
      },
      {
        name: '悦城镇',
        value: [112.14, 23.175, 29999],
      },
      {
        name: '九市镇',
        value: [111.987, 23.176, 29999],
      },
      {
        name: '新圩镇',
        value: [111.781, 23.179, 29999],
      },
      {
        name: '回龙镇',
        value: [111.67, 23.195, 29999],
      },
      {
        name: '官圩镇',
        value: [111.8, 23.270048, 400],
      },
      {
        name: '马圩镇',
        value: [111.849, 23.235, 70],
      },
      {
        name: '德城街道',
        value: [111.778, 23.138, 20],
      },
    ];
    var  option;
    myChart.showLoading();
    let index = -1;
    var timer = setInterval(function () {
      // 隐藏提示框
      myChart.dispatchAction({
        type: 'hideTip',
        seriesIndex: 0,
        dataIndex: index,
      });
      // 显示提示框
      myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: index + 1,
      });
      // 取消高亮指定的数据图形
      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: index,
      });
      // 高亮指定的数据图形
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: index + 1,
      });
      index++;
      if (index > 13) {
        index = -1;
      }
    }, 2000);

    myChart.on('mousemove', function (e) {
      clearInterval(timer);
      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
      });
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: e.dataIndex,
      });
      myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: e.dataIndex,
      });
    }); //---------------------------------------------鼠标移入静止播放
    myChart.on('mouseout', function (e) {
      clearInterval(timer);
      myChart.dispatchAction({
        type: 'downplay',
        seriesIndex: 0,
        dataIndex: e.dataIndex,
      }); //鼠标移出后先把上次的高亮取消
      timer = setInterval(function () {
        // 隐藏提示框
        myChart.dispatchAction({
          type: 'hideTip',
          seriesIndex: 0,
          dataIndex: index,
        });
        // 显示提示框
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: index + 1,
        });
        // 取消高亮指定的数据图形
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: index,
        });
        // 高亮指定的数据图形
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: index + 1,
        });
        index++;
        if (index > 13) {
          index = -1;
        }
      }, 2000);
    });
    myChart.on('click', function (e) {
      console.log(e);
      var chooseName = mapJson.filter((item) => {
        return item.name == e.name;
      });
      console.log(chooseName);
      mapname = chooseName[0].json;

      console.log(mapname, '选择地图');
      mapDate = [];
      mapInit();
    });

    setTimeout(function () {
      mapInit();
    }, 1000);
    var mapInit = () => {
      console.log('返回', mapname);
      $.getJSON(mapname, function (geoJson) {
        echarts.registerMap('deqing', geoJson);
        myChart.hideLoading();
        option = {
          title: {
            top: 20,
            text: '德庆县',
            subtext: '',
            x: 'center',
            textStyle: {
              color: '#ccc',
            },
          },

         /* tooltip: {
            trigger: 'item',
            formatter: function(params) {
              console.log(params)
              return params.name + '?????: ' + params.value[2];
            }
          },*/
          visualMap: {
            min: 0,
            max: 1000,
            right: 100,
            seriesIndex: 1,
            type: 'piecewise',
            bottom: 100,
            textStyle: {
              color: '#FFFF',
            },
            //图例配置
              splitList: [
                {
                  gt: 500,
                  color: '#F5222D',
                  label: '>500',
                }, 
                {
                  gte: 300,
                  lte: 500,
                  color: '#FA541C ',
                  label: '300-500',
                },
                {
                  gte: 100,
                  lte: 300,
                  color: '#FA8C16',
                  label: '100-300人',
                }, 、
                {
                  lte: 100,
                  color: '#fbe1d6',
                  label: '<100',
                },
              ],

          },
          geo: {
            map: 'deqing',
            aspectScale: 0.75, //长宽比
            zoom: 1,
            roam: false,
            itemStyle: {
              normal: {
                areaColor: '#013C62',
                shadowColor: '#182f68',
                shadowOffsetX: 0,
                shadowOffsetY: 25,
              },
              emphasis: {
                areaColor: '#2AB8FF',
                borderWidth: 0,
                color: 'green',
                label: {
                  show: false,
                },
              },
            },
          },
          series: [
            {
              layoutCenter: ['20%', '25%'],
              type: 'map',
              roam: true,
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: '#fff',
                  },
                },
                emphasis: {
                  textStyle: {
                    color: '#fff',
                  },
                },

              },


              itemStyle: {
                normal: {
                  borderColor: '#2ab8ff',
                  borderWidth: 1.5,
                  areaColor: '#12235c',
                },
                emphasis: {
                  areaColor: '#2AB8FF',
                  borderWidth: 0,
                  color: 'green',
                },
              },
              zoom: 1,
              roam: false,
              map: 'deqing', //使用
            },
            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              showEffectOn: 'render',
              rippleEffect: {
                period: 15,
                scale: 4,
                brushType: 'stroke',
              },
              hoverAnimation: true,
              itemStyle: {
                normal: {
                  color: '#ffff',
                  shadowBlur: 10,
                  shadowColor: '#333',
                },
              },
              data: mapDate,
            },
          ],
        };
        myChart.setOption(option);
      });
    };


  }