RMYY_CallCenter_UI/CallCenterWe.../RMYYAPP/pages/myTask/Hardware/Hardware.vue

<template>
	<view class="wrapper">
		<view class="contentbox">
			<view class="titlebox">{{titlebox}}</view>
			<view id="echartbox">
				<qiun-data-charts type="bar" :opts="opts" :chartData="chartData" />
			</view>
		</view>
	</view>
</template>

<script>
	// import * as echarts from 'echarts'
	export default {
		data() {
			return {
				chartData: {},
				opts: {
					color: ["#7b9df2", "#8ebb75", "#dabe4f", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 30, 0, 5],
					enableScroll: false,
					legend: {
						position:'top',
						float:'left'
					},
					xAxis: {
						boundaryGap: "justify",
						disableGrid: false,
						min: 0,
						axisLine: false,
						max: 70
					},
					yAxis: {},
					extra: {
						bar: {
							type: "stack",
							width: 30,
							meterBorde: 1,
							meterFillColor: "#FFFFFF",
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							categoryGap: 2
						}
					}
				},
				titlebox: "硬件服务TOP20"
			}
		},
		onLoad(option) {
			if (option.waretype == 0) {
				uni.setNavigationBarTitle({
					title: '软件服务'
				})
				this.titlebox = "软件服务TOP20"
			}
			this.getListData(option)
		},
		onReady() {
			// this.chart = echarts.init(document.getElementById('echartbox'))
			// this.chartData()
		},
		methods: {
			getListData(option) {
				const params = {
					starttime: option.starttime,
					endtime: option.endtime,
					type: option.waretype
				}
				this.$http.get("FaultRepair/DayReportDetail", params).then((response) => {
					if (response.state == "success") {
						var rowData = []
						var colData1 = []
						var colData2 = []
						var colData3 = []
						var res = {}
						if (response.data.length > 0) {
							response.data.forEach((item, index) => {
								rowData.push(item.deptname || '')
								colData1.push(Number(item.finish))
								colData2.push(Number(item.unfinish))
								colData3.push(Number(item.fx))
								// if (item.deptname) {
								// 	rowData.push(item.deptname)
								// }
								// if (Number(item.finish) != 0) {
								// 	colData1.push(Number(item.finish))
								// }
								// if (Number(item.unfinish) != 0) {
								// 	colData2.push(Number(item.unfinish))
								// }
								// if (Number(item.fx) != 0) {
								// 	colData3.push(Number(item.fx))
								// }
								res = {
									categories: rowData,
									series: [{
											name: "完成量",
											data: colData1
										},
										{
											name: "未完成量",
											data: colData2
										},
										{
											name: "返修量",
											data: colData3
										}
									]
								};
								this.chartData = JSON.parse(JSON.stringify(res));
								// this.chartData(rowData, colData1, colData2, colData3)
							})
						} else {
							rowData = ['科室名称', '科室名称', '科室名称']
							colData1 = [0, 0, 0]
							colData2 = [0, 0, 0]
							colData3 = [0, 0, 0]
							this.chartData(rowData, colData1, colData2, colData3)
						}
					}
				})
			},
			//图表
			// chartData(rowd, cold1, cold2, cold3) {
			// 	this.chart.setOption({
			// 		tooltip: {
			// 			trigger: 'axis',
			// 			axisPointer: {
			// 				type: 'shadow'
			// 			}
			// 		},
			// 		legend: {
			// 			x: 'left',
			// 			y: 'left',
			// 			data: ['完成量', '未完成量', '返修量'],
			// 			selectedMode: false
			// 		},
			// 		color: ["#7b9df2", "#8ebb75", "#dabe4f"],
			// 		grid: {
			// 			left: '1%',
			// 			right: '1%',
			// 			bottom: '3%',
			// 			containLabel: true
			// 		},
			// 		xAxis: {
			// 			axisLine: false,
			// 			type: 'value'
			// 		},
			// 		yAxis: {
			// 			type: 'category',
			// 			data: rowd
			// 		},
			// 		series: [{
			// 				name: '完成量',
			// 				type: 'bar',
			// 				stack: 'total',
			// 				label: {
			// 					show: true
			// 				},
			// 				data: cold1
			// 			},
			// 			{
			// 				name: '未完成量',
			// 				type: 'bar',
			// 				stack: 'total',
			// 				label: {
			// 					show: true
			// 				},
			// 				data: cold2
			// 			},
			// 			{
			// 				name: '返修量',
			// 				type: 'bar',
			// 				stack: 'total',
			// 				label: {
			// 					show: true
			// 				},
			// 				data: cold3
			// 			},
			// 		]
			// 	})
			// },
		}
	}
</script>

<style scoped>
	.contentbox {
		padding: 10px 10px;
		background-color: #f2f2f2;
	}

	.titlebox {
		margin-bottom: 15px;
		margin-left: 5px;
	}

	.wrapper {
		padding: 10px 10px;
		background-color: #fff;
	}

	#echartbox {
		width: 100%;
		height: 800rpx;
	}
</style>