vue用 echarts 显示区域地图 并用不同颜色显示每个区域

认定了一个女孩 就要好好的珍惜对待她，人生不容辜负，你必须要更加努力 。加油 骚年。

用 echarts 做动态中国区域地图 或者全国地图 效果如下

做这些 必须先引入echarts 怎么引入的 自己去echarts 官网看 ，这里不解释了

说明下 这个区域地图 需要从阿里云可视化数据请求过来

http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=33.521903996156105&lng=104.29849999999999&zoom=4

所以你要从后端拿到当前的位置，或者 你自己定位 这个根据具体业务 然后拿到省的code 去阿里云请求当前省的的区域 下面是请求地址

https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=100000_full

拿到数据后 接下来 就是写我们业务了

// 这是放图表的结构
   <div class="ditu_box_box_cont" ref="mapDataAll"></div>
   
   // 在methods里面写下面内容
	// 拿到地图数据
    mapDataFun() {
      console.log(resfullData, "resfullData");
      
      // 这个this.mapJson 就是数据 我是直接下载本地了 这个就应该是你从后端请求回来的某个区域数据 下面进行处理
      this.mapData = this.mapJson.features.map((item) => {
        return {
          name: item.properties.name,
          value: Math.ceil(Math.random() * 50), // 这个返回值随机也行 根据自己的业务需求
          level: item.properties.level,
          areaCode: item.properties.adcode,
        };
      });

      console.log(this.mapData, " this.mapData");

      this.renderingView();  // 这个 是渲染地图的
    },
 renderingView() {
      // 渲染地图
      var myChartMap = echarts.init(this.$refs.mapDataAll);
      echarts.registerMap("cityMap", this.mapJson, {}); //加载自定义边界数据地图

      var mapChangeData = {
        tooltip: {
          trigger: "item",
          // 鼠标移入的时候显示该地区 和一些值 自己调成 自己想要的就行
          formatter: (p) => {
            console.log(p);
            let val = p.value;
            if (window.isNaN(val)) {
              val = 0;
            }
            let txtCon =
              "<div style='text-align:center'> 地区：" +
              p.name +
              "<br />value值：" +
              p.data.value +
              "<br />code：" +
              p.data.areaCode +
              "</div>";
            return txtCon;
          },
        },
          
        dataRange: {
          orient: "horizontal",
          x: "center",
          itemWidth: 20, // 值域图形宽度，线性渐变水平布局宽度为该值 * 10
          itemHeight: 10, // 值域图形高度，线性渐变垂直布局高度为该值 * 10

          itemGap: 10,
          padding: 10,

          splitList: [
            { start: -1000, end: 0, label: "缺失值", color: "#E0E0E0" },
            { start: 35, label: ">35", color: "#2066AC" },
            { start: 25, end: 35, label: "25-35", color: "#5996B7" },
            { start: 15, end: 25, label: "15-25", color: "#92C5DE " },
            { start: 5, end: 15, label: "5-15", color: "#FCDBC7" },
            { start: 0, end: 5, label: "<5", color: "#F3A482" },
          ],
          textStyle: {
            color: "#3899FF", // 值域文字颜色
          },
          selectedMode: false,
          color: ["#E0022B", "#E09107", "#A3E00B"],
        },
        series: [
          {
            name: "地图",
            type: "map",
            mapType: "cityMap",
            aspectScale: 0.85, //地图长度比
            color: ["#5F85F6", "#F9C96B"],

            itemStyle: {
              normal: {
                show: true,
              },
              emphasis: {
                // 鼠标移入时区域的样式
                areaColor: "#FFBD5A", // 鼠标移入的背景色
                borderWidth: 0,
                color: "green",
              },
            },

            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#000000", //省市区字体颜色
                },
              },
              textStyle: {
                color: "rgba(255,255,255,1)",
                fontSize: 30,
                opacity: 1,
                backgroundColor: "rgba(0,0,0,0.2)",
              },
            },
            data: this.mapData, // 上面添加了 name,value,level,cityCode的数据
          },
        ],
      };
      myChartMap.setOption(mapChangeData);
    },

至此结束
如有不足之处请指出 或直接联系邮箱 yuyong1663519276@163.com 谢谢