echarts

src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/charts/business/近一周缺陷最多零件top3.vue

@@ -20,10 +20,10 @@ export default {
 			query: {
 				// 1-首检报表 2-抛光报表 3-包装报表 4-总报表
 				reportType: 1,
-				// 报表类别 0-工单统计 1-工单统计 2-Top3缺陷数 3-Top10零件合格数
+				// 报表类别 
-				chartType: 2,
+				chartType: 3,
 				// 时间类型 0-自定义 1-本月 2-本日 3-本周 4-本季度 5-本年
-				timeType: 1,
+				timeType: 3,
 				startTime: '',
 				endTime: '',
 				Partnumber: '',

src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/charts/business/近一周缺陷率top3.vue

@@ -0,0 +1,87 @@
+<template>
+	<div @click="getData" v-loading="loading" style="width: 100%;height: 100%;" ref="chartRef"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { CanvasRenderer } from 'echarts/renderers';
+echarts.use([CanvasRenderer]);
+import theme from '../theme/dark.json';
+echarts.registerTheme('theme', theme);
+
+import { GetFQCQualityOptions } from '@/api/echarts/index.js'
+export default {
+	name: 'Top3缺陷零件',
+	data() {
+		return {
+			chartRef: null,
+			loading: false,
+			chart: null,
+			query: {
+				// 1-首检报表 2-抛光报表 3-包装报表 4-总报表
+				reportType: 1,
+				// 报表类别 
+				chartType: 1,
+				// 时间类型 0-自定义 1-本月 2-本日 3-本周 4-本季度 5-本年
+				timeType: 1,
+				startTime: '',
+				endTime: '',
+				Partnumber: '',
+				Description: ''
+			},
+			// 基础options配置
+			options: {
+				xAxis: {
+					type: 'value',
+				},
+				yAxis: {
+					type: 'category',
+					data: [],
+					axisLabel: {
+						width: '100px',
+						overflow: 'break'
+					},
+					nameTextStyle: {
+						fontSize: 20
+					}
+				},
+				grid: {
+					// 减少右侧空白
+					left: '260px',
+				},
+				series: []
+			}
+		};
+	},
+	methods: {
+		setOptions(options) {
+			this.chart && this.chart.setOption(options);
+		},
+		initChart() {
+			this.chart = echarts.init(this.$refs.chartRef, 'theme');
+			this.setOptions(this.options);
+			this.getData();
+		},
+		resizeChart() {
+			this.chart && this.chart.resize();
+		},
+		getData() {
+			this.loading = true;
+			GetFQCQualityOptions(this.query).then(res => {
+				if (res.code === 200) {
+					this.setOptions(res.data);
+					this.loading = false;
+				}
+			})
+		}
+	},
+	mounted() {
+		this.initChart();
+		window.addEventListener('resize', this.resizeChart);
+	},
+	destroyed() {
+		window.removeEventListener('resize', this.resizeChart);
+	},
+
+};
+</script>

src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/charts/business/近一周缺陷类别Top3.vue

@@ -0,0 +1,87 @@
+<template>
+	<div @click="getData" v-loading="loading" style="width: 100%;height: 100%;" ref="chartRef"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { CanvasRenderer } from 'echarts/renderers';
+echarts.use([CanvasRenderer]);
+import theme from '../theme/dark.json';
+echarts.registerTheme('theme', theme);
+
+import { GetFQCQualityOptions } from '@/api/echarts/index.js'
+export default {
+	name: 'Top3缺陷零件',
+	data() {
+		return {
+			chartRef: null,
+			loading: false,
+			chart: null,
+			query: {
+				// 1-首检报表 2-抛光报表 3-包装报表 4-总报表
+				reportType: 1,
+				// 报表类别 
+				chartType: 2,
+				// 时间类型 0-自定义 1-本月 2-本日 3-本周 4-本季度 5-本年
+				timeType: 1,
+				startTime: '',
+				endTime: '',
+				Partnumber: '',
+				Description: ''
+			},
+			// 基础options配置
+			options: {
+				xAxis: {
+					type: 'value',
+				},
+				yAxis: {
+					type: 'category',
+					data: [],
+					axisLabel: {
+						width: '100px',
+						overflow: 'break'
+					},
+					nameTextStyle: {
+						fontSize: 20
+					}
+				},
+				grid: {
+					// 减少右侧空白
+					left: '260px',
+				},
+				series: []
+			}
+		};
+	},
+	methods: {
+		setOptions(options) {
+			this.chart && this.chart.setOption(options);
+		},
+		initChart() {
+			this.chart = echarts.init(this.$refs.chartRef, 'theme');
+			this.setOptions(this.options);
+			this.getData();
+		},
+		resizeChart() {
+			this.chart && this.chart.resize();
+		},
+		getData() {
+			this.loading = true;
+			GetFQCQualityOptions(this.query).then(res => {
+				if (res.code === 200) {
+					this.setOptions(res.data);
+					this.loading = false;
+				}
+			})
+		}
+	},
+	mounted() {
+		this.initChart();
+		window.addEventListener('resize', this.resizeChart);
+	},
+	destroyed() {
+		window.removeEventListener('resize', this.resizeChart);
+	},
+
+};
+</script>

src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/charts/theme/dark.json

@@ -45,6 +45,12 @@
         "smooth": false
     },
     "bar": {
+        "label": {
+            "show": true,
+            "color": "#ffffff",
+            "fontSize": "16",
+            "overflow": "break"
+        },
         "itemStyle": {
             "barBorderWidth": 0,
             "barBorderColor": "#ccc"

src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/index.css

@@ -56,8 +56,8 @@
 
 .card-1 {
 	padding-top: 50px;
-	padding-left: 10px;
+	padding-left: 20px;
-	padding-right: 10px;
+	padding-right: 20px;
 	padding-bottom: 20px;
 	width: 33%;
 	height: 400px;

src/views/kanbanManagement/FqcQualityDataBoard/KANBAN/index.vue

@@ -12,23 +12,24 @@
 			</div>
 		</div>
 		<div class="row">
-			<dv-border-box-11 class="card-1" title="昨日工单统计">
+			<dv-border-box-11 class="card-1" title="近一周缺陷率Top3(%)">
-
+				<barChart1></barChart1>
 			</dv-border-box-11>
-			<dv-border-box-11 class="card-1" title="本周工单统计">
+			<dv-border-box-11 class="card-1" title="近一周缺陷类别Top3">
-
+				<barChart2></barChart2>
 			</dv-border-box-11>
-			<dv-border-box-11 class="card-1" title="Top3缺陷零件">
+			<dv-border-box-11 class="card-1" title="近一周缺陷最多零件Top3">
-				<Top3缺陷零件></Top3缺陷零件>
+				<pieChart1>
+				</pieChart1>
 			</dv-border-box-11>
 		</div>
 		<div class="row">
 			<div class="card-2">
-				<dv-border-box-11 title="本月工单统计">
+				<dv-border-box-11 title="近一月废品率趋势">
 
 				</dv-border-box-11>
 			</div>
-			<dv-border-box-11 class="card-1" title="Top10零件合格数">
+			<dv-border-box-11 class="card-1" title="近一周废品率趋势">
 			</dv-border-box-11>
 		</div>
 	</div>
@@ -37,9 +38,11 @@
 <script>
 import kbHeader from './components/kbHeader.vue';
 import kbTime from './components/kbTime.vue';
-import Top3缺陷零件 from './charts/business/Top3缺陷零件.vue';
+import pieChart1 from './charts/business/近一周缺陷最多零件top3.vue';
+import barChart1 from './charts/business/近一周缺陷率top3.vue';
+import barChart2 from './charts/business/近一周缺陷类别Top3.vue';
 export default {
-	components: { kbHeader, kbTime, Top3缺陷零件 },
+	components: { kbHeader, kbTime, pieChart1, barChart1, barChart2 },
 	data() {
 		return {
 			screenWidth: null,