yudao-dev/src/views/energy/analysis/contrastAnalysis/components/barChart.vue

<template>
	<div
		id="analysischartBar"
		style="width: 100%"
		:style="{ height: chartHeight + 'px' }"></div>
</template>
<script>
import * as echarts from 'echarts';
import resize from '@/utils/chartMixins/resize';
export default {
	name: 'BarChart',
	mixins: [resize],
	data() {
		return {
			chartDom: '',
			chart: '',
			chartHeight: this.tableHeight(250) / 2,
		};
	},
	props: {
		chartData: {
			type: Array,
			required: true,
			default: () => {
				return [];
			},
		},
		timeDim: {
			type: String,
			default: '',
		},
	},
	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('analysischartBar');
			this.chart = echarts.init(this.chartDom);
			let tempArr = [];
			let xData = [];
			let yData = [];
			let legendData = [];
			if (this.chartData.length === 0) {
				return false;
			} else {
				tempArr = this.chartData[0].trendRespVOList;
			}
			for (let k = 0; k < tempArr.length; k++) {
				let time = '';
				if (this.timeDim === '3') {
					let year = tempArr[k].time.slice(0, 4);
					let weak = tempArr[k].time.slice(4, 6);
					time = year + ' 第 ' + weak + ' 周';
				} else {
					time = tempArr[k].time;
				}
				xData.push(time);
			}
			for (let i = 0; i < this.chartData.length; i++) {
				let obj = {
					name: this.chartData[i].objName + this.chartData[i].objCode,
					type: 'bar',
					barMaxWidth: 20,
					label: {
						show: true,
						position: 'top',
					},
					data: [],
				};
				legendData.push(this.chartData[i].objName + this.chartData[i].objCode);
				let temp = this.chartData[i].trendRespVOList;
				for (let j = 0; j < temp.length; j++) {
					let num = temp[j].useNum ? temp[j].useNum.toFixed(2) : '';
					obj.data.push(num);
				}
				yData.push(obj);
			}
			var option = {
				color: ['#FFDC94', '#8EF0AB', '#63BDFF', '#288AFF', '#7164FF'],
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
					},
					formatter: function (params) {
						return (
							params[0].axisValue +
							`<br>` +
							params
								.map((item) => {
									let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${item.color};"></span>`;
									let seriesNameStr = `<span style="display:inline-block;">${item.seriesName}</span>`;
									let value = item.value ? item.value : '-';
									let valueStr = `<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${value}</span>`;
									return `<span style="display:flex; justify-content:space-between; margin-bottom: 2px">
									<span>${str}${seriesNameStr}</span>
									<span>${valueStr}</span>
								</span>`;
								})
								.join(``)
						);
					},
				},
				grid: {
					left: '4%',
					right: '1%',
					bottom: '1%',
					containLabel: true,
				},
				legend: {
					data: legendData,
					right: '1%',
					icon: 'rect',
					itemHeight: 8,
					itemWidth: 8,
				},
				xAxis: {
					type: 'category',
					data: xData,
					axisLabel: {
						rotate: '45',
					},
				},
				yAxis: {
					type: 'value',
				},
				series: yData,
			};

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