注:shanghaiGeoJSON 换为你需要的区域json
<template><div ref="mapContainer" style="width: 100%; height: 500px"></div>
</template>
import * as echarts from 'echarts';
import shanghaiGeoJSON from '@/assets/json/shanghai.json';
import mapRight from '@/assets/img/mapRight.png';
import mapTexture from '@/assets/img/OIP.jpg';
import pudongTexture from '@/assets/img/OIP1.jpg';
initMap() {// 注册地图数据echarts.registerMap('shanghai', shanghaiGeoJSON);// 初始化ECharts实例const myChart = echarts.init(this.$refs.mapContainer);// 配置ECharts选项myChart.setOption({series: [{name: '数据',type: 'map',// silent: true, // 图形不响应和触发鼠标事件mapType: 'shanghai',itemStyle: {normal: {borderColor: '#88a4bc', // 区域边框颜色areaColor: {image: mapTexture, // 使用默认图片作为地图纹路repeat: 'repeat', // 图片平铺},},emphasis: {z: -1,areaColor: 'rgba(12, 40, 80, 0.1)', // 区域鼠标悬浮颜色，半透明},},data: [{name: '浦东新区',itemStyle: {normal: {areaColor: {image: pudongTexture, // 为浦东新区设置特定的纹理图片repeat: 'repeat',},},},},],label: {show: false,emphasis: {// 当鼠标悬浮时显示show: false,color: '#fff',},},},],graphic: {type: 'image',right: '20%',bottom: '12%',z: -10,style: {image: mapRight,width: 132,height: 139,},},});},
效果图：
