怎么在echarts的map地图上覆盖一层图片

最新推荐文章于 2024-05-28 09:17:06 发布

LXXgalaxy

最新推荐文章于 2024-05-28 09:17:06 发布

阅读量535

点赞数 4

分类专栏： echarts 自封组件 javascript 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/galaxyJING/article/details/137587796

版权

javascript 同时被 3 个专栏收录

35 篇文章 0 订阅

订阅专栏

自封组件

20 篇文章 1 订阅

订阅专栏

echarts

16 篇文章 0 订阅

订阅专栏

<template>
  <div class="container">
    <div style="width: 100%; height: 800px; background: #1a73e8" id="map"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import axios from 'axios'
import dot from '@/assets/background.jpg' // 要使用import的方式引入图片，不支持直接写图片路径
export default {
  mounted() {
    this.getData()
  },
  methods: {
    initMap(name, data) {
      echarts.registerMap(name, data);
      // 获取图片的dom元素
      let map = echarts.init(document.getElementById('map'));
      let option = {
        geo: {
          // type: 'map',
          map: name,
          label: {
            show: true,
            color: '#ffffff'
          },
          itemStyle: {
            areaColor: { // 旧版本才可以在颜色中使用图片
              image: dot,
              repeat: 'repeat'
            },
            borderColor: '#ffffff'
          }
        }
      }
      map.setOption(option)
    },
    // 获取地图json数据
    getData() {
      axios.get('/json/china.json').then((res) => {
        this.initMap('china', res.data)
      })
    },
  }
}
</script>

类似效果