Echarts 之自定義地圖（多地點輪播提示信息）

效果圖

 代碼 

<!-- 引入 ECharts 文件 -->
<script src="../js/echarts-4.1.0/echarts.js"></script>
<script src="../js/theme/customed.js"></script>
<script src="../js/map/js/china.js"></script>

<script type="text/javascript">
   // 構建echarts圖表所需的數據
   var app={};
   var data = [
      {name: '地點1', value: 200,text:'發生事件1'},
      {name: '地點2', value: 200,text:'發生事件2'},
      {name: '地點3', value: 200,text:'發生事件3'},
      {name: '地點4', value: 200,text:'發生事件4'},
      {name: '地點5', value: 200,text:'發生事件5'},
      {name: '地點6', value: 200,text:'發生事件6'},
      {name: '地點7', value: 200,text:'發生事件7'},
      {name: '地點8', value: 200,text:'發生事件8'},
   ];

  var geoCoordMap = {
      '地點1':[116.41,42.99],
      '地點2':[119.3,26.08],
      '地點3':[108.95,34.27],
      '地點4':[87.68,41.77],
      '地點5':[104.06,32.67],
      '地點6':[116.60,40.08],
      '地點7':[111.56,29.86],
      '地點8':[120.19,30.26]
   };
   var convertData = function (data) {
       var 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].text)
                //geoCoord.concat(data[i].value).concat(data[i].text)
             });
          }
       }
       return res;
    };
    option = {
       title: {
          text: '自定義地圖',
          x:'center',
          top:30,
          textStyle:{
             color: '#46c898',
             fontSize:25
          }
       },
       tooltip : {
          trigger: 'item',
          triggerOn: 'mousemove|click',//移動或者點擊
          formatter:  function (params) {
                for (var i = 0; i < option.series[0].data.length; i++) {
                   if (option.series[0].data[i].name == params.data.name) {
                      var text = option.series[0].data[i].value;
                      return params.data.name +" "+ text[2];
                   }
                }
             }
       },
       geo: {
          map: 'china',
          roam : true,
          label: {
             emphasis: {
                show: false
             }
          },
          zoom:1.2,
          // layoutCenter : ['50%', '47.5%'],
          itemStyle: {
             normal: {
                areaColor: '#688d80',//rgba(128, 128, 128, 0.1)
                borderColor: '#111'
             },
             emphasis: {
                areaColor: '#7ca99c'
             }
          }
       },
       series : [
          {
             type: 'scatter',
             coordinateSystem: 'geo',
             data: convertData(data),
          },
          {
             //name: 'Top 5',
             type: 'effectScatter',
             coordinateSystem: 'geo',
             data: convertData(data.sort(function (a, b) {
                return b.value - a.value;
             }).slice(0, 10)),
             // symbolSize: function (val) {
             //     return val[2] / 10;
             // },
    
             symbolSize: 15,
             hoverAnimation: true,
             label: {
                formatter: '   {b}',
                position: 'right',
                // color : "#d96809",
                show: true
    
             },
             itemStyle: {
                normal: {
                   color: '#f4e925',
                   shadowBlur: 20,
                   shadowColor: '#333'
                }
             },
    
             showEffectOn: 'render',
             rippleEffect: {
                brushType: 'stroke'
             }
          }
       ]
    };
    // 使用剛指定的配置項和數據顯示圖表。
    myChart.setOption(option);
    app.currentIndex = -1;
    setInterval(function () {
       var dataLen = option.series[0].data.length;
       // 取消之前高亮的圖形
       myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 1,
          dataIndex: app.currentIndex
       });
       app.currentIndex = (app.currentIndex + 1) % dataLen;
       // 高亮當前圖形
       myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 1,
          dataIndex: app.currentIndex
       });
       // 顯示 tooltip
       myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 1,
          dataIndex: app.currentIndex
       });
    }, 3000);
    
    //點擊事件
    // myChart.on('click', function (params) {
        
    // });
</script>

工作中使用到的，總結歸納後，僅供各位大神們參考......