VueUi.git - Gitblit

			@@ -1,8 +1,301 @@
			<template />
			<template>
			<div>
			<div class="body" :style="{height:mainHeight+'px'}">
			<div style="margin: 10px auto;width: 1680px;background-color: #fff" :style="{height:mainHeight+'px'}">

			<div style="margin: 20px auto;width: 1600px" :style="{height:(mainHeight-60)+'px'}">
			<div id="Echarts" style="width: 100%;height: 100%" />
			</div>
			</div>
			</div>
			</div>
			</template>

			<script>
			import * as echarts from 'echarts'
			import { QuaneryDefectReportSearch } from '@/api/bbgl'

			export default {
			name: 'Pzyc'
			name: 'Pzyc',
			data() {
			return {
			mainHeight: 400,
			echartsData: []
			}
			},
			created() {
			window.addEventListener('resize', this.getHeight)
			this.getHeight()
			},
			mounted() {
			this.getQuaneryDefectReportSearch()
			},
			methods: {
			// 获取页面高度
			getHeight() {
			this.$nextTick(() => {
			this.mainHeight = window.innerHeight - 85
			})
			},
			async getQuaneryDefectReportSearch() {
			const res = await QuaneryDefectReportSearch()
			if (res.code === '200') {
			this.echartsData = res.data
			this.getEcharts()
			}
			},
			getEcharts() {
			const option = {
			title: {
			text: '品质异常排行报表',
			left: '50%',
			top: '5%',
			textAlign: 'center',
			textStyle: {
			// color: '#fff',
			color: '#000',
			fontSize: '20',
			fontWeight: 'bolder'
			}
			},
			// backgroundColor: '#323a5e',
			backgroundColor: 'transparent',
			tooltip: {
			trigger: 'axis',
			axisPointer: { // 坐标轴指示器，坐标轴触发有效
			type: 'shadow' // 默认为直线，可选为：'line' \| 'shadow'
			}
			},
			grid: {
			left: '2%',
			right: '4%',
			bottom: '10%',
			top: '15%',
			containLabel: true
			},
			// legend: {
			// data: ['1', '2', '3'],
			// right: 10,
			// top: 12,
			// textStyle: {
			// color: '#fff'
			// },
			// itemWidth: 12,
			// itemHeight: 10
			// // itemGap: 35
			// },
			xAxis: {
			name: '种类',
			nameTextStyle: {
			color: '#000',
			fontSize: 16,
			lineHeight: 20
			},
			type: 'category',
			data: this.echartsData.map(r => r.name),
			splitLine: {
			show: false
			},
			axisTick: {
			show: true
			},
			axisLine: {
			show: true,
			lineStyle: {
			color: '#000'
			}
			},
			axisLabel: {
			interval: 0,
			rotate: 20,
			textStyle: {
			fontSize: 16,
			color: '#000',
			fontFamily: 'Microsoft YaHei'
			}
			}
			},
			yAxis: {
			name: '数量',
			max: Math.ceil(Math.max(...this.echartsData.map(r => r.cont)) * 1.1), // 取数组里面最大的值乘1.1倍的整数的天花板
			interval: 1,
			nameTextStyle: {
			color: '#000',
			fontSize: 16,
			lineHeight: 20
			},
			type: 'value',
			// max: '1200',
			axisTick: {
			show: true
			},
			axisLine: {
			show: true,
			lineStyle: {
			color: '#000'
			}
			},
			splitLine: {
			show: false,
			lineStyle: {
			// color: 'rgba(255,255,255,0.3)'
			color: '#000'
			}
			},
			axisLabel: {
			// interval: 0,
			// rotate: 20,
			textStyle: {
			fontSize: 16,
			color: '#000',
			fontFamily: 'Microsoft YaHei'
			}
			}
			},
			dataZoom: [{
			show: true,
			height: 30,
			xAxisIndex: [
			0
			],
			bottom: 30,
			start: 10,
			end: 80,
			handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
			handleSize: '110%',
			handleStyle: {
			// color: '#d3dee5'
			color: '#000'
			},
			textStyle: {
			color: '#000'
			},
			// borderColor: '#90979c'
			borderColor: '#000',
			fillerColor: `rgba(42, 197, 137, 0.1)`
			}, {
			type: 'inside',
			show: true,
			height: 15,
			start: 1,
			end: 35
			}
			],
			series: [{
			name: '数量',
			type: 'bar',
			barWidth: '15%',
			label: {
			show: true,
			position: 'top',
			textStyle: {
			color: '#000'
			}
			},
			itemStyle: {
			normal: {
			color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			offset: 0,
			// color: '#fccb05'
			color: `rgba(42, 197, 137, 1)`// 0% 处的颜色
			}, {
			offset: 1,
			color: `rgba(187, 236, 218, 1)` // 100% 处的颜色
			// color: '#f5804d'
			}]),
			barBorderRadius: 12
			}
			},
			data: this.echartsData.map(r => r.cont)
			}
			// {
			// name: '2',
			// type: 'bar',
			// barWidth: '15%',
			// itemStyle: {
			// normal: {
			// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			// offset: 0,
			// color: '#8bd46e'
			// }, {
			// offset: 1,
			// color: '#09bcb7'
			// }]),
			// barBorderRadius: 11,
			// }
			// },
			// data: [400, 500, 500, 500, 500, 400,400, 500, 500]
			// },
			// {
			// name: '3',
			// type: 'bar',
			// barWidth: '15%',
			// itemStyle: {
			// normal: {
			// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
			// offset: 0,
			// color: '#248ff7'
			// }, {
			// offset: 1,
			// color: '#6851f1'
			// }]),
			// barBorderRadius: 11,
			// }
			// },
			// data: [400, 600, 700, 700, 1000, 400, 400, 600, 700]
			// }
			]
			}

			var app = {
			currentIndex: -1
			}

			const myChart = echarts.init(document.getElementById('Echarts'))

			// setInterval(function() {
			// var dataLen = option.series[0].data.length
			//
			// // 取消之前高亮的图形
			// myChart.dispatchAction({
			// type: 'downplay',
			// seriesIndex: 0,
			// dataIndex: app.currentIndex
			// })
			// app.currentIndex = (app.currentIndex + 1) % dataLen
			// // console.log(app.currentIndex);
			// // 高亮当前图形
			// myChart.dispatchAction({
			// type: 'highlight',
			// seriesIndex: 0,
			// dataIndex: app.currentIndex
			// })
			// // 显示 tooltip
			// myChart.dispatchAction({
			// type: 'showTip',
			// seriesIndex: 0,
			// dataIndex: app.currentIndex
			// })
			// }, 1000)

			if (option.textStyle == null) {
			option.textStyle = {
			fontFamily: 'Microsoft YaHei',
			color: '#ffffff'
			}
			}

			// 使用刚指定的配置项和数据显示图表。
			myChart.clear()
			myChart.setOption(option, true)

			window.addEventListener('resize', function() {
			myChart.resize()
			})

			return myChart
			}
			}
			}
			</script>