vue + echart +map中国地图,省市地图,区县地图
第一步:安装依赖包npm install echarts --save在main.js 中全局引入import echarts from 'echarts'Vue.prototype.$echarts = echarts第二步:引入地图文件(此处路径可以参照node_modules 文件夹里的,echarts依赖包中具体路径写)1.中国地图 import &
第一步:安装依赖包
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.$echarts
let 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(); //此处调用地图实例
}
})
更多推荐
所有评论(0)