Echart + Baidu Map to achieve regional aggregation (Vue version)
Baidu map aggregation is very simple, but according to the regional aggregation how to achieve? How to achieve regional aggregation with Echart’s Baidu map?
Played Echart alone, also used baidu map alone, but the two combined with the whole use of it, Echart API has the corresponding map registration method, so the general map is the need to load the base map, there are three ways to load the map base map in Echart.
Echart load map base
Baidu map
When using the baidu map, we need to first introduce the baidu map API, and then in the other element layers introduced in the series, the value of coordinateSystem must be set to bmap, that is, the data of other layers, using the bmap map as the reference of the spatial coordinateSystem.
Const options = {bmap: {center: [108.95, 34.27], // Xian Zoom: 6, ROAM:true,
label: {
show: true,}, mapStyle:{styleJson: mapStyle, // define the style of bmap},} series: [{type: 'scatter'// Note that this place must be set to bmap coordinateSystem:'bmap',
data: data,
}
]
}
Copy the codeJson registerMap
In this way, the base map data is stored in JSON (GeoJSON) format. After obtaining the DATA in JSON format, registerMap is used for manual registration and a name is given to the map. For the methods used in EChart, please refer to the official example;
fetch('/get/china.json', (china) => {
echart.registerMap('china', china);
})
const options = {
series: [{
type: 'map',
map: 'china'// Set your own map data: data,}]}Copy the codeMaps in series are the maps registered by users themselves. RegisterMap can only register json data for faceted elements, not for points and lines!
Script is introduced in combination with geo
In this way, the base map data can be directly introduced into JS files containing data with script tags. After introduction, map names and data will be automatically registered. For example, EChart will automatically register maps after introduction
Const options = {geo: {center: [108.95, 34.27], // Xian Zoom: 6, ROAM:true,
label: {
show: true,}, mapStyle:{styleJson: mapStyle, // define the style of bmap},} series: [{type: 'scatter'// Note that this place must be set to geo coordinateSystem:'geo',
data: data,
}
]
}
Copy the codeCoordinateSystem ina series must be set to geo, that is, the coordinateSystem reference adopted is consistent with the map defined in geo; Geo mode is also only applicable to plane map data, point and line element data is not valid!
We have this demand elements, but also wired elements, Echart point, line elements loading
Set type as line/lines in series to realize line elements. In Series, Type is set to Scatter /effectScatter.
The parameter coordinateSystem is set to BMAP,
Echart + Baidu map to achieve multiple points
Const options = {bmap: {center: [108.95, 34.27], // Xian Zoom: 6, ROAM:true,
label: {
show: true,
},
mapStyle:
{
styleJson: mapStyle,
},
},
title: {
text: 'Network Line Distribution',
left: 'center',
textStyle: {
color: '#fff',
},
},
tooltip: {
trigger: 'item',
},
series: [
{
type: 'scatter',
coordinateSystem: 'bmap',
data: this.covertStopData(),
tooltip: {
formatter: '{b}',
},
symbolSize: 20,
label: {
normal: {
formatter: '{b}',
position: 'inside',
show: true,
},
emphasis: {
show: true,
},
},
itemStyle: {
normal: {
color: '#fff',
},
},
zlevel: 1,
}],
};
Copy the codeYou can also use effectScatter.
Echart + Baidu map to achieve multi-point aggregation according to administrative regions
We all know when we used Baidu Map before that the aggregation of Baidu Map cannot be done in accordance with the administrative region. I have not studied one of its aggregation methods in depth. But now if we realize the aggregation in accordance with the administrative region, how to deal with it? So I turned to the back end. There are three levels of hahaha,
Zoom [baidu scale] <= 6 [indicates province, request province data] <=8 && > 6 [indicates city, request municipal data] > 8 [indicates district, request regional data]Copy the codeAdd listener event “bMAproam” to update chart display data according to zoom changes, and request data again when Zoom changes. And update the chart
this.myChart =window.echarts.init(document.getElementById('chart'));
this.myChart.on('bmaproam', () => {
const _options = this.myChart.getOption();
const zoom = _options.bmap[0].zoom;
if (zoom === this.defaultZoom) return;
if (zoom > 8) {
this.stop_level = 3;
} else if (zoom > 6 && zoom <= 8) {
this.stop_level = 2;
} else if (zoom <= 6) {
this.stop_level = 1;
}
this.defaultZoom = zoom;
this.fetchData();
});
Copy the codeConsolidate data and set different point sizes according to different levels
covertStopData() {
const res = [];
const data = this.stopData;
const colors = ['#79D12E'.'#F9DE1C'.'#DA3838'];
const size = [35, 25, 20];
const length = data.length;
for (leti = 0; i < length; i++) { res.push({ name: data[i].name, value: [data[i].lng, data[i].lat, data[i].total], itemStyle: Color: colors[data[I].level-1],}, symbolSize: size[this.stop_level-1],}); color: colors[data[I].level-1],}, symbolSize: size[this.stop_level-1],}); }return res;
}
Copy the codeEchart part of the code
Const options = {bmap: {center: [108.95, 34.27], // Xian Zoom: 6, ROAM:true,
label: {
show: true,
},
mapStyle:
{
styleJson: mapStyle,
},
},
title: {
text: 'Network Line Distribution',
left: 'center',
textStyle: {
color: '#fff',
},
},
tooltip: {
trigger: 'item',
},
series: [
{
type: 'scatter',
coordinateSystem: 'bmap',
data: this.covertStopData(),
tooltip: {
formatter: '{b}',
},
symbolSize: 20,
label: {
normal: {
formatter: '{b}',
position: 'inside',
show: true,
},
emphasis: {
show: true,
},
},
itemStyle: {
normal: {
color: '#fff',
},
},
zlevel: 1,
}],
};
this.myChart.setOption(options);
Copy the codeThe effect is as follows: area
In this way, the function of aggregation by region is realized
Echart + Baidu map to achieve multi-line + multi-point
It’s easy to implement multiple lines. Set type to lines in series.
Const options = {bmap: {center: [108.95, 34.27], // Xian Zoom: 6, ROAM:true,
label: {
show: true,
},
mapStyle:
{
styleJson: mapStyle,
},
},
title: {
text: 'Network Line Distribution',
left: 'center',
textStyle: {
color: '#fff',
},
},
tooltip: {
trigger: 'item',
},
series: [
{
type: 'scatter',
coordinateSystem: 'bmap',
data: this.covertStopData(),
tooltip: {
formatter: '{b}',
},
symbolSize: 20,
label: {
normal: {
formatter: '{b}',
position: 'inside',
show: true,
},
emphasis: {
show: true,
},
},
itemStyle: {
normal: {
color: '#fff',},}, zlevel: 1,}, {type: 'lines',
coordinateSystem: 'bmap',
polyline: false,
slient: true,
data: this.busLines,
symbol: ['none'.'arrow'],
symbolSize: 5,
tooltip: {
formatter: '{b}:{c}',
},
silent: true,
label: {
show: true,
formatter: '{b}:{c}'Opacity: 1, curveness: 0.3,}, progressiveThreshold: 500, progressive: 200, zlevel: 2}, {type: 'lines',
coordinateSystem: 'bmap',
polyline: false, data: this.busLines, lineStyle: {normal: {width: 1.5, CurVENESS: 0.3,},}, effect: {show:true,
symbol: 'circle',
constantSpeed: 40,
trailLength: 0,
symbolSize: 4,
},
animation: true,
zlevel: 2,
},
],
};
this.myChart.setOption(options);
Copy the codeNotice that the first lines set up this line, and the first lines set up the animation that runs along this line. The effect is as follows:
