vue如何用echarts画可缩放的中国地图（省会飞行图）
1、创建一个容器之后设计统计图的地理坐标组件与图表类型（事先请保证已经导入了echart依赖包）<template><div ref="ChinaMap"></div></template><script>import "echarts/map/js/china"//导入echart的中国地图插件//写图表代码前务必要先导入地图（不导入就
·
1.创建一个容器之后设计统计图的地理坐标组件与图表类型（事先请保证已经导入了echart依赖包）
<template>
<div ref="ChinaMap"></div>
</template>
<script>
import "echarts/map/js/china" //导入echart的中国地图插件
//写图表代码前务必要先导入地图（不导入就不会出现地图，题主这个点卡了半天时间，一直以为是代码错了才没出现）
export default {
mounted() { //vue的生命周期函数
this.initEcharts(); //调用初始化图表的函数
},
methods: {
initEcharts() {
var echarts = this.$echarts.init(this.$refs.ChinaMap); //获取到容器的节点，初始化echarts实例
var option = { //指定配置项和数据
geo: { //地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图（省会图）、线集（迁移图）
map: "china", //地图类型
roam:true, //是否可以缩放
},
series: [ //系列列表
{
type: "lines", //系列类型 lines为路径图
coordinateSystem:'geo', //系列坐标系 geo为地理坐标系
},
],
};
echarts.setOption(option); // 使用刚指定的配置项和数据显示图表。
},
},
};
</script>
效果图
地图折腾出来了，但是单纯一个只能放大与缩小的地图，显然不能满足甲方爸爸贪婪的欲望，时不时要改个颜色，加个特效啥的，这时我们需要对地图进一步的修改。话不多说，先上颜色。
2.修改颜色（直接上option的代码）
var option = {
backgroundColor:'rgba(52,129,234,1)', //整个图表的背景颜色
geo: {
map: "china",
roam:true,
center:[105.97, 34.71], //当前视角的中心点，值为经纬度 比如[115.97,0.71]将会看到海南岛那一部分
// aspectScale:0.75, //拉伸地图 值为0-1
label:{ //标签组件（地图名）
normal:{ //默认状态
show:false, //默认是true 因为后面我们要画省会所以就直接设为false
},
emphasis:{ //高亮下的状态
show:false,
}
},
itemStyle:{ //区域边形样式
normal:{ //默认
areaColor:'#fff', //省份块的颜色
borderColor:'skyblue', //省份描边的颜色
bowderWidth:3 //描边的宽度
},
emphasis:{
areaColor:'yellow'
}
}
},
series: [
{
type: "lines",
coordinateSystem:'geo',
},
],
};
效果图
3.在地图上画出当前的省会位置，为了更加明显我们增加个水波效果，所以用涟漪系来做（直接上option的代码）
var option = {
backgroundColor:'rgba(52,129,234,1)', //整个图表的背景颜色
visualMap:{ //视觉映射组件 根据不同值显示不同的颜色
show:false, //是否显示组件
min:0, //最小值
max:10, //最大值
color:['red','skyblue'], //最小值与最大值对应的颜色
seriesIndex:[0]
},
geo: {
map: "china",
roam:true,
center:[105.97, 34.71], //当前视角的中心点，值为经纬度 比如[115.97,0.71]将会看到海南岛那一部分
// aspectScale:0.75, //拉伸地图 值为0-1
label:{ //标签组件（地图名）
normal:{ //默认状态
show:false, //默认是true 因为后面我们要画省会所以就直接设为false
},
emphasis:{ //高亮下的状态
show:false,
}
},
itemStyle:{ //区域边形样式
normal:{ //默认
areaColor:'#fff', //省份块的 颜色
borderColor:'skyblue', //省份描边的颜色
bowderWidth:3 //描边的宽度
},
emphasis:{
areaColor:'yellow'
}
}
},
series: [
{
type:'effectScatter', //系列为涟漪类
coordinateSystem:'geo',
showEffectOn:'render', //涟漪特效的触发的方式 'render'直接显示 'emphasis'hover的时候显示
symbolSize:10, //标记的大小
rippleEffect:{ //涟漪的相关配置
brushType:'fill', //涟漪的类型 stroke 线圈效果 stroke水波效果
scale:5, //波纹的最大的缩放比例
period:4, //涟漪的扩散周期
},
label:{ //标签的配置
normal:{
formatter:'{b}',
show:true,
position:'bottom',
color:'blue',
offset:[0,10] //文字偏移 [上，下]
}
},
itemStyle:{ //每个点的配置
normal:{
shadowBlur:5,
}
},
data:[{
name:'上海',
value:[121.3359985,31.1979007,10] //经纬度与值
},{
name:'拉萨',
value:[90.9169986,29.29850075,0]
}]
},
{
type: "lines",
coordinateSystem:'geo',
},
],
};
效果图：
3.现在还需要将两个地点连接起来，同时生成动态的曲线，由于地图组件与涟漪系没有这功能属性，所以我们可以在系上面再添加一个路径图表。
var option = {
backgroundColor:'rgba(52,129,234,1)', //整个图表的背景颜色
visualMap:{ //视觉映射组件 根据不同值显示不同的颜色
show:false, //是否显示组件
min:0, //最小值
max:10, //最大值
color:['red','skyblue'], //最小值与最大值对应的颜色
seriesIndex:[0]
},
geo: {
map: "china",
roam:true,
center:[105.97, 34.71], //当前视角的中心点，值为经纬度 比如[115.97,0.71]将会看到海南岛那一部分
// aspectScale:0.75, //拉伸地图 值为0-1
label:{ //标签组件（地图名）
normal:{ //默认状态
show:false, //默认是true 因为后面我们要画省会所以就直接设为false
},
emphasis:{ //高亮下的状态
show:false,
}
},
itemStyle:{ //区域边形样式
normal:{ //默认
areaColor:'#fff', //省份块的 颜色
borderColor:'skyblue', //省份描边的颜色
bowderWidth:3 //描边的宽度
},
emphasis:{
areaColor:'yellow'
}
}
},
series: [
{
type:'effectScatter', //系列为涟漪类
coordinateSystem:'geo',
showEffectOn:'render', //涟漪特效的触发的方式 'render'直接显示 'emphasis'hover的时候显示
symbolSize:10, //标记的大小
rippleEffect:{ //涟漪的相关配置
brushType:'fill', //涟漪的类型 stroke 线圈效果 stroke水波效果
scale:5, //波纹的最大的缩放比例
period:4, //涟漪的扩散周期
},
label:{ //标签的配置
normal:{
formatter:'{b}',
show:true,
position:'bottom',
color:'blue',
offset:[0,10] //文字偏移 [上，下]
}
},
itemStyle:{ //每个点的配置
normal:{
shadowBlur:5,
}
},
data:[{
name:'上海',
value:[121.3359985,31.1979007,10] //经纬度与值
},{
name:'拉萨',
value:[90.9169986,29.29850075,0]
}]
},
{
type: 'lines', //系类别为路径图
effect: {
show: true,
period: 4, //箭头指向速度，值越小速度越快
trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
symbol: 'arrow', //箭头图标
symbolSize: 10, //图标大小
},
lineStyle: {
normal: {
width: 2, //尾迹线条宽度
opacity: 1, //尾迹线条透明度
curveness: .3, //尾迹线条曲直度
color:'orange',
}
},
data:[{
coords:[
[90.9169986,29.29850075,0], //起点经纬度
[121.3359985,31.1979007,10] //重点经纬度
]
}]
}
],
};
效果图
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)