Skip to content

任超 / js.CadastralSystem

Go to a project
Toggle navigation
Toggle navigation pinning
b57394b8 by 焦泽平
Options

首页图表修改

1 parent 1f40803a
Inline Side-by-side
Showing 1 changed file with 214 additions and 8 deletions
...@@ -95,18 +95,18 @@ ...@@ -95,18 +95,18 @@
95 <el-card class="cghj"> 95 <el-card class="cghj">
96 <div slot="header" class="clearfix"> 96 <div slot="header" class="clearfix">
97 <span><i class="iconfont icontizhuangshuju"></i>办理业务数量</span> 97 <span><i class="iconfont icontizhuangshuju"></i>办理业务数量</span>
98 <img src="../../assets/images/cghjsllegend.png" style="float: right;" alt=""> 98 <!-- <img src="../../assets/images/cghjsllegend.png" style="float: right;" alt=""> -->
99 </div> 99 </div>
100 <div class="enter_box"> 100 <div class="enter_box" id="tdfwtjid">
101 <img src="../../assets/images/cghjsl.png" :style="{'height':imgHeight + 'px'}" alt=""> 101 <!-- <img src="../../assets/images/cghjsl.png" :style="{'height':imgHeight + 'px'}" alt=""> -->
102 </div> 102 </div>
103 </el-card> 103 </el-card>
104 <el-card class="cghj-pie"> 104 <el-card class="cghj-pie">
105 <div slot="header" class="clearfix"> 105 <div slot="header" class="clearfix">
106 <span><i class="iconfont iconhuijiaochengguo"></i>效能统计</span> 106 <span><i class="iconfont iconhuijiaochengguo"></i>效能统计</span>
107 </div> 107 </div>
108 <div class="enter_box"> 108 <div class="enter_box" id="xntjid">
109 <img src="../../assets/images/cghjsl-pie.png" :style="{'height':imgHeight + 'px'}" alt=""> 109 <!-- <img src="../../assets/images/cghjsl-pie.png" :style="{'height':imgHeight + 'px'}" alt=""> -->
110 </div> 110 </div>
111 </el-card> 111 </el-card>
112 </div> 112 </div>
...@@ -114,7 +114,7 @@ ...@@ -114,7 +114,7 @@
114 </template> 114 </template>
115 115
116 <script> 116 <script>
117 import { Chart } from '@antv/g2'; 117 import { Chart, registerShape } from '@antv/g2';
118 import {getDbxList} from "@api/dbx"; 118 import {getDbxList} from "@api/dbx";
119 export default { 119 export default {
120 components:{}, 120 components:{},
...@@ -182,7 +182,9 @@ export default { ...@@ -182,7 +182,9 @@ export default {
182 this.imgHeight = this.$refs.enterBox.offsetHeight - 10 182 this.imgHeight = this.$refs.enterBox.offsetHeight - 10
183 }); 183 });
184 this.getDbxCount(); 184 this.getDbxCount();
185 this.initG2(); 185 this.initG2qllx();
186 this.initG2tdfwtj();
187 this.initG2xntjid();
186 }, 188 },
187 methods: { 189 methods: {
188 download(row,column,event){ 190 download(row,column,event){
...@@ -246,7 +248,7 @@ export default { ...@@ -246,7 +248,7 @@ export default {
246 } 248 }
247 }) 249 })
248 }, 250 },
249 initG2(){ 251 initG2qllx(){
250 const data = [ 252 const data = [
251 { item: '国有建设用地使用权', count: 40, percent: 0.4 }, 253 { item: '国有建设用地使用权', count: 40, percent: 0.4 },
252 { item: '集体建设用地使用权', count: 21, percent: 0.21 }, 254 { item: '集体建设用地使用权', count: 21, percent: 0.21 },
...@@ -397,6 +399,210 @@ export default { ...@@ -397,6 +399,210 @@ export default {
397 chart.render(true); 399 chart.render(true);
398 lastItem = null; 400 lastItem = null;
399 } 401 }
402 },
403 initG2tdfwtj(){
404 const data = [
405 { name: '土地', 月份: '1月', 办件数量: 18.9 },
406 { name: '土地', 月份: '2月', 办件数量: 28.8 },
407 { name: '土地', 月份: '3月', 办件数量: 39 },
408 { name: '土地', 月份: '4月', 办件数量: 81 },
409 { name: '土地', 月份: '5月', 办件数量: 47 },
410 { name: '土地', 月份: '6月', 办件数量: 20 },
411 { name: '土地', 月份: '7月', 办件数量: 24 },
412 { name: '土地', 月份: '8月', 办件数量: 35 },
413 { name: '房屋', 月份: '1月', 办件数量: 12 },
414 { name: '房屋', 月份: '2月', 办件数量: 23 },
415 { name: '房屋', 月份: '3月', 办件数量: 34 },
416 { name: '房屋', 月份: '4月', 办件数量: 99 },
417 { name: '房屋', 月份: '5月', 办件数量: 52 },
418 { name: '房屋', 月份: '6月', 办件数量: 35 },
419 { name: '房屋', 月份: '7月', 办件数量: 37 },
420 { name: '房屋', 月份: '8月', 办件数量: 42 },
421 ];
422
423 const chart = new Chart({
424 container: 'tdfwtjid',
425 autoFit: true,
426 height: 500,
427 });
428
429 chart.data(data);
430 chart.scale('办件数量', {
431 nice: true,
432 });
433 chart.tooltip({
434 shared: true,
435 showMarkers: false,
436 });
437
438 chart
439 .interval()
440 .position('月份*办件数量')
441 .color('name')
442 .adjust('stack');
443
444 chart.interaction('active-region');
445
446 chart.render();
447 },
448 initG2xntjid(){
449 registerShape('point', 'pointer', {
450 draw(cfg, container) {
451 const group = container.addGroup({});
452 // 获取极坐标系下画布中心点
453 const center = this.parsePoint({ x: 0, y: 0 });
454 // 绘制指针
455 group.addShape('line', {
456 attrs: {
457 x1: center.x,
458 y1: center.y,
459 x2: cfg.x,
460 y2: cfg.y,
461 stroke: cfg.color,
462 lineWidth: 5,
463 lineCap: 'round',
464 },
465 });
466 group.addShape('circle', {
467 attrs: {
468 x: center.x,
469 y: center.y,
470 r: 9.75,
471 stroke: cfg.color,
472 lineWidth: 4.5,
473 fill: '#fff',
474 },
475 });
476
477 return group;
478 },
479 });
480
481 const data = [{ value: 6 }];
482 const chart = new Chart({
483 container: 'xntjid',
484 autoFit: true,
485 height: 500,
486 padding: [-15, 0, 0, 0],
487 });
488 chart.data(data);
489
490 chart.coordinate('polar', {
491 startAngle: (-9 / 8) * Math.PI,
492 endAngle: (1 / 8) * Math.PI,
493 radius: 0.75,
494 });
495 chart.scale('value', {
496 min: 0,
497 max: 9,
498 ticks: [2.25, 3.75, 5.25, 6.75],
499 });
500
501 chart.axis('1', false);
502 chart.axis('value', {
503 line: null,
504 label: {
505 offset: -30,
506 formatter: (val) => {
507 if (val === '2.25') {
508 return '差';
509 } else if (val === '3.75') {
510 return '中';
511 } else if (val === '5.25') {
512 return '良';
513 }
514
515 return '优';
516 },
517 style: {
518 fontSize: 18,
519 textAlign: 'center',
520 },
521 },
522 tickLine: null,
523 grid: null,
524 });
525 chart.legend(false);
526 chart
527 .point()
528 .position('value*1')
529 .shape('pointer')
530 .color('#1890FF');
531
532 // 绘制仪表盘刻度线
533 chart.annotation().line({
534 start: [3, 0.905],
535 end: [3.0035, 0.85],
536 style: {
537 stroke: '#19AFFA', // 线的颜色
538 lineDash: null, // 虚线的设置
539 lineWidth: 3,
540 },
541 });
542 chart.annotation().line({
543 start: [4.5, 0.905],
544 end: [4.5, 0.85],
545 style: {
546 stroke: '#19AFFA', // 线的颜色
547 lineDash: null, // 虚线的设置
548 lineWidth: 3,
549 },
550 });
551
552 chart.annotation().line({
553 start: [6, 0.905],
554 end: [6.0035, 0.85],
555 style: {
556 stroke: '#19AFFA', // 线的颜色
557 lineDash: null, // 虚线的设置
558 lineWidth: 3,
559 },
560 });
561
562 // 绘制仪表盘背景
563 chart.annotation().arc({
564 top: false,
565 start: [0, 1],
566 end: [9, 1],
567 style: {
568 stroke: '#CBCBCB',
569 lineWidth: 18,
570 lineDash: null,
571 },
572 });
573
574 // 绘制指标
575 chart.annotation().arc({
576 start: [0, 1],
577 end: [data[0].value, 1],
578 style: {
579 stroke: '#1890FF',
580 lineWidth: 20,
581 lineDash: null,
582 },
583 });
584 // 绘制指标数字
585 chart.annotation().text({
586 position: ['50%', '85%'],
587 content: '合格率',
588 style: {
589 fontSize: 20,
590 fill: '#545454',
591 textAlign: 'center',
592 },
593 });
594 chart.annotation().text({
595 position: ['50%', '90%'],
596 content: `${data[0].value * 10} %`,
597 style: {
598 fontSize: 36,
599 fill: '#545454',
600 textAlign: 'center',
601 },
602 offsetY: 15,
603 });
604
605 chart.render();
400 } 606 }
401 }, 607 },
402 }; 608 };
......