首页引入g2，饼图动态

@@ -12,6 +12,7 @@
     "lint": "vue-cli-service lint"
     "lint": "vue-cli-service lint"
   },
   },
   "dependencies": {
   "dependencies": {
+    "@antv/g2": "^4.1.7",
     "@antv/g6": "^4.0.3",
     "@antv/g6": "^4.0.3",
     "axios": "^0.19.2",
     "axios": "^0.19.2",
     "core-js": "^2.6.12",
     "core-js": "^2.6.12",

@@ -88,8 +88,8 @@
 				<div slot="header" class="clearfix">
 				<div slot="header" class="clearfix">
 					<span><i class="iconfont iconbingtu"></i>权利类型占比</span>
 					<span><i class="iconfont iconbingtu"></i>权利类型占比</span>
 				</div>
 				</div>
-				<div class="enter_box" ref="enterBox">
-					<img src="../../assets/images/cglbzb.png" :style="{'height':imgHeight + 'px'}" alt="">
+				<div class="enter_box" ref="enterBox" id="qllxzbid">
+					<!-- <img src="../../assets/images/cglbzb.png" :style="{'height':imgHeight + 'px'}" alt=""> -->
 				</div>
 				</div>
 			</el-card>
 			</el-card>
 			<el-card class="cghj">
 			<el-card class="cghj">
@@ -114,6 +114,7 @@
 </template>
 </template>
 
 
 <script>
 <script>
+import { Chart } from '@antv/g2';
 import {getDbxList} from "@api/dbx";
 import {getDbxList} from "@api/dbx";
 export default {
 export default {
 	components:{},
 	components:{},
@@ -181,6 +182,7 @@ export default {
 			this.imgHeight = this.$refs.enterBox.offsetHeight - 10
 			this.imgHeight = this.$refs.enterBox.offsetHeight - 10
 		});
 		});
 		this.getDbxCount();
 		this.getDbxCount();
+		this.initG2();
 	},
 	},
 	methods: {
 	methods: {
         download(row,column,event){
         download(row,column,event){
@@ -243,6 +245,158 @@ export default {
 					})
 					})
 				}
 				}
 			})
 			})
+		},
+		initG2(){
+			const data = [
+			{ item: '国有建设用地使用权', count: 40, percent: 0.4 },
+			{ item: '集体建设用地使用权', count: 21, percent: 0.21 },
+			{ item: '宅基地使用权', count: 17, percent: 0.17 },
+			{ item: '土地承包经营权', count: 13, percent: 0.13 },
+			{ item: '林地使用权', count: 9, percent: 0.09 },
+			];
+      		const container = document.getElementById('qllxzbid');
+
+			const chart = new Chart({
+			container: 'qllxzbid',
+			autoFit: true,
+			height: 500,
+			});
+
+			chart.coordinate('theta', {
+			radius: 0.75,
+			innerRadius: 0.7,
+			});
+
+			chart.data(data);
+
+			chart.scale('percent', {
+			formatter: val => {
+				val = val * 100 + '%';
+				return val;
+			},
+			});
+
+			chart.tooltip(false);
+
+			// 声明需要进行自定义图例字段： 'item'
+			chart.legend('item', {
+			position: 'right',                                  // 配置图例显示位置
+			offsetX: -50,
+			custom: true,                                       // 关键字段，告诉 G2，要使用自定义的图例
+			items: data.map((obj, index) => {
+				return {
+				name: obj.item,                                 // 对应 itemName
+				value: obj.percent,                             // 对应 itemValue
+				marker: {
+					symbol: 'square',                             // marker 的形状
+					style: {
+					r: 5,                                       // marker 图形半径
+					fill: chart.getTheme().colors10[index],     // marker 颜色，使用默认颜色，同图形对应
+					},
+				},                                              // marker 配置
+				};
+			}),
+			itemValue: {//百分比的样式
+				style: {
+				fill: '#999',
+				},                                               // 配置 itemValue 样式
+				formatter: val => `${val * 100}%`                // 格式化 itemValue 内容
+			},
+			});
+
+			chart
+			.interval()
+			.adjust('stack')
+			.position('percent')
+			.color('item')
+			.style({
+				fillOpacity: 1,
+			})
+			.state({
+				active: {
+				style: element => {
+					const shape = element.shape;
+					return {
+					lineWidth: 10,
+					stroke: shape.attr('fill'),
+					strokeOpacity: shape.attr('fillOpacity'),
+					};
+				},
+				},
+			});
+
+			// 移除图例点击过滤交互
+			chart.removeInteraction('legend-filter');
+			chart.interaction('element-active');
+
+			chart.render();
+
+			// 监听 element 上状态的变化来动态更新 Annotation 信息
+			chart.on('element:statechange', (ev) => {
+			const { state, stateStatus, element } = ev.gEvent.originalEvent;
+
+			// 本示例只需要监听 active 的状态变化
+			if (state === 'active') {
+				const data = element.getData();
+				if (stateStatus) {
+				// 更新 Annotation
+				updateAnnotation(data);
+				} else {
+				// 隐藏 Annotation
+				clearAnnotation();
+				}
+			}
+			});
+			// 绘制 annotation
+			let lastItem;
+			function updateAnnotation(data) {
+			if (data.item !== lastItem) {
+				chart.annotation().clear(true);
+				chart
+				.annotation()
+				.text({
+					position: ['50%', '50%'],
+					content: data.item,
+					style: {
+					fontSize: 18,
+					fill: '#8c8c8c',
+					textAlign: 'center',
+					},
+					offsetY: -20,
+				})
+				.text({
+					position: ['50%', '50%'],
+					content: data.count,
+					style: {
+					fontSize: 18,
+					fill: '#8c8c8c',
+					textAlign: 'center',
+					},
+					offsetX: -10,
+					offsetY: 20,
+				})
+				.text({
+					position: ['50%', '50%'],
+					content: '件',
+					style: {
+					fontSize: 18,
+					fill: '#8c8c8c',
+					textAlign: 'center',
+					},
+					offsetY: 20,
+					offsetX: 20,
+				});
+				chart.render(true);
+				lastItem = data.item;
+			}
+			}
+
+			// 清空 annotation
+			function clearAnnotation() {
+			chart.annotation().clear(true);
+			chart.render(true);
+			lastItem = null;
+			}
 		}
 		}
 	},
 	},
 };
 };