今日学习总计

今日继续将数据库信息导入大屏

function initEcharts(mapData, pointData, mapJson) {
//注册
echarts.registerMap('Map', mapJson);

//这里加true是为了让地图重新绘制，不然如果你有筛选的时候地图会飞出去
myChart.setOption({
backgroundColor: 'rgb(0,153,255)',
// tooltip: {
// trigger: "item",
// formatter: p => {
// let val = p.value;
// if (window.isNaN(val)) {
// val = 0;
// }
// let txtCon =
// "<div style='text-align:center'>" + p.name + ":<br />台量：" + val.toFixed(2) + '</div>';
// return txtCon;
// }
// },
tooltip: {
trigger: "item",
formatter: p => {
let val = p.value;
if (window.isNaN(val)) {
val = 0;
}
let txtCon =
p.name + "<br>" + "<hr>" + "感染人数 : " + val.toFixed(2);
return txtCon;
}
},
//这里可以添加echarts内置的，例如下载图片等
toolbox: {
feature: {
dataView: {
show: false,
readOnly: true
},
magicType: {
show: false,
type: ["line", "bar"]
},
restore: {
show: false
},
saveAsImage: {
show: true,
name: parentInfo[parentInfo.length - 1].cityName + "地图",
pixelRatio: 2
}
},
iconStyle: {
normal: {
borderColor: "#41a7de"
}
},
itemSize: 15,
top: 20,
right: 22
},
visualMap: {
type: 'piecewise',
pieces:[{
gt: 100,
label: "> 100 人",
color: "#7f1100"
}, {
gte: 10,
lte: 100,
label: "10 - 100 人",
color: "#ff5428"
}, {
gte: 1,
lt: 10,
label: "1 - 9 人",
color: "#ff8c71"
}, {
gt: 0,
lt: 1,
label: "疑似",
color: "#ffd768"
}, {
value: 0,
color: "#ffffff"
}],
color: '#fff',
textStyle: {
color: '#fff',
},
visibility: 'off'
},

series: [{
name: "地图",
type: "map",
map: "Map",
roam: true, //是否可缩放
zoom: 1.1, //缩放比例
data: mapData,
itemStyle: {
normal: {
show: true,
areaColor: '#2E98CA',
borderColor: 'rgb(185, 220, 227)',
borderWidth: '1',
},
},
label: {

normal: {
show: true, //显示省份标签
textStyle: {
color: "rgb(249, 249, 249)", //省份标签字体颜色
fontSize: 12
},
formatter: p => {
let val = p.value;
if (window.isNaN(val)) {
val = 0;
}
//
switch (p.name) {
case '内蒙古自治区':
p.name = "内蒙古"
break;
case '西藏自治区':
p.name = "西藏"
break;
case '新疆维吾尔自治区':
p.name = "新疆"
break;
case '宁夏回族自治区':
p.name = "宁夏"
break;
case '广西壮族自治区':
p.name = "广西"
break;
case '香港特别行政区':
p.name = "香港"
break;
case '澳门特别行政区':
p.name = "澳门"
break;
default:
// code
}
if (p.name === "内蒙古自治区") {
p.name = "内蒙古";
}
let txtCon =
p.name;
return txtCon;
}
},
emphasis: {
//对应的鼠标悬浮效果
show: true,
textStyle: {
color: "#000"
}
}
}
},
{
name: '散点',
type: 'effectScatter',
coordinateSystem: 'geo',
rippleEffect: {
brushType: 'fill'
},
itemStyle: {
normal: {
color: '#F4E925',
shadowBlur: 10,
shadowColor: '#333'
}
},
data: pointData,
symbolSize: 8,
showEffectOn: 'render', //加载完毕显示特效
},
]

}, true)

//点击前解绑，防止点击事件触发多次
myChart.off('click');
myChart.on('click', echartsMapClick);
}

//echarts点击事件

function echartsMapClick(params) {
console.log("=========params===========")
console.log(params)
console.log("=========params===========")
//如果当前是最后一级，那就直接return
if (parentInfo[parentInfo.length - 1].code == params.data.cityCode) {
return
}
let data = params.data
parentInfo.push({
cityName: data.name,
level: data.level,
code: data.cityCode
})
getGeoJson(data.cityCode)

}
</script>