提交

2026-04-10 17:10:36 +08:00
parent 368ed7897b
commit ef83eeb5fe
767 changed files with 167713 additions and 0 deletions
--- a/src/components/echarts/pileUpColumn.vue
+++ b/src/components/echarts/pileUpColumn.vue
@ -0,0 +1,180 @@
+<template>
+	<div :id="echid" class="gfChart"></div>
+</template>
+
+<script>
+	import * as echarts from 'echarts'
+	export default {
+		props: ["datas"],
+		watch: {
+			datas: {
+				handler(val) {
+					this.hamdlegfChart()
+				},
+				immediate: true,
+				deep: true
+			}
+		},
+		data() {
+			return {
+				echid: '',
+				themeType: getStorage('themeSetting')
+			}
+		},
+		created() {
+			this.echid = 'echc_' + new Date().getTime();
+
+		},
+		mounted() {
+			this.hamdlegfChart()
+		},
+		methods: {
+			hamdlegfChart() {
+				if (document.getElementById(this.echid)) {
+					let myechart = echarts.init(document.getElementById(this.echid))
+					myechart.setOption({
+						legend: {
+							textStyle:{
+								color:this.themeType == 'light' ? '#333':'#fff'
+							}
+						},
+						grid: {
+							left: '10',
+							right: '10',
+							bottom: '0',
+							top: '35',
+							containLabel: true
+						},
+						xAxis: {
+							type: 'category',
+							// data: ['xxx派出所','xxx派出所','xxx派出所','xxx派出所','xxx派出所'],
+							data: this.datas.Xlist,
+							axisLabel: {
+								interval: 0,
+								rotate: 40,
+								textStyle: {
+									color: this.themeType == 'light' ? '#333':'#fff'
+								}
+							}
+						},
+						yAxis: {
+							type: 'value',
+							splitLine: {
+								show: false,
+							},
+						},
+						series: [{
+								name: '系统问题',
+								type: 'bar',
+								stack: 'total',
+								label: {
+									show: true,
+									color: '#fff',
+									fontSize: 12
+								},
+								emphasis: {
+									focus: 'series'
+								},
+								// data: [30,50,20.50,60,50],
+								data: this.datas.xtwtList,
+								barGap: '20',
+								barWidth: '20',
+								// barGap: '50%',
+								// barWidth:'50%',
+								color: [{
+									type: 'linear',
+									x: 0,
+									y: 0,
+									x2: 0,
+									y2: 1,
+									colorStops: [{
+											offset: 0,
+											color: '#39B079'
+										},
+										{
+											offset: 1,
+											color: '#39B079'
+										}
+									]
+
+								}]
+							}, {
+								name: '功能改进',
+								type: 'bar',
+								stack: 'total',
+								barGap: '50%',
+								barWidth: '50%',
+								label: {
+									show: true,
+									color: '#fff'
+								},
+								emphasis: {
+									focus: 'series'
+								},
+								data: this.datas.gngjList,
+								color: [{
+									type: 'linear',
+									x: 0,
+									y: 0,
+									x2: 0,
+									y2: 1,
+									colorStops: [{
+											offset: 0,
+											color: '#D17D1C'
+										},
+										{
+											offset: 1,
+											color: '#ff887c'
+										}
+									]
+								}]
+							},
+							{
+								name: '新需求',
+								type: 'bar',
+								barGap: '50%',
+								barWidth: '50%',
+								stack: 'total',
+								label: {
+									show: true,
+									color: '#fff'
+								},
+								emphasis: {
+									focus: 'series'
+								},
+								data: this.datas.xxqList,
+								color: [{
+									type: 'linear',
+									x: 0,
+									y: 0,
+									x2: 0,
+									y2: 1,
+									colorStops: [{
+											offset: 0,
+											color: '#EB0E0E'
+										},
+										{
+											offset: 1,
+											color: '#D31F1F'
+										}
+									]
+								}]
+							},
+						]
+					})
+					window.addEventListener('resize', () => {
+						myechart.resize();
+					});
+				}
+			}
+		},
+	}
+</script>
+
+<style scoped>
+	.gfChart {
+		margin-top: 2vw;
+		height: 75vw;
+		width: 100%;
+	}
+</style>