vis389/src/views/bigScreen/qualityManage/right2.vue

<template>
	<div>
		<container5 title="危险作业厂所压减情况">
			<el-row style="height: 80%; display: flex; align-items: center">
				<el-col :span="12">
					<div class="right1_bg right1_bg1">
						<div><span class="num">4 / 6</span></div>
						<div style="font-size: 14px">现有/原有</div>
						<div class="txt">三人以上危险作业场所</div>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="right1_bg right1_bg2">
						<div><span class="num">2 / 7</span></div>
						<div style="font-size: 14px">现有/原有</div>
						<div class="txt">十人以上危险作业场所</div>
					</div>
				</el-col>
			</el-row>
		</container5>
	</div>
</template>

<script>
import scalseBox from '../components/scaleBox.vue'
import bigScreenHead from '../components/bigScreenHead/index.vue'
import rocketTit from '../components/rocketTit/index.vue'
import container5 from './components/container5/index.vue'

import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
export default {
	mixins: [resize],
	name: 'right2',
	components: {
		scalseBox,
		bigScreenHead,
		rocketTit,
		container5,
	},
	data() {
		return {
			dateRange: [],
			chart: null,
			option: {
				legend: {
					data: ['利润', '利润预测', '利润目标完成率'],
					textStyle: {
						color: '#fff',
					},
				},
				grid: {
					left: '3%',
					right: '6%',
					bottom: '3%',
					containLabel: true,
				},
				xAxis: [
					{
						type: 'category',
						data: [
							'2021-01',
							'2021-02',
							'2021-03',
							'2021-04',
							'2021-05',
							'2021-06',
							'2021-07',
							'2021-08',
							'2021-09',
							'2021-10',
							'2021-11',
							'2021-12',
						],
						axisPointer: {
							type: 'shadow',
						},
						axisLine: {
							lineStyle: {
								color: 'rgb(255, 255, 255)',
							},
						},
					},
				],
				yAxis: [
					{
						type: 'value',
						name: '万元',
						min: 0,
						max: 250,
						interval: 50,
						axisLabel: {
							formatter: '{value}',
						},
						splitLine: {
							show: false, //不显示网格线
						},
						splitArea: {
							show: false, //不显示网格区域
						},
						axisLine: {
							lineStyle: {
								color: 'rgb(255, 255, 255)',
							},
						},
					},
					{
						type: 'value',
						min: 0,
						max: 25,
						interval: 5,
						axisLabel: {
							formatter: '{value} %',
						},
						splitLine: {
							show: false, //不显示网格线
						},
						splitArea: {
							show: false, //不显示网格区域
						},
						axisLine: {
							lineStyle: {
								color: 'rgb(255, 255, 255)',
							},
						},
					},
				],
				grid: {
					containLabel: true,
					width: '99%',
					left: 0,
					top: 50,
					bottom: 50,
				},
				dataZoom: {},
				series: [
					{
						name: '利润',
						type: 'bar',
						barWidth: 20,
						data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
						itemStyle: {
							color: 'rgb(118,196,166)',
						},
					},
					{
						name: '利润预测',
						type: 'bar',
						barWidth: 20,
						data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
						itemStyle: {
							color: {
								type: 'linear', // 线性渐变
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [
									{
										offset: 0,
										color: '#B5D3FE', // 0%处的颜色为红色
									},
									{
										offset: 1,
										color: '#7EA7FC', // 100%处的颜色为蓝
									},
								],
							},
						},
					},
					{
						name: '利润目标完成率',
						type: 'line',
						yAxisIndex: 1,
						smooth: false,
						data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
						itemStyle: {
							normal: {
								color: '#F6D97E',
							},
						},
						symbol: 'none',
					},
				],
				// yAxis: {
				//   type: 'value',
				//   splitLine: {
				//     show: false//不显示网格线
				//   },
				//   splitArea: {
				//     show: false//不显示网格区域
				//   },
				//   axisLine: {
				//     lineStyle: {
				//       color: 'rgb(255, 255, 255)'
				//     },
				//   }
				// },
				// series: [
				//   {
				//     name: '利润',
				//     type: 'bar',
				//     data: [
				//       2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
				//     ]
				//   },
				//   {
				//     name: '利润预测',
				//     type: 'bar',
				//     data: [
				//       2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
				//     ]
				//   },
				//   {
				//     name: '利润目标完成率',
				//     type: 'line',
				//     yAxisIndex: 1,
				//     data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
				//   }

				// ]
			},
		}
	},
	mounted() {
		this.$nextTick(() => {
			// this.initChart()
		})
	},
	beforeDestroy() {
		if (!this.chart) {
			return
		}
		this.chart.dispose()
		this.chart = null
	},
	methods: {
		initChart() {
			this.chart = echarts.init(this.$refs.chart)
			this.chart.setOption(this.option)
		},
	},
}
</script>

<style lang="scss" scoped>
.right1_bg {
	position: relative;
	width: 147px;
	height: 113px;
	background-size: cover;
	text-align: center;
	padding: 0 0 10px 0;
	margin: 20px auto 0 auto;
	font-size: 14px;
	.num {
		font-size: 35px;
		font-family: Roboto-Black, Roboto;
		font-weight: 900;
		line-height: 35px;
		margin-right: 3px;
		vertical-align: middle;
	}
	.txt {
		position: absolute;
		bottom: -30px;
	}
}
.right1_bg1 {
	background-image: url(./right2-1.png);
	.num {
		color: #1098ff;
	}
}
.right1_bg2 {
	background-image: url(./right2-2.png);
	.num {
		color: #f6d97e;
	}
}
</style>