625 lines
29 KiB
Vue
625 lines
29 KiB
Vue
|
<template>
|
|||
|
|
<div class='wrapper'>
|
|||
|
|
<div class='chart' id='chart' >
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import axios from 'axios'
|
|||
|
|
export default {
|
|||
|
|
props:['ip','isp','cou','protocol'],
|
|||
|
|
watch:{
|
|||
|
|
ip(newValue,oldValue){
|
|||
|
|
console.log("TTTTTTTTTTTTTTTTTT1")
|
|||
|
|
console.log("新:"+newValue +"旧:"+oldValue)
|
|||
|
|
console.log("TTTTTTTTTTTTTTTTTT1")
|
|||
|
|
this.ip=newValue;
|
|||
|
|
this.handleChange();
|
|||
|
|
},
|
|||
|
|
isp(newValue,oldValue){
|
|||
|
|
console.log("TTTTTTTTTTTTTTTTTT2")
|
|||
|
|
console.log("新:"+newValue +"旧:"+oldValue)
|
|||
|
|
console.log("TTTTTTTTTTTTTTTTTT2")
|
|||
|
|
this.isp=newValue;
|
|||
|
|
this.handleChange();
|
|||
|
|
},
|
|||
|
|
protocol(newValue,oldValue){
|
|||
|
|
console.log("TTTTTTTTTTTTTTTTTT3")
|
|||
|
|
console.log("新:"+newValue +"旧:"+oldValue)
|
|||
|
|
console.log("TTTTTTTTTTTTTTTTTT3")
|
|||
|
|
this.protocol=newValue;
|
|||
|
|
this.handleChange();
|
|||
|
|
},
|
|||
|
|
cou(newValue,oldValue){
|
|||
|
|
console.log("TTTTTTTTTTTTTTTTTT4")
|
|||
|
|
console.log("新:"+newValue +"旧:"+oldValue)
|
|||
|
|
console.log("TTTTTTTTTTTTTTTTTT4")
|
|||
|
|
this.cou=newValue;
|
|||
|
|
this.handleChange();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
name: "indexDQ2",
|
|||
|
|
data () {
|
|||
|
|
return {
|
|||
|
|
// ip:"",
|
|||
|
|
// isp:"",
|
|||
|
|
// cou:"",
|
|||
|
|
// protocol:null,
|
|||
|
|
switchLanguage:"",//用于页面中英文切换
|
|||
|
|
// countryEnJson:"",//用于储存国家英文字典
|
|||
|
|
maxValue:0,
|
|||
|
|
newestInfo:"",
|
|||
|
|
ws: null,
|
|||
|
|
// listAdd:[],
|
|||
|
|
chart:undefined,
|
|||
|
|
// res :[],
|
|||
|
|
ddaattaa:""
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
this.handleChange0();
|
|||
|
|
},
|
|||
|
|
mounted () {
|
|||
|
|
this.handleChange()
|
|||
|
|
// this.getWorld()
|
|||
|
|
// 模拟初始数据获取
|
|||
|
|
// 模拟数据更新
|
|||
|
|
// setInterval(() => {
|
|||
|
|
// this.getData();
|
|||
|
|
// }, 3000);
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
handleChange0(){
|
|||
|
|
/****************************************************************************/
|
|||
|
|
let data = {
|
|||
|
|
}
|
|||
|
|
this.$axios.get(this.$http.api.targetMap,data).then(res=> {
|
|||
|
|
console.log("地图访问成功")
|
|||
|
|
if(res.code=='200'){
|
|||
|
|
console.log("地图访问成功OK")
|
|||
|
|
this.ddaattaa=res.dataObject.earthAddTitle;
|
|||
|
|
this.getWorld()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
/*********************************************************************************/
|
|||
|
|
// this.ddaattaa="{\"dataObject\":{\"newestCountry\":\"墨西哥\",\"maxValue\":8593,\"newestInfo\":\"墨西哥484\",\"earthAddTitle\":[{\"name\":\"美国\"" +
|
|||
|
|
// ",\"title\":\"RECRUITMENTOFPERSONNELINMEXICOANDLATINAMERICA\",\"value\":893},{\"name\":\"印度\",\"title\":\"印度ixigo数据1700万\"," +
|
|||
|
|
// "\"value\":1982},{\"name\":\"法国\",\"title\":\"France124K | NICEQUALITY\",\"value\":1645},{\"name\":\"英国\",\"title\":" +
|
|||
|
|
// "\"100XAccountsHotmailUnitedKingdomFresh & FullAccess ⚡️Capture ⚡️PrivateAccs\",\"value\":1576},{\"name\":\"俄罗斯\"," +
|
|||
|
|
// "\"title\":\"LeadershipoftheAirborneTroopsandothersofRussia\",\"value\":1279},{\"name\":\"德国\",\"title\":" +
|
|||
|
|
// "\"1MGermanyUHQcombolist\",\"value\":1231},{\"name\":\"中国\",\"title\":\"900 - 山东 - 务工人员信息明细统计表\",\"value\":4275}," +
|
|||
|
|
// "{\"name\":\"墨西哥\",\"title\":\"墨西哥务工人员信息明细统计表\",\"value\":8593}]}," +
|
|||
|
|
// "\"code\":\"earth\"}"
|
|||
|
|
// this.getWorld()
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
handleChange(){
|
|||
|
|
/****************************************************************************/
|
|||
|
|
let data = {
|
|||
|
|
"ip":this.ip,
|
|||
|
|
"isp":this.isp,
|
|||
|
|
"cou":this.cou,
|
|||
|
|
}
|
|||
|
|
let data2 = {
|
|||
|
|
"ip":this.ip,
|
|||
|
|
"isp":this.isp,
|
|||
|
|
"cou":this.cou,
|
|||
|
|
"protocol":this.protocol,
|
|||
|
|
}
|
|||
|
|
this.$axios.get(this.$http.api.targetMap,this.protocol===null?data:data2).then(res=> {
|
|||
|
|
console.log("地图访问成功")
|
|||
|
|
if(res.code=='200'){
|
|||
|
|
console.log("地图访问成功OK")
|
|||
|
|
this.ddaattaa=res.dataObject.earthAddTitle;
|
|||
|
|
this.getWorld()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
/*********************************************************************************/
|
|||
|
|
// this.ddaattaa="{\"dataObject\":{\"newestCountry\":\"墨西哥\",\"maxValue\":8593,\"newestInfo\":\"墨西哥484\",\"earthAddTitle\":[{\"name\":\"美国\"" +
|
|||
|
|
// ",\"title\":\"RECRUITMENTOFPERSONNELINMEXICOANDLATINAMERICA\",\"value\":893},{\"name\":\"印度\",\"title\":\"印度ixigo数据1700万\"," +
|
|||
|
|
// "\"value\":1982},{\"name\":\"法国\",\"title\":\"France124K | NICEQUALITY\",\"value\":1645},{\"name\":\"英国\",\"title\":" +
|
|||
|
|
// "\"100XAccountsHotmailUnitedKingdomFresh & FullAccess ⚡️Capture ⚡️PrivateAccs\",\"value\":1576},{\"name\":\"俄罗斯\"," +
|
|||
|
|
// "\"title\":\"LeadershipoftheAirborneTroopsandothersofRussia\",\"value\":1279},{\"name\":\"德国\",\"title\":" +
|
|||
|
|
// "\"1MGermanyUHQcombolist\",\"value\":1231},{\"name\":\"中国\",\"title\":\"900 - 山东 - 务工人员信息明细统计表\",\"value\":4275}," +
|
|||
|
|
// "{\"name\":\"墨西哥\",\"title\":\"墨西哥务工人员信息明细统计表\",\"value\":8593}]}," +
|
|||
|
|
// "\"code\":\"earth\"}"
|
|||
|
|
// this.getWorld()
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
showTitleView(newestInfo,newestCountry){
|
|||
|
|
// console.log(newestInfo)
|
|||
|
|
// let new_cname = dataArr[0]['name']+dataArr[0]['value']
|
|||
|
|
let new_cname = newestInfo //中国44
|
|||
|
|
// console.log("判断最后一条数据是否有变化")
|
|||
|
|
// console.log("this.Cname:"+this.newestInfo)
|
|||
|
|
// console.log("new_cname:"+new_cname)
|
|||
|
|
if (this.newestInfo != new_cname){
|
|||
|
|
console.log("RRRRRRRRRRRRR进来了啊")
|
|||
|
|
this.newestInfo = new_cname;
|
|||
|
|
// this.showTooltip(-1);
|
|||
|
|
this.showTooltip(newestCountry);
|
|||
|
|
// this.showWireframe(-1)
|
|||
|
|
this.showWireframe(newestCountry)
|
|||
|
|
setTimeout(this.hideTooltip,10000);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
showWireframe(newestCountry) {
|
|||
|
|
// // 取消高亮指定的数据图形
|
|||
|
|
// this.chart.dispatchAction({
|
|||
|
|
// type: 'downplay',
|
|||
|
|
// seriesIndex: 0,
|
|||
|
|
// dataIndex: index
|
|||
|
|
// })
|
|||
|
|
// 高亮指定的数据图形
|
|||
|
|
this.chart.dispatchAction({
|
|||
|
|
type: 'highlight',
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
name: newestCountry
|
|||
|
|
// dataIndex: index + 1
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
hideTooltip(){
|
|||
|
|
this.chart.dispatchAction({
|
|||
|
|
type: 'hideTip',
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
dataIndex: -1
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
// showTooltip(index) {
|
|||
|
|
showTooltip(newestCountry) {
|
|||
|
|
// // 隐藏提示框
|
|||
|
|
// this.chart.dispatchAction({
|
|||
|
|
// type: 'hideTip',
|
|||
|
|
// seriesIndex: 0,
|
|||
|
|
// dataIndex: index
|
|||
|
|
// })
|
|||
|
|
// 显示提示框
|
|||
|
|
this.chart.dispatchAction({
|
|||
|
|
type: 'showTip',
|
|||
|
|
seriesIndex: 0,
|
|||
|
|
name:newestCountry
|
|||
|
|
// dataIndex: index + 1
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
getWorld () { //ddaattaa
|
|||
|
|
/****************************************************************************/
|
|||
|
|
var json = require('/src/api/world.json');
|
|||
|
|
let namemap = json.namemap;
|
|||
|
|
let dataArr=[];
|
|||
|
|
// this.maxValue=JSON.parse(this.ddaattaa).dataObject.maxValue
|
|||
|
|
this.maxValue=20000
|
|||
|
|
// dataArr = JSON.parse(this.ddaattaa).dataObject.earthAddTitle
|
|||
|
|
dataArr = this.ddaattaa
|
|||
|
|
this.drawChart(namemap, dataArr);
|
|||
|
|
// this.showTitleView(
|
|||
|
|
// JSON.parse(this.ddaattaa).dataObject.newestInfo,
|
|||
|
|
// JSON.parse(this.ddaattaa).dataObject.newestCountry
|
|||
|
|
// );
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
drawChart (namemap, dataArr) {
|
|||
|
|
let maxValue=this.maxValue
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
let chart = this.$echarts.init(document.getElementById('chart'))
|
|||
|
|
// 监听屏幕变化自动缩放图表
|
|||
|
|
window.addEventListener('resize', function () {
|
|||
|
|
chart.resize()
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
///////////////////////////
|
|||
|
|
//用于存储地图数据
|
|||
|
|
var json = require('/src/api/world.json');
|
|||
|
|
var pointMap =json.trapeze;
|
|||
|
|
var geoCoordMap = pointMap;
|
|||
|
|
var countryEnJson=json.country_en;
|
|||
|
|
var zh_en=this.switchLanguage;
|
|||
|
|
|
|||
|
|
var max = 480,
|
|||
|
|
min = 9; // todo
|
|||
|
|
var maxSize4Pin = 50,
|
|||
|
|
minSize4Pin = 20;
|
|||
|
|
|
|||
|
|
var convertData = function (dataD) {
|
|||
|
|
var res = [];
|
|||
|
|
if(dataD){
|
|||
|
|
for (var i = 0; i < dataD.length; i++) {
|
|||
|
|
var geoCoord = geoCoordMap[dataD[i].name];
|
|||
|
|
if (geoCoord) {
|
|||
|
|
res.push({
|
|||
|
|
name: dataD[i].name,
|
|||
|
|
name_en: countryEnJson[dataD[i].name],
|
|||
|
|
zh_en:zh_en,
|
|||
|
|
value: geoCoord.concat(dataD[i].value),
|
|||
|
|
// value: geoCoord,
|
|||
|
|
// size:dataD[i].value,
|
|||
|
|
title: dataD[i].title,
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return res;
|
|||
|
|
};
|
|||
|
|
// var convertDataA = function (dataD) {
|
|||
|
|
// var res = [];
|
|||
|
|
// if(dataD){
|
|||
|
|
// for (var i = 0; i < dataD.length; i++) {
|
|||
|
|
// var geoCoord = geoCoordMap[dataD[i].name];
|
|||
|
|
// if (geoCoord) {
|
|||
|
|
// res.push({
|
|||
|
|
// name: dataD[i].name,
|
|||
|
|
// value: geoCoord.concat(dataD[i].value),
|
|||
|
|
// // value: geoCoord,
|
|||
|
|
// title: dataD[i].title,
|
|||
|
|
// num:dataD[i].value,
|
|||
|
|
// });
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// return res;
|
|||
|
|
// };
|
|||
|
|
// 绘制图表
|
|||
|
|
chart.setOption({
|
|||
|
|
|
|||
|
|
// 图表主标题
|
|||
|
|
// title: {
|
|||
|
|
// // text: '数据泄露分布地图', // 主标题文本，支持使用 \n 换行
|
|||
|
|
// top: 20, // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
|
|||
|
|
// left: 'center', // 值: 'left', 'center', 'right' 同上
|
|||
|
|
// textStyle: { // 文本样式
|
|||
|
|
// fontSize: 24,
|
|||
|
|
// fontWeight: 600,
|
|||
|
|
// color: '#fff'
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
// 提示框组件
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
|
|||
|
|
// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
|
|||
|
|
// 使用函数模板 传入的数据值 -> value: number | Array
|
|||
|
|
formatter: function (val) {
|
|||
|
|
var text = '';
|
|||
|
|
text += '<div style="display:flex;flex-direction:row;">'+
|
|||
|
|
'<div style="background-color:#03D16D;height:auto;width:10px;margin-right:5px;"></div>'+
|
|||
|
|
'<div style="display:flex;flex-direction:column;">'+
|
|||
|
|
'<span>'+ val.data.name+'</span>'+
|
|||
|
|
'<span >'+'分类信息:'+'</span>'+
|
|||
|
|
'<span display:width="60px">'+ val.data.title+'</span>'+
|
|||
|
|
'</div>'+
|
|||
|
|
'</div>'
|
|||
|
|
return text;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// visualMap: {
|
|||
|
|
// type: 'continuous',
|
|||
|
|
// min: 0,
|
|||
|
|
// max: 100,
|
|||
|
|
// range: [1, 10],
|
|||
|
|
// center: [104.114129, 37.550339],
|
|||
|
|
// },
|
|||
|
|
// visualMap: {
|
|||
|
|
// show: false,
|
|||
|
|
// min: 0,
|
|||
|
|
// max: 600,
|
|||
|
|
// left: 'left',
|
|||
|
|
// top: 'bottom',
|
|||
|
|
// text: ['高', '低'], // 文本，默认为数值文本
|
|||
|
|
// calculable: true,
|
|||
|
|
// seriesIndex: [1],
|
|||
|
|
// //控制地图颜色的显示区间
|
|||
|
|
// inRange: {
|
|||
|
|
// // color: ['#3B5077', '#031525'] // 蓝黑
|
|||
|
|
// // color: ['#ffc0cb', '#800080'] // 红紫
|
|||
|
|
// // color: ['#3C3B3F', '#605C3C'] // 黑绿
|
|||
|
|
// // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
|
|||
|
|
// // color: ['#23074d', '#cc5333'] // 紫红
|
|||
|
|
// // color: ['#00467F', '#A5CC82'] // 蓝绿
|
|||
|
|
// // color: ['#1488CC', '#2B32B2'] // 浅蓝
|
|||
|
|
// // color: ['#00467F', '#A5CC82', '#ffc0cb'] // 蓝绿红
|
|||
|
|
// // color: ['#00467F', '#A5CC82'] // 蓝绿
|
|||
|
|
// // color: ['#00467F', '#A5CC82'] // 蓝绿
|
|||
|
|
// // color: ['#00467F', '#A5CC82'] // 蓝绿
|
|||
|
|
// color: ['#22e5e8', '#0035f9', '#22e5e8'] // 蓝绿
|
|||
|
|
//
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
geo: {
|
|||
|
|
//地图的初始配置
|
|||
|
|
// show: true,
|
|||
|
|
map: 'world',
|
|||
|
|
projection:'geoMercator', //使用墨卡托投影
|
|||
|
|
// mapProjection: {
|
|||
|
|
// // 使用等经纬度投影
|
|||
|
|
// type: 'equidistantly'
|
|||
|
|
// },
|
|||
|
|
// zoom:1,
|
|||
|
|
// label: {
|
|||
|
|
// normal: {
|
|||
|
|
// show: false
|
|||
|
|
// },
|
|||
|
|
// emphasis: {
|
|||
|
|
// show: false
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
roam:false,
|
|||
|
|
// center:undefined,
|
|||
|
|
///////////////////////////////////////////////////////1/2
|
|||
|
|
// 图形上的文本标签
|
|||
|
|
label: {
|
|||
|
|
show: false// 是否显示对应地名
|
|||
|
|
},
|
|||
|
|
// 地图区域的多边形 图形样式
|
|||
|
|
itemStyle: {
|
|||
|
|
// areaColor: '#3ca3e6', // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用
|
|||
|
|
areaColor: '#0d1b4a', // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用
|
|||
|
|
borderWidth: 0.5, // 描边线宽 为 0 时无描边
|
|||
|
|
borderColor: '#00F1FF', // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数
|
|||
|
|
borderType: 'solid' // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
|
|||
|
|
},
|
|||
|
|
// 高亮状态下的多边形和标签样式
|
|||
|
|
emphasis: {
|
|||
|
|
label: {
|
|||
|
|
show: false, // 是否显示标签
|
|||
|
|
color: '#fff' // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
areaColor: '#3742ff' // 地图区域的颜色
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
////////////////////////////////////////////////1/2
|
|||
|
|
// 自定义地区的名称映射
|
|||
|
|
nameMap: namemap,
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
// type: 'map', // 类型
|
|||
|
|
type: 'scatter', // 使用墨卡托投影
|
|||
|
|
coordinateSystem:'geo', //使用地理坐标系
|
|||
|
|
// 系列名称，用于tooltip的显示，legend 的图例筛选 在 setOption 更新数据和配置项时用于指定对应的系列
|
|||
|
|
name: '数据泄露分布地图',
|
|||
|
|
// mapType: 'world', // 地图类型
|
|||
|
|
// // 是否开启鼠标缩放和平移漫游 默认不开启 如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move' 设置成 true 为都开启
|
|||
|
|
// roam: false,
|
|||
|
|
|
|||
|
|
///////////////////////////////////////////////////////1/2
|
|||
|
|
// 图形上的文本标签
|
|||
|
|
// label: {
|
|||
|
|
// show: false// 是否显示对应地名
|
|||
|
|
// },
|
|||
|
|
// // 地图区域的多边形 图形样式
|
|||
|
|
// itemStyle: {
|
|||
|
|
// // areaColor: '#3ca3e6', // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用
|
|||
|
|
// areaColor: '#0d1b4a', // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用
|
|||
|
|
// borderWidth: 0.5, // 描边线宽 为 0 时无描边
|
|||
|
|
// borderColor: '#00F1FF', // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数
|
|||
|
|
// borderType: 'solid' // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
|
|||
|
|
// },
|
|||
|
|
// // 高亮状态下的多边形和标签样式
|
|||
|
|
// emphasis: {
|
|||
|
|
// label: {
|
|||
|
|
// show: false, // 是否显示标签
|
|||
|
|
// color: '#fff' // 文字的颜色 如果设置为 'auto'，则为视觉映射得到的颜色，如系列色
|
|||
|
|
// },
|
|||
|
|
// itemStyle: {
|
|||
|
|
// areaColor: '#3742ff' // 地图区域的颜色
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
////////////////////////////////////////////////1/2
|
|||
|
|
geoIndex:0,
|
|||
|
|
// // 自定义地区的名称映射
|
|||
|
|
// nameMap: namemap,
|
|||
|
|
// 地图系列中的数据内容数组 数组项可以为单个数值
|
|||
|
|
// data: dataArr,
|
|||
|
|
data: convertData(dataArr),
|
|||
|
|
},
|
|||
|
|
// {
|
|||
|
|
// type: 'map',
|
|||
|
|
// map: 'world',
|
|||
|
|
// geoIndex: 0,
|
|||
|
|
// aspectScale: 0.75, //长宽比
|
|||
|
|
// showLegendSymbol: false, // 存在legend时显示
|
|||
|
|
// label: {
|
|||
|
|
// show: false,
|
|||
|
|
// // normal: {
|
|||
|
|
// // show: true
|
|||
|
|
// // },
|
|||
|
|
// // emphasis: {
|
|||
|
|
// // show: false,
|
|||
|
|
// // textStyle: {
|
|||
|
|
// // color: '#fff'
|
|||
|
|
// // }
|
|||
|
|
// // }
|
|||
|
|
// },
|
|||
|
|
// // roam: true,
|
|||
|
|
// // itemStyle: {
|
|||
|
|
// // normal: {
|
|||
|
|
// // areaColor: '#031525',
|
|||
|
|
// // borderColor: '#3B5077',
|
|||
|
|
// // },
|
|||
|
|
// // emphasis: {
|
|||
|
|
// // areaColor: '#2B91B7'
|
|||
|
|
// // }
|
|||
|
|
// // },
|
|||
|
|
// // 地图区域的多边形 图形样式
|
|||
|
|
// itemStyle: {
|
|||
|
|
// // areaColor: '#3ca3e6', // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用
|
|||
|
|
// areaColor: '#0d1b4a', // 地图区域的颜色 如果设置了visualMap，areaColor属性将不起作用
|
|||
|
|
// borderWidth: 0.5, // 描边线宽 为 0 时无描边
|
|||
|
|
// borderColor: '#00F1FF', // 图形的描边颜色 支持的颜色格式同 color，不支持回调函数
|
|||
|
|
// borderType: 'solid' // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
|
|||
|
|
// },
|
|||
|
|
// // animation: true,
|
|||
|
|
// namemap:namemap,
|
|||
|
|
// data: dataArr
|
|||
|
|
// // data: convertData(data)
|
|||
|
|
// },
|
|||
|
|
{
|
|||
|
|
name: '点',
|
|||
|
|
type: 'scatter',
|
|||
|
|
coordinateSystem: 'geo',
|
|||
|
|
symbol: 'pin', //气泡
|
|||
|
|
symbolSize: function (size,val) {
|
|||
|
|
var a = (maxSize4Pin - minSize4Pin) / (max - min);
|
|||
|
|
var b = minSize4Pin - a * min;
|
|||
|
|
// b = maxSize4Pin - a * max;
|
|||
|
|
return a * val[2]*100 + b;
|
|||
|
|
},
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
show: false,
|
|||
|
|
formatter: function (params) {
|
|||
|
|
return params.value[2]
|
|||
|
|
},
|
|||
|
|
textStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
fontSize: 9,
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: 'rgba(255,255,0,0)', //标志颜色
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
zlevel: 1,
|
|||
|
|
data: convertData(dataArr),
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: 'Top 500',//用于显示最高的前五个数据
|
|||
|
|
type: 'effectScatter',
|
|||
|
|
coordinateSystem: 'geo',
|
|||
|
|
// data: convertData(data.sort(function (a, b) {
|
|||
|
|
// return a.value - b.value;
|
|||
|
|
// }).slice(0, 500)), namemap, dataArr
|
|||
|
|
symbolSize: function (val) {
|
|||
|
|
// return val[2] / 2.3;
|
|||
|
|
return val[2] / (maxValue*0.03);
|
|||
|
|
},
|
|||
|
|
showEffectOn: 'render',
|
|||
|
|
rippleEffect: {
|
|||
|
|
brushType: 'stroke'
|
|||
|
|
},
|
|||
|
|
hoverAnimation: true,
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
formatter: '{b}',
|
|||
|
|
position: 'right',
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
itemStyle: {
|
|||
|
|
normal: {
|
|||
|
|
color: 'rgba(255,9,14,0.8)',
|
|||
|
|
shadowBlur: 10,
|
|||
|
|
shadowColor: '#05C3F9'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
zlevel: 1,
|
|||
|
|
data: convertData(dataArr),
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
]
|
|||
|
|
})
|
|||
|
|
// 定时显示提示框和高亮效果
|
|||
|
|
this.chart = chart;
|
|||
|
|
// let index = -1
|
|||
|
|
// let indexK = -1
|
|||
|
|
// setInterval(function () {
|
|||
|
|
// // 隐藏提示框
|
|||
|
|
// chart.dispatchAction({
|
|||
|
|
// type: 'hideTip',
|
|||
|
|
// seriesIndex: 0,
|
|||
|
|
// dataIndex: indexK
|
|||
|
|
// })
|
|||
|
|
// // 显示提示框
|
|||
|
|
// chart.dispatchAction({
|
|||
|
|
// type: 'showTip',
|
|||
|
|
// seriesIndex: 0,
|
|||
|
|
// dataIndex: indexK + 1
|
|||
|
|
// })
|
|||
|
|
// index=index+10000
|
|||
|
|
// // if (index > data.length - 1) {
|
|||
|
|
// // index = -1
|
|||
|
|
// // }
|
|||
|
|
// },3000)
|
|||
|
|
// setInterval(function () {
|
|||
|
|
// // 隐藏提示框
|
|||
|
|
// chart.dispatchAction({
|
|||
|
|
// type: 'hideTip',
|
|||
|
|
// seriesIndex: 0,
|
|||
|
|
// dataIndex: index
|
|||
|
|
// })
|
|||
|
|
// // 显示提示框
|
|||
|
|
// chart.dispatchAction({
|
|||
|
|
// type: 'showTip',
|
|||
|
|
// seriesIndex: 0,
|
|||
|
|
// dataIndex: index + 1
|
|||
|
|
// })
|
|||
|
|
// // 取消高亮指定的数据图形
|
|||
|
|
// chart.dispatchAction({
|
|||
|
|
// type: 'downplay',
|
|||
|
|
// seriesIndex: 0,
|
|||
|
|
// dataIndex: index
|
|||
|
|
// })
|
|||
|
|
// // 高亮指定的数据图形
|
|||
|
|
// chart.dispatchAction({
|
|||
|
|
// type: 'highlight',
|
|||
|
|
// seriesIndex: 0,
|
|||
|
|
// dataIndex: index + 1
|
|||
|
|
// })
|
|||
|
|
// // index++
|
|||
|
|
// // if (index > data.length - 1) {
|
|||
|
|
// // index = -1
|
|||
|
|
// // }
|
|||
|
|
// }, 1000)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.wrapper {
|
|||
|
|
/*margin-top: -80px;*/
|
|||
|
|
/*width: 100%;*/
|
|||
|
|
/*margin-left: -120px;*/
|
|||
|
|
/*margin-top: -10%;*/
|
|||
|
|
/*width: 100%;*/
|
|||
|
|
/*height: 100%;*/
|
|||
|
|
/*width: calc(100vw);*/
|
|||
|
|
/*height: calc(100vh);*/
|
|||
|
|
width: calc(100%);
|
|||
|
|
height: calc(100%);
|
|||
|
|
margin-left: -12%;
|
|||
|
|
}
|
|||
|
|
.wrapper .chart {
|
|||
|
|
/*width: 120%;*/
|
|||
|
|
/*height: 780px;*/
|
|||
|
|
/*margin: 1px 2px 0;*/
|
|||
|
|
/*!*border: 1px solid #0d1b4d;*!*/
|
|||
|
|
/*!*background: url(../../../public/bg.jpg) no-repeat; #0d1b4d *!*/
|
|||
|
|
/*background-size: 100% 100%;*/
|
|||
|
|
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
/*margin: 0.2% 0.2% 0;*/
|
|||
|
|
margin-top: 2%;
|
|||
|
|
margin-left: 10%;
|
|||
|
|
/*border: 1px solid #0d1b4d;*/
|
|||
|
|
/*background: url(../../../public/bg.jpg) no-repeat; #0d1b4d */
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
z-index: 9;
|
|||
|
|
/*position: absolute;*/
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
|