vue里面引用echarts制作攻击防御地图可视化视图

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])
                    }
                })
            });
        })
        my