echarts map地图添加背景图-编程知识

echarts map地图添加背景图

给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);