In the process of analyzing the operation indicators of the mobile middle station-big screen and developing the police application development process, it is necessary to display the district and county map of a certain city. Applied practice and ongoing research are developed through these two projects.
Renderings show:
A general summary of the implementation method steps:
1. Select the area to be displayed through the Alibaba Cloud data visualization platform (Alibaba Cloud data visualization platform URL: ) or from https://datav.aliyun.com/portal/school/atlas /area_selector Select to download the geoJson file of the required area.
2. Install echarts dependencies in the Vue project (npm i echarts -S)
3. Import echarts (import echarts from 'echarts')
4. Set a label on the page to render the map
5. Initialize the echarts instance and specify configuration parameters, generally Initialize the map table data in the mounted lifecycle function.
Note: For the data in the data in the series configuration item, if the name wants to match the region name on the map normally, then it is best to use the name attribute name; the value in the pieces in the visualMap configuration item, if it only needs to be equal In the case of rendering the color corresponding to the numerical value area, then it is necessary to specify the attribute name value, and then the data in the data in the series configuration item also needs to define the data attribute name value.
Map module code, for reference only:
<div id="echartMap" class="echartMap"></div>getEchartMap(){
$.get("https://geo.datav.aliyun.com/areas_v3/bound/370800_full.json", function(geoJson) {
echarts.registerMap("ISD", geoJson);
var chart = echarts.init(document.getElementById("echartMap"));
chart.setOption({
title: {
text: '各区县用户总数及排名',
left: 'left',
padding:[10,0,10,30],
textStyle: {
color: '#fff',
fontSize: 24,
},
},
tooltip: {
trigger: 'item',
position: 'top',
formatter: '{b}<br/>{c}',
},
visualMap: {
type: "continuous",
// min: 800,
// max:10000,
// text: ["High", "Low"],
realtime: false,
calculable: true,
borderColor:"#5376B4", //边框颜色
borderWidth:3,
inRange: {
color: ['#244790']
},
show: false,
},
series: [
{
type: "map",
mapType: "ISD",
top:"14%",
roam: false,//禁止缩放
label: {
normal: {
show: true,
color: "#fff"
},
emphasis: {
show: true
}
},
itemStyle: {
emphasis: { label: { show: true } }
},
data: [
{value: 30, name: '邹城市',},
{value: 80, name: '曲阜市',},
{value: 50, name: '梁山县',},
{value: 44, name: '泗水县'},
{value: 30, name: '汶上县'},
{value: 48, name: '嘉祥县'},
{value: 75, name: '金乡县'},
{value: 80, name: '鱼台县'},
{value: 84, name: '微山县'},
{value: 30, name: '兖州区'},
{value: 30, name: '任城区'},
]
}
]
});
var flag = true; // 为了做判断：当鼠标移动上去的时候，自动高亮就被取消
var _this = this;
var index= 0;
// 鼠标移动上去的时候的高亮动画
chart.on("mouseover", function(param) {
flag = false;
clearInterval(_this.startCharts);
//取消之前高亮图形
chart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: index
});
index= param.dataIndex
//**解决文章所述问题**// //记录上一次选中值重新进入时取消高亮
//高亮当前图形
chart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: param.dataIndex
});
//显示tooltip
chart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: param.dataIndex
});
});
//图标随窗口大小缩放
window.addEventListener("resize", function() {
chart.resize();
});
//自动高亮显示
var chartHover = function() {
var dataLen = option.series[0].data.length;
// 取消之前高亮的图形
chart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: index
});
index= (index+ 1) % dataLen;
// 高亮当前图形
chart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: index
});
// 显示 tooltip
chart.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: index
});
};
_this.startCharts = setInterval(chartHover, 5000);
// 4、鼠标移出之后，恢复自动高亮
chart.on("mouseout", function(param) {
if (!flag) {
_this.startCharts = setInterval(chartHover, 5000);
flag = true;
}
});
});
},