vue如何用echarts画可缩放的中国地图（省会飞行图）

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-1label:{     //标签组件（地图名）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-1label:{     //标签组件（地图名）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-1label:{     //标签组件（地图名）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] //重点经纬度]}]}],};

效果图

vue如何用echarts画可缩放的中国地图（省会飞行图）相关推荐

Vue+Vuex+Axios+ECharts 画一个动态更新的中国地图
一.生成项目及安装插件 # 安装 Vue Cli npm install vue-cli -g# 初始化项目 vue init webpack vue-china-map# 切到目录下 cd vue- ...
uniapp+Echarts微信小程序实现中国地图
uniapp+Echarts微信小程序实现中国地图在uni-app项目引用Echarts 使用Echarts 地图实现: 最终效果 **项目源码**地址:[https://github.com/wa ...
如何用ArcGIS出一张标准中国地图？常见误区有哪些？
GIS地图已经应用越来越广泛,无论是传统的城市规划行业,还是现在的智慧城市.政府系统,都经常能看到中国地图,但是要做一张正确的.标准的中国地图并不简单. 先上一张非常标准的地图案例. 一.地图区域完整 ...
vue中引入Echarts画柱状图
目录 1 引入Echarts 1.1 安装 1.2 引入 2 基本柱状图 3 多列柱状图 4 柱状图样式设置 4.1 柱条样式 4.2 柱条间距 5 动态排序柱状图 6 总结 1 引入Echarts ...
vue里使用echarts画世界地图
Vue中使用echarts的项目总结: 1.安装echarts npm install echarts --save 2.在项目需要用到地图的页面里引入echarts(在入口文件里引入后无效,没找到原 ...
vue项目中使用echarts和china.js实现中国地图
在echarts最新的5.4.0版本中,已不能直接引用china.js来绘制中国地图,需要我们自己下载china.js包在网上查找资料,大部分是在index.html文件中直接引入echarts和c ...
数据可视化ECharts:中国地图模拟飞行模块
原先是用ECharts自带的社区做的,但是现在在新版已经没有了,然后我又找到了一个相似的Echarts - ChartLib (datains.cn) 实现步骤: - 第一需要下载china.js提供 ...
ECharts+Bootstrap实现响应式中国地图
BootStrap+Echarts实现响应式中国地图效果图: 1315×860 具体代码实现 <!DOCTYPE html> <html lang="en"&g ...
echarts数据可视化系列：中国地图绘制
绘制中国地图及相关配置绘制地图有两种方式: 百度地图API(要申请SDK) 矢量地图数据(需要开发者自己获取,我把中国地图各省地图及世界地图的json数据放到百度网盘中,提取码:http) 因为后面 ...

vue如何用echarts画可缩放的中国地图（省会飞行图）

vue如何用echarts画可缩放的中国地图（省会飞行图）相关推荐

最新文章

热门文章