<!-- 
    filename: line.vue
    author: liubin
    date: 2023-08-07 16:14:11
    description: 
-->

<template>
	<div ref="line-chart" class="line-chart"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
	name: 'LineDataChart',
	components: {},
	props: {
		xProps: {
			type: Array,
			default: () => [],
		},
		legend: {
			type: Array,
			default: () => [],
		},
		series: {
			type: Array,
			default: () => [],
		},
	},
	data() {
		return {
			chart: null,
			// inspectionContents: [
			// 	'检测内容1',
			// 	'检测内容2',
			// 	'检测内容3',
			// 	'检测内容4',
			// 	'检测内容5',
			// 	'检测内容6',
			// 	'检测内容7',
			// 	'检测内容8',
			// 	'检测总数',
			// 	'比例%',
			// ],
			// xProps: [
			// 	'产线1',
			// 	'产线2',
			// 	'产线3',
			// 	'产线4',
			// 	'产线5',
			// 	'产线6',
			// 	'产线7',
			// 	'产线8',
			// 	'产线9',
			// ],
			// series: [
			// 	{
			// 		name: 'a',
			// 		type: 'line',
			// 		data: [120, 132, 101, 134, 90, 230, 210, 120, 132],
			// 	},
			// 	{
			// 		name: 'lkj',
			// 		type: 'line',
			// 		data: [220, 182, 191, 234, 290, 330, 310, 220, 182],
			// 	},
			// 	{
			// 		name: '测试11',
			// 		type: 'line',
			// 		data: [150, 232, 201, 154, 190, 330, 410, 150, 232],
			// 	},
			// 	{
			// 		name: '测试22',
			// 		type: 'line',
			// 		data: [320, 332, 301, 334, 390, 330, 320, 332, 301],
			// 	},
			// ],
		};
	},
	computed: {
		config() {
			return {
				color: ['#fde19a', '#8be2b9', '#288aff', '#7164ff'],
				// title: {
				// 	text: '折线图',
				// },
				grid: {
					top: '12%',
					left: '2%',
					right: '5%',
					bottom: '5%',
					containLabel: true,
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
					},
				},
				legend: {
					data: this.legend,
					top: '5%',
					icon: 'circle',
				},
				// toolbox: {
				// 	feature: {
				// 		saveAsImage: {},
				// 	},
				// },
				xAxis: {
					type: 'category',
					boundaryGap: true,
					onZero: false,
					axisTick: {
						show: false,
					},
					axisLine: {
						lineStyle: {
							// color: 'red'
						},
					},
					data: this.xProps,
					// data: [
					// 	'设备1',
					// 	'设备2',
					// 	'设备3',
					// 	'设备4',
					// 	'设备5',
					// 	'设备6',
					// 	'设备7',
					// 	'设备8',
					// 	'设备9',
					// 	'设备10',
					// 	'设备11',
					// 	'设备12',
					// 	'设备13',
					// 	'设备14',
					// 	'设备15',
					// 	'设备16',
					// 	'设备17',
					// 	'设备18',
					// 	'设备19',
					// 	'设备20',
					// ],
				},
				yAxis: {
					type: 'value',
					name: '单位/片',
					nameTextStyle: {
						color: '#999',
						fontSize: 14,
						align: 'right',
					},
					max: function (value) {
						return value.max + Math.floor(value.max / 5);
					},
				},
				// 缩放 - 滑动
				dataZoom: {
					type: 'inside',
				},
				series: this.series,
				// series: [
				// 	{
				// 		name: '上片数',
				// 		type: 'bar',
				// 		// barWidth: 12,
				// 		data: [
				// 			10,
				// 			12,
				// 			43,
				// 			4,
				// 			22,
				// 			32,
				// 			12,
				// 			8,
				// 			122,
				// 			0,
				// 			,
				// 			43,
				// 			4,
				// 			22,
				// 			32,
				// 			12,
				// 			8,
				// 			122,
				// 			77,
				// 			99,
				// 		],
				// 	},
				// 	{
				// 		name: '下片数',
				// 		type: 'bar',
				// 		// barWidth: 12,
				// 		data: [
				// 			10,
				// 			12,
				// 			43,
				// 			4,
				// 			22,
				// 			32,
				// 			12,
				// 			8,
				// 			122,
				// 			0,
				// 			4,
				// 			22,
				// 			32,
				// 			12,
				// 			8,
				// 			122,
				// 			0,
				// 			,
				// 			43,
				// 			4,
				// 			22,
				// 			32,
				// 		],
				// 	},
				// 	{
				// 		name: '检测数',
				// 		type: 'bar',
				// 		// barWidth: 12,
				// 		barCategoryGap: 12,
				// 		data: [
				// 			10,
				// 			12,
				// 			43,
				// 			4,
				// 			22,
				// 			4,
				// 			22,
				// 			32,
				// 			12,
				// 			8,
				// 			122,
				// 			0,
				// 			,
				// 			43,
				// 			4,
				// 			22,
				// 			32,
				// 			32,
				// 			12,
				// 			8,
				// 			122,
				// 			0,
				// 		],
				// 	},
				// ],
			};
		},
	},
	mounted() {
		this.init();
	},
	watch: {
		config(val) {
			this.$nextTick(() => {
				this.init();
			});
		},
	},
	methods: {
		init() {
			if (!this.chart) this.chart = echarts.init(this.$refs['line-chart']);

			this.$nextTick(() => {
				this.setOption();
			});
		},
		setOption() {
			this.chart.setOption(this.config);
		},
	},
};
</script>

<style scoped lang="scss">
.line-chart {
	// background: #f3f3f3;
	height: 100%;
}
</style>
