Map() {
let mapChart = this.$echarts.init(this.$refs.map);
this.$echarts.registerMap('china', china); //注册地图
let mapOption = {
tooltip: {
show: true,
formatter: function (params) {
if(params.value[2]){
return params.name +":"+params.value[2];
}
}
},
visualMap: {
show: false
},
legend: {
orient: 'horizontal',
left: '6%',
bottom: '6%',
data: this.maptype,
textStyle:{
fontSize: 14,//字体大小
color: '#ffffff'//字体颜色
},
},
geo: {
map: "china",
roam: false, //不开启缩放和平移
zoom: 1, //视角缩放比例
silent: true,
label: {
normal: {
show: true,
fontSize: "10",
color: "#266ae5",
},
},
itemStyle: {
normal: {
borderWidth: 5,
borderColor: '#286ded',
areaColor: '#0f2561',
shadowColor: "rgba(50,120,250,.2)",
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 50,
}
},
},
series:
[
{
name: '病毒感染', // series名称
type: "effectScatter",
coordinateSystem: "geo",
effectType: "ripple",
showEffectOn: "render",
// 散点样式
rippleEffect: {
period: 2, // 涟漪特效的动画周期
scale: 3, // 涟漪特效动画中波纹的最大缩放比例
brushType: "fill", // 涟漪特效的波纹绘制方式
},
// 散点大小
symbolSize: 10,
zlevel: 3,
color:'#ff4058',
data: [{
name: "云南",
value: [102.712251, 25.040609,340]
}]
},
{
name: '网络攻击', // series名称
type: "effectScatter",
coordinateSystem: "geo",
effectType: "ripple",
showEffectOn: "render",
// 散点样式
rippleEffect: {
period: 2, // 涟漪特效的动画周期
scale: 3, // 涟漪特效动画中波纹的最大缩放比例
brushType: "fill", // 涟漪特效的波纹绘制方式
},
// 散点大小
symbolSize: 10,
zlevel: 3,
color:'#e0a83b',
data: [
{
name: "青岛",
value: [120.369557, 36.094406,110]
},
],
},
{
name: '违规操作', // series名称
type: "effectScatter",
coordinateSystem: "geo",
effectType: "ripple",
showEffectOn: "render",
// 散点样式
rippleEffect: {
period: 2, // 涟漪特效的动画周期
scale: 3, // 涟漪特效动画中波纹的最大缩放比例
brushType: "fill", // 涟漪特效的波纹绘制方式
},
// 散点大小
symbolSize: 10,
zlevel: 3,
color:'#2c77ff',
data: [
{
name: "甘肃",
value: [103.823557, 36.058039,220]
}
],
},
{
name: '漏洞信息', // series名称
type: "effectScatter",
coordinateSystem: "geo",
effectType: "ripple",
showEffectOn: "render",
// 散点样式
rippleEffect: {
period: 2, // 涟漪特效的动画周期
scale: 3, // 涟漪特效动画中波纹的最大缩放比例
brushType: "fill", // 涟漪特效的波纹绘制方式
},
// 散点大小
symbolSize: 10,
zlevel: 3,
color:'#01f8f5',
data: [
{
name: "甘肃",
value: [103.823557, 36.058039,220]
}
],
},
{
name: '身份认证', // series名称
type: "effectScatter",
coordinateSystem: "geo",
effectType: "ripple",
showEffectOn: "render",
// 散点样式
rippleEffect: {
period: 2, // 涟漪特效的动画周期
scale: 3, // 涟漪特效动画中波纹的最大缩放比例
brushType: "fill", // 涟漪特效的波纹绘制方式
},
// 散点大小
symbolSize: 10,
zlevel: 3,
color:'#5d2eff',
data: [
{
name: "甘肃",
value: [103.823557, 36.058039,220]
}
],
}
]
};
mapChart.setOption(mapOption);
},
