直接引入echarts
安装echarts项目依赖
cnpm install echarts --save
//或者
cnpm i echarts -S
全局引入
我们安装完成之后，可以在 main.js 中全局引入 echarts
1 import echarts from "echarts";
2 Vue.prototype.$echarts = echarts;
创建图表
1 <template>
2 <div id="app">
3 <div id="main" style=" 600px;height:400px;"></div>
4 </div>
5 </template>
6 <script>
7 export default {
8 name: "app",
9 methods: {
10 drawChart() {
11 // 基于准备好的dom，初始化echarts实例
12 let myChart = this.$echarts.init(document.getElementById("main"));
13 // 指定图表的配置项和数据
14 let option = {
15 title: {
16 text: "ECharts 入门示例"
17 },
18 tooltip: {},
19 legend: {
20 data: ["销量"]
21 },
22 xAxis: {
23 data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
24 },
25 yAxis: {},
26 series: [
27 {
28 name: "销量",
29 type: "bar",
30 data: [5, 20, 36, 10, 10, 20]
31 }
32 ]
33 };
34 // 使用刚指定的配置项和数据显示图表。
35 myChart.setOption(option);
36 }
37 },
38 mounted() {
39 this.drawChart();
40 }
41 };
42 </script>
1 //实际获取总的Gpu数据 2 getGpuData() { 3 if (!Utils.checkToken(this)) return; 4 if (this.begin_date === null) { 5 this.begin_date = new Date("2018/12/1"); 6 } 7 if (this.end_date === null) { 8 this.end_date = new Date(); 9 } 10 this.showPagination = true; 11 let loading = this.$loading(); 12 this.GetGpuRealAvailiay({ 13 search_type: this.search_type, 14 uid: this.uid, 15 gpu: this.gpu, 16 begin_date: Utils.formatDate(this.begin_date, "yyyy-MM-dd"), 17 end_date: Utils.formatDate(this.end_date, "yyyy-MM-dd") 18 }).then( 19 res => { 20 res=res.body 21 loading.close(); 22 this.totalData = res; 23 this.drawChart(this.totalData.data); 24 const idx = res.date.length - 1; 25 this.time_date = res.date[idx]; 26 this.avage_ratio = res.data[idx]; 27 this.getOneGpu(1); 28 }, 29 err => { 30 this.$message.error(err.msg); 31 } 32 ); 33 }, 34 35 //实际画图 36 drawChart() { 37 const This = this; 38 let mChart_line1 = This.$echarts.init(document.getElementById("mChart_line")); 39 mChart_line1.setOption( 40 lineOptions.line({ 41 option_type: 10, 42 yName: This.yName, 43 yData: This.total_data.data, 44 tName: This.total_data.tName, 45 xName: "时间", 46 xData: This.total_data.date, 47 title: "GPU Test", 48 Unit: This.Unit 49 }) 50 ); 51 mChart_line1.getZr().off("click"); 52 mChart_line1.getZr().on("click", params => { 53 const pointInPixel = [params.offsetX, params.offsetY]; 54 if (mChart_line1.containPixel({ seriesIndex: [0] }, pointInPixel)) { 55 //判断给定的点是否在指定的坐标系或者系列上 56 let xIndex = mChart_line1.convertFromPixel({ seriesIndex: 0 }, [ 57 //转换像素坐标值到逻辑坐标系上的点 58 params.offsetX, 59 params.offsetY 60 ])[0]; /*事件处理代码书写位置*/ 61 This.day = 62 This.date_type === "month" 63 ? This.total_data.date[xIndex] + "-01" 64 : This.total_data.date[xIndex]; 65 This.showPagination = false; 66 This.getDayData(1); 67 } 68 }); 69 }
折线图.js
1 export default {
2 /**
3 * 折线图
4 * xData x轴
5 * yData y轴
6 * xName x轴名字
7 * title 标题
8 */
9 line(param) {
10 var xData = param.xData;
11 var data = param.yData
12 let option = [];
13 let num =param.num ? param.num : 0;
14 let max = num ? num *100 : 100; //处理精度丢失问题 但不是最佳方案
15 let startValue = param.startValue;
16 option[0] = {
17 // Make gradient line here
18 visualMap: [{
19 show: false,
20 type: 'continuous',
21 seriesIndex: 0,
22 dimension: 0,
23 min: 0,
24 max: xData.length - 1
25 }],
26 title: [{
27 top: '',
28 left: 'center',
29 text: param.title
30 }],
31 tooltip: {
32 trigger: 'axis',
33 formatter: function(params){
34 var text_Unit ='';
35 for(var i = 0;i < params.length;i++){
36 text_Unit += params[i].value + param.Unit + "</br>"
37 }
38 return params[0].name + "</br>" + text_Unit;
39 }
40 },
41 xAxis: [{
42 data: xData,
43 gridIndex: 1,
44 }],
45 yAxis: [{
46 name: param.yName,
47 splitLine: { show: false },
48 gridIndex: 1,
49 }],
50 grid: [{
51 bottom: '',
52 }, {
53 top: '20%',
54 }],
55 series: [{
56 type: 'line',
57 showSymbol: false,
58 data: data
59 }]
60 };
61 option[1] = {
62 title: {
63 text: param.title,
64 x: 'center',
65 y: '10px',
66 textStyle: {
67 fontSize: 18,
68 color: '#000'
69 }
70 },
71 tooltip: {
72 show: true,
73 trigger: 'axis',
74 },
75 xAxis: {
76 name: param.xName,
77 nameTextStyle: {
78 color: ['#000']
79 },
80 data: param.xData,
81 axisLabel: {
82 textStyle: {
83 color: '#000'
84 }
85 },
86 axisTick: {
87 show: false
88 },
89 axisLine: {
90 show: true,
91 lineStyle: {
92 color: ['#ddd']
93 }
94 },
95 z: 10
96 },
97 yAxis: {
98 name: param.yName,
99 nameTextStyle: {
100 color: ['#000']
101 },
102 axisLine: {
103 show: true,
104 lineStyle: {
105 color: ['#ddd']
106 }
107 },
108 axisTick: {
109 show: false,
110 },
111 splitLine: {
112 show: false,
113 },
114 axisLabel: {
115 textStyle: {
116 color: '#000'
117 }
118 }
119 },
120 series: [{
121 data: param.yData,
122 type: 'line',
123 symbol: 'circle',
124 symbolSize: 5,
125 lineStyle: {
126 normal: {
127 color: '#7baaf3 ',
128 2,
129 type: 'solid'
130 }
131 },
132 itemStyle: {
133 normal: {
134 color: '#7baaf3'
135 }
136 },
137 z:11
138 }]
139 };
140 option[2] = {
141 title: {
142 left: 'center',
143 text: param.title
144 },
145 tooltip: {
146 trigger: 'axis',
147 },
148 legend: {
149 right:0,
150 data:param.tName,
151 },
152 grid: {
153 left: '3%',
154 right: '4%',
155 bottom: '3%',
156 containLabel: true
157 },
158 xAxis: {
159 boundaryGap: false,
160 data:param.xData
161 },
162 yAxis: {
163 name: param.yName,
164 //splitLine: { show: false },
165 },
166 series:param.yData
167 }
168 option[3] = {
169 title: {
170 text: param.title,
171 x: 'center',
172 y: '20px',
173 textStyle: {
174 fontSize: 18,
175 color: '#000'
176 }
177 },
178 tooltip: {
179 show: true,
180 trigger: 'axis',
181 formatter: function(params){
182 var text_Unit ='';
183 for(var i = 0;i < params.length;i++){
184 text_Unit += params[i].seriesName +'：' +params[i].value + param.Unit + "</br>"
185 }
186 return params[0].name + "</br>" + text_Unit;
187 }
188 },
189 legend: {
190 right: '10px',
191 data: param.tName,
192 },
193 xAxis: {
194 name: param.xName,
195 nameTextStyle: {
196 color: ['#000']
197 },
198 data: param.xData,
199 axisLabel: {
200 textStyle: {
201 color: '#000'
202 }
203 },
204 axisTick: {
205 show: false
206 },
207 axisLine: {
208 show: true,
209 lineStyle: {
210 color: ['#ddd']
211 }
212 },
213 },
214 yAxis: {
215 name: param.yName,
216 nameTextStyle: {
217 color: ['#000']
218 },
219 axisLine: {
220 show: true,
221 lineStyle: {
222 color: ['#ddd']
223 }
224 },
225 axisTick: {
226 show: false,
227 },
228 splitLine: {
229 show: false,
230 },
231 axisLabel: {
232 textStyle: {
233 color: '#000'
234 }
235 }
236 },
237 series:param.yData
238 };
239 option[4] = {
240 title: {
241 text: param.title,
242 x: 'center',
243 y: '20px',
244 textStyle: {
245 fontSize: 18,
246 color: '#000'
247 }
248 },
249 tooltip: {
250 show: true,
251 trigger: 'axis',
252 axisPointer:{
253 type:"cross",
254 crossStyle:{
255 color:"#999"
256 }
257 }
258 },
259 legend: {
260 right: '10px',
261 data: param.tName,
262 },
263 xAxis: {
264 name: param.xName,
265 nameTextStyle: {
266 color: ['#000']
267 },
268 data: param.xData,
269 axisLabel: {
270 textStyle: {
271 color: '#000'
272 }
273 },
274 axisTick: {
275 show: false
276 },
277 axisLine: {
278 show: true,
279 lineStyle: {
280 color: ['#ddd']
281 }
282 },
283 z: 13,
284 },
285 yAxis: {
286 name: param.yName,
287 nameTextStyle: {
288 color: ['#000']
289 },
290 axisLine: {
291 show: true,
292 lineStyle: {
293 color: ['#ddd']
294 }
295 },
296 axisTick: {
297 show: false,
298 },
299 splitLine: {
300 show: false,
301 },
302 axisLabel: {
303 textStyle: {
304 color: '#000'
305 }
306 }
307 },
308 series: param.yData,
309 };
310 option[5] = {
311 visualMap: [{
312 show: false,
313 top: 20,
314 right: 10,
315 default:10,
316 pieces:[{
317 gt: 0,
318 lte: num,
319 color: '#ffde33'
320 },{
321 gt: num,
322 lte: max,
323 color: '#f00'
324 }],
325 outOfRange: { // 超出范围
326 color: '#f00'
327 }
328 }],
329 title: [{
330 top: '',
331 left: 'center',
332 text: param.title,
333 }],
334 tooltip: {
335 trigger: 'axis',
336 formatter: function(params){
337 var text_Unit ='';
338 for(var i = 0;i < params.length;i++){
339 text_Unit += params[i].value + param.Unit + "</br>"
340 }
341 return params[0].name + "</br>" + text_Unit;
342 }
343 },
344 xAxis: [{
345 data: xData,
346 gridIndex: 1,
347 }],
348 yAxis: [{
349 name: param.yName,
350 splitLine: { show: false },
351 gridIndex: 1,
352 }],
353 grid: [{
354 bottom: '',
355 }, {
356 top: '20%',
357 }],
358 series: {
359 type: 'line',
360 showSymbol: false,
361 data: data,
362 markLine: {
363 silent: true,
364 data: [{
365 yAxis: num
366 },]
367 }
368 }
369 };
370 option[6] = {
371 title: {
372 left: 'center',
373 text: param.title
374 },
375 tooltip: {
376 trigger: 'axis',
377 },
378 legend: {
379 right:0,
380 data:param.tName,
381 },
382 grid: {
383 left: '3%',
384 right: '4%',
385 bottom: '3%',
386 containLabel: true
387 },
388 xAxis: {
389 boundaryGap: false,
390 data:param.xData
391 },
392 yAxis: {
393 name: param.yName,
394 splitLine: { show: false },
395
396 },
397 series: []
398 }
399 option[6].series.push(
400 {
401 name: '平行于y轴的趋势线',
402 type: 'line',
403 //data:[0],
404 markLine: {
405 silent: true,
406 data: [{
407 yAxis: num
408 }]
409 }
410 }
411 )
412 if( param.option_type == 6){
413 for( var item in param.yData){
414 var obj ={
415 name: param.yData[item].name,
416 type: 'line',
417 color:param.yData[item].color,
418 data: param.yData[item].data
419 }
420 option[6].series.push(obj)
421 }
422 }
423 option[7] = {
424 visualMap: [{
425 show: false,
426 top: 20,
427 right: 10,
428 default:10,
429 pieces:[{
430 gt: 0,
431 lte: num,
432 color: '#ffde33'
433 },{
434 gt: num,
435 lte: max,
436 color: '#f00'
437 }],
438 outOfRange: { // 超出范围
439 color: '#f00'
440 }
441 }],
442 dataZoom: [
443 {
444 startValue:'2019-03-21',
445 },
446 {
447 type: 'inside',
448
449 }
450 ],
451 title: [{
452 top: '',
453 left: 'center',
454 text: param.title,
455 }],
456 tooltip: {
457 trigger: 'axis',
458 formatter: function(params){
459 var text_Unit ='';
460 for(var i = 0;i < params.length;i++){
461 text_Unit += params[i].value + param.Unit + "</br>"
462 }
463 return params[0].name + "</br>" + text_Unit;
464 }
465 },
466 xAxis: [{
467 data: xData,
468 gridIndex: 1,
469 }],
470 yAxis: [{
471 name: param.yName,
472 splitLine: { show: false },
473 gridIndex: 1,
474 }],
475 grid: [{
476 bottom: '',
477 }, {
478 top: '20%',
479 }],
480 series: {
481 type: 'line',
482 showSymbol: false,
483 data: data,
484 markLine: {
485 silent: true,
486 data: [{
487 yAxis: num
488 },]
489 }
490 }
491 };
492 option[8] = {
493 // Make gradient line here
494 visualMap: [{
495 show: false,
496 type: 'continuous',
497 seriesIndex: 0,
498 dimension: 0,
499 min: 0,
500 max: xData.length - 1
501 }],
502 title: [{
503 top: '',
504 left: 'center',
505 text: param.title
506 }],
507 dataZoom: [
508 {
509 startValue:startValue,
510 },
511 {
512 type: 'inside',
513
514 }
515 ],
516 tooltip: {
517 trigger: 'axis',
518 formatter: function(params){
519 var text_Unit ='';
520 for(var i = 0;i < params.length;i++){
521 text_Unit += params[i].value + param.Unit + "</br>"
522 }
523 return params[0].name + "</br>" + text_Unit;
524 }
525 },
526 xAxis: [{
527 data: xData,
528 gridIndex: 1,
529 }],
530 yAxis: [{
531 name: param.yName,
532 splitLine: { show: false },
533 gridIndex: 1,
534 }],
535 grid: [{
536 bottom: '',
537 }, {
538 top: '20%',
539 }],
540 series: [{
541 type: 'line',
542 showSymbol: false,
543 data: data
544 }]
545 };
546
547 option[9] = {
548 title: {
549 text: param.title,
550 x: 'center',
551 y: '20px',
552 textStyle: {
553 fontSize: 18,
554 color: '#000'
555 }
556 },
557 tooltip: {
558 show: true,
559 trigger: 'axis',
560 formatter: function(params){
561 var text_Unit ='';
562 for(var i = 0;i < params.length;i++){
563 text_Unit += params[i].seriesName +'：' +params[i].value + param.Unit + "</br>"
564 }
565 return params[0].name + "</br>" + text_Unit;
566 }
567 },
568 legend: {
569 right: '10px',
570 data: param.tName,
571 },
572 dataZoom: [ // 主要是这一部分，他是折线图的缩放功能的开启
573 {
574 startValue:startValue, // 起始位置
575 },
576 {
577 type: 'inside',
578
579 }
580 ],
581 xAxis: {
582 name: param.xName,
583 nameTextStyle: {
584 color: ['#000']
585 },
586 data: param.xData,
587 axisLabel: {
588 textStyle: {
589 color: '#000'
590 }
591 },
592 axisTick: {
593 show: false
594 },
595 axisLine: {
596 show: true,
597 lineStyle: {
598 color: ['#ddd']
599 }
600 },
601 },
602 yAxis: {
603 name: param.yName,
604 nameTextStyle: {
605 color: ['#000']
606 },
607 axisLine: {
608 show: true,
609 lineStyle: {
610 color: ['#ddd']
611 }
612 },
613 axisTick: {
614 show: false,
615 },
616 splitLine: {
617 show: false,
618 },
619 axisLabel: {
620 textStyle: {
621 color: '#000'
622 }
623 }
624 },
625 series:param.yData
626 };
627
628 return option[param.option_type];
629 }
630 }
饼形图.js
1 export default {
2 /**
3 * 饼形图
4 */
5 pie(param) {
6 let option = [];
7 option[0] = {
8 tooltip: {
9 trigger: 'item',
10 formatter: "{a} <br/>{b}: {c} ({d}%)"
11 },
12 series: [
13 {
14 name: param.title,
15 type: 'pie',
16 radius: ['50%', '70%'],
17 avoidLabelOverlap: false,
18 label: {
19 normal: {
20 show: false,
21 position: 'center'
22 },
23 emphasis: {
24 show: true,
25 textStyle: {
26 fontSize: '30',
27 fontWeight: 'bold'
28 }
29 }
30 },
31 labelLine: {
32 normal: {
33 show: false
34 }
35 },
36 data: [
37 { value: 335, name: '使用' },
38 { value: 310, name: '未使用' }
39 ]
40 }
41 ]
42 };
43 option[1]={
44 title: {
45 text: param.title,
46 left: 'center'
47 },
48 tooltip : {
49 trigger: 'item',
50 formatter: "{b} : {c} ({d}%)"
51 },
52 legend: {
53 bottom: 10,
54 left: 'center',
55 data: param.tName
56 },
57 series : [
58 {
59 type: 'pie',
60 radius : '65%',
61 center: ['50%', '50%'],
62 data:param.data,
63 itemStyle: {
64 emphasis: {
65 shadowBlur: 10,
66 shadowOffsetX: 0,
67 shadowColor: 'rgba(0, 0, 0, 0.5)'
68 }
69 }
70 }
71 ]
72 }
73 return option[param.option_type];
74 }
75 }
中国地图.js
1 export default{
2 /**
3 * 地图
4 * title 标题
5 * data 数据
6 * mapName 地图类型
7 * geoCoordMap 经纬度
8 */
9 mapOfChina(param){
10 var convertData = function(data) {
11 var res = [];
12 for (var i = 0; i < data.length; i++) {
13 var geoCoord = param.geoCoordMap[data[i].name];
14 if (geoCoord) {
15 res.push({
16 name: data[i].name,
17 value: geoCoord.concat(data[i].value),
18 });
19
20 }
21 }
22 return res;
23 };
24 var max = 480, min = 9; // todo
25 var maxSize4Pin = 100, minSize4Pin = 20;
26 // 秋雁南飞：
27 // 此版本通过设置geoindex && seriesIndex: [1] 属性来实现geo和map共存，来达到hover散点和区域显示tooltip的效果
28 // 默认情况下，map series 会自己生成内部专用的 geo 组件。但是也可以用这个 geoIndex 指定一个 geo 组件。这样的话，map 和 其他 series（例如散点图）就可以共享一个 geo 组件了。并且，geo 组件的颜色也可以被这个 map series 控制，从而用 visualMap 来更改。
29 // 当设定了 geoIndex 后，series-map.map 属性，以及 series-map.itemStyle 等样式配置不再起作用，而是采用 geo 中的相应属性。
30 // http://echarts.baidu.com/option.html#series-map.geoIndex
31 // 并且加了pin气泡图标以示数值大小
32 // 全局变量区:参考江西绿色金融（谢谢：本来想用闭包实现接口数据调用，没时间了）
33
34 // 本图作者：参考秋雁南飞的《投票统计》一图，网址：http://gallery.echartsjs.com/editor.html?c=xrJU-aE-LG
35 var nameColor = "rgb(55, 75, 113)"
36 var name_fontFamily = '等线'
37 var name_fontSize = 26;
38 var maxNum = param.data.sort(function(a, b) {
39 return b.value - a.value;
40 }).slice(0, 1)[0].value;
41 var one,two,three,four;
42 param.data.sort(function(a, b) {
43 return b.value - a.value;
44 }).map((x,index)=>{
45 if(index===5){
46 one = x.value;
47 }
48 if(index===14){
49 two = x.value;
50 }
51 if(index===22){
52 three = x.value;
53 }
54 if(index===30){
55 four = x.value;
56 }
57 })
58
59 let option = {
60 title: {
61 text: param.title,
62 x: 'center',
63 y:20,
64 textStyle: {
65 color: nameColor,
66 fontFamily: name_fontFamily,
67 fontSize: name_fontSize
68 }
69 },
70 tooltip: {
71 trigger: 'item',
72 formatter:function(params) {
73 var toolTiphtml = '';
74 for(var i = 0;i<param.data.length;i++){
75 if(params.name==param.data[i].name){
76 toolTiphtml += (param.data[i].name+':'+param.data[i].value+'人')
77 }
78 }
79 return toolTiphtml;
80 }
81 },
82 // visualMap:
83 // {
84 // show: true,
85 // min: 0,
86 // max: maxNum,
87 // left: 'left',
88 // bottom:100,
89 // text: ['高', '低'], // 文本，默认为数值文本
90 // calculable: true,
91 // seriesIndex: [1],
92 // inRange: {
93 // color: ['#f1f1f1','#c3e5ff','#0aa4dd','#1b57bc']
94 // }
95 // },
96 /*工具按钮组*/
97 toolbox: {
98 show: true,
99 orient: 'vertical',
100 right: 20,
101 top: 'center',
102 itemGap:20,
103 feature: {
104 dataView: {
105 readOnly: false
106 },
107 restore: {},
108 saveAsImage: {},
109 myTool1: {
110 show: true,
111 title: param.startRoam?'关闭缩放':'开启缩放',
112 icon: 'path://M444.58034998 309.80516673c9.31358834 0 17.26276527 3.29732647 23.82775732 9.78816585 6.61937049 6.68857977 9.89197942 14.51911231 9.89197942 23.89202248v67.35543407h67.42958671c9.31358834 0 17.23310436 3.2923831 23.84753146 9.98590696 6.56004866 6.59465294 9.87714932 14.5240564 9.8771486 23.79315231 0 9.26909662-3.31710066 17.30231363-9.8771486 23.79315228-6.61442712 6.58970958-14.53394314 9.88703605-23.84753146 9.88703679h-67.42958671v67.45430425c0 9.26909662-3.27260892 17.20344271-9.89692351 23.89696658-6.56004866 6.48589603-14.50922558 9.88703605-23.82281323 9.88703605-9.29875753 0-17.26276527-3.40114076-23.82281391-9.88703605-6.62431458-6.69846723-9.8969235-14.62786996-9.89692351-23.89696658V478.30003747h-67.42958671c-9.31358834 0-17.23310436-3.29732647-23.84258739-9.88703679-6.56004866-6.49083938-9.87714932-14.5240564-9.87714933-23.79315228 0-9.26909662 3.31215729-17.20344271 9.87714933-23.79315231 6.60948377-6.69352312 14.53394314-9.98590625 23.84258739-9.98590696h67.42958671V343.48535506c0-9.37291018 3.27755228-17.20344271 9.89692351-23.89696584 6.56004866-6.48589603 14.5240564-9.7832225 23.82775729-9.7832225z m0-101.13449333c-31.96973123 0-62.47618159 6.17939726-91.63305129 18.63706342-29.15686974 12.4626088-54.24522418 29.25079657-75.32932853 50.36456256-21.0593868 21.0099517-37.81791365 46.14279787-50.31512745 75.28978014-12.45272208 29.14203892-18.69144189 59.73252936-18.69144189 91.65776888s6.23871981 62.51572995 18.69144189 91.66271223c12.4972138 29.04316872 29.25079657 54.17107153 50.31512745 75.28483752 21.08410434 21.0099517 46.17245879 37.79813946 75.32932853 50.25580489a230.69915857 230.69915857 0 0 0 91.63305129 18.74582036 230.6645543 230.6645543 0 0 0 91.63305134-18.74087699c29.16675646-12.4626088 54.25016755-29.25079657 75.32932852-50.26074826 21.06433088-21.11376599 37.83274374-46.24166806 50.29535255-75.28978089 12.47249626-29.14203892 18.71121607-59.73252936 18.71121606-91.65776886s-6.23871981-62.51572995-18.71121606-91.66271223c-12.4626088-29.14203892-29.23102238-54.2748851-50.29535255-75.28483679-21.07916097-21.1088219-46.15762871-37.89700965-75.32932852-50.3596192-29.15686974-12.4626088-59.65343262-18.64200679-91.63305134-18.64200678z m0-67.45924762c41.10535267 0 80.3568863 8.03321702 117.84852773 24.09965034 37.47186724 16.06643404 69.70360479 37.59051161 96.76936601 64.67604774 27.06081786 26.98666522 48.58489543 59.22334684 64.631556 96.71004418 16.03677241 37.48669734 24.09965033 76.72340087 24.09965034 117.8188668 0 35.32638027-5.74436812 69.11038289-17.22816027 101.44593473-11.51839716 32.23173827-27.88144177 61.5863484-49.13856968 87.84631578l191.43279413 191.25482792c6.52050031 6.49083938 9.74367413 14.42024212 9.74367412 23.89696658 0 9.67940821-3.20339964 17.71262524-9.60031219 24.19852126-6.41668674 6.38702511-14.43507293 9.58053802-24.08976361 9.58053801-9.48661118 0-17.4901673-3.29732647-23.96617585-9.78816587l-191.2103362-191.45256829c-26.32423404 21.31644973-55.65412661 37.69432517-87.94518671 49.12373886-32.2910601 11.53817134-66.07011937 17.30231363-101.36683799 17.30231363-41.0806351 0-80.38654793-8.03321702-117.83369762-24.09965105-37.46197978-16.06643404-69.7184356-37.69432517-96.77431008-64.67604703-27.04598776-27.09047876-48.59478289-59.22334684-64.64144203-96.71004417C149.2545795 524.95201713 141.23619257 485.61150076 141.21147503 444.51603484c-0.01977419-40.98670828 8.02332956-80.33216873 24.09965105-117.8188668 16.06643404-37.38782714 37.63500335-69.72337897 64.64144203-96.71004418 27.02621357-27.0855354 59.27278195-48.60961371 96.77431008-64.67604774C364.22346298 149.343513 403.49971416 141.21142578 444.56057582 141.21142578h0.01977416z',
113 onclick: function (){
114 param.renew();
115 }
116 },
117 },
118 emphasis:{
119 iconStyle:{
120 borderColor:'#3B5077'
121 }
122 }
123 },
124 series: [
125 // {
126 // name: '散点',
127 // type: 'scatter',
128 // coordinateSystem: 'geo',
129 // data: convertData(param.data),
130 // symbolSize: 10,
131 // label: {
132 // normal: {
133 // formatter: '{b}',
134 // position: 'right',
135 // show: false
136 // },
137 // emphasis: {
138 // show: true
139 // }
140 // },
141 // itemStyle: {
142 // normal: {
143 // color: '#ff0000'
144 // }
145 // }
146 // },
147 // {
148 // name: '点',
149 // type: 'scatter',
150 // coordinateSystem: 'geo',
151 // symbol: 'pin', //气泡
152 // symbolSize: function(val) {
153 // var a = (maxSize4Pin - minSize4Pin) / (max - min);
154 // var b = minSize4Pin - a * min;
155 // b = maxSize4Pin - a * max;
156 // return a * val[2] + b;
157 // },
158 // label: {
159 // normal: {
160 // show: false,
161 // textStyle: {
162 // color: '#fff',
163 // fontSize: 9,
164 // },
165 // formatter:function(params) {
166 // return params.value[2];
167 // }
168 // }
169 // },
170 // itemStyle: {
171 // normal: {
172 // color: '#F62157', //标志颜色
173 // }
174 // },
175 // zlevel: 6,
176 // data: convertData(param.data),
177 // },
178 {
179 name: 'Top 5',
180 type: 'effectScatter',
181 coordinateSystem: 'geo',
182 data: convertData(param.data.sort(function(a, b) {
183 return b.value - a.value;
184 }).slice(0, 5)),
185 symbolSize: 10,
186 showEffectOn: 'render',
187 rippleEffect: {
188 brushType: 'stroke'
189 },
190 hoverAnimation: true,
191 label: {
192 normal: {
193 show: false
194 }
195 },
196 itemStyle: {
197 normal: {
198 borderColor:'yellow',
199 shadowBlur: 10,
200 shadowColor: 'yellow'
201 },
202 emphasis:{
203
204 }
205 },
206 zlevel:1
207 },
208 {
209 type: 'map',
210 map: param.mapName,
211 geoIndex: 0,
212 aspectScale: 0.75, //长宽比
213 showLegendSymbol: false, // 存在legend时显示
214 label: {
215 normal: {
216 show: true
217 },
218 emphasis: {
219 show: false,
220 textStyle: {
221 color: '#fff'
222 }
223 }
224 },
225 roam: param.startRoam,
226 animation: false,
227 data: param.data
228 },
229 ],
230 dataRange: {
231 x: 'left',
232 y: 'bottom',
233 splitList: [
234 {start: one},
235 {start: two, end: one},
236 {start: three, end: two},
237 {start: four, end: three},
238 {end: four}
239 ],
240 color: ['#1678e7','#33a6ff','#70c1fe','#b0deff','#e1f2ff']
241 },
242 geo: {
243 show: true,
244 map: param.mapName,
245 label: {
246 normal: {
247 show: false
248 },
249 emphasis: {
250 show: false,
251 }
252 },
253 roam: param.startRoam,
254 itemStyle: {
255 normal: {
256 areaColor: '#f1f1f1',//角落图
257 borderColor: '#666',
258 },
259 emphasis: {
260 areaColor: '#FFB321',
261 }
262 }
263 },
264 }
265 return option;
266 }
267 }
环形图.js
1 export default {
2 /**
3 * 环形图
4 * name 名称
5 * value 已有值
6 * all 总值
7 * color 颜色
8 */
9 doughnut(query) {
10 let option = {
11 title: {
12 text: [
13 `{a|${query.value}}`,
14 `{b| / ${query.all}}`
15 ].join(''),
16 textStyle: {
17 color: query.color,
18 rich: {
19 a: {
20 fontSize: 20,
21 color: query.color
22 },
23 b: {
24 fontSize: 12,
25 color: '#666'
26 }
27 }
28 },
29 x: 'center',
30 y: 'center',
31 },
32 legend: {
33 bottom:0,
34 show: true,
35 itemGap: 12,
36 data: [query.name]
37 },
38 series: [{
39 name: 'Line 1',
40 type: 'pie',
41 clockWise: true,
42 radius: ['50%', '66%'],
43 label: {
44 show: false
45 },
46 labelLine: {
47 show: false
48 },
49 hoverAnimation: false,
50 cursor:'auto',
51 data: [{
52 value: query.value,
53 name: query.name,
54 itemStyle: {
55 normal: {
56 color:query.color
57 },
58 emphasis:{
59 color:query.color
60 }
61 }
62 }, {
63 name: '02',
64 value: query.all>0?(query.all-query.value):null,
65 itemStyle: {
66 normal: {
67 color:'#efefef'
68 },
69 emphasis:{
70 color:'#efefef'
71 }
72 }
73 }]
74 }]
75 };
76 return option;
77 }
78 }
柱状图.js
1 export default {
2 /**
3 * 柱状图
4 * title 标题
5 * xData x轴数据
6 * xName x轴名字
7 * yData y轴数据
8 * yTotal 总量
9 */
10 bar(param) {
11 var xData = param.xData;
12 var data = param.yData
13 var yMax = (200/data.length)+'%';
14 //var yMax =100;
15 var dataShadow = param.yTotal;
16
17 let option = {
18 title: {
19 text: param.title,
20 x: 'center',
21 y: '10px',
22 textStyle: {
23 fontSize: 18,
24 color: '#000'
25 }
26
27 },
28 tooltip: {
29 show: true
30 },
31 xAxis: {
32 name: param.xName,
33 nameTextStyle: {
34 color: ['#000'],
35 },
36 data: xData,
37 axisLabel: {
38 interval:'0', //zcg
39 rotate:-20, //倾斜度
40 textStyle: {
41 color: '#000'
42 }
43 },
44 axisTick: {
45 show: false
46 },
47 axisLine: {
48 show: false
49 },
50 z: 10
51 },
52 yAxis: {
53 name: '',
54 nameTextStyle: {
55 color: ['#000']
56 },
57 axisLine: {
58 //show: false
59 lineStyle: {
60 color: ['#ddd']
61 }
62 },
63 axisTick: {
64 show: false
65 },
66 splitLine: {
67 lineStyle: {
68 color: ['#ddd']
69 }
70 },
71 axisLabel: {
72 textStyle: {
73 color: '#000'
74 }
75 }
76 },
77 grid: {
78 y2: '60px' //zcg x轴文字的高度
79 },
80 series: [
81 { // For shadow
82 type: 'bar',
83 itemStyle: {
84 normal: { color: '#ddd' }
85 },
86 barGap: '-100%',
87 barCategoryGap: '-10%',
88 barMaxWidth: yMax,
89 data: dataShadow,
90 animation: false,
91 },
92 {
93 type: 'bar',
94 barMaxWidth: yMax,
95 itemStyle: {
96 normal: {
97 color: "#7baaf3"
98 },
99 emphasis: {
100 color: "#5e96e9"
101 }
102 },
103 data: data
104 }
105 ]
106 };
107 return option;
108 }
109 }