赞
踩
给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 = mg
document.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);
具体效果如下:
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。