給map地圖添加了一個陰影3d的效果，添加一張背景圖，給人感覺有3d的效果
具體配置如下：
html代碼模塊：
<div class="echart_img" style="position: fixed; visibility: hidden;"></div><div id="map"></div>
在mounted方法里面給地圖添加背景圖
mounted() {let mg = require("../../../../images/jsc/map.png")this.domImg = document.createElement('img')this.domImg.style.height = this.domImg.height = this.domImg.width = this.domImg.style.width = '7000px'this.domImg.src = mgdocument.querySelector('.main-map .echart_img').appendChild(this.domImg)setTimeout(() => {this.initMap();}, 500)},
echarts options配置如下：
var chart = this.echarts.init(document.getElementById("map"));var option = {grid: {top: '-20%',left: '0%'},geo: [{map: 'GD',aspectScale: 0.75,zoom: 0.65, // 比例調整layoutCenter: ['50%', '52%'],layoutSize: '100%',silent: true,roam: false,itemStyle: {normal: {areaColor: 'rgb(37, 104, 188)',borderColor: 'rgb(33, 91, 167)',borderWidth: 1},emphasis: {areaColor: '#2AB8FF',borderWidth: 0,color: 'green',label: {show: false}}},}],series: [{type: "map",map: "GD",roam: false, //是否開啟鼠標縮放和平移漫游animationDurationUpdate: 0,zoom: 0.8,layoutSize: "100",label: {normal: {show: true,fontSize: 14,color: "#fff",},emphasis: {color: "#fff",},},itemStyle: {normal: {areaColor: {image: this.domImg,repeat: "repeat-x"},borderColor: "#678BBB", //省份邊框顏色borderWidth: 2, // 省份邊框寬度shadowBlur: 0,shadowOffsetX: 0,shadowOffsetY: 0},emphasis: {areaColor: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0, color: 'rgba(45, 124, 200, 1)' // 漸變起始顏色}, {offset: 1, color: 'rgba(75, 175, 247, 1)' // 漸變結束顏色}]},borderColor: "#fff", //省份邊框顏色borderWidth: 1, // 高亮時的邊框寬度},},select: {label: {show: true,color: "#fff",},itemStyle: {areaColor: "#123972", // 高亮時候地圖顯示的顏色borderWidth: 0, // 高亮時的邊框寬度},},},],};// 使用剛指定的配置項和數據顯示圖表chart.setOption(option);
具體效果如下：
)
