
一、3D中国地图
1. 一定要使用 echarts 5.0及以上的版本;
2. echarts 5.0没有内置中国地图了。点击下载 china.json;
3. 一共使用了四层地图。
(1)第一层是中国地图各省细边框和展示南海诸岛;
(2)第二层是实现中国地图外边框的宽度和阴影,与第一层完全重合,隐藏南海诸岛;
(3)第三层和第四层形成一个底层3d立体,使用top往下偏移,隐藏南海诸岛。
// html
<div class="china-map" ref="chinaMap"></div>
// 引入资源
import * as echarts from 'echarts'
import china from '@/assets/json/china.json'
// 方法
chinaEchart(){
//注册地图,这个特别重要
echarts.registerMap('china', china)
let myChart = echarts.init(this.$refs.chinaMap);
//echart 配制option
var options= {
tooltip: {
show:true,
triggerOn: "mousemove", //mousemove、click
padding:[4,8],
borderWidth:1,
borderColor:'#409eff',
backgroundColor:'rgba(255,255,255,0.7)',
textStyle:{
color:'#000000',
fontSize:13
},
formatter: function(e) {
return e.name;
}
},
geo: [
// 第一层
{
map: "china",
z: 3,
zoom: 1.2,
aspectScale: 0.85,
roam: false,
top: '10%',
layoutSize: "100%", //保持地图宽高比
regions: [
{ // 隐藏南海诸岛,因为顶层已经添加过了
name: '南海诸岛',
itemStyle: {
borderWidth: 0.5,
shadowBlur: 0,
borderColor: '#61aacb',
areaColor: '#104584'
}
}
],
itemStyle:{
borderColor: '#c8feff',
borderWidth: 0.5,
shadowBlur: 3,
shadowColor: '#66edff',
areaColor: '#0862db'
},
emphasis:{
itemStyle:{
&nbs

最低0.47元/天 解锁文章
1420

被折叠的 条评论
为什么被折叠?



