echarts实现背景图自定义

echarts注释部分为3D效果。此效果包含自定义散点和背景图：

<template>
  <div id="map-container">
    <div class="echarts">
      <div id="map" :style="{width:width+'px',height:height+'px',position: 'absolute'}"></div>
      <img :src="require(`@/assets/mapBg.png`)" alt="" style="width: 12.37rem;height: 8.37rem;z-index: -1;transform: scale(1, 0.91);" ref="img">
    </div>
    <!-- 弹窗 -->
    <div class="tanchuang" v-if="isShow">
      <div class="title" @click="close"></div>
      <div class="city">
        <div class="citybg"></div>
        <p>{{ cityName }}</p>
      </div>

      <div style="display: flex; align-items: center;justify-content: space-around;" class="total">
        <div>总数</div>
        <div style="color: #fff000;font-size: .28rem">68个</div>
        <div style="color: #fff000;font-size: .28rem">9,895,234</div>
        <img :src="require('@/assets/images/num.png')" style="position: absolute;width: 90%;z-index: -1">
      </div>

      <div class="weighing">
        <div class="per-tablehearder">
          <div></div>
          <div>数量</div>
          <div>计划投资</div>
          <div>累计完成投资</div>
          <div>累计完成回款额</div>
        </div>
        <div class="tbbody-parent">
          <div
              v-for="(item, index) in dataList"
              :key="index"
              :class="{ 'per-tablebody': true, oddclass: true }"
          >
            <div>{{ item.name || '-' }}</div>
            <div>{{ item.num || '-' }}</div>
            <div>{{ item.wan || '-' }}</div>
            <div>{{ item.hui ? item.hui.toFixed(2) : '0' }}</div>
            <div>{{ item.touzi ? item.touzi.toFixed(2) : '0' }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "china2",
  data() {
    return {
      img1: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACCklEQVQ4jXWTz2sTURDHP7M/kppgpdgaU/AQKBZBVPwn9CIePHjw5B/QmwhK0UtvioeKoBQiOfSkFwXB4E2sPy4tJEhBDdQiTUol0mxi0032jWTddGNaZ3kw+958Z+b75vuEmc4hYpM9bwKbUWueilkD7g3E6ICPtQ98XrJcc26gzhZV6wqTzm0m5StJrgJHojiJQTOdVOidkhQnrbt8kUv8YhyHJhYafS5JHQH9TsUUgEf9boRCN8dZ+zpL3KJLC5ff/1AZbLyX0GIML2iyqTdp81p4ryuscg6hin0AcDiJQUliY5tjLJm8cF8vMsYiJ4AG/n9T9K/uMMKEpnkWVGhy2WZ6tspPsVA5zXTI1g15JwA3Wg6E/1kcctqmaLapMQuUnSj9AhXOsCFTXCBDFosGJuxGI3BGXYQW79Tjm74C3vTHKHSNh8NDbHIUSVPCcDQa2nFgqhcpXdbJsmw6wHx/irEO2sEybeZwCPiBywsEC2EcYQ2LOsIHU2M3bL0xLKS/V+cHeXb0JU3q9Op8xA5n46vPJ7PNhj4G3g5irIGZC0Y7JHhCStN4NEnSxWKHGjYVUwMKQxrZoxBvNoLP2DKHrWkC3aWlHcrGw+cO4A3HD76F+GAreM6IFEFcypqirnlgZbj6MIXYAvVJ6gNGNUHJlICFfUUiP9LBvgPYDNbJyFMMq6GADzLgD24twB80HuJeAAAAAElFTkSuQmCC',
      img2: 'image://data:image/png;base64,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',
      mapName: 'china',
      data: [
        {name: '北京', value: 5},
        {name: '天津', value: 14},
        {name: '河北', value: 157},
        {name: '山西', value: 110},
        {name: '内蒙古', value: 40},
        {name: '辽宁', value: 40},
        {name: '吉林', value: 40},
        {name: '黑龙江', value: 60},
        {name: '上海', value: 10},
        {name: '江苏', value: 60},
        {name: '浙江', value: 50},
        {name: '安徽', value: 151},
        {name: '福建', value: 60},
        {name: '江西', value: 74},
        {name: '山东', value: 200},
        {name: '河南', value: 100},
        {name: '湖北', value: 40},
        {name: '湖南', value: 50},
        {name: '重庆', value: 40},
        {name: '四川', value: 120},
        {name: '贵州', value: 135},
        {name: '云南', value: 90},
        {name: '西藏', value: 25},
        {name: '陕西', value: 100},
        {name: '甘肃', value: 60},
        {name: '青海', value: 20},
        {name: '宁夏', value: 110},
        {name: '新疆', value: 32},
        {name: '广东', value: 10},
        {name: '广西', value: 100},
        {name: '海南', value: 40},
      ],
      toolTipData: [
        {
          name: '湖南',
          value: 5,
        },
        {
          name: '安徽',
          value: 3,
        },
        {
          name: '山东',
          value: 80,
        },
        {
          name: '四川',
          value: 35,
        },
        {
          name: '云南',
          value: 27,
        },
        {
          name: '黑龙江',
          value: 13,
        },
        {
          name: '甘肃',
          value: 42,
        },
        {
          name: '北京',
          value: 5,
        },
        {
          name: '天津',
          value: 5,
        },
        {
          name: '河北',
          value: 5,
        },
        {
          name: '陕西',
          value: 5,
        },
        {
          name: '山西',
          value: 5,
        },
        {
          name: '河南',
          value: 5,
        },
        {
          name: '广东',
          value: 5,
        },
        {
          name: '广西',
          value: 5,
        },
        {
          name: '海南',
          value: 5,
        },
        {
          name: '台湾',
          value: 5,
        },
        {
          name: '西藏',
          value: 5,
        },
        {
          name: '内蒙古',
          value: 5,
        },
        {
          name: '新疆',
          value: 5,
        },
        {
          name: '青海',
          value: 5,
        },
        {
          name: '宁夏',
          value: 5,
        },
        {
          name: '辽宁',
          value: 5,
        },
        {
          name: '吉林',
          value: 5,
        },
        {
          name: '浙江',
          value: 5,
        },
        {
          name: '江西',
          value: 5,
        },
        {
          name: '福建',
          value: 5,
        },
        {
          name: '湖北',
          value: 5,
        },
        {
          name: '重庆',
          value: 5,
        },
        {
          name: '贵州',
          value: 5,
        },
        {
          name: '江苏',
          value: 5,
        },
        {
          name: '上海',
          value: 5,
        }
      ],
      geoCoordMap: {
        '黑龙江': [127.9688, 45.368],
        '内蒙古': [110.3467, 41.4899],
        "吉林": [125.8154, 44.2584],
        '北京市': [116.4551, 40.2539],
        "辽宁": [123.1238, 42.1216],
        "河北": [114.4995, 38.1006],
        "天津": [117.4219, 39.4189],
        "山西": [112.3352, 37.9413],
        "陕西": [109.1162, 34.2004],
        "甘肃": [103.5901, 36.3043],
        "宁夏": [106.3586, 38.1775],
        "青海": [101.4038, 36.8207],
        "新疆": [87.611053, 43.828171],
        "西藏": [91.117212, 29.646922],
        "四川": [103.9526, 30.7617],
        "重庆": [108.384366, 30.439702],
        "山东": [117.1582, 36.8701],
        "河南": [113.4668, 34.6234],
        "江苏": [118.8062, 31.9208],
        "安徽": [117.29, 32.0581],
        "湖北": [114.3896, 30.6628],
        "浙江": [119.5313, 29.8773],
        "福建": [119.4543, 25.9222],
        "江西": [116.0046, 28.6633],
        "湖南": [113.0823, 28.2568],
        "贵州": [106.6992, 26.7682],
        "云南": [102.9199, 25.4663],
        "广东": [113.12244, 23.009505],
        "广西": [108.479, 23.1152],
        "海南": [110.3893, 19.8516],
        "台湾": [120.702967, 24.123621],
        '上海': [121.4648, 31.2891]
      },
      option: {},
      isShow: false,
      cityName: '',
      dataList: [
        {
          name: '中国电建',
          num: 10,
          wan: 100,
          hui: 10,
          touzi: 320
        },
        {
          name: '中国电建',
          num: 10,
          wan: 100,
          hui: 10,
          touzi: 320
        },
        {
          name: '中国电建',
          num: 10,
          wan: 100,
          hui: 10,
          touzi: 320
        },{
          name: '中国电建',
          num: 10,
          wan: 100,
          hui: 10,
          touzi: 320
        },{
          name: '中国电建',
          num: 10,
          wan: 100,
          hui: 10,
          touzi: 320
        },{
          name: '中国电建',
          num: 10,
          wan: 100,
          hui: 10,
          touzi: 320
        },{
          name: '中国电建',
          num: 10,
          wan: 100,
          hui: 10,
          touzi: 320
        },{
          name: '中国电建',
          num: 10,
          wan: 100,
          hui: 10,
          touzi: 320
        },{
          name: '中国电建',
          num: 10,
          wan: 100,
          hui: 10,
          touzi: 320
        },{
          name: '中国电建',
          num: 10,
          wan: 100,
          hui: 10,
          touzi: 320
        },{
          name: '中国电建',
          num: 10,
          wan: 100,
          hui: 10,
          touzi: 320
        },{
          name: '中国电建',
          num: 10,
          wan: 100,
          hui: 10,
          touzi: 320
        },{
          name: '中国电建',
          num: 10,
          wan: 100,
          hui: 10,
          touzi: 320
        },{
          name: '中国电建',
          num: 10,
          wan: 100,
          hui: 10,
          touzi: 320
        },{
          name: '中国电建',
          num: 10,
          wan: 100,
          hui: 10,
          touzi: 320
        },{
          name: '中国电建',
          num: 10,
          wan: 100,
          hui: 10,
          touzi: 320
        },
      ],
      height: 0,
      width: 0,
    }
  },
  mounted() {
    this.drawEcharts()
  },
  methods: {
    drawEcharts() {
      this.width = this.$refs.img.offsetWidth
      this.height = this.$refs.img.offsetHeight
      console.log(this.width,this.height)
      this.$nextTick(() => {
        this.initEcharts()
      })
    },
    // 初次加载绘制地图
    initEcharts() {
      let myChart = echarts.init(document.getElementById('map'));
      myChart.showLoading();
      let mapFeatures = echarts.getMap(this.mapName).geoJson.features;
      myChart.hideLoading();

      mapFeatures.forEach((v) => {
        // 地区名称
        let name = v.properties.name;
        // 地区经纬度
        this.geoCoordMap[name] = v.properties.cp;
      });

      let convertData = (data) => {
        let res = [];
        for (let i = 0; i < data.length; i++) {
          let geoCoord = this.geoCoordMap[data[i].name];
          if (geoCoord) {
            res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
            });
          }
        }
        return res;
      };

      this.option = {
        backgroundColor: "transparent",
        title: {
          show: false,
          text: "中国地图-仿",
          x: 'center',
          top: "10",
          textStyle: {
            color: "#fff",
            fontFamily: "等线",
            fontSize: 18,
          },
        },
        tooltip: {
          trigger: 'none',
          formatter: (params) => {
            if (typeof params.value[2] == 'undefined') {
              let toolTiphtml = '';
              for (let i = 0; i < this.toolTipData.length; i++) {
                if (params.name === this.toolTipData[i].name) {
                  toolTiphtml += this.toolTipData[i].name + "：" + this.toolTipData[i].value;
                }
              }
              console.log(toolTiphtml);
              // console.log(convertData(data))
              return toolTiphtml;
            } else {
              let toolTiphtml = '';
              for (let i = 0; i < this.toolTipData.length; i++) {
                if (params.name === this.toolTipData[i].name) {
                  toolTiphtml += this.toolTipData[i].name + "：" + this.toolTipData[i].value;
                }
              }
              console.log(toolTiphtml);

              return toolTiphtml;
            }
          },
          backgroundColor: "#fff",
          borderColor: "#333",
          padding: [5, 10],
          textStyle: {
            color: "#333",
            fontSize: "16"
          }
        },
        geo: [
          {
            layoutCenter: ['50%', '48%'],//位置
            layoutSize: '180%',//大小
            zlevel: 2,
            show: true,
            map: this.mapName,
            roam: false,
            zoom: 0.82,
            aspectScale: 1,
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: '#fff'
                }
              },
              emphasis: {
                show: false,
                textStyle: {
                  color: 'transparent'
                }
              }
            },
            itemStyle: {
              normal: {
                areaColor: 'transparent',
                borderColor: "#cdeefa",
                borderWidth: 4,
                shadowColor: "rgba(63,174,209,0.6)",
                // shadowOffsetY: 10,
                shadowBlur: 20,
              },
              emphasis: {
                borderColor: '#f1870f', // 边框颜色变成黄色
                areaColor: 'rgba(241,135,15,0.2)',
                borderWidth: 3,
              }
            }
          },
          /*{
            type: "map",
            map: this.mapName,
            zlevel: -1,
            aspectScale: 1,
            zoom: 0.65,
            layoutCenter: ["50%", "47%"],
            layoutSize: "180%",
            roam: false,
            silent: true,
            itemStyle: {
              normal: {
                borderWidth: 1,
                // borderColor:"rgba(17, 149, 216,0.6)",
                borderColor: "rgba(58,149,253,0.8)",
                shadowColor: "rgba(172, 122, 255,0.5)",
                shadowOffsetY: 5,
                shadowBlur: 15,
                areaColor: "rgba(5,21,35,.1)",
              },
            },
          },
          {
            type: "map",
            map: this.mapName,
            zlevel: -2,
            aspectScale: 1,
            zoom: 0.65,
            layoutCenter: ["50%", "48%"],
            layoutSize: "180%",
            roam: false,
            silent: true,
            itemStyle: {
              normal: {
                borderWidth: 1,
                // borderColor: "rgba(57, 132, 188,0.4)",
                borderColor: "rgba(58,149,253,0.6)",
                shadowColor: "rgba(65, 214, 255,1)",
                shadowOffsetY: 5,
                shadowBlur: 15,
                areaColor: "transpercent",
              },
            },
          },
          {
            type: "map",
            map: this.mapName,
            zlevel: -3,
            aspectScale: 1,
            zoom: 0.65,
            layoutCenter: ["50%", "49%"],
            layoutSize: "180%",
            roam: false,
            silent: true,
            itemStyle: {
              normal: {
                borderWidth: 1,
                // borderColor: "rgba(11, 43, 97,0.8)",
                borderColor: "rgba(58,149,253,0.4)",
                shadowColor: "rgba(58,149,253,1)",
                shadowOffsetY: 15,
                shadowBlur: 10,
                areaColor: "transpercent",
              },
            },
          },
          {
            type: "map",
            map: this.mapName,
            zlevel: -4,
            aspectScale: 1,
            zoom: 0.65,
            layoutCenter: ["50%", "50%"],
            layoutSize: "180%",
            roam: false,
            silent: true,
            itemStyle: {
              normal: {
                borderWidth: 5,
                // borderColor: "rgba(11, 43, 97,0.8)",
                borderColor: "rgba(5,9,57,0.8)",
                shadowColor: "rgba(29, 111, 165,0.8)",
                shadowOffsetY: 15,
                shadowBlur: 10,
                areaColor: "rgba(5,21,35,0.1)",
              },
            },
          },*/
        ],
        series: [
          {
            type: 'map',
            map: this.mapName,
            geoIndex: 0,
            aspectScale: 1,//长宽比
            zoom: 0.65,
            showLegendSymbol: true,
            roam: true,
            selectedMode: 'none',
            label: {
              normal: {
                show: true,
                textStyle: {
                  color: "#fff",
                  fontSize: "120%"
                },
              },
              emphasis: {
                // show: false,
              },
            },
            itemStyle: {
              normal: {
                areaColor: {
                  type: "linear",
                  x: 1200,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [{
                    offset: 0,
                    color: "rgba(3,27,78,0.75)", // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: "rgba(58,149,253,0.75)", // 50% 处的颜色
                  },],
                  global: true, // 缺省为 false
                },
                borderColor: "#fff",
                borderWidth: 0.2,
              },
            },
            layoutCenter: ["50%", "50%"],
            layoutSize: "180%",
            animation: false,
            markPoint: {
              symbol: "none"
            },
            data: this.data,
          },
          //三棱锥
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            geoIndex: 0,
            zlevel: 5,
            label: {
              normal: {
                show: false,
                formatter: (params) => {
                  let name = params.data[2].name
                  let value = params.data[2].value
                  // var text = `{tline|项目个数} : {fline|${value}}`
                  return `{tline|${name}} : {fline|${value}}个`;
                },
                color: '#fff',
                rich: {
                  fline: {
                    // padding: [0, 25],
                    color: '#fff',
                    fontSize: 14,
                    fontWeight: 600
                  },
                  tline: {
                    // padding: [0, 27],
                    color: '#ABF8FF',
                    fontSize: 12,
                  },
                }
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              color: '#555',
              borderColor: '#00b5f8',
              opacity: 1
            },
            symbol: this.img1,
            symbolSize: [16, 16],
            symbolOffset: [0, 20],
            z: 999,
            data: this.scatterData(),
          },
          // label
          {
            type: 'scatter',
            coordinateSystem: 'geo',
            geoIndex: 0,
            zlevel: 5,
            label: {
              normal: {
                show: true,
                formatter: (params) => {
                  let name = params.data[2].name
                  // var text = `{tline|项目个数} : {fline|${value}}`
                  return `{tline|${name}}`;
                },
                color: '#fff',
                rich: {
                  fline: {
                    // padding: [0, 25],
                    color: '#fff',
                    fontSize: 14,
                    fontWeight: 600
                  },
                  tline: {
                    // padding: [0, 27],
                    color: '#fff',
                    fontSize: 12,
                  },
                }
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              color: '#555',
              borderColor: '#00b5f8',
              opacity: 1
            },
            symbol: this.img2,
            symbolSize: [80, 30],
            symbolOffset: [0, -5],
            z: 999,
            data: this.scatterData(),
          },
          {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(this.toolTipData),
            showEffectOn: 'render',
            rippleEffect: {
              scale: 5,
              brushType: 'stroke',
            },
            label: {
              normal: {
                formatter: '{b}',
                position: 'bottom',
                show: false,
                color: "#fff",
                distance: 10,
              },
            },
            symbol: 'circle',
            symbolSize: [10, 5],
            itemStyle: {
              normal: {
                color: '#00b5f8',
                shadowBlur: 10,
                shadowColor: '#00b5f8',
              },
              opacity: 1
            },
            zlevel: 4,
          },
        ],
      };
      // this.option.geo[1].itemStyle.color.image = this.bj
      myChart.setOption(this.option);
      //点击事件
      myChart.on('click', (params) => {
        this.isShow = !this.isShow
        this.cityName = params.name
      });
      // 监听窗口大小变化
      window.addEventListener('resize', function () {
        myChart.resize();// 调用图表的 resize 方法
      });
    },
    // 柱状体的主干
    lineData() {
      return this.toolTipData.map((item) => {
        return {
          coords: [this.geoCoordMap[item.name], [this.geoCoordMap[item.name][0], this.geoCoordMap[item.name][1] + 1.5]]
        }
      })
    },
    // 柱状体的顶部
    scatterData() {
      return this.toolTipData.map((item) => {
        return [this.geoCoordMap[item.name][0], this.geoCoordMap[item.name][1] + 2, item]
      })
    },
    /* 关闭对话框 */
    close() {
      this.isShow = !this.isShow
    },
  }
}
</script>

<style scoped lang="scss">
#map-container {
  width: 100%;
  height: 95%;
  overflow: hidden;
  position: relative;
  left: 0;

  .echarts {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.tanchuang {
  width: 60%;
  max-height: 6.06rem;
  min-height: 3.5rem;
  background: url(../../../assets/images/list.png) no-repeat;
  position: absolute;
  top: 50%;
  left: -10%;
  padding-bottom: 5px;
  transform: translate(50%, -50%);
  background-size: 100% 100%;

  .title {
    width: 20px;
    height: 20px;
    background: url(../../../assets/images/close.png) no-repeat;
    background-size: 100% 100%;
  }

  .city {
    width: 100%;
    padding: 15px;
    /* background-color: #fcc; */
    display: flex;
    align-items: center;

    .citybg {
      width: 20px;
      height: 24px;
      background: url(../../../assets/images/titleName.png) no-repeat;
      background-size: 100% 100%;
    }

    p {
      color: #fff;
      width: 100px;
      margin-left: 30px;
      font-size: 24px;
    }
  }
}

.total {
  width: 90%;
  height: 50px;
  margin: 0 auto;
  font-size: .22rem;
}

::v-deep div.border-box-content {
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 20px;

  div:nth-child(1) {
    color: #fff;
  }

  div:nth-child(2) {
    color: #fff000;
  }

  div:nth-child(3) {
    color: #fff000
  }
}

.weighing {
  width: 98%;
  max-height: 5.5rem;
  min-height: 3rem;
}

.per-tablehearder {
  width: 100%;
  margin: auto;
  padding-bottom: 10px;
  color: #daecff;
  font-size: 15px;
  font-family: "OPPOSans";
  font-weight: 800;
  line-height: 15px;
  display: flex;

  > div {
    text-align: center;
    margin-top: 13px;
  }

  > :nth-child(-n + 3) {
    width: 24%;
  }

  > :nth-child(n + 3) {
    width: 28%;
  }
}

.tbbody-parent {
  height: 319px;
  overflow: auto;
  /*滚动条整体样式,高宽分别对应横竖滚动条的尺寸*/
  &::-webkit-scrollbar {
    width: 0;
    height: 2px;
    border-radius: 5px;
    background-color: rgba(3,34,189,.85);
  }

  /*滚动条里面小方块*/
  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px #010a1d;
    background: #010a1d;
  }

  /*滚动条里面轨道*/
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px #010a1d;
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }

  .per-tablebody {
    width: 100%;
    margin: auto;
    height: 44px;
    line-height: 44px;
    display: flex;
    align-items: center;

    > :nth-child(2) {
      width: 20%;
      text-indent: -20%;
      font-size: 14px;
    }

    > :nth-child(-n + 3) {
      width: 24%;
      text-align: center;
      font-size: 14px;
    }

    > :nth-child(4) {
      width: 28%;
      text-align: center;
      font-size: 14px;
    }

    > :nth-child(5) {
      text-align: center;
      font-size: 14px;
      width: 24%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #00fffe;
    }
  }

  .oddclass {
    background: rgba(168, 209, 255, 0);
    border-bottom: 2px solid #0d167b;
    width: 93%;
  }
}
</style>