Vue+ECharts realizes the drawing of China map and automatic rotation and highlighting of provinces

<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' //This step must be introduced export default {
    data() {
      return {
        //Data in the map dataList: [
          {
            name: "South China Sea Islands",
            value: 25,
          },
          {
            name: "Beijing",
            value: 71,
          },
          {
            name: "Tianjin",
            value: 52,
          },
          {
            name: "Shanghai",
            value: 14,
          },
          {
            name: "Chongqing",
            value: 50,
          },
          {
            name: "Hebei",
            value: 20,
          },
          {
            name: "Henan",
            value: 30,
          },
          {
            name: "Yunnan",
            value: 55,
          },
          {
            name: "Liaoning",
            value: 50,
          },
          {
            name: "Heilongjiang",
            value: 40,
          },
          {
            name: "Hunan",
            value: 6,
          },
          {
            name: "Anhui",
            value: 96,
          },
          {
            name: "Shandong",
            value: 75,
          },
          {
            name: "Xinjiang",
            value: 45,
          },
          {
            name: "Jiangsu",
            value: 15,
          },
          {
            name: "Zhejiang",
            value: 8,
          },
          {
            name: "Jiangxi",
            value: 78,
          },
          {
            name: "Hubei",
            value: 78,
          },
          {
            name: "Guangxi",
            value: 36,
          },
          {
            name: "Gansu",
            value: 25,
          },
          {
            name: "Shanxi",
            value: 140,
          },
          {
            name: "Inner Mongolia",
            value: 85,
          },
          {
            name: "Shaanxi",
            value: 85,
          },
          {
            name: "Jilin",
            value: 74,
          },
          {
            name: "Fujian",
            value: 20,
          },
          {
            name: "Guizhou",
            value: 74,
          },
          {
            name: "Guangdong",
            value: 47,
          },
          {
            name: "Qinghai",
            value: 45,
          },
          {
            name: "Tibet",
            value: 41,
          },
          {
            name: "Sichuan",
            value: 3,
          },
          {
            name: "Ningxia",
            value: 7,
          },
          {
            name: "Hainan",
            value: 7,
          },
          {
            name: "Taiwan",
            value: 200,
          },
          {
            name: "Hong Kong",
            value: 2,
          },
          {
            name: "Macao",
            value: 5,
          }
        ],
        //Specify the chart's configuration items and data option: {
          //Title component title: {
            show: true,
            text: 'Number of tourist attractions (rated) in each province of the country',
            subtext: 'As of December 2021',
            left: "center",
            top: 16,
          },
          //Prompt box component tooltip: {
            show: true,
            //Trigger type: data item graphic trigger trigger: 'item',
            padding: 10,
            borderWidth: 1,
            borderColor: '#409eff',
            backgroundColor: 'rgba(255,255,255,0.4)',
            textStyle: {
              color: '#000000',
              fontSize: 12
            },
            //prompt box content formatter: (e) => {
              let data = e.data;
              //Here the number of attractions of each level is expressed as a random integer between 0 and 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;
              //Number of attractions - the sum of five levels data.number = data.five + data.four + data.three + data.two + data.one;
              // string template let context = `
               <div>
                   <p style="line-height: 30px; font-weight: 600">${data.name}</p>
                   <p><span>Number of attractions: </span><span>${data.number}</span></p>
                   <p><span>Level 5A: </span><span>${data.five}</span></p>
                   <p><span>4A level: </span><span>${data.four}</span></p>
                   <p><span>Level 3A: </span><span>${data.three}</span></p>
                   <p><span>Level 2A: </span><span>${data.two}</span></p>
                   <p><span>Level 1A: </span><span>${data.one}</span></p>
               </div>
            `;
              return context;
            }
          },
          //Visual mapping component (lower left corner)
          visualMap:
            show: true,
            left: 26,
            bottom: 40,
            showLabel: true,
            // Whether to display the drag handle (the handle can be dragged to adjust the selected range)
            calculable: false,
            //Whether to update in real time when dragging realtime: true,
            align: 'left',
            //The areas represented by each color 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"
              }
            ]
          },
          //Geographic coordinate system component geo: {
            //Map name registered using registerMap map: "china",
            //Whether to enable mouse zoom and pan roam: true,
            //Current perspective zoom ratio zoom: 1,
            //Roller zoom limit control scaleLimit: {
              min: 1, //minimum 1 times max: 3 //maximum 3 times},
            //The distance between the map component and the container top: 90,
            left: 'center',
            //Text label on the graphic label: {
              show: true,
              fontSize: "11"
            },
            //Polygonal graphic style of the map area itemStyle: {
              borderColor: "rgba(0, 0, 0, 0.2)",
              shadowColor: 'rgba(0, 0, 0, 0.2)',
              shadowBlur: 10,
              //Polygon and label styles in highlighted state (after mouse moves in) emphasis: {
                areaColor: "#f98333",
                shadowOffsetX: 2,
                shadowOffsetY: 2,
              },
            }
          },
          series: [
            {
              type: "map",
              roam: true,
              geoIndex: 0,
              data: '',
              label: {
                show: true,
              }
            }
          ]
        },
      };
    },
 
    methods: {
      //Define method draw_map to draw the map of China draw_map() {
        let myChart = this.$echarts.init(document.getElementById('map_cn'));
        //Highlight carousel display var hourIndex = 0;
        var carouselTime = null;
        //setInterval() can call a function or expression in a loop every specified number of milliseconds until clearInterval clears it. //After using the setInterval method, you must use an arrow function instead of writing function, otherwise the data in data cannot be called in the method later. //carouselTime = setInterval(function(){ //Wrong way to write carouselTime = setInterval(() => {
          //dispatchAction echarts API: trigger chart behavior myChart.dispatchAction({
            type: "downplay", //downplay cancels the highlighted data graph seriesIndex: 0
          });
          myChart.dispatchAction({
            type: "highlight", //highlight the specified data graphics seriesIndex: 0, //series index
            dataIndex: hourIndex //data index
          });
          myChart.dispatchAction({
            type: "showTip", //showTip shows the prompt box seriesIndex: 0,
            dataIndex: hourIndex
          });
          hourIndex++;
          //After looping to the last data in the array, loop again if (hourIndex > this.dataList.length) {
            hourIndex = 0;
          }
        }, 3000);
        //Stop the carousel when the mouse moves into the componentmyChart.on("mousemove", (e) => {
          clearInterval(carouselTime); //Clear loop myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
          });
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: e.dataIndex
          });
          myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: e.dataIndex
          });
        });
        //Resume the carousel when the mouse moves out of the componentmyChart.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);
        });
 
        //Display the map myChart.setOption(this.option);
      },
 
      //Modify echart configuration 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>