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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
| //name为省份的拼音，nameText为省份的中文
| function showprovince(chart,objCity){
| //清除图表
| chart.clear();
| //显示loading
| chart.showLoading();
| $.get('./map/json/'+objCity.pinyin+'.json', function (geoJson) { //地图名.json的相对位置
| echarts.registerMap(objCity.pinyin, geoJson); //地图名的拼音
| chart.setOption(option = {
| backgroundColor: '#fff',
| title: {
| text: '电池分布',
| left: 'center',
| textStyle: {
| color: '#000'
| }
| },
| tooltip : {
| trigger: 'item'
| },
| legend: {
| orient: 'vertical',
| x:'left'
| },
| dataRange: {
| min: 0,
| max: 2500,
| x: 'left',
| y: 'bottom',
| text:['高','低'], // 文本，默认为数值文本
| calculable : true
| },
| toolbox: {
| show: true,
| orient : 'vertical',
| x: 'right',
| y: 'center',
| feature : {
| mark : {show: true},
| dataView : {show: true, readOnly: false},
| restore : {show: true},
| saveAsImage : {show: true}
| }
| },
| grid: {
| top:'0.1%',
| left: '0.1%',
| right: '0.1%',
| bottom: '0.1%',
| containLabel: true
| },
| mapLocation: {
| x: 'left',
| y: 'top',
| width: '100%'
| },
| series: [
| {
| type: 'map',
| mapType:objCity.pinyin,
| selectedMode :'single',
| roam: true,
| itemStyle:{
| normal:{label:{show:true}},
| emphasis:{
| label:{show:true},
| color:'black'
| }
| }
| }
| ]
| });
| //隐藏loading
| chart.hideLoading();
| });
| }
|
| //创建饼状图
| //pieChart为init后的容器,tle是title.text,objEle是一个数组对象，数组内的对象name和val
| function createPie(pieChart,tle,objEle){
| //清理画布
| pieChart.clear();
| //定义饼状图的配置项和数据
| var option={
| title : {
| text:tle,
| x:'left',
| textStyle: {
| fontSize:15
| }
| },
| tooltip : {
| trigger: 'item',
| formatter: "{a} <br/>{b} : {c} ({d}%)"
| },
| // #008000(绿色), #FF0000(红色),#FFFF00(黄色),#FFC0CB(紫色)
| color: function() {
| var sys_color = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'];
| var color = [];
| for(var i = 0; i < objEle.length; i++) {
| if(objEle[i].hasOwnProperty("color")) {
| color.push(objEle[i].color);
| }else {
| color.push(sys_color[i]);
| }
| }
| return color;
| }(),
| legend: {
| /*orient : 'vertical',
| x : 'left',
| data:function(){
| var lgd=new Array();
| for(var i=0;i<objEle.length;i++)
| {
| lgd.push(objEle[i].name);
| }
| return lgd;
| }()*/
| },
| toolbox: {
| show : true,
| orient : 'vertical',
| x: 'right',
| y: 'center',
| feature : {
| mark : {show: true},
| dataView : {show: true, readOnly: false},
| magicType : {
| show: true,
| type: ['pie', 'funnel'],
| option: {
| funnel: {
| x: '25%',
| width: '50%',
| funnelAlign: 'left',
| max: 1548
| }
| }
| },
| restore : {show: true},
| saveAsImage : {show: true}
| }
| },
| calculable : true,
| series : [
| {
| name:'电池信息',
| type:'pie',
| radius : '55%',
| center: ['50%', '60%'],
| data:function(){
| var dataArr=new Array();
| for(var i=0;i<objEle.length;i++)
| {
| var oItem={
| value:objEle[i].val,
| name:objEle[i].name,
| label: {
| normal: {
| show: true
| }
| },
| labelLine: {
| normal: {
| show: true
| },
| emphasis: {
| show: true
| }
| }
| };
| if(objEle[i].val == 0) {
| //oItem.label.normal.show = false;
| //oItem.labelLine.normal.show = false;
| //oItem.labelLine.emphasis.show = false;
| }
| dataArr.push(oItem);
| }
| return dataArr;
| }()
| }
| ]
| };
| // 使用刚指定的配置项和数据显示图表。
| pieChart.setOption(option);
| pieChart.hideLoading();
| }
|
| //创建下拉框ele为下拉框，firOpt为首个option，optVal是除第一个所有的option
| function createOption(ele,firOpt,optVal){
| //清除ele下的所有的option
| ele.find('option').remove();
| var __option=new Array(); //第一下拉选项的数组
| __option[0]=$('<option>'+firOpt+'</option>'); //第一个下拉选项
| if(optVal.length!=0)
| {
| //通过for循环将下拉选项的值给option
| for(var i=1;i<optVal.length+1;i++)
| {
| __option[i]=$('<option>'+optVal[i-1]+'</option>');
| }
| }
| //将得到的option给ele
| for(var i=0;i<__option.length;i++)
| {
| ele.append(__option[i]);
| }
| }
|
| //解析json获取选中省的各个地区或市
| function getCity(name){
| var __cityArr=new Array();
| $.ajax({
| type:'post',
| url:'./map/json/'+name+'.json',
| async: false,
| success:function(data){
| //通过for循环获得城市名称的数组
| for(var i=0;i<data.features.length;i++)
| {
| __cityArr[i]=data.features[i].properties.name;
| }
| }
| });
| return __cityArr;
| }
| //创建表格的头部
| function createTblHead(tblEle){
| //先清理表格的头部
| tblEle.parent().prev('.tbl-head').remove();
| var __theadClone=tblEle.clone(); //克隆表格
| var __tblWidth=tblEle.width();
| var __div=$('<div class="tbl-head"></div>');
| __div.append(__theadClone);
| tblEle.parent().before(__div);
| var __tblHead=tblEle.parent().prev('.tbl-head');
| //定义表格头部容器的样式
| __tblHead.css({
| 'position':'relative',
| 'width':'100%',
| 'height':'30px',
| 'overflow':'hidden'
| });
| //定义表格的样式
| __tblHead.children('table').css({
| 'position':'absolute',
| 'width':__tblWidth+'px',
| 'border-collapse':'collapse'
| });
| //定义th的样式
| __tblHead.children('table').find('th').css({
| 'padding':'6px 0',
| 'border':'1px solid #CCCCCC',
| 'background':'url(image/table_th_bg.gif) repeat-x'
| });
| //定义td
| __tblHead.children('table').find('td').css({
| 'padding':'6px 0',
| 'border':'1px solid #CCCCCC'
| });
| }
|
| //创建右键菜单
| function createMenu(menuVal,cla){
| //创建前清除右键内容
| $('#rightMenu').remove();
| //创建标签
| var __div=$('<div id="rightMenu"></div>');
| var __a=new Array();
| //根据menuVal的值生成a标签并添加到div中
| for(var i in menuVal)
| {
| __a[i]=$('<a href="javascript:;" class="'+cla[i]+'">'+menuVal[i]+'</a>');
| __div.append(__a[i]);
| }
| //将div添加到body中
| $('body').append(__div);
| //定义菜单的样式
| $('#rightMenu').css({
| 'position':'absolute',
| 'top':'200px',
| 'left':'0',
| 'border-top':'1px solid #25aacd',
| 'border-left':'1px solid #25aacd',
| 'border-right':'1px solid #25aacd',
| 'z-index':'99999'
| });
| $('#rightMenu a').css({
| 'display':'block',
| 'padding':'4px 6px',
| 'text-decoration':'none',
| 'color':'#000000',
| 'background-color':'#FFFFFF',
| 'border-bottom':'1px solid #25aacd'
| });
| }
| //右键菜单内容鼠标事件
| $('body').on('mouseover','#rightMenu a',function(){
| $(this).css({
| 'background-color':'#25aacd',
| 'color':'#fff'
| });
| });
| $('body').on('mouseout','#rightMenu a',function(){
| $(this).css({
| 'background-color':'#fff',
| 'color':'#000'
| });
| });
|
|
