add pie chart

src/views/quality/monitoring/qualityStatistics/components/detailGraph.vue

@@ -6,26 +6,43 @@
 -->
 
 <template>
-    <div id="detail-graph">
-        detail graph (echarts)
-    </div>
+	<div class="cell">
+		<div class="title">
+			<span>
+				{{ title }}
+			</span>
+		</div>
+		<div class="content">
+			<slot />
+		</div>
+	</div>
 </template>
 
 <script>
 export default {
-    name: "DetailGraph",
-    components: {},
-    props: {},
-    data() {
-        return {
-            configs: {}
-        }
-    },
-    computed: {},
-    methods: {},
-}
+	name: 'DetailGraph',
+	components: {},
+	props: {
+		title: {
+			type: String,
+			default: 'detail graph (echarts)',
+		},
+	},
+};
 </script>
 
 <style scoped lang="scss">
+.cell {
+	// background: #cfcfcf;
+	border: 1px solid #cfcfcf;
+	border-radius: 8px;
+	padding: 8px;
+}
 
+.title > span {
+	display: inline-block;
+	padding: 4px 8px 4px 6px;
+	background: rgba(20, 145, 210, 0.155);
+	border-left: 4px solid rgba(20, 145, 210);
+}
 </style>

src/views/quality/monitoring/qualityStatistics/components/graphs/total.vue

@@ -0,0 +1,136 @@
+<!-- 
+    filename: total.vue
+    author: liubin
+    date: 2023-08-07 15:04:31
+    description: 
+-->
+
+<template>
+	<div class="total-graph" id="total-graph">
+		<div id="updata" class="updata"></div>
+		<div id="downdata" class="downdata"></div>
+		<div id="checktotal" class="checktotal"></div>
+	</div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+	name: 'TotalGraph',
+	components: {},
+	props: {},
+	data() {
+		return {
+			config: {},
+			upChart: null,
+			downChart: null,
+			totalChart: null,
+		};
+	},
+	computed: {},
+	mounted() {
+		this.init();
+	},
+	methods: {
+		init() {
+			this.initUpdata();
+			this.initDowndata();
+			this.initChecktotal();
+		},
+
+		initUpdata() {
+			if (!this.upChart)
+				this.upChart = echarts.init(document.getElementById('updata'));
+			this.upChart.setOption(this.handleOption({}));
+		},
+
+		initDowndata() {
+			if (!this.downChart)
+				this.downChart = echarts.init(document.getElementById('downdata'));
+			this.downChart.setOption(this.handleOption({}));
+		},
+
+		initChecktotal() {
+			if (!this.totalChart)
+				this.totalChart = echarts.init(document.getElementById('checktotal'));
+			this.totalChart.setOption(this.handleOption({}));
+		},
+
+		handleOption(option) {
+			const defaultOption = {
+				tooltip: {
+					trigger: 'item',
+				},
+				legend: {
+					top: '5%',
+					left: 'center',
+				},
+				series: [
+					{
+						name: 'Access From',
+						type: 'pie',
+						radius: ['40%', '70%'],
+						avoidLabelOverlap: false,
+						label: {
+							show: false,
+							position: 'center',
+						},
+						emphasis: {
+							label: {
+								show: true,
+								fontSize: 40,
+								fontWeight: 'bold',
+							},
+						},
+						labelLine: {
+							show: false,
+						},
+						data: [
+							{ value: 1048, name: 'Search Engine' },
+							{ value: 735, name: 'Direct' },
+							{ value: 580, name: 'Email' },
+							{ value: 484, name: 'Union Ads' },
+							{ value: 300, name: 'Video Ads' },
+						],
+					},
+				],
+			};
+
+			return defaultOption;
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+#total-graph {
+	margin-top: 8px;
+	width: 100%;
+	// height: 400px;
+	background: #ccc;
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	grid-template-rows: repeat(2, 240px);
+	row-gap: 20px;
+}
+
+.updata {
+	width: 240px;
+	justify-self: center;
+	background: rgba($color: #f00, $alpha: 0.3);
+}
+
+.downdata {
+	width: 240px;
+	justify-self: center;
+	background: rgba($color: #0f0, $alpha: 0.3);
+}
+
+.checktotal {
+	width: 240px;
+	background: rgba($color: #00f, $alpha: 0.3);
+	grid-column: span 2;
+	justify-self: center;
+}
+</style>