echars 绘制多点连线地图 vue
引入echartsimport echarts from 'echarts' // 全局注册echartsVue.prototype.$echarts = echarts;获取地图所需要的数据http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
·
最终效果
引入echarts
import echarts from 'echarts' // 全局注册echarts
Vue.prototype.$echarts = echarts;
获取地图所需要的数据
http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5
html
<div id="map_bd"></div>
请求数据
getCityData() {
var url = 'https://geo.datav.aliyun.com/areas_v2/bound/500000.json';//重庆
axios.get(url).then(res=> {
this.renderMap(res);
})
}
渲染地图
//相关数据
data() {
return {
mapData:[]
}
}
renderMap(mapData) {
var oMap = this.$echarts.init(document.getElementById("map_bd"));
var _self = this;
this.$echarts.registerMap("CQ", mapData);
this._handleMapData("巴南区", mapData);
//
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = _self.coverPointerList[dataItem[0].name];//开始
var toCoord = _self.coverPointerList[dataItem[1].name];//结束
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord, toCoord],//
});
}
}
return res;
};
var customSettings = []; //每块颜色
var colors = ["#054667", "#00a8ff"];
this.mapData.forEach(function (item, index) {
customSettings.push({
name: item.name,
map:item.map,
itemStyle: {
areaColor: colors[item.value],
color: colors[item.value],
},
});
});
var options = {
geo: {
map: "CQ",
zoom: 1.2,
roam: false,
label: {
show: false,
},
itemStyle: {
borderColor: "#000",
},
emphasis: {
label: {
show: false,
},
itemStyle: {
areaColor: "#2a333d",
},
},
regions: customSettings,//
},
series: [
{
type: "lines",//绘制连线
zlevel: 2,
symbolSize: 2,
effect: {
show: true,
period: 0,
trailLength: 0,
symbolSize: 2,
},
lineStyle: {
color: "#FAFD04",
width: 1,
opacity: 1,
curveness: 0.2,
type: "dashed",
},
data: convertData(this.mapSeriesListData),
},
{
type: "scatter",//绘制点
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
brushType: "stroke",
},
symbolSize: function (val) {
return 5;
},
itemStyle: {
color: "#FAFD04",
},
data: this.mapSeriesListData.map(function (dataItem) {
// console.log(dataItem[1])
return {
name: dataItem[1].name,
value: _self.coverPointerList[dataItem[1].name].concat([
dataItem[1].value,
]),
};
}),
},
{
type: "effectScatter",//绘制中心辐射点
coordinateSystem: "geo",
zlevel: 2,
rippleEffect: {
brushType: "stroke",
scale: 250,
period: 10,
},
symbolSize: function (val) {
return 1;
},
itemStyle: {
color: "#FAFD04",
},
data: [
{
naem: "巴南区",
value: [106.519423, 29.381919],
},
],
},
],
};
oMap.setOption(options);
},
//处理地图数据 模拟 可根据业务调整 以target为中心
_handleMapData(target, mapData) {
for (var i = 0; i < mapData.features.length; i++) {
var index = i % 2;
var temp = mapData.features[i].properties;
var { name, cp } = temp;
this.coverPointerList[name] = cp;
this.mapData.push({
name,
value: index,
map:mapData.features[i]
});
if (index == 1) {
this.mapSeriesListData.push([{ name: target }, { name, value: i }]);
}
}
}
更多推荐
已为社区贡献1条内容
所有评论(0)