echarts画地图，展示走过的路，并将其点亮

从https://www.echartsjs.com/examples/zh/editor.html?c=doc-example/map-example
博客看到的这个地图，拿来作为参考，将不需要的部分去掉，还剩下

image.png
这个样子，代码如下：

option = {
    title : {
        text: 'iphone销量',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip : {
        trigger: 'item'
    },
 
    visualMap: {
        min: 0,
        max: 2500,
        left: 'left',
        top: 'bottom',
        text:['高','低'],           // 文本，默认为数值文本
        calculable : true
    },


    series : [
        {
            name: 'iphone3',
            type: 'map',
            mapType: 'china',
            roam: false,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:[
                {name: '北京',value: Math.round(Math.random()*1000)},
             
                {name: '重庆',value: Math.round(Math.random()*1000)},
              
              
                {name: '辽宁',value: Math.round(Math.random()*1000)},

             
                {name: '浙江',value: Math.round(Math.random()*1000)},
            
                {name: '湖北',value: Math.round(Math.random()*1000)},
           
                {name: '甘肃',value: Math.round(Math.random()*1000)},
                {name: '山西',value: Math.round(Math.random()*1000)},
            
                {name: '广东',value: Math.round(Math.random()*1000)},
               
                {name: '西藏',value: Math.round(Math.random()*1000)},
              
                {name: '香港',value: Math.round(Math.random()*1000)},
                {name: '澳门',value: Math.round(Math.random()*1000)}
            ]
        }
    ]
};

在上面代码上做了改进，并备注了每个属性的功能，需要的自取，我做出来的地图如下：

下载 (7).png

代码如下：

  myMap.setOption({
          // 左下角颜色条样式设置
          visualMap: {
            show: false, // 左下角颜色条要不要显示，不要则为false
            min: 0, // 颜色条最底端颜色的值
            max: 1000,// 颜色条最上端颜色的值
            left: 'left',// 颜色条的位置
            top: 'bottom',
            text: ['高', '低'], // 颜色条文本，默认为数值文本
            calculable: true,
            inRange: {
              color: ['#f08a95', '#fbe6ef', '#f6f67a', '#d4ecb2']
              // 需要的颜色区间和颜色种类 按需写入 多少不限
            }

          },
          // 地图在画布的位置
          grid:{
              left:0,
              top:0,
              right:0,
              bottom:0
          },
          series: [
            {
            type: 'map',
            // layoutSize: 100,
            mapType: 'china',
            silent:true,
            itemStyle:{
                normal:{
                  // color: 'yellow',
                  // areaStyle:{color:'#f00'},
                  areaColor: "#e9e9e9" // 地图默认不点亮时的所有区域颜色 默认为灰色
                }
            },
            roam: false,// 是否可以缩放地图
            // zoom: 2,
            label: {
              normal: {
                show: true,// 是否显示城市名称
                fontSize: '12px'// 城市名称的字号
              }
            },
            data: data
          }]
        });