提交

src/components/echarts/pieCharts.vue

@@ -0,0 +1,77 @@
+<template>
+	<div :id="echid" class="gfChart"></div>
+</template> 
+
+<script>
+	import * as echarts from 'echarts'
+	export default {
+		props: ["datas",'id'],
+		watch: {
+			datas: {
+				handler(val) {
+					this.hamdlegfChart()
+				},
+				immediate: true,
+				deep: true
+			}
+		},
+		data() {
+			return {
+				echid: '',
+			}
+		},
+		created() {
+			this.echid = 'echa_'+this.id + new Date().getTime();
+		},
+		mounted() {
+			this.hamdlegfChart()
+		},
+		methods: {
+			hamdlegfChart() {
+				if (document.getElementById(this.echid)) {
+					let myechart = echarts.init(document.getElementById(this.echid))
+					myechart.setOption({
+						tooltip: {},
+						series: [{
+							name: '',
+							type: 'pie',
+							radius: '76%',
+							center: ['50%', '50%'],
+							label: {
+								position: 'inside',
+								textStyle: {
+									fontSize: 14,
+									color: '#fff'
+								},
+								formatter: "{num|{c}} \n {name|{b}} ",
+								rich: {
+									num: {
+										fontSize: 18,
+									}
+								}
+							},
+							data: this.datas,
+							emphasis: {
+								itemStyle: {
+									shadowBlur: 10,
+									shadowOffsetX: 0,
+									shadowColor: 'rgba(0,0,0,.5)'
+								}
+							}
+						}]
+					})
+					window.addEventListener('resize', () => {
+						myechart.resize();
+					});
+				}
+			}
+		},
+	}
+</script>
+
+<style scoped>
+	.gfChart {
+		height: 100%;
+		width: 100%;
+	}
+</style>