Vue环境下用ECharts绘制中国地图，并实现拖动缩放与各省份自动轮播高亮显示

Posted 2022-01-04 前端小马

实现效果

---

 完整代码+详细注释：

<template>
  <div class="echart">
    <div class="content">
      <div id="map_cn"></div>
    </div>
  </div>
</template>

<script>
  import echarts from "echarts";
  import 'echarts/map/js/china.js' //这一步必须引入

  export default 
    data() 
      return 
        //地图中的数据
        dataList: [
          
            name: "南海诸岛",
            value: 25,
          ,
          
            name: "北京",
            value: 71,
          ,
          
            name: "天津",
            value: 52,
          ,
          
            name: "上海",
            value: 14,
          ,
          
            name: "重庆",
            value: 50,
          ,
          
            name: "河北",
            value: 20,
          ,
          
            name: "河南",
            value: 30,
          ,
          
            name: "云南",
            value: 55,
          ,
          
            name: "辽宁",
            value: 50,
          ,
          
            name: "黑龙江",
            value: 40,
          ,
          
            name: "湖南",
            value: 6,
          ,
          
            name: "安徽",
            value: 96,
          ,
          
            name: "山东",
            value: 75,
          ,
          
            name: "新疆",
            value: 45,
          ,
          
            name: "江苏",
            value: 15,
          ,
          
            name: "浙江",
            value: 8,
          ,
          
            name: "江西",
            value: 78,
          ,
          
            name: "湖北",
            value: 78,
          ,
          
            name: "广西",
            value: 36,
          ,
          
            name: "甘肃",
            value: 25,
          ,
          
            name: "山西",
            value: 140,
          ,
          
            name: "内蒙古",
            value: 85,
          ,
          
            name: "陕西",
            value: 85,
          ,
          
            name: "吉林",
            value: 74,
          ,
          
            name: "福建",
            value: 20,
          ,
          
            name: "贵州",
            value: 74,
          ,
          
            name: "广东",
            value: 47,
          ,
          
            name: "青海",
            value: 45,
          ,
          
            name: "西藏",
            value: 41,
          ,
          
            name: "四川",
            value: 3,
          ,
          
            name: "宁夏",
            value: 7,
          ,
          
            name: "海南",
            value: 7,
          ,
          
            name: "台湾",
            value: 200,
          ,
          
            name: "香港",
            value: 2,
          ,
          
            name: "澳门",
            value: 5,
          
        ],
        //指定图表的配置项和数据
        option: 
          //标题组件
          title: 
            show: true,
            text: '全国各省份旅游景点(已评级)数量',
            subtext: '截至到2021年12月',
            left: "center",
            top: 16,
          ,
          //提示框组件
          tooltip: 
            show: true,
            //触发类型：数据项图形触发
            trigger: 'item',
            padding: 10,
            borderWidth: 1,
            borderColor: '#409eff',
            backgroundColor: 'rgba(255,255,255,0.4)',
            textStyle: 
              color: '#000000',
              fontSize: 12
            ,
            //提示框内容格式器
            formatter: (e) => 
              let data = e.data;
              //此处将各等级景点数量表示为0-10内的随机整数
              data.five = Math.random() * 10 | 0;
              data.four = Math.random() * 10 | 0;
              data.three = Math.random() * 10 | 0;
              data.two = Math.random() * 10 | 0;
              data.one = Math.random() * 10 | 0;
              //景点数量 - 五个等级之和
              data.number = data.five + data.four + data.three + data.two + data.one;
              //字符串模板
              let context = `
               <div>
                   <p style="line-height: 30px; font-weight: 600">$data.name</p>
                   <p><span>景点数量 : </span><span>$data.number处</span></p>
                   <p><span>5A级 : </span><span>$data.five处</span></p>
                   <p><span>4A级 : </span><span>$data.four处</span></p>
                   <p><span>3A级 : </span><span>$data.three处</span></p>
                   <p><span>2A级 : </span><span>$data.two处</span></p>
                   <p><span>1A级 : </span><span>$data.one处</span></p>
               </div>
            `;
              return context;
            
          ,
          //视觉映射组件(左下角)
          visualMap: 
            show: true,
            left: 26,
            bottom: 40,
            showLabel: true,
            // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
            calculable: false,
            // 拖拽时，是否实时更新
            realtime: true,
            align: 'left',
            //各颜色代表的区域
            pieces: [
              
                gte: 100,
                label: "> 100",
                color: "#FDB669"
              ,
              
                gte: 50,
                lt: 99,
                label: "50 - 99",
                color: "#FECA7B"
              ,
              
                gte: 30,
                lt: 49,
                label: "30 - 49",
                color: "#FEE191"
              ,
              
                gte: 10,
                lt: 29,
                label: "10 - 29",
                color: "#FFF0A8"
              ,
              
                lt: 9,
                label: '< 10',
                color: "#FFFFBF"
              
            ]
          ,
          //地理坐标系组件
          geo: 
            //使用 registerMap 注册的地图名称
            map: "china",
            //是否开启鼠标缩放和平移漫游
            roam: true,
            //当前视角缩放比例
            zoom: 1,
            //滚轮缩放的极限控制
            scaleLimit: 
              min: 1, //最小1倍
              max: 3 //最大3倍
            ,
            //地图组件离容器的距离
            top: 90,
            left: 'center',
            //图形上的文本标签
            label: 
              show: true,
              fontSize: "11"
            ,
            //地图区域的多边形 图形样式
            itemStyle: 
              borderColor: "rgba(0, 0, 0, 0.2)",
              shadowColor: 'rgba(0, 0, 0, 0.2)',
              shadowBlur: 10,
              // 高亮状态(鼠标移入后)的多边形和标签样式
              emphasis: 
                areaColor: "#f98333",
                shadowOffsetX: 2,
                shadowOffsetY: 2,
              ,
            
          ,
          series: [
            
              type: "map",
              roam: true,
              geoIndex: 0,
              data: '',
              label: 
                show: true,
              
            
          ]
        ,
      ;
    ,

    methods: 
      //定义方法 draw_map 绘制中国地图
      draw_map() 
        let myChart = this.$echarts.init(document.getElementById('map_cn'));
        //高亮轮播展示
        var hourIndex = 0;
        var carouselTime = null;
        //setInterval() 可在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除

        //使用setInterval方法后,必须使用箭头函数而不能写function,否则后续在该方法中无法调用data中的数据
        //carouselTime =setInterval(function() //错误写法

        carouselTime = setInterval(() => 
          //dispatchAction echarts的API：触发图表行为
          myChart.dispatchAction(
            type: "downplay", //downplay 取消高亮指定的数据图形
            seriesIndex: 0
          );
          myChart.dispatchAction(
            type: "highlight", //highLight 高亮指定的数据图形
            seriesIndex: 0, //系列index
            dataIndex: hourIndex //数据index
          );
          myChart.dispatchAction(
            type: "showTip", //showTip 显示提示框
            seriesIndex: 0,
            dataIndex: hourIndex
          );
          hourIndex++;
          //当循环到数组当中的最后一条数据后，重新进行循环
          if (hourIndex > this.dataList.length) 
            hourIndex = 0;
          
        , 3000);
        //鼠标移入组件时停止轮播
        myChart.on("mousemove", (e) => 
          clearInterval(carouselTime); //清除循环
          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", () => 
          carouselTime = setInterval(() => 
            myChart.dispatchAction(
              type: "downplay",
              seriesIndex: 0,

            );
            myChart.dispatchAction(
              type: "highlight",
              seriesIndex: 0,
              dataIndex: hourIndex
            );
            myChart.dispatchAction(
              type: "showTip",
              seriesIndex: 0,
              dataIndex: hourIndex
            );
            hourIndex++;
            if (hourIndex > this.dataList.length) 
              hourIndex = 0;
            
          , 3000);
        );

        //显示地图
        myChart.setOption(this.option);
      ,

      //修改echart配制
      setEchartOption() 
        this.option.series[0].data = this.dataList;
      ,
    ,
    created() 
      this.setEchartOption();
    ,
    mounted() 
      this.$nextTick(() => 
        this.draw_map();
      );
    
  ;
</script>

<style scoped lang="less">
  .echart 
    width: 100%;

    .content 
      width: 95.8%;
      height: 100px;
      margin: auto;

      #map_cn 
        width: 65%;
        height: 7rem;
        background-color: #eaeaea;
        margin: auto;
      
    
  
</style>

---

要点小结：

1.setTimeout() 与 setInterval() 的区别

        setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式，只执行一次；
        setInterval() 可在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除，多次调用。

2.使用 setInterval() 方法后，必须使用箭头函数形式而不能用 function

        如果使用 function，后续在该方法中调用 data 中的数据如 console.log(this.dataList.length);会报如下错误(其实就是找不到该数据)；

        这是因为 fun()、(function() ... )() 或回调函数中的 this 默认都指向 window，而 window 中是找不到你所要用的 data 中的数据的，我们应该改为箭头函数形式。