修改up

2021-12-14 17:51:54 +08:00
parent 14795c09ff
commit 01dad5c243
3 changed files with 228 additions and 115 deletions
--- a/src/views/bigScreen/scientific/tab2/center1.vue
+++ b/src/views/bigScreen/scientific/tab2/center1.vue
@ -91,14 +91,14 @@ export default {
 				grid: {
 					left: 20,
 					right: 20,
-					top: 30,
-					bottom: 50,
+					top: 50,
+					bottom: 40,
 					containLabel: true,
 				},
 				dataZoom: {
 					type: 'slider',
-					// start: 0,
-					// end: 50,
+					start: 0,
+					end: 50,
 					textStyle: {
 						color: '#fff',
 					},
@ -116,7 +116,7 @@ export default {
 				],
 				yAxis: [
 					{
-						name: '个',
+						name: '',
 						splitLine: {
 							show: true,
 							//  改变轴线颜色
@ -163,10 +163,10 @@ export default {
 						emphasis: {
 							focus: 'series',
 						},
+						data: [120, 132, 101, 134, 90, 230, 210],
 						itemStyle: {
 							color: yelloColorList[2],
 						},
-						data: [150, 232, 201, 154, 190, 330, 410],
 					},
 					{
 						name: '装药量(中)',
@ -175,10 +175,10 @@ export default {
 						emphasis: {
 							focus: 'series',
 						},
+						data: [220, 182, 191, 234, 290, 330, 310],
 						itemStyle: {
-							color: yelloColorList[0],
+							color: yelloColorList[1],
 						},
-						data: [150, 232, 201, 154, 190, 330, 410],
 					},
 					{
 						name: '装药量(小)',
@ -187,41 +187,81 @@ export default {
 						emphasis: {
 							focus: 'series',
 						},
-						itemStyle: {
-							color: yelloColorList[1],
-						},
 						data: [150, 232, 201, 154, 190, 330, 410],
+						itemStyle: {
+							color: yelloColorList[0],
+						},
 					},
 					{
-						name: '交付数量',
+						name: '支付数量',
 						type: 'bar',
 						emphasis: {
 							focus: 'series',
 						},
+						data: [320, 332, 301, 334, 390, 330, 320],
 						itemStyle: {
 							color: '#45D1CC',
 						},
-						data: [150, 232, 201, 154, 190, 330, 410],
 					},
 					{
-						name: '',
-						type: 'line',
-						smooth: false,
-						data: [500, 550, 700, 520, 650, 520, 550],
-						itemStyle: {
-							color: '#45D1CC',
+						name: '型号5',
+						type: 'bar',
+						stack: 'Search Engine',
+						emphasis: {
+							focus: 'series',
+						},
+						data: [620, 732, 701, 734, 1090, 1130, 1120],
+						itemStyle: {
+							color: blueColorList[4],
 						},
-						symbol: 'none',
 					},
 					{
-						name: '',
-						type: 'line',
-						smooth: false,
-						itemStyle: {
-							color: yelloColorList[1],
+						name: '型号4',
+						type: 'bar',
+						stack: 'Search Engine',
+						emphasis: {
+							focus: 'series',
+						},
+						data: [120, 132, 101, 134, 290, 230, 220],
+						itemStyle: {
+							color: blueColorList[3],
+						},
+					},
+					{
+						name: '型号3',
+						type: 'bar',
+						stack: 'Search Engine',
+						emphasis: {
+							focus: 'series',
+						},
+						data: [60, 72, 71, 74, 190, 130, 110],
+						itemStyle: {
+							color: blueColorList[2],
+						},
+					},
+					{
+						name: '型号2',
+						type: 'bar',
+						stack: 'Search Engine',
+						emphasis: {
+							focus: 'series',
+						},
+						data: [62, 82, 91, 84, 109, 110, 120],
+						itemStyle: {
+							color: blueColorList[1],
+						},
+					},
+					{
+						name: '型号1',
+						type: 'bar',
+						stack: 'Search Engine',
+						emphasis: {
+							focus: 'series',
+						},
+						data: [62, 82, 91, 84, 109, 110, 120],
+						itemStyle: {
+							color: blueColorList[0],
 						},
-						data: [600, 500, 700, 620, 750, 800, 600],
-						symbol: 'none',
 					},
 				],
 			})
--- a/src/views/bigScreen/scientific/tab3/left1.vue
+++ b/src/views/bigScreen/scientific/tab3/left1.vue
@ -3,8 +3,7 @@
 		<container1 style="margin-right: 14px" title="型号信息">
 			<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['年度任务', '两总']"></bigScreenTabs>
 			<div class="trends">
-				<!-- <el-progress :percentage="70" :color="customColor"></el-progress> -->
-				<img src="./img/1.png" alt="" />
+				<div style="width: 100%; height: 100%" ref="chart"></div>
 			</div>
 		</container1>
 		<container1 style="margin-right: 14px" title="生产计划">
@ -55,13 +54,99 @@ export default {
 	},
 	mounted() {
 		this.$nextTick(() => {
-			// this.initChart()
+			this.initChart()
 			this.initChart2()
 			this.initChart3()
 		})
 	},
 	beforeDestroy() {},
 	methods: {
+		initChart() {
+			this.chart = echarts.init(this.$refs.chart)
+			this.setOptions()
+		},
+		setOptions() {
+			this.chart.setOption({
+				tooltip: {
+					trigger: 'axis',
+					axisPointer: {
+						// Use axis to trigger tooltip
+						type: 'shadow', // 'shadow' as default; can also be 'line' or 'shadow'
+					},
+				},
+				legend: {
+					textStyle: {
+						color: '#fff', //legend字体颜色
+					},
+				},
+				grid: {
+					top: 30,
+					left: '3%',
+					right: '4%',
+					bottom: 20,
+					containLabel: true,
+				},
+				xAxis: {
+					show: false,
+					// type: 'value',
+					// splitLine: {
+					// 	show: false, //不显示网格线
+					// },
+				},
+				yAxis: {
+					type: 'category',
+					boundaryGap: true,
+					splitLine: {
+						show: false, // 不显示网格线
+					},
+					axisTick: {
+						show: false, // y轴刻度线
+					},
+					axisLine: {
+						show: false,
+						lineStyle: {
+							color: 'rgb(255, 255, 255)',
+						},
+					},
+					data: ['型号1', '型号1', '型号1', '型号1', '型号1', '型号1', '型号1'],
+				},
+				color: ['#55C5A2', '#55C5A2'],
+				series: [
+					{
+						showBackground: true,
+						backgroundStyle: {
+							color: 'rgba(180, 180, 180, 0.2)',
+						},
+						name: '装药',
+						type: 'bar',
+						stack: 'total',
+						// label: {
+						// 	show: true,
+						// },
+						emphasis: {
+							focus: 'series',
+						},
+						barWidth: 12,
+						data: [320, 302, 301, 334, 390, 330, 320],
+						color: '#F6D97E',
+					},
+					{
+						name: '支付',
+						type: 'bar',
+						stack: 'total',
+						// label: {
+						// 	show: true,
+						// },
+						emphasis: {
+							focus: 'series',
+						},
+						barWidth: 12,
+						data: [120, 132, 101, 134, 90, 230, 210],
+						color: '#55C5A2',
+					},
+				],
+			})
+		},
 		initChart2() {
 			this.chart2 = echarts.init(this.$refs.chart2)
 			this.setOptions2()
--- a/src/views/bigScreen/scientific/tab3/left2.vue
+++ b/src/views/bigScreen/scientific/tab3/left2.vue
@ -4,7 +4,7 @@
 			<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['原材料', '配套件']"></bigScreenTabs>
 			<div style="display: flex; height: 100%">
 				<div style="height: 100%; width: 40%; text-align: center" ref="chart">
-					<img style="margin-top: 12%" src="./img/2.png" alt="" />
+					<!-- <img style="margin-top: 12%" src="./img/2.png" alt="" /> -->
 				</div>
 				<div style="height: 100%; width: 60%; padding-right: 15px">
 					<div style="margin-bottom: 1px">
@ -107,11 +107,13 @@ export default {
 			index2: 0,
 			chart: null,
 			scrollList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
+
+			dataList: [2, 1.2, 2.4, 3.6],
 		}
 	},
 	mounted() {
 		this.$nextTick(() => {
-			// this.initChart()
+			this.initChart()
 			this.initChart2()
 		})
 	},
@ -121,93 +123,79 @@ export default {
 			this.setOptions()
 		},
 		setOptions() {
-			const gaugeData = [
-				{
-					value: 20,
-					name: 'Perfect',
-					title: {
-						offsetCenter: ['0%', '-30%'],
-					},
-					detail: {
-						valueAnimation: true,
-						offsetCenter: ['0%', '-20%'],
-					},
-				},
-				{
-					value: 40,
-					name: 'Good',
-					title: {
-						offsetCenter: ['0%', '0%'],
-					},
-					detail: {
-						valueAnimation: true,
-						offsetCenter: ['0%', '10%'],
-					},
-				},
-				{
-					value: 60,
-					name: 'Commonly',
-					title: {
-						offsetCenter: ['0%', '30%'],
-					},
-					detail: {
-						valueAnimation: true,
-						offsetCenter: ['0%', '40%'],
-					},
-				},
-			]
 			this.chart.setOption({
-				series: [
-					{
-						type: 'gauge',
-						startAngle: 90,
-						endAngle: -270,
-						pointer: {
-							show: false,
-						},
-						progress: {
-							show: true,
-							overlap: false,
-							roundCap: true,
-							clip: false,
-							itemStyle: {
-								borderWidth: 1,
-								borderColor: '#464646',
+				polar: {
+					radius: [100, '80%'],
+				},
+				angleAxis: {
+					max: 4,
+					startAngle: 90,
+					show: false, //隐藏角度轴（圆心角）
+					interval: 100,
+					// splitLine: {
+					//   show: false //隐藏分隔线
+					// },
+				},
+				radiusAxis: {
+					show: false,
+					type: 'category',
+					data: ['缺少', '已用', '到货', '现有'],
+					z: 3,
+					axisLabel: {
+						show: false,
+						color: '#f00',
+					},
+				},
+				tooltip: {
+					trigger: 'axis',
+					axisPointer: {
+						//去掉移动的指示线
+						type: 'none',
+					},
+					textStyle: {
+						width: 160,
+						height: 250,
+						lineHeight: 24,
+					},
+					// position: ['15%', '20%'], //显示的位置
+					formatter: params => {
+						let dataStr = `<div><p style="font-weight:bold;margin:0 15px;">${params[0].name}</p></div>`
+						params.forEach(item => {
+							dataStr += `<div>
+						  <div style="margin: 0 8px;">
+						    <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color};"></span>
+						    <span>${item.seriesName}</span>
+						    <span style="float:right;color:#fff;margin-left:20px;">${item.data}</span>
+						  </div>
+						</div>`
+						})
+						return dataStr
+					},
+				},
+				series: {
+					type: 'bar',
+					barWidth: 20,
+					data: this.dataList,
+					coordinateSystem: 'polar',
+					label: {
+						show: false,
+						position: 'middle',
+						formatter: '{b}: {c}',
+					},
+					roundCap: true,
+					itemStyle: {
+						borderColor: 'green',
+						opacity: 0.8,
+						borderWidth: 1,
+						normal: {
+							//每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
+							color: function (params) {
+								var colorList = ['#fa8c16', '#8bb1ed', '#55c5a2', '#f6d97e']
+								return colorList[params.dataIndex]
 							},
 						},
-						axisLine: {
-							lineStyle: {
-								width: 40,
-							},
-						},
-						splitLine: {
-							show: false,
-							distance: 0,
-							length: 10,
-						},
-						axisTick: {
-							show: false,
-						},
-						axisLabel: {
-							show: false,
-							distance: 50,
-						},
-						data: gaugeData,
-						title: {
-							fontSize: 14,
-						},
-						detail: {
-							width: 50,
-							height: 14,
-							fontSize: 14,
-							color: 'auto',
-							borderColor: 'auto',
-							borderRadius: 20,
-							borderWidth: 1,
-							formatter: '{value}%',
-						},
 					},
-				],
+				},
 			})
 		},
 		initChart2() {