首页图表修改

@@ -95,18 +95,18 @@
 			<el-card class="cghj">
 				<div slot="header" class="clearfix">
 					<span><i class="iconfont icontizhuangshuju"></i>办理业务数量</span>
-					<img src="../../assets/images/cghjsllegend.png" style="float: right;" alt="">
+					<!-- <img src="../../assets/images/cghjsllegend.png" style="float: right;" alt=""> -->
 				</div>
-				<div class="enter_box">
-					<img src="../../assets/images/cghjsl.png" :style="{'height':imgHeight + 'px'}"  alt="">
+				<div class="enter_box" id="tdfwtjid">
+					<!-- <img src="../../assets/images/cghjsl.png" :style="{'height':imgHeight + 'px'}"  alt=""> -->
 				</div>
 			</el-card>
 			<el-card class="cghj-pie">
 				<div slot="header" class="clearfix">
 					<span><i class="iconfont iconhuijiaochengguo"></i>效能统计</span>
 				</div>
-				<div class="enter_box">
-					<img src="../../assets/images/cghjsl-pie.png" :style="{'height':imgHeight + 'px'}"  alt="">
+				<div class="enter_box" id="xntjid">
+					<!-- <img src="../../assets/images/cghjsl-pie.png" :style="{'height':imgHeight + 'px'}"  alt=""> -->
 				</div>
 			</el-card>
 		</div>
@@ -114,7 +114,7 @@
 </template>
 
 <script>
-import { Chart } from '@antv/g2';
+import { Chart, registerShape } from '@antv/g2';
 import {getDbxList} from "@api/dbx";
 export default {
 	components:{},
@@ -182,7 +182,9 @@ export default {
 			this.imgHeight = this.$refs.enterBox.offsetHeight - 10
 		});
 		this.getDbxCount();
-		this.initG2();
+		this.initG2qllx();
+		this.initG2tdfwtj();
+		this.initG2xntjid();
 	},
 	methods: {
         download(row,column,event){
@@ -246,7 +248,7 @@ export default {
 				}
 			})
 		},
-		initG2(){
+		initG2qllx(){
 			const data = [
 			{ item: '国有建设用地使用权', count: 40, percent: 0.4 },
 			{ item: '集体建设用地使用权', count: 21, percent: 0.21 },
@@ -397,6 +399,210 @@ export default {
 			chart.render(true);
 			lastItem = null;
 			}
+		},
+		initG2tdfwtj(){
+			const data = [
+			{ name: '土地', 月份: '1月', 办件数量: 18.9 },
+			{ name: '土地', 月份: '2月', 办件数量: 28.8 },
+			{ name: '土地', 月份: '3月', 办件数量: 39 },
+			{ name: '土地', 月份: '4月', 办件数量: 81 },
+			{ name: '土地', 月份: '5月', 办件数量: 47 },
+			{ name: '土地', 月份: '6月', 办件数量: 20 },
+			{ name: '土地', 月份: '7月', 办件数量: 24 },
+			{ name: '土地', 月份: '8月', 办件数量: 35 },
+			{ name: '房屋', 月份: '1月', 办件数量: 12 },
+			{ name: '房屋', 月份: '2月', 办件数量: 23 },
+			{ name: '房屋', 月份: '3月', 办件数量: 34 },
+			{ name: '房屋', 月份: '4月', 办件数量: 99 },
+			{ name: '房屋', 月份: '5月', 办件数量: 52 },
+			{ name: '房屋', 月份: '6月', 办件数量: 35 },
+			{ name: '房屋', 月份: '7月', 办件数量: 37 },
+			{ name: '房屋', 月份: '8月', 办件数量: 42 },
+			];
+
+			const chart = new Chart({
+			container: 'tdfwtjid',
+			autoFit: true,
+			height: 500,
+			});
+
+			chart.data(data);
+			chart.scale('办件数量', {
+			nice: true,
+			});
+			chart.tooltip({
+			shared: true,
+			showMarkers: false,
+			});
+
+			chart
+			.interval()
+			.position('月份*办件数量')
+			.color('name')
+			.adjust('stack');
+
+			chart.interaction('active-region');
+
+			chart.render();
+		},
+		initG2xntjid(){
+			registerShape('point', 'pointer', {
+			draw(cfg, container) {
+				const group = container.addGroup({});
+				// 获取极坐标系下画布中心点
+				const center = this.parsePoint({ x: 0, y: 0 });
+				// 绘制指针
+				group.addShape('line', {
+				attrs: {
+					x1: center.x,
+					y1: center.y,
+					x2: cfg.x,
+					y2: cfg.y,
+					stroke: cfg.color,
+					lineWidth: 5,
+					lineCap: 'round',
+				},
+				});
+				group.addShape('circle', {
+				attrs: {
+					x: center.x,
+					y: center.y,
+					r: 9.75,
+					stroke: cfg.color,
+					lineWidth: 4.5,
+					fill: '#fff',
+				},
+				});
+
+				return group;
+			},
+			});
+
+			const data = [{ value: 6 }];
+			const chart = new Chart({
+			container: 'xntjid',
+			autoFit: true,
+			height: 500,
+			padding: [-15, 0, 0, 0],
+			});
+			chart.data(data);
+
+			chart.coordinate('polar', {
+			startAngle: (-9 / 8) * Math.PI,
+			endAngle: (1 / 8) * Math.PI,
+			radius: 0.75,
+			});
+			chart.scale('value', {
+			min: 0,
+			max: 9,
+			ticks: [2.25, 3.75, 5.25, 6.75],
+			});
+
+			chart.axis('1', false);
+			chart.axis('value', {
+			line: null,
+			label: {
+				offset: -30,
+				formatter: (val) => {
+				if (val === '2.25') {
+					return '差';
+				} else if (val === '3.75') {
+					return '中';
+				} else if (val === '5.25') {
+					return '良';
+				}
+
+				return '优';
+				},
+				style: {
+				fontSize: 18,
+				textAlign: 'center',
+				},
+			},
+			tickLine: null,
+			grid: null,
+			});
+			chart.legend(false);
+			chart
+			.point()
+			.position('value*1')
+			.shape('pointer')
+			.color('#1890FF');
+
+			// 绘制仪表盘刻度线
+			chart.annotation().line({
+			start: [3, 0.905],
+			end: [3.0035, 0.85],
+			style: {
+				stroke: '#19AFFA', // 线的颜色
+				lineDash: null, // 虚线的设置
+				lineWidth: 3,
+			},
+			});
+			chart.annotation().line({
+			start: [4.5, 0.905],
+			end: [4.5, 0.85],
+			style: {
+				stroke: '#19AFFA', // 线的颜色
+				lineDash: null, // 虚线的设置
+				lineWidth: 3,
+			},
+			});
+
+			chart.annotation().line({
+			start: [6, 0.905],
+			end: [6.0035, 0.85],
+			style: {
+				stroke: '#19AFFA', // 线的颜色
+				lineDash: null, // 虚线的设置
+				lineWidth: 3,
+			},
+			});
+
+			// 绘制仪表盘背景
+			chart.annotation().arc({
+			top: false,
+			start: [0, 1],
+			end: [9, 1],
+			style: {
+				stroke: '#CBCBCB',
+				lineWidth: 18,
+				lineDash: null,
+			},
+			});
+
+			// 绘制指标
+			chart.annotation().arc({
+			start: [0, 1],
+			end: [data[0].value, 1],
+			style: {
+				stroke: '#1890FF',
+				lineWidth: 20,
+				lineDash: null,
+			},
+			});
+			// 绘制指标数字
+			chart.annotation().text({
+			position: ['50%', '85%'],
+			content: '合格率',
+			style: {
+				fontSize: 20,
+				fill: '#545454',
+				textAlign: 'center',
+			},
+			});
+			chart.annotation().text({
+			position: ['50%', '90%'],
+			content: `${data[0].value * 10} %`,
+			style: {
+				fontSize: 36,
+				fill: '#545454',
+				textAlign: 'center',
+			},
+			offsetY: 15,
+			});
+
+			chart.render();
 		}
 	},
 };