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"></view>
		</view>
	</view>
</template>

<script>
	import * as echarts from '@/components/echarts/echarts.min.js'; // 引入 echarts
	export default {
		data() {
			return {
				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 = []
						if (response.data.length > 0) {
							response.data.forEach((item, index) => {
								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))
								}
								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>