src/views/databoard/components/Container.vue

@@ -90,4 +90,8 @@ export default {
 		background-position: 0 0;
 	}
 }
+
+.container-body {
+	flex: 1;
+}
 </style>

src/views/databoard/components/ISRAChart.vue

@@ -0,0 +1,235 @@
+<!-- 
+    filename: ISRAChart.vue
+    author: liubin
+    date: 2023-12-12 09:05:25
+    description: 
+-->
+
+<template>
+	<div class="isra-chart"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+
+export default {
+	name: 'ISRAChart',
+	components: {},
+	props: {},
+	data() {
+		return {
+			chart: null,
+			option: {
+				color: ['#2760ff', '#518eec', '#0ee8e4', '#ddb523'],
+				tooltip: {
+					trigger: 'item',
+				},
+				title: {
+					text: 11234,
+					subtext: '总数',
+					top: '43%',
+					left: '49%',
+					textAlign: 'center',
+					textStyle: {
+						fontSize: 32,
+						lineHeight: 16,
+						color: '#fff',
+					},
+					subtextStyle: {
+						fontSize: 16,
+						color: '#fff7',
+					},
+				},
+				series: [
+					{
+						name: 'Access From',
+						type: 'pie',
+						radius: ['60%', '85%'],
+						avoidLabelOverlap: true,
+						label: {
+							show: true,
+							position: 'outside',
+							formatter: ({ dataIndex, percent }) => {
+								// console.log(
+								// 	['#2760ff', '#518eec', '#0ee8e4', '#ddb523'][dataIndex % 4],
+								// 	percent
+								// );
+								const styleName = ['a', 'b', 'c', 'd'][dataIndex % 4];
+								return `{${styleName}|${percent}%}`;
+							},
+							rich: {
+								a: {
+									color: '#2760ff',
+									fontSize: 18,
+									borderWidth: 0,
+									textBorderWidth: 0,
+								},
+								b: {
+									color: '#518eec',
+									fontSize: 18,
+									borderWidth: 0,
+									textBorderWidth: 0,
+								},
+								c: {
+									color: '#0ee8e4',
+									fontSize: 18,
+									borderWidth: 0,
+									textBorderWidth: 0,
+								},
+								d: {
+									color: '#ddb523',
+									fontSize: 18,
+									borderWidth: 0,
+									textBorderWidth: 0,
+								},
+							},
+						},
+						labelLine: {
+							show: true,
+						},
+						itemStyle: {
+							borderRadius: 12,
+							// borderColor: 'transparent',
+							// borderWidth: 20
+						},
+						data: [
+							{
+								value: 1048,
+								name: '缺陷1',
+								itemStyle: {
+									color: {
+										type: 'linear',
+										x: 1,
+										y: 1,
+										x2: 0,
+										y2: 0,
+										colorStops: [
+											{
+												offset: 0,
+												color: '#2760ff', // 0% 处的颜色
+											},
+											// {
+											// 	offset: 0.6,
+											// 	color: 'transparent', // 80% 处的颜色
+											// },
+											{
+												offset: 1,
+												color: '#2760ff33', // 100% 处的颜色
+											},
+										],
+										global: false, // 缺省为 false
+									},
+								},
+							},
+							{
+								value: 735,
+								name: '缺陷2',
+								itemStyle: {
+									color: {
+										type: 'linear',
+										x: 0,
+										y: 0,
+										x2: 1,
+										y2: 0,
+										colorStops: [
+											{
+												offset: 0,
+												color: '#518eec', // 0% 处的颜色
+											},
+											// {
+											// 	offset: 0.6,
+											// 	color: 'transparent', // 80% 处的颜色
+											// },
+											{
+												offset: 1,
+												color: '#518eec33', // 100% 处的颜色
+											},
+										],
+										global: false, // 缺省为 false
+									},
+								},
+							},
+							{
+								value: 580,
+								name: '缺陷3',
+								itemStyle: {
+									color: {
+										type: 'linear',
+										x: 0,
+										y: 0,
+										x2: 1,
+										y2: 1,
+										colorStops: [
+											{
+												offset: 0,
+												color: '#0ee8e4', // 0% 处的颜色
+											},
+											// {
+											// 	offset: 0.6,
+											// 	color: 'transparent', // 80% 处的颜色
+											// },
+											{
+												offset: 1,
+												color: '#0ee8e433', // 100% 处的颜色
+											},
+										],
+										global: false, // 缺省为 false
+									},
+								},
+							},
+							{
+								value: 484,
+								name: '缺陷4',
+								itemStyle: {
+									color: {
+										type: 'linear',
+										x: 1,
+										y: 0,
+										x2: 0,
+										y2: 0,
+										colorStops: [
+											{
+												offset: 0,
+												color: '#ddb523', // 0% 处的颜色
+											},
+											// {
+											// 	offset: 0.6,
+											// 	color: 'transparent', // 70% 处的颜色
+											// },
+											{
+												offset: 1,
+												color: '#ddb52333', // 100% 处的颜色
+											},
+										],
+										global: false, // 缺省为 false
+									},
+								},
+							},
+						],
+					},
+				],
+			},
+		};
+	},
+	mounted() {
+		this.initChart();
+	},
+	activated() {
+		// this.initChart();
+	},
+	computed: {},
+	methods: {
+		initChart() {
+			this.chart = echarts.init(this.$el);
+			this.chart.setOption(this.option);
+		},
+	},
+};
+</script>
+
+<style scoped lang="scss">
+.isra-chart {
+	width: 100%;
+	height: 100%;
+}
+</style>

src/views/databoard/kiln/IsraCheck.vue

@@ -7,8 +7,10 @@
 
 <template>
 	<Container name="ISRA缺陷检测" size="middle" style="">
-		<div style="padding: 12px; display: flex; flex-direction: column; gap: 8px">
+		<div style="padding: 12px; display: flex; flex-direction: column; gap: 8px; height: 100%;">
-			<div class="f" style="flex: 9"></div>
+			<div class="f" style="flex: 9;">
+				<ISRAChart />
+			</div>
 			<ul
 				class="legend"
 				style="
@@ -32,9 +34,11 @@
 <script>
 import Container from '../components/Container.vue';
 import ShadowRect from '../components/ShadowRect.vue';
+import ISRAChart from '../components/ISRAChart.vue';
+
 export default {
 	name: 'IsraCheck',
-	components: { Container, ShadowRect },
+	components: { Container, ShadowRect, ISRAChart },
 	props: {},
 	data() {
 		return {};