The echares map is implemented separately by provinces, and the tooltip user-defined prompt box, scattered annotation and scattered illumination are explained in detail

echares The map is realized by individual provinces , as well as tooltip Custom prompt box , Scatter dimension , The realization of scattered light is explained in detail

demand , Realize a provincial map , Prompt box custom style , The mouse is highlighted , Leave , Automatically rotate the information of each area . Mark scatter points in each area , With glow animation effect .

Various dependent installations , Configuration skip , When your project can run a simple demo, Please keep looking

1. Get the... Of the corresponding province json data , A previous article mentioned ;
2. There are simple UI The design , It looks more high-end

Let's look at the renderings first , No effect. The code is too monotonous .

echares screen

See here , Maybe this is the effect you need , If you don't want to defend your backhand, give it a compliment , This is the driving force for continuous renewal

Code implementation

<template>
  <div class="home">
       <div id="myChart8" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import yunnan from "@/assets/json/yunnan.json";
export default {
  data() {
    return {
    // Fake data , The real project can be obtained according to the interface 
      mapdata: [
        {
          name: " kunming ",
          num: "23617",
          money: "2121",
          zc: "24",
          bz: "95",
          value: 9,
        },
        {
          name: " Qujing ",
          num: "75675",
          money: "345",
          zc: "77",
          bz: "41",
          value: 9,
        },
        {
          name: " Yuxi ",
          num: "78978",
          money: "89",
          zc: "75",
          bz: "25",
          value: 9,
        },
        {
          name: " baoshan ",
          num: "78978",
          money: "789",
          zc: "75",
          bz: "35",
          value: 9,
        },
        {
          name: " Zhaotong ",
          num: "2323",
          money: "345",
          zc: "75",
          bz: "42",
          value: 9,
        },
        {
          name: " Lijiang ",
          num: "346565",
          money: "435",
          zc: "75",
          bz: "75",
          value: 9,
        },
        {
          name: " Pu 'er Tea ",
          num: "23545",
          money: "8768",
          zc: "75",
          bz: "75",
          value: 9,
        },
        {
          name: " lincang ",
          num: "6774",
          money: "566",
          zc: "42",
          bz: "45",
          value: 9,
        },
        {
          name: " Chuxiong ",
          num: "56565",
          money: "234",
          zc: "63",
          bz: "42",
          value: 9,
        },
        {
          name: " Red River ",
          num: "454",
          money: "5656",
          zc: "53",
          bz: "75",
          value: 9,
        },
        {
          name: " Wenshan ",
          num: "23423",
          money: "234",
          zc: "42",
          bz: "25",
          value: 9,
        },
        {
          name: " xishuangbanna ",
          num: "55234",
          money: "2121",
          zc: "42",
          bz: "95",
          value: 9,
        },
        {
          name: " Dali ",
          num: "234234",
          money: "345",
          zc: "35",
          bz: "95",
          value: 9,
        },
        {
          name: " dehong ",
          num: "3242",
          money: "234",
          zc: "75",
          bz: "75",
          value: 9,
        },
        {
          name: " nu ",
          num: "2131",
          money: "234",
          zc: "75",
          bz: "84",
          value: 9,
        },
        { name: " Diqing ", num: "434", money: "56", zc: "75", bz: "77", value: 9 },
      ],
      fhourTime8: {},
    };
  },
  mounted() {
    this.paintingMap();
  },
  methods: {
    convertData(data) {
      var geoCoordMap = {
         kunming : [102.923533, 25.652885],
         Qujing : [103.763917, 26.164766],
         Yuxi : [102.105698, 24.233083],
         baoshan : [98.876533, 24.817807],
         Zhaotong : [103.710287, 27.757374],
         Lijiang : [100.801628, 26.932054],
         Pu 'er Tea : [101.036958, 23.317995],
         lincang : [99.63896, 23.56149],
         Chuxiong : [101.5657, 25.578994],
         Red River : [103.044652, 23.094498],
         Wenshan : [104.2029, 23.690647],
         xishuangbanna : [100.799993, 22.325008],
         Dali : [100.064164, 25.911234],
         dehong : [98.18834, 24.327689],
         nu : [98.905835, 26.249883],
         Diqing : [99.834288, 28.107734],
      };
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            // Create an array of objects ,
            name: data[i].name,
            value: geoCoord.concat(data[i].value),
            num: data[i].num,
            money: data[i].money,
            zc: data[i].zc,
            bz: data[i].bz,
          });
        }
      }
      return res;
    },

    paintingMap() {
      let symbolImg = "image://" + require("@/assets/marks.png");
      //  Based on the prepared dom, initialization echarts example 
      let myChart = this.$echarts.init(document.getElementById("myChart8"));
      var that = this;
      window.addEventListener("resize", function () {
        that.myChart.resize();
      });
      echarts.registerMap("yunnan", yunnan);
      // Prevent repeated clicks 
      myChart.off("click");
      //  Charting 
      myChart.setOption({
        layoutCenter: ["50%", "50%"], // Location 
        layoutSize: "96%", // size 
        title: {
          // Here is the title 
          top: "1%",
          left: "center", // Title Center 
          textStyle: {
            // The style of the title 
            fontSize: 20,
            fontWeight: 600,
            color: "#222",
          },
        },

        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(0,0,0,0.4)", //  The background color of the floater in the prompt box .
          axisPointer: {
            //  Axis indicator configuration item .
            type: "shadow", // 'line'  Linear indicator   'shadow'  Shadow indicator   'none'  No indicator   'cross'  Crosshair indicator .
            axis: "auto", //  The axis of the indicator .
            snap: true, //  Whether the axis indicator is automatically adsorbed to the point 
          },
          textStyle: {
            //  The text style of the floater in the prompt box .
            color: "#41feff",
            fontStyle: "normal",
            fontWeight: "normal",
            fontFamily: "sans-serif",
            fontSize: 14,
          },
          padding: 0, //  Inner margin margin box ,
          formatter: function (params) {
            let showname = params;
            return `
                <div style='width:150px;height:180px ;'>
                      <p  style="width:100%;height:30px; background: linear-gradient(#2eaaab, #146797); text-indent: 10px;line-height: 30px;">${showname.data.name}</p>
                      <p  style="line-height:40px; text-indent: 10px;"> Number of subsidies :${showname.data.num} people </p>
                      <p style="line-height: 30px; text-indent: 10px;"> Amount of subsidy :${showname.data.money} Ten thousand yuan </p>
                      <p style="line-height: 30px; text-indent: 10px;" > Expenditure proportion :${showname.data.zc}%</p>
                      <p style="line-height: 40px; text-indent: 10px;"> Incidence of subsidies :${showname.data.bz}%</p> 
                  
              </div>
              `;
          },
          position: ["75%", "20%"],
        },

        geo: {
          show: true,
          roam: true, // Map zoom 、 translation 
          map: "yunnan",
          label: {
            normal: {
              show: true, // Show province labels 
              textStyle: { color: "#fff" }, // Province label font color 
            },
            emphasis: {
              // Corresponding mouse hover effect 
              show: true,
              textStyle: { color: "#70ccef" },
            },
          },
          itemStyle: {
            normal: {
              borderWidth: 2.5, // Area border width 
              borderColor: "#2595cf", // Area border color 
              areaColor: "#085891", // Area color 
              label: { show: true },
              shadowColor: "rgba(63, 218, 255, 0.5)",
              shadowBlur: 10,
            },

            emphasis: {
              borderWidth: 2, // Mouse over area , Area border width 
              borderColor: "#2595cf", // Mouse over area , Area border color 
              areaColor: "#053d65", // Mouse over area background color 
              label: { show: true },
            },
          },
        },

        series: [
          {
            show: true,
            type: "map",
            map: "yunnan",
            roam: true, // Whether to turn on mouse zoom and pan roaming 
            geoIndex: 0, //  An integral , Otherwise none tooltip  Indicates the effect 
            aspectScale: 0.95, //  Aspect ratio 
            data: that.convertData(that.mapdata),
          },
          {
            type: "effectScatter", // Breathing lights type  Must be effectScatter  Otherwise, there will be no breathing effect, just a static picture （ Studied for a long time ）
            coordinateSystem: "geo",
            data: that.convertData(that.mapdata),
            symbolSize: 15,
            symbol: symbolImg,
            label: {
              normal: {
                formatter: "",
                position: "right",
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: "",
              },
            },
          },
        ],
      });

      // The first... Is displayed by default 
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0,
      });
      // Display the first prompt box 
      myChart.dispatchAction({
        type: "showTip",
        seriesIndex: 0,
        dataIndex: 0,
      });
      var hourIndex = 0;
      this.fhourTime8 = setInterval(() => {
        // Cancel the default highlight 
        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.mapdata.length) {
          hourIndex = 0;
        }
      }, 5000);

      // Move the mouse in to stop the rotation 
      myChart.on("mousemove", (e) => {
        clearInterval(this.fhourTime8);
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
        });
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: e.dataIndex,
        });
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: e.dataIndex,
        });
      });

      // Remove the mouse to resume the rotation 
      myChart.on("mouseout", () => {
        this.fhourTime8 = 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.mapdata.length) {
            hourIndex = 0;
          }
        }, 3000);
      });
    },

    destroyed() {
      clearInterval(this.fhourTime8);
    },
  },
};
</script>

Be careful json File import path , The previous articles have been written , Paste it yourself

let symbolImg = "image://" + require("@/assets/marks.png");

Small icons , Add the desired icons as needed , Locally introduced writing

If there is a little bit like updating the power , The next article continues to be updated ,3D Map , And the adaptive skills of various sizes of large screen , Let's take a picture first 3D Look at the map