echarts map地图整体渐变色背景，选中地图后样式修改

echarts配置里颜色只能修改单个地图块的颜色，改变整体的有两个做法：
1.获取每个地图块方向和渐变色的值，每个单独写。
2.写两个地图，下面一层用不包含子区域的地图，上层的地图用透明色。
我用的第二种方法，具体如下：
先准备杭州市整体区域的json文件，和一个包含杭州各个区的json文件
地图json文件下载传送门

先引入需要的文件

import geoJson from "./hangzhou.json";
import hzJson from "./hz.json";
var echarts = require("echarts/lib/echarts.js");复制

methods方法里

  if (this.myChart) {
        this.myChart.dispose(document.getElementById("hzChart"));
      }
      this.myChart =  echarts.init(document.getElementById("hzChart"));
      this.mapData = mapData; // 各个区要展示的数据
      echarts.registerMap("hangzhou", geoJson);
      echarts.registerMap("hz", hzJson);
      const option = {
        tooltip: { // 悬浮展示数据的框框
          trigger: "item",
          backgroundColor: "rgba(49, 97, 171, 0.75)",
          borderColor: "rgba(127, 179, 255, 0.75)",
          borderWeight: 3,
          padding: 15,
          formatter: (params) => {
            const css =
              "margin-bottom:8px;color: #FFF600;min-width:80px;font-size: 21px;";
            const text = `
    <p style="text-align: center; ${css}">${params.name}</p>
    <p style="${css}">xx数：${params?.data?.Num || 0}</p>
    <p style="${css}">xx数：${params?.data?.HanNum || 0}</p>
            `;
            return text;
          },
        },
        geo: [
          // 底层 不包含子区域的地图，除了渐变色应该也能引入图片背景，还没有试过
          {
            map: "hz",
            zoom: 1.1,
            roam: false,
            itemStyle: {
              normal: {
                areaColor: {
                  //地图色
                  type: "linear",
                  x: 0,
                  y: 1,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 1,
                      color: "RGBA(12, 93, 176, 0.5)", // 0% 处的颜色
                    },
                    {
                      offset: 0,
                      color: "RGBA(38, 255, 228, 0.4)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
                shadowColor: "rgb(58,115,192)",
                shadowOffsetX: 2,
                shadowOffsetY: 5,
                borderColor: "RGBA(146, 255, 246, 0)",
                borderWidth: 1,
              },
            },
          },
        ],
        series: [
          //上面第二层主要操作的地图
          {
            type: "map",
            roam: false,
            mapType: "hangzhou", // 自定义扩展图表类型
            map: "hangzhou", // 使用
            zoom: 1.1,
            label: {
              normal: {
                show: true,
                textStyle: {
                  // 地图上的地名
                  color: "rgba(126, 233, 254, 1)", // 字体颜色
                  fontSize: 16,
                  fontWeight: "700",
                  fontFamily: "FZZhengHeiS-B-GB",
                },
              },
            },
            select: {
              // 点击后鼠标离开样式
              label: {
                color: "rgba(255, 246, 0, 1)", // 子区域字体颜色
              },
              itemStyle: {
                areaColor: "RGBA(18, 105, 167, 0.7)", // 上层地图面的颜色
              },
            },
            itemStyle: { 默认的样式
              normal: {
                areaColor: "RGBA(20, 103, 183, 0)", // 上层地图面的颜色 透明度0不显示
                borderColor: "RGBA(146, 255, 246, 0.3)", // 上层地图线条的颜色
                borderWidth: 1,
                shadowBlur: 0,
                color: "rgba(255, 246, 0, 1)", // 字体颜色
              },
              emphasis: {
                areaColor: "RGBA(18, 105, 167, 0.7)", // 鼠标悬浮地图面的颜色
                label: {
                  show: true,
                  color: "rgba(255, 246, 0, 1)", // 字体颜色
                },
              },
            },
            data: mapData,
          },
        ],
      };
      this.myChart.setOption(option);复制