Ein aktuelles Projekt hat die Visualisierung implementiert. Laden Sie zunächst eine Karte von China, einer bestimmten Provinz oder einer bestimmten Stadt. Klicken Sie auf die ausgewählte Karte, und andere Diagrammdaten werden erneut angefordert und geändert. Doppelklicken Sie auf die ausgewählte Karte und Die aktuelle E-Chart-Karte wird zur ausgewählten Karte. (Die obige Beschreibung ist eine verbale Bemerkung, eine einfache Zusammenfassung. Doppelklicken Sie, um die E-Chart-Karte auf die nächste Ebene zu durchdringen.)
Die Verarbeitung des Klickereignisses und des Doppelklickereignisses von Echart ist unterschiedlich. Wenn der Widerspruch zwischen Einzelklick- und Doppelklickereignissen nicht behandelt wird, treten Probleme auf. echart-Doppelklick löst Klick aus. So lösen Sie das Problem:
var myChartMap = echarts.init(this.$refs.echart_map);
let click_type;
myChartMap.on("click", function (params) {
click_type = false;
setTimeout(check, 500);
function check() {
if (click_type != false) return;
该地方写你单击的处理逻辑事件
}
});
//点击事件
myChartMap.on("dblclick", function (param) {
click_type = true;
该地方写你双击的处理逻辑事件
}
Klicken oder doppelklicken Sie, um die Durchdringung der Echart-Karte zu realisieren. Klicken oder doppelklicken Sie also auf die Karte einer Provinz, Stadt oder eines Landkreises, um die aktuell angeklickte Karte
anzuzeigen wurde oben erwähnt, und die Penetration wird weiter unten behandelt
在 地图配置中， option.series 里面配置地图名字， 地图名字设为动态变量；
我使用的地图数据下载地址为阿里云大数据可视化地图数据
http://datav.aliyun.com/portal/school/atlas/area_selector
该页面上，选择下载其他类型
大概长这样的
{
"type":"FeatureCollection","features":[{
"type":"Feature","properties":{
"adcode":110000,"name":"北京市","center":[116.405285,39.904989],"centroid":[116.41995,40.18994],...
},...
}
initMap(city) {
var geoJson = require("../json/" + city + ".json");
this.loadCharts(city, geoJson, false, "");
},
loadCharts(city, geoJson, silent, selectName) {
let that = this;
if (geoJson) {
echarts.registerMap(name, geoJson);
}
var option = this.setOption(city, silent, selectName);
var myChartMap = echarts.init(this.$refs.echart_map);
myChartMap.setOption(option, true);
//这里单双击实现地图穿透
myChartMap.on("dblclick 或者click", function (param) {
//这个是你当前点击地图，获取单位（省、市、县区）名字
this.city = param.name
initMap(param.name); //或者 initMap(this.city);
}
}
//我是单独把 option 提成了一个函数，
setOption(city, silent, selectName) {
var option = {
title: {
text: city,
show: false,
left: "center",
},
tooltip: {
trigger: "axis",
formatter: function (e) {
},
triggerOn: "click",
},
legend: {
},
visualMap: {
type: "piecewise",
calculable: true,
pieces: [ //图标小组件显示对应范围，及颜色
{
gte: 15000, color: "#0b949a", label: "≥15000" },
{
gt: 10000, lt: 15000, color: "#12b4bf", label: "10000-15000" },
{
lte: 10000, color: "#31d6da", label: "0-10000" },
],
minOpen: true,
maxOpen: true,
precision: 2,
hoverLink: true,
left: "right",
bottom: "20",
},
series: [
{
left: "20%",
top: "10%",
zoom: 1.2,
type: "map",
map: city,//这个表示展示哪个城市， 就是这个决定我们单击或者双击后地图穿透
roam: false, //鼠标平移或者缩放
silent: silent,
itemStyle: {
normal: {
borderWidth: 2, //边框大小
borderColor: "#ffffff",
// shadowColor: 'rgba(0, 0, 0, 0.5)',
// shadowBlur: 10,
areaColor: "#31d6da", //背景颜色
label: {
show: true,
// formatter: '{c}\n{b}'
formatter: function (params) {
return `{pic|${
params.value.toString() == "NaN" ? 0 : params.value
}}\n{fline|${
params.name}}`;
},
position: "top",
rich: {
pic: {
backgroundColor: "rgba(25, 31, 37, 0.34)",
padding: [2, 5],
width: "auto",
height: 15,
align: "center",
color: "#FFFFFF",
fontSize: "10px",
borderRadius: 5,
},
fline: {
color: "#FFFFFF",
align: "center",
fontSize: "12px",
},
},
//显示名称
// color: "green",
// fontSize: 12
},
},
},
data: this.mapData,
},
],
};
return option;
},