Echarts gallery地图使用及效果
这次使用的地图为中国各省份地图下面简单说一下如何引入和使用步骤1:在项目中安装Echarts的依赖npm install echarts --save然后在main.js中引入并使用import echarts from "echarts";Vue.prototype.$echarts = echarts(当然也可以在echarts官方下载安装包导入项目内,也可以通过script标签引入,方法很多
·
这次使用的地图为中国各省份地图
下面简单说一下如何引入和使用
步骤1:
在项目中安装Echarts的依赖
npm install echarts --save
然后在main.js中引入并使用
import echarts from "echarts";
Vue.prototype.$echarts = echarts
(当然也可以在echarts官方下载安装包导入项目内,也可以通过script标签引入,方法很多)
步骤2:
找到自己需要的地图
echarts gallery
步骤3:
选择好自己需要的地图。如(本次使用的中国各省份地图)
点开顶部的脚本按钮
可以在自己项目内新建js,将里面的内容复制粘贴到js文件中保存。
也可以通过script标签引入
<script src="https://echarts.baidu.com/resource/echarts-stat-latest/dist/ecStat.min.js"></script>
步骤4:
将里面的代码复制到代码的script中,本次使用的是vue,因此将这部分代码放入methods中,再通过mounted()生命周期函数调用。
HTML
<div id="myChart"></div>
Javascipt
mounted() {
this.mapFn();
},
methods: {
mapFn() {
let option = {
title: {
top: 10,
text: '平面图地图3D效果,整体地图渐变色,并且两层同步拖拽',
left: 'center',
textStyle: {
color: '#fff'
}
},
backgroundColor: 'rgba(0, 10, 52, 1)',
geo: {
map: 'china',
aspectScale: 0.75,
layoutCenter: ["50%", "51.5%"], //地图位置
layoutSize: '118%',
roam: true,
itemStyle: {
normal: {
borderColor: 'rgba(147, 235, 248, 1)',
borderWidth: 0.5,
color: {
type: 'linear-gradient',
x: 0,
y: 1500,
x2: 2500,
y2: 0,
colorStops: [{
offset: 0,
color: '#009DA1' // 0% 处的颜色
}, {
offset: 1,
color: '#005B9E' // 50% 处的颜色
}],
global: true // 缺省为 false
},
opacity: 0.5,
},
emphasis: {
areaColor: '#2a333d'
}
},
regions: [{
name: '南海诸岛',
itemStyle: {
areaColor: 'rgba(0, 10, 52, 1)',
borderColor: 'rgba(0, 10, 52, 1)'
},
emphasis: {
areaColor: 'rgba(0, 10, 52, 1)',
borderColor: 'rgba(0, 10, 52, 1)'
}
}],
z: 2
},
series: [{
type: 'map',
map: 'china',
tooltip: {
show: false
},
label: {
show: true,
color: '#FFFFFF',
fontSize: 16
},
aspectScale: 0.75,
layoutCenter: ["50%", "50%"], //地图位置
layoutSize: '118%',
roam: true,
itemStyle: {
normal: {
borderColor: 'rgba(147, 235, 248, 0.6)',
borderWidth: 0.8,
areaColor: {
type: 'linear-gradient',
x: 0,
y: 1200,
x2: 1000,
y2: 0,
colorStops: [{
offset: 0,
color: '#009DA1' // 0% 处的颜色
}, {
offset: 1,
color: '#005B9E' // 50% 处的颜色
}],
global: true // 缺省为 false
},
},
emphasis: {
areaColor: 'rgba(147, 235, 248, 0)'
}
},
zlevel: 1
}]
};
//echarts 设置地图外边框以及多个geo实现缩放拖曳同步
myChart.on('georoam', function(params) {
var option = myChart.getOption(); //获得option对象
if (params.zoom != null && params.zoom != undefined) { //捕捉到缩放时
option.geo[0].zoom = option.series[0].zoom; //下层geo的缩放等级跟着上层的geo一起改变
option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
} else { //捕捉到拖曳时
option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
}
myChart.setOption(option); //设置option
});
}
}
最终效果
更多推荐
已为社区贡献3条内容
所有评论(0)