yudao-dev/src/views/energy/analysis/yoyAnalysis/components/lineChart.vue

<template>
	<div
		id="analysischartLine"
		style="width: 100%"
		:style="{ height: chartHeight + 'px' }"></div>
</template>
<script>
import * as echarts from 'echarts';
import resize from '@/utils/chartMixins/resize';
export default {
	name: 'LineChart',
	mixins: [resize],
	data() {
		return {
			chartDom: '',
			chart: '',
			chartHeight: this.tableHeight(250) / 2,
		};
	},
	props: {
		chartData: {
			type: Array,
			required: true,
			default: () => {
				return [];
			},
		},
	},
	watch: {
		chartData: function () {
			this.getChart();
		},
	},
	mounted() {
		window.addEventListener('resize', () => {
			this.chartHeight = this.tableHeight(250) / 2;
		});
	},
	methods: {
		getChart() {
			if (
				this.chart !== null &&
				this.chart !== '' &&
				this.chart !== undefined
			) {
				this.chart.dispose(); // 页面多次刷新会出现警告，Dom已经初始化了一个实例，这是销毁实例
			}
			this.chartDom = document.getElementById('analysischartLine');
			this.chart = echarts.init(this.chartDom);
			if (this.chartData.length === 0) {
				return false;
			}
			let xData = [];
			let arr = this.chartData[0].type;
			let keys = Object.keys(this.chartData[0]);
			let yData = [];
			for (let j = 0; j < arr.length; j++) {
				for (let k = 0; k < keys.length; k++) {
					if (
						keys[k].indexOf(arr[j] + '_上年同期') > -1 ||
						keys[k].indexOf(arr[j] + '_能源消耗') > -1
					) {
						let obj = {
							name: '',
							type: 'line',
							data: [],
						};
						obj.name = keys[k];
						yData.push(obj);
					}
				}
			}
			for (let i = 0; i < this.chartData.length; i++) {
				xData.push(this.chartData[i].time);
				for (let p = 0; p < yData.length; p++) {
					yData[p].data.push(this.chartData[i][yData[p].name]);
				}
			}
			var option = {
				color: [
					'#FFDC94',
					'#8EF0AB',
					'#63BDFF',
					'#288AFF',
					'#7164FF',
					'#FF6860',
					'#FF9747',
					'#B0EB42',
					'#D680FF',
					'#0043D2',
				],
				legend: {
					data: keys,
					right: '1%',
				},
				tooltip: {
					trigger: 'axis',
				},
				grid: {
					left: '1%',
					right: '1%',
					bottom: '3%',
					containLabel: true,
				},
				xAxis: {
					type: 'category',
					data: xData,
				},
				yAxis: {
					type: 'value',
				},
				series: yData,
			};

			option && this.chart.setOption(option);
		},
	},
};
</script>