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

<template>
	<div>
		<center2 title="关键参数SPC分析">
			<el-select v-model="value" slot="datePicker" size="mini" placeholder="请选择"> </el-select>
			<div style="height: 100%; width: 100%" ref="chart"></div>
		</center2>
	</div>
</template>

<script>
import center2 from './components/center2/index.vue'
import rocketTit from '../components/rocketTit/index.vue'
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
export default {
	mixins: [resize],
	name: 'left1',
	components: {
		center2,
		rocketTit,
		bigScreenTabs,
	},
	data() {
		return {
			value: '',
			chart: null,
		}
	},
	mounted() {
		this.$nextTick(() => {
			this.initChart()
		})
	},
	beforeDestroy() {},
	methods: {
		initChart() {
			this.chart = echarts.init(this.$refs.chart)
			this.setOptions()
		},
		setOptions() {
			this.chart.setOption({
				legend: {
					data: ['X管制图', 'R管制图'],
					textStyle: {
						color: '#fff',
					},
				},
				grid: {
					left: '3%',
					right: '6%',
					bottom: '3%',
					containLabel: true,
				},
				xAxis: [
					{
						type: 'category',
						data: [
							'产品实物一',
							'产品实物一',
							'产品实物一',
							'产品实物一',
							'产品实物一',
							'产品实物一',
							'产品实物一',
							'产品实物一',
							'产品实物一',
							'产品实物一',
							'产品实物一',
							'产品实物一',
						],
						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: 0.8,
						interval: 0.2,
						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: 10,
				},
				// dataZoom: {},
				series: [
					{
						name: 'R管制图',
						type: 'line',
						barWidth: 20,
						data: [72.6, 75.9, 79.0, 26.4, 28.7, 70.7, 75.6, 82.2, 48.7, 18.8, 66.0, 62.3],
						itemStyle: {
							color: '#61DDAA',
						},
						symbol: 'none',
					},
					{
						name: 'X管制图',
						type: 'line',
						smooth: false,
						data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 30.0, 36.5, 42.0, 56.2],
						itemStyle: {
							color: '#7EA7FC',
						},
						symbol: 'none',
					},
				],
			})
		},
	},
}
</script>

<style lang="scss" scoped>
.tit {
	padding: 16px 24px;
}
.img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
.warp-scroll {
	height: 215px;
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	ul {
		list-style: none;
		padding: 0;
		margin: 0 auto;
		li,
		a {
			display: block;
			display: flex;
			justify-content: space-between;
			font-size: 15px;
		}
		li {
			display: block;
			height: 42px;
			line-height: 42px;
			background: #2a437d;
			opacity: 0.6;
			// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
			margin-bottom: 1px;
			img {
				vertical-align: sub;
				margin-right: 5px;
			}
		}
	}
}
.box {
	display: flex;
	justify-content: center;
	align-items: center;
}

.warp {
	height: 280px;
	width: 440px;
	margin: 0 auto;
	overflow: hidden;
	ul {
		list-style: none;
		padding: 0;
		margin: 0 auto;
		li,
		a {
			display: block;
			display: flex;
			justify-content: space-between;
			font-size: 15px;
		}
		li {
			display: block;
			height: 30px;
			line-height: 30px;
			background: rgba(2, 18, 63, 0.33);
			padding-left: 20px;
			margin: 5px 0;
			img {
				vertical-align: sub;
				margin-right: 5px;
			}
		}
	}
}
</style>