vue里面使用echarts制作攻击防御可视化视图echarts的攻击防御可视化视图
百度的echarts其实是很强大他的文档很详细，我工作中正好需要做一个可视化的攻击防御我在这里总结一下，给看到的小伙伴排排坑，废话不多说先上一个做出来的效果图
这是我的做出来最终效果他原来效果是
这个原效果在echarts社区里面就能找到，他地图使用的是百度提供的免费地图API这个可以修改颜色等我在的原基础上添加了攻击的坐标高亮、鼠标移入上去有攻击次数值、根据攻击值显示坐标的大小
maps(){
// var geoCoorddata = {
// '武汉': [114.30539299999998, 30.593099],
// '深圳': [114.05786499999999, 22.543096],
// '北京': [116.40739499999995, 39.904211],
// '阿克苏': [80.26338699999997, 41.167548]
// },
var geoCoorddata = this.coordinate //geoCoorddata的数据格式在上面
// var SHdata = [
// [{
// name: '上海'
// }, {
// name: '武汉',
// value: 14099
// }],
// [{
// name: '上海'
// }, {
// name: '阿克苏',
// value: 50
// }],
// [{
// name: '上海'
// }, {
// name: '深圳',
// value: 14000
// }]
// ];
var SHdata = this.placeCounts //SHdata的数据格式在上面
var series = [];
[
['上海', SHdata]
].forEach((item, i)=> {
series.push({
type: 'lines',
mapType: 'china',
coordinateSystem: 'bmap',
zlevel: 1,
// data: [{
// name: '武汉',
// toname: '北京',
// coords: [geoCoorddata['武汉'], geoCoorddata['北京']]
// }, {
// name: '深圳',
// toname: '北京',
// coords: [geoCoorddata['深圳'], geoCoorddata['北京']]
// }, {
// name: '阿克苏',
// toname: '北京',
// coords: [geoCoorddata['阿克苏'], geoCoorddata['北京']]
// }],
data: this.List2,//data数据格式在上面
//线上面的动态特效
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#fff',
symbolSize: 4
},
lineStyle: {
normal: {
width: '',
color: '#a6c84c',
curveness: 0.2
}
}
}, {
type: 'effectScatter',
mapType: 'china',
coordinateSystem: 'bmap',
zlevel: 3,
data: [{
name: '',
value: geoCoorddata['上海'].concat(200)
}, ],
rippleEffect: {
period: 10,
scale: 5,
brushType: 'fill'
},
}, {
type: 'effectScatter',
coordinateSystem: 'bmap',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
symbolSize: function(val) {
if (val[2] >= 10000) {
return val[2] / 100 + 30
} else if (val[2] >= 1000) {
return val[2] / 100 + 10
} else if (val[2] <= 10) {
return 10
} else {
return val[2] / 100
}
},
showEffectOn: 'render',
itemStyle: {
normal: {
color: '#a6c84c',
opacity: .1
}
},
data: item[1].map(function(dataItem) {
return {
name: dataItem[1].name.concat([dataItem[1].value]),
value: geoCoorddata[dataItem[1].name].concat([dataItem[1].value])
}
})
});
})
myMap.setOption({
bmap: {
center: [105.65, 32.76],
zoom: 5,
roam: true,
mapStyle: {
styleJson: [{
'featureType': 'land', //调整土地颜色
'elementType': 'geometry',
'stylers': {
'color': '#081734'
}
}, {
'featureType': 'building', //调整建筑物颜色
'elementType': 'geometry',
'stylers': {
'color': '#04406F'
}
}, {
'featureType': 'building', //调整建筑物标签是否可视
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'highway', //调整高速道路颜色
'elementType': 'geometry',
'stylers': {
'color': '#015B99'
}
}, {
'featureType': 'highway', //调整高速名字是否可视
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'arterial', //调整一些干道颜色
'elementType': 'geometry',
'stylers': {
'color': '#003051'
}
}, {
'featureType': 'arterial',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'green',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'water',
'elementType': 'geometry',
'stylers': {
'color': '#044161'
}
}, {
'featureType': 'subway', //调整地铁颜色
'elementType': 'geometry.stroke',
'stylers': {
'color': '#003051'
}
}, {
'featureType': 'subway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'railway',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'railway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'all', //调整所有的标签的边缘颜色
'elementType': 'labels.text.stroke',
'stylers': {
'color': '#313131'
}
}, {
'featureType': 'all', //调整所有标签的填充颜色
'elementType': 'labels.text.fill',
'stylers': {
'color': '#FFFFFF'
}
}, {
'featureType': 'manmade',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'manmade',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'local',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'local',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'subway',
'elementType': 'geometry',
'stylers': {
'lightness': -65
}
}, {
'featureType': 'railway',
'elementType': 'all',
'stylers': {
'lightness': -40
}
}, {
'featureType': 'boundary',
'elementType': 'geometry',
'stylers': {
'color': '#8b8787',
'weight': '1',
'lightness': -29
}
}]
}
},
tooltip: {
show: true,
trigger: 'item',
formatter: '{b}'
},
series:series
})
}
要是还有小伙伴没有看到我这里另外在附加一份静态页面的代码
整个body里面的代码
前提自己需要引入bmap.min.js、echarts.js、和百度地图的
<body>
<style>
body，html {
width: 100%;
height: 100%;
}
#aa {
height: 700px;
width: 1520px;
color: #ffa022
}
</style>
<div id="aa"></div>
<script>
var aa = echarts.init(document.getElementById("aa"))
var geoCoorddata = {
'上海': [121.4648, 31.2891],
'武汉': [114.30539299999998, 30.593099],
'武汉': [114.3053111, 30.59223],
'深圳': [114.05786499999999, 22.543096],
'北京': [116.40739499999995, 39.904211],
'阿克苏': [80.26338699999997, 41.167548]
};
var SHdata = [
[{
name: '上海'
}, {
name: '武汉',
value: 14099
}],
[{
name: '上海'
}, {
name: '阿克苏',
value: 50
}],
[{
name: '上海'
}, {
name: '深圳',
value: 14000
}]
];
var series = [];
[
['上海', SHdata]
].forEach(function(item, i) {
series.push({
type: 'lines',
mapType: 'china',
coordinateSystem: 'bmap',
zlevel: 1,
data: [{
name: '武汉',
toname: '上海',
coords: [geoCoorddata['武汉'], geoCoorddata['上海']]
}, {
name: '深圳',
toname: '上海',
coords: [geoCoorddata['深圳'], geoCoorddata['上海']]
}, {
name: '阿克苏',
toname: '上海',
coords: [geoCoorddata['阿克苏'], geoCoorddata['上海']],
}],
//线上面的动态特效
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#fff',
symbolSize: 4
},
lineStyle: {
normal: {
width: '',
color: '#a6c84c',
curveness: 0.2
}
}
}, {
type: 'effectScatter',
mapType: 'china',
coordinateSystem: 'bmap',
zlevel: 3,
data: [{
name: '上海',
value: geoCoorddata['上海'].concat(100)
}, ],
rippleEffect: {
period: 10,
scale: 5,
brushType: 'fill'
},
}, {
type: 'effectScatter',
coordinateSystem: 'bmap',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
},
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: function(val) {
if (val[2] >= 10000) {
return val[2] / 100 + 30
} else if (val[2] >= 1000) {
return val[2] / 100 + 10
} else if (val[2] <= 10) {
return 10
} else {
return val[2] / 100
}
},
showEffectOn: 'render',
itemStyle: {
normal: {
color: '#a6c84c',
Width: 280,
Type: 'dotted',
opacity: .1
}
},
data: item[1].map(function(dataItem) {
return {
name: dataItem[1].name,
value: geoCoorddata[dataItem[1].name].concat([dataItem[1].value])
}
})
});
})
aa.setOption({
bmap: {
center: [113.65, 34.76],
zoom: 5,
roam: true,
mapStyle: {
styleJson: [{
'featureType': 'land', //调整土地颜色
'elementType': 'geometry',
'stylers': {
'color': '#081734'
}
}, {
'featureType': 'building', //调整建筑物颜色
'elementType': 'geometry',
'stylers': {
'color': '#04406F'
}
}, {
'featureType': 'building', //调整建筑物标签是否可视
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'highway', //调整高速道路颜色
'elementType': 'geometry',
'stylers': {
'color': '#015B99'
}
}, {
'featureType': 'highway', //调整高速名字是否可视
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'arterial', //调整一些干道颜色
'elementType': 'geometry',
'stylers': {
'color': '#003051'
}
}, {
'featureType': 'arterial',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'green',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'water',
'elementType': 'geometry',
'stylers': {
'color': '#044161'
}
}, {
'featureType': 'subway', //调整地铁颜色
'elementType': 'geometry.stroke',
'stylers': {
'color': '#003051'
}
}, {
'featureType': 'subway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'railway',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'railway',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'all', //调整所有的标签的边缘颜色
'elementType': 'labels.text.stroke',
'stylers': {
'color': '#313131'
}
}, {
'featureType': 'all', //调整所有标签的填充颜色
'elementType': 'labels.text.fill',
'stylers': {
'color': '#FFFFFF'
}
}, {
'featureType': 'manmade',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'manmade',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'local',
'elementType': 'geometry',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'local',
'elementType': 'labels',
'stylers': {
'visibility': 'off'
}
}, {
'featureType': 'subway',
'elementType': 'geometry',
'stylers': {
'lightness': -65
}
}, {
'featureType': 'railway',
'elementType': 'all',
'stylers': {
'lightness': -40
}
}, {
'featureType': 'boundary',
'elementType': 'geometry',
'stylers': {
'color': '#8b8787',
'weight': '1',
'lightness': -29
}
}]
}
},
tooltip: {
show: true,
trigger: 'item',
formatter: '{b}:{c}'
},
series: series
})
</script>
</body>