1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
| $.ajax({
| type:'GET',
| dataType:'json',
| async:false,
| url:prefix+'env/projectstatistic/project_china_map',
| data:{},
| contentType:'application/x-www-form-urlencoded',
| success(data){
| //城市经纬度
| const scatterGeo = data.scatterGeo;
| //城市数据
| const scatterVal = data.scatterVal;
| //数据转换，转换后的格式：[{name: 'cityName', value: [lng, lat, val]}, {...}]
| const convertScatterData = function(data) {
| let res = [];
| for(let i=0;i<data.length;i++) {
| let geoCoord = scatterGeo[data[i].name];
| if(geoCoord) {
| res.push({
| name: data[i].name,
| value: geoCoord.concat(data[i].value)
| });
| }
| }
| return res;
| };
| //地图配置项
| mapTemplate1 = {
| title: {
| text: data.title,
| x: 'center',
| textStyle: {
| color:'#fff',
| fontStyle:'normal',
| fontWeight:'bold',
| fontFamily:'sans-serif',
| fontSize:12
| }
| },
| // legend: {
| // data: [data.mapname], //与series的name属性对应
| // orient: 'vertical',
| // top:0,
| // y: 'bottom',
| // x: 'right',
| // textStyle: {
| // color: '#fff'
| // }
| // },
| tooltip: {
| trigger: 'item',
| formatter: function(params) {
| return params.name + ' : ' + params.value[2]+"个";
| }
| },
| visualMap: {
| min: 0,
| max: data.max,
| top:'20%',
| itemWidth:'10%', //长条的宽度
| itemHeight:'50%',//长条的宽度
| y: 'bottom',
| x: 'right',
| calculable: true,
| inRange: {
| color: ['#50a3ba', '#eac736', '#d94e5d']
| },
| textStyle: {
| color: '#fff'
| }
| },
| geo: {
| map: 'china',
| roam: false, //开启鼠标缩放和漫游
| zoom: 1, //地图缩放级别
| selectedMode: false, //选中模式：single | multiple
| left: 0,
| right: 0,
| top: 0,
| bottom: 0,
| layoutCenter: ['50%', '50%'], //设置后left/right/top/bottom等属性无效
| layoutSize: '100%',
| label: {
| emphasis: {
| show: false
| }
| },
| itemStyle: {
| normal: {
| areaColor: '#101f32',
| borderWidth: 1.1,
| borderColor: '#0092f6',
| },
| emphasis: {
| areaColor: '#069'
| }
| }
| },
| series: [{
| name: data.mapname,
| type: 'scatter',
| coordinateSystem: 'geo',
| symbolSize: 5,
| label: {
| normal: {
| show: false
| },
| emphasis: {
| show: false
| }
| },
| itemStyle: {
| emphasis: {
| borderColor: '#fff',
| borderWidth: 1
| }
| },
| data: convertScatterData(scatterVal)
| }]
| };
| }
| })
|
|
