Echarts省份地图上显示柱状图+指定区域高亮显示（地图柱状图）

先引入echarts和在echats社区下载对应地图省份的JSON数据，在调接口拿数据的时候如果出现柱状图没出现的问题，要确保后端返回的信息和center和center2中的name名字完全一致，因为后面根据name遍历数组，有其他问题可以私信

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

<script>
import baoji from "@/assets/json/610300.json";

export default {
  data() {
    return {
      datasss : [
        // { name: "渭滨区", value: 0 },
        // { name: "金台区", value: 42 },
        // { name: "陈仓区", value: 0 },
        // { name: "凤翔区", value: 0 },
        // { name: "岐山县", value: 0 },
        // { name: "扶风县", value: 0 },
        // { name: "眉县", value: 0 },
        // { name: "陇县", value: 0 },
        // { name: "千阳县", value: 0 },
        // { name: "麟游县", value: 0 },
        // { name: "凤县", value: 0 },
        // { name: "太白县", value: 0 },
        ],
        areaMap:'',
    };
  },
  mounted() {
    this.$nextTick(()=>{
      // this.init();
    this.getMapList()

    })
  },
 
  methods: {
    init() {
      const that = this;
     
      var chartDom = document.getElementById("baojimap");
      var myChart = this.$echarts.init(chartDom);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      myChart.off("click");

      this.$echarts.registerMap("js", baoji);
      this.$echarts.registerMap("js2", baoji);
      // console.log(baoji);
      var aaa = []
      function sss(baoji){
        // console.log(baoji);
         aaa = baoji.features.map((item)=>{
          return {
            value: (Math.random() * 1000).toFixed(2),
            name:item.properties.name
          }
        });
          // console.log(aaa);
      }
      sss(baoji)
      var option;

      // 柱状图 图中的位置
      var center = {
        渭滨区: [107.144467, 34.271008],
        金台区: [107.080003, 34.425192],
        陈仓区: [107.383645, 34.352747],
        凤翔区: [107.400577, 34.581668],
        岐山县: [107.694464, 34.44296],
        扶风县: [107.929419, 34.375497],
        眉县: [107.799971, 34.142137],
        陇县: [106.857066, 34.893262],
        千阳县: [107.174987, 34.742584],
        麟游县: [107.696608, 34.777714],
        凤县: [106.758122, 33.998464],
        太白县: [107.419533, 33.960015],
      };
      // 图中 省份字的位置
      var center2 = {
        渭滨区: [107.144467, 34.271008],
        金台区: [107.080003, 34.425192],
        陈仓区: [107.383645, 34.352747],
        凤翔区: [107.400577, 34.581668],
        岐山县: [107.694464, 34.44296],
        扶风县: [107.929419, 34.375497],
        眉县: [107.799971, 34.142137],
        陇县: [106.857066, 34.893262],
        千阳县: [107.174987, 34.742584],
        麟游县: [107.696608, 34.777714],
        凤县: [106.758122, 33.998464],
        太白县: [107.419533, 33.960015],
      };
      // 数据
      var dataw = that.datasss;
      console.log(dataw);
      var lineData = dataw.map((item) => {
        // debugger
        console.log(item);
        return {
          coords: [
            center[item.name],
            [center[item.name][0], center[item.name][1] + item.value * 4 * 0.001],
          ],
        };
      });
      var scatterData = dataw.map((item) => {
        return [
          center[item.name][0],
          center[item.name][1] + item.value * 4 * 0.001,
        ];
      });
      var scatterData2 = dataw.map((item) => {
        return center[item.name];
      });
      var scatterData3 = dataw.map((item) => {
        return center2[item.name].concat(item.name);
      });
        console.log(lineData,scatterData,scatterData2,scatterData3);
      option = {
        backgroundColor: "rgba(0,0,0,0)",
        tooltip: {
                trigger: 'item',
                show: true,
                enterable: true,
                textStyle:{
                    fontSize:20,
                    color: '#fff'
                },
                backgroundColor: 'rgba(0,0,0,0.5)',
                // backgroundColor: 'rgba(0,2,89,0.8)',
                // formatter: '{b}'
                formatter: function (item) {
                  var aaaaa = dataw
                return `商户数${aaaaa[item.dataIndex].value}`;
              },
            },
        // 地图图层样式
        geo: [
          {
            map: "js",
            aspectScale: 0.9,
            roam: false, //是否允许缩放
            // roam:true,
            //zoom: 1.1, //默认显示级别
            layoutSize: "95%",
            layoutCenter: ["50%", "50%"],
            itemStyle: {
              areaColor: "transparent",
              borderColor: "#37C1FD",
              borderWidth: 2,
            },
            emphasis: {
              itemStyle: {
                areaColor: "#72b2ff",
              },
              label: {
                show: 0,
                color: "#fff",
              },
            },

            zlevel: 3,
            regions: [ // 区域配置
            {
              name: '金台区', //区块名称
              itemStyle: {
                normal: {
                  areaColor: 'rgb(247, 192, 35)' // 区域颜色
                }
              }
            },
             ]
          },
          {
            map: "js2",
            aspectScale: 0.9,
            roam: false, //是否允许缩放
            //zoom: 1.1, //默认显示级别
            layoutSize: "95%",
            layoutCenter: ["50%", "50%"],
            itemStyle: {
              areaColor: {
                type: "radial",
                x: 0.7,
                y: 0.5,
                r: 0.4,
                colorStops: [
                  {
                    offset: 0,
                     //color: "#72b2ff", // 0% 处的颜色
                    // color:"rgba(8, 79, 207)"
                    color:"rgba(1, 32, 137,0.5)"

                  },
                  {
                    offset: 1,
                    color: "rgba(1, 32, 137,0.5)", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
              borderColor: "#37C1FD",
              borderWidth: 2,
            },
            zlevel: 2,
            silent: true,
          },
          {
            map: "js2",
            aspectScale: 0.9,
            roam: false, //是否允许缩放
            //zoom: 1.1, //默认显示级别
            layoutSize: "95%",
            layoutCenter: ["50%", "52%"],
            itemStyle: {
              areaColor: "#005DDC",
              borderColor: "#329BF5",
              borderWidth: 1,
            },
            zlevel: 1,
            silent: true,
          },
        ],
        series: [
          // 画柱状图
          {
            type: "lines",
            zlevel: 5,
            effect: {
              show: false,
              period: 4, //箭头指向速度，值越小速度越快
              trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: "arrow", //箭头图标
              symbolSize: 5, //图标大小
            },
            lineStyle: {
              width: 15, //尾迹线条宽度
              color: 'rgb(22,255,255, .6)',
              opacity: 1, //尾迹线条透明度
              curveness: 0, //尾迹线条曲直度
            },
            label: {
              show: 0,
              position: "end",
              formatter: "245",
            },
            silent: true,
            data: lineData,
          },
          // 柱形数量显示
          {
            type: "scatter",
            coordinateSystem: "geo",
            geoIndex: 0,
            zlevel: 5,
            label: {
              show: !0,
              position: "left",
              formatter: (params) => dataw[params.dataIndex].value,
              padding: [4, 8],
              backgroundColor: "#003F5E",
              borderRadius: 5,
              borderColor: "#67F0EF",
              borderWidth: 1,
              color: "#67F0EF",
            },
            symbol: "circle",
            symbolSize: [15, 8],
            itemStyle: {
              color: 'rgb(22,255,255, .6)',
              opacity: 1,
            },
            silent: true,
            data: scatterData,
          },
          // 图中圆点设置
          {
            type: "scatter",
            coordinateSystem: "geo",
            geoIndex: 0,
            zlevel: 5,
            symbol: "circle",
            symbolSize: [15, 8],
            itemStyle: {
              color: 'rgb(22,255,255, .6)',
              opacity: 1,
              shadowColor: "#000",
              shadowBlur: 5,
              shadowOffsetY: 2,
            },
            silent: true,
            data: scatterData2,
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            geoIndex: 0,
            symbol: "circle",
            symbolSize: 4,
            showEffectOn: "render",
            rippleEffect: {
              brushType: "fill",
              scale: 10,
            },
            hoverAnimation: true,
            label: {
              formatter: (p) => p.data[2],
              position: "right",
              color: "#fff",
              fontSize: 14,
              distance: 10,
              show: !0,
            },
            itemStyle: {
              color: 'rgb(22,255,255, .6)',
            },
            zlevel: 6,
            data: scatterData3,
          },
        ],

      };

      myChart.setOption(option);
// 地图中高亮的省份 ，this.areaMap为地区名
      myChart.on("globalout",()=>{
        setTimeout(()=>{
          showTips(this.areaMap)
        },1000)
      })
       function showTips(name) {
        aaa.forEach((item,i)=>{
           if (item.name.includes(name)) {
            myChart.dispatchAction({
                type: 'showTip',
                seriesIndex: 0,
                dataIndex: i
            });
            myChart.dispatchAction({
                type: 'mapSelect',
                seriesIndex: 0,
                dataIndex: i
            });
        }
        });
       }
    },
//接口
    async getMapList(){
      await this.$axios.post("/api/v2/index/HomeMapData").then((res)=>{
        if(res.data.code === 200){
          // console.log(res);
          this.datasss = res.data.data.data
          this.areaMap = res.data.data.areaName
// 在拿到数据后再调用echarts，防止echarts在没拿到数据之前渲染
          this.init();  
          console.log(this.datasss);
        }
      })
    }
  },
};
</script>
<style>
.baojimap {
  height: 100%;
  width: 100%;
}
</style>