vue + echart +map中国地图,省市地图,区县地图
第一步:安装依赖包
npm install echarts --save
- 在main.js 中全局引入
import echarts from 'echarts' Vue.prototype.$echarts = echarts
第二步:引入地图文件(此处路径可以参照node_modules 文件夹里的,echarts依赖包中具体路径写)
1.中国地图 import "echarts/map/js/china.js";
2.省地图 import "echarts/map/js/province/neimenggu.js";
(注意下面配置参数geo里的map需要从’china’改为中文“内蒙古”)
3.市地图 (npm 安装的echarts 里没有市数据,如有人知道怎么安装可以留言指正我,目前我的解决方案是去github 下载市地图数据包 点击此处跳转至github 地图包
下载完成后可以发现市地图为数字命名,可百度各市行政区编码进行对照区分)
import baotoushi from '../../../static/json/huhehaoteshi.json'
*注意:如果下载的json文件放在本地不能正常加载,可能是因为 1. 代码格式不对 2.需要放在static 静态文件夹中 3.初始化时地图名字应该写对应省的名字,如点击进入“包头市”,那么下面的name 需要设置为“内蒙古”
chart.setOption(option);
that.$echarts.registerMap(name, baotoushi);
省下钻到市请看我另一篇文章)
第三步:初始化地图
1.<div id="mapChart" ></div>
3. 在mounted钩子中调用
mounted() {this.getMap();},
3.在data 中定义下面需要的参数,如mapList等
4. 在methods 中定义方法(里面一些内容可以删掉)
getMap() {let mapOption = {title: "", //标题tooltip: { //此处是根据后端数据进行hover 展示的提示框,可用官网上默认的trigger: "item",formatter: function(params) {return params.name + " ( " + params.data.value[2] + " ) " + "</br>"+"飞机" + " : " + params.data.aircraftNum + "</br>";}},legend: { //标签orient: 'vertical',y: 'bottom',x:'right',data:['行踪轨迹'],textStyle: {color: '#fff'}},visualMap: {//颜色轴,可以根据数据点的值大小,展示不同的颜色,或用来展示地图块的不同颜色min: 0,max: 200,calculable: true,inRange: {color: ["#3dda8e", "#eac736", "#d94e5d"]},textStyle: {color: "#fff"}},geo: {//配置地图参数map: "china",label: {emphasis: {show: false}},itemStyle: {normal: {areaColor: "#058bd2",borderColor: "#111"},emphasis: {areaColor: "#1e67b2"}}},series: [{//根据数据展示点,并显示为波纹效果type: 'effectScatter',coordinateSystem: 'geo',zlevel: 2,//波纹效果rippleEffect: {period: 2,brushType: 'stroke',scale: 3},label: {normal: {show: true,color: '#fff',position: 'right',formatter: '{b}'}},//圆点大小symbolSize: 16,data: convertData(data),}]};//用$echarts是因为上面注册使用的 Vue.prototype.$echartslet myChart = this.$echarts.init(document.getElementById('mapChart'));myChart.setOption(mapOption);
}
- 如需跟后端交互,需请求展示数据的接口
此处接口axios请求二次封装过,请自行修改为适合自己项目的
export const getTrajectoryMapList = param => {return req.post('/joureny/getcity',param)
}
下面代码中的this.$api.getTrajectoryMapList(needData).then(res => {
的返回值 res.data 为如下格式
data: [{city:'beijing', longitude: '110.10', latitude: '32.32',number: 300}, // 城市、经纬度、城市人数为300{city:'shanxi', longitude: '110.10', latitude: '32.32',number: 300},
]
this.$api.getTrajectoryMapList(needData).then(res => {if (res.reCode == 0) {let keyMap = [];let data = [];res.data.forEach(item => {//城市和经纬度的数组keyMap.push([item.city, [item.longitude, item.latitude]]);//鼠标划过显示信息的数组data.push({name: item.city,value: item.number});});let geoCoordMap = new Map(keyMap);//此处为es6的map 语法,用来处理键值对let convertData = function(data) {//覆盖点的样式let res = [];for (let i = 0; i < data.length; i++) {let geoCoord = geoCoordMap.get(data[i].name);//es6map 语法if (geoCoord) {res.push({name: data[i].name,value: geoCoord.concat(data[i].value),});}}return res;};this.getMap(); //此处调用地图实例}})
vue + echart +map中国地图,省市地图,区县地图相关推荐
- Vue + echart 实现中国地图 和 省市地图(可切换省份
vue + echart 实现中国地图 和 省市地图(可切换省份) - 伏沙金 - 博客园
- vue页面参数传递(VUE+echart+map联动实例)
我们在使用vue的时候经常会遇到页面参数传递,相比之前JavaScript操作,js入参传参,js之间方法调用只要我们引入js就可以相互调用,但是vue里面的不太一样,主要涉及有三种方式,父子传参,子 ...
- mysql 百度地图 省市_百度地图自定义选取区域(一)
管理员可以自己在地图上选取一个区域: html> 行政区域工具 var map = new BMap.Map("container");// 创建Map实例 map.cent ...
- 【中国部分省市】离线地图可视化的json文件
前言 找了半天,终于找到了json文件 有中国地图.部分省和市的地图json文件,但是点进去发现都是数字...不整理一下不清楚哪个对哪个. 指路Github:链接 整理 总览 点开json文件会有些信 ...
- 【Pyecharts50例】添加自定义地图/geojson使用/区县地图
前言 Pyecharts支持最小粒度到城市级别的数据,但如果想画某个城市各区的地图,就没办法直接使用了. 这里提供一个网站,是阿里开源的,最小粒度到区县界别http://datav.aliyun.co ...
- Vue中使用echart实现中国地图统计图
Vue中使用echart实现中国地图统计图 前言 Echart版本的确定 全局导入或按需导入 在对应的页面调用echart 前后端数据交互注意事项 前言 在Vue2.x开发中,为了更好地展示某一个时间 ...
- Vue+Echarts实现中国地图的省市切换
Vue+Echarts实现中国地图的省市切换 首先要安装一下Echarts npm install echarts 在min.js中引入echarts import * as echarts from ...
- html5 svg中国地图map悬停显示省市地区代码
html5 svg中国地图map悬停显示省市地区代码 html5 svg中国地图map悬https://www.51qianduan.com/article/4401.html停显示省市地区代码
- pyecharts 画地图(热力图)(世界地图,省市地图,区县地图)
一.概述 在上一篇文章中,链接如下:https://www.cnblogs.com/xiao987334176/p/13791061.html 已经介绍了pyecharts画一些基本图形,接下来介绍画 ...
最新文章
- javascript数组的属性、方法和清空-最全!!!(必看)
- solr开发,提交索引数据的几种方式
- 35岁老半路程序员的Python从0开始之路
- 搞懂这三个指标,数据分析起码少费一半力
- amcharts去除版权标志
- java实现多线程抢单_来聊一聊3种实现JAVA多线程的方式吧
- C#显示当前日期时间
- 日志框架选型,Logback 还是 Log4j2?
- 【GDB调试学习笔记】调试逻辑错误
- logistic回归分析优点_一文详尽系列之逻辑回归
- LSB图像隐写和峰值信噪比计算的python实现
- 阿铭linux苹果客户端,2018年5月 – 阿铭Linux
- UE4 Gameplay
- 【实践与问题解决28】最全超分辨率(SR)数据集介绍以及多方法下载链接
- 程序员如何更换证件照背景色
- 1210: OY问题 [搜索]
- pha-1 android,音质提升一劳永逸 体验索尼PHA-1耳放解码一体机
- ‘mnist.npz‘手写体数字数据集下载
- python legend位置_matplotlib中legend位置调整解析
- 春招已至,大四学生如何撰写一份面试官愿意看的简历