<template>
	<div id="echarts"></div>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			echartsFun(val1, val2) {
				let data1 = [{
						name: '1#',
						type: 'bar',
						// stack: '总量',
						barMaxWidth: 35,
						barGap: '10%',
						itemStyle: {
							normal: {
								color: 'rgba(255, 0, 0, 1.0)',
							},
						},
						data: val2.firstBuilding,
					},

					{
						name: '2#',
						type: 'bar',
						// stack: '总量',
						itemStyle: {
							normal: {
								color: 'rgba(255, 85, 0, 1.0)',
								barBorderRadius: 0,
							},
						},
						data: val2.secondBuilding,
					},
					{
						name: '3#',
						type: 'bar',
						// stack: '总量',
						itemStyle: {
							normal: {
								color: 'rgba(255, 255, 0, 1.0)',
								barBorderRadius: 0,
							},
						},
						data: val2.thirdBuilding,
					},
					{
						name: '4#',
						type: 'bar',
						// stack: '总量',
						itemStyle: {
							normal: {
								color: 'rgba(85, 255, 0, 1.0)',
								barBorderRadius: 0,
							},
						},
						data: val2.forthBuilding,
					},
					{
						name: '5#',
						type: 'bar',
						// stack: '总量',
						itemStyle: {
							normal: {
								color: 'rgba(0,191,183,1)',
								barBorderRadius: 0,
							},
						},
						data: val2.fivthBuilding,
					},
					{
						name: '6#',
						type: 'bar',
						// stack: '总量',
						itemStyle: {
							normal: {
								color: 'rgba(0, 85, 255, 1.0)',
								barBorderRadius: 0,
							},
						},
						data: val2.sixthBuilding,
					},
					{
						name: '总数',
						type: 'line',
						symbolSize: 5,
						symbol: 'circle',
						itemStyle: {
							normal: {
								color: 'rgba(170, 0, 255, 1.0)',
								barBorderRadius: 0,
							},
						},
						data: val2.sumBuilding,
					},
				];
				let data2 = [{
						name: '南楼',
						type: 'bar',
						// stack: '总量',
						itemStyle: {
							normal: {
								color: 'rgba(255, 0, 0, 1.0)',
								barBorderRadius: 0,
							},
						},
						data: val2.sourthBuilding,
					},
					{
						name: '北楼',
						type: 'bar',
						// stack: '总量',
						itemStyle: {
							normal: {
								color: 'rgba(255, 85, 0, 1.0)',
								barBorderRadius: 0,
							},
						},
						data: val2.northBuilding,
					},
					{
						name: '塔楼',
						type: 'bar',
						// stack: '总量',
						itemStyle: {
							normal: {
								color: 'rgba(85, 255, 0, 1.0)',
								barBorderRadius: 0,
							},
						},
						data: val2.towerBuilding,
					},
					{
						name: '总数',
						type: 'line',
						symbolSize: 5,
						symbol: 'circle',
						itemStyle: {
							normal: {
								color: 'rgba(170, 0, 255, 1.0)',
								barBorderRadius: 0,
							},
						},
						data: val2.sumBuilding,
					},
				];
				// 基于准备好的dom，初始化echarts实例
				let myChart = this.$echarts.init(document.getElementById('echarts'))
				// 绘制图表
				myChart.setOption({
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							// type: 'shadow',
							textStyle: {
								color: '#fff',
							},
						},
					},
					grid: {
						borderWidth: 0,
						top: '18%',
						bottom: '15%',
						textStyle: {
							color: '#fff',
						},
						containLabel: true
					},
					legend: {
						x: '30%',
						top: '0%',
						textStyle: {
							color: '#07e6ed',
							fontSize: 12,
						},
						itemWidth: 10,
						itemHeight: 10,
						data: val1 == 1 ? ['1#', '2#', '3#', '4#', '5#', '6#', '总数'] : ['南楼', '北楼', '塔楼', '总数'],
					},

					xAxis: [{
						type: 'category',
						axisLine: {
							lineStyle: {
								color: 'rgba(255, 255, 255, 0.1)',
							},
						},
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						splitArea: {
							show: false,
						},
						axisLabel: {
							color: '#fff',
							fontSize: 12,
							margin: 5,
							// interval: 0,
						},
						data: val2.time,
					}, ],
					yAxis: [{
						name: '总电量：' + val2.sumBuildingSum + 'kw·h',
						nameTextStyle: {
							color: '#1ff9ee',
							fontSize: 13,
							padding: [0, 0, 0, 10],
						},
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								color: 'rgba(255, 255, 255, 0.1)',
							},
						},
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							color: '#fff',
							fontSize: 12,
						},
						splitArea: {
							show: false,
						},
					}, ],
					// "dataZoom": [{
					// 	"show": true,
					// 	"height": 12,
					// 	"xAxisIndex": [
					// 		0
					// 	],
					// 	'bottom': '5%',
					// 	"start": 30,
					// 	"end": 70,
					// 	handleIcon: 'M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z',
					// 	handleSize: '100%',
					// 	handleStyle: {
					// 		color: "#d3dee5",

					// 	},
					// 	textStyle: {
					// 		color: "#fff"
					// 	},
					// 	borderColor: "#90979c"
					// }, {
					// 	"type": "inside",
					// 	"show": true,
					// 	"height": 5,
					// 	"start": 1,
					// 	"end": 35
					// }],
					series: val1 == 1 ? data1 : data2,
				}, true);
			},
			echartsFun2(val1, val2) {
				let datas = [];
				if (val1 == 1) {
					datas = [{
							name: val2[0].name,
							type: 'line',
							symbolSize: 5,
							symbol: 'circle',
							itemStyle: {
								normal: {
									color: '#fff',
									borderColor: '#FE4A7A',
									lineStyle: {
										color: '#ff0000'
									}
								}
							},
							data: val2[0].yaxis,
						},
						{
							name: val2[1].name,
							type: 'line',
							symbolSize: 5,
							symbol: 'circle',
							itemStyle: {
								normal: {
									color: '#fff',
									borderColor: '#E9AA36',
									lineStyle: {
										color: '#ff5500'
									}
								}
							},
							data: val2[1].yaxis,
						},
						{
							name: val2[2].name,
							type: 'line',
							symbolSize: 5,
							symbol: 'circle',
							itemStyle: {
								normal: {
									color: '#fff',
									borderColor: '#0DFFC7',
									lineStyle: {
										color: '#ffff00'
									}
								}
							},
							data: val2[2].yaxis,
						},
						{
							name: val2[3].name,
							type: 'line',
							symbolSize: 5,
							symbol: 'circle',
							itemStyle: {
								normal: {
									color: '#fff',
									borderColor: '#0DFFC7',
									lineStyle: {
										color: '#00ff00'
									}
								}
							},
							data: val2[3].yaxis,
						},
					];
				} else {
					datas = [{
							name: val2[0].name,
							type: 'line',
							symbolSize: 5,
							symbol: 'circle',
							itemStyle: {
								normal: {
									color: '#fff',
									borderColor: '#FE4A7A',
									lineStyle: {
										color: '#FE4A7A'
									}
								}
							},
							data: val2[0].yaxis,
						},
						{
							name: val2[1].name,
							type: 'line',
							symbolSize: 5,
							symbol: 'circle',
							itemStyle: {
								normal: {
									color: '#fff',
									borderColor: '#E9AA36',
									lineStyle: {
										color: '#E9AA36'
									}
								}
							},
							data: val2[1].yaxis,
						},
						{
							name: val2[2].name,
							type: 'line',
							symbolSize: 5,
							symbol: 'circle',
							itemStyle: {
								normal: {
									color: '#fff',
									borderColor: '#0DFFC7',
									lineStyle: {
										color: '#0DFFC7'
									}
								}
							},
							data: val2[2].yaxis,
						},
					];
				}
				// 基于准备好的dom，初始化echarts实例
				let myChart = this.$echarts.init(document.getElementById('echarts'))
				// 绘制图表
				myChart.setOption({
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							// type: 'shadow',
							textStyle: {
								color: '#fff',
							},
						},
					},
					grid: {
						borderWidth: 0,
						top: '18%',
						bottom: '15%',
						textStyle: {
							color: '#fff',
						},
						containLabel: true
					},
					legend: {
						x: '25%',
						top: '0%',
						textStyle: {
							color: '#07e6ed',
							fontSize: 12,
						},
						// itemWidth: 10,
						// itemHeight: 10,
						data: val1 == 1 ? [val2[0].name, val2[1].name, val2[2].name, val2[3]
							.name
						] : [val2[0].name, val2[1].name, val2[2].name],
					},

					xAxis: [{
						type: 'category',
						axisLine: {
							lineStyle: {
								color: 'rgba(255, 255, 255, 0.1)',
							},
						},
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						splitArea: {
							show: false,
						},
						axisLabel: {
							color: '#fff',
							fontSize: 12,
							margin: 5,
							// interval: 0,
						},
						data: val2[0].xaxis,
					}, ],
					yAxis: [{
						name: '单位（m³）',
						nameTextStyle: {
							color: '#1ff9ee',
							fontSize: 13,
							padding: [0, 0, 0, 10],
						},
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								color: 'rgba(255, 255, 255, 0.1)',
							},
						},
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							color: '#fff',
							fontSize: 12,
						},
						splitArea: {
							show: false,
						},
					}, ],
					// "dataZoom": [{
					// 	"show": true,
					// 	"height": 15,
					// 	"xAxisIndex": [
					// 		0
					// 	],
					// 	'bottom': '5%',
					// 	"start": 30,
					// 	"end": 70,
					// 	handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
					// 	handleSize: '110%',
					// 	handleStyle: {
					// 		color: "#d3dee5",

					// 	},
					// 	textStyle: {
					// 		color: "#fff"
					// 	},
					// 	borderColor: "#90979c"
					// }, {
					// 	"type": "inside",
					// 	"show": true,
					// 	"height": 1,
					// 	"start": 1,
					// 	"end": 35
					// }],
					series: datas,
				}, true);
			},
			echartsFun3(val1) {
				// 基于准备好的dom，初始化echarts实例
				console.log(val1)
				let myChart = this.$echarts.init(document.getElementById('echarts'))
				// 绘制图表
				myChart.setOption({
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							// type: 'shadow',
							textStyle: {
								color: '#fff',
							},
						},
					},
					grid: {
						borderWidth: 0,
						top: '18%',
						bottom: '15%',
						textStyle: {
							color: '#fff',
						},
						containLabel: true
					},
					legend: {
						x: '30%',
						top: '0%',
						textStyle: {
							color: '#07e6ed',
							fontSize: 12,
						},
						itemWidth: 10,
						itemHeight: 10,
						data: ['总量', '1#', '2#', '3#', '4#', '5#', '6#', '制冷机房'],
					},

					xAxis: [{
						type: 'category',
						axisLine: {
							lineStyle: {
								color: 'rgba(255, 255, 255, 0.1)',
							},
						},
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						splitArea: {
							show: false,
						},
						axisLabel: {
							color: '#fff',
							fontSize: 12,
							margin: 5,
							// "interval": 0,
						},
						data: val1.time,
					}, ],
					yAxis: [{
						name: '单位（KW  h）',
						nameTextStyle: {
							color: '#1ff9ee',
							fontSize: 13,
							padding: [0, 0, 0, 10],
						},
						type: 'value',
						splitLine: {
							show: true,
							lineStyle: {
								color: 'rgba(255, 255, 255, 0.1)',
							},
						},
						axisLine: {
							show: false,
						},
						axisTick: {
							show: false,
						},
						axisLabel: {
							color: '#fff',
							fontSize: 12,
						},
						splitArea: {
							show: false,
						},
					}, ],
					// "dataZoom": [{
					// 	"show": true,
					// 	"height": 12,
					// 	"xAxisIndex": [
					// 		0
					// 	],
					// 	'bottom': '5%',
					// 	"start": 30,
					// 	"end": 70,
					// 	handleIcon: 'M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z',
					// 	handleSize: '100%',
					// 	handleStyle: {
					// 		color: "#d3dee5",

					// 	},
					// 	textStyle: {
					// 		color: "#fff"
					// 	},
					// 	borderColor: "#90979c"
					// }, {
					// 	"type": "inside",
					// 	"show": true,
					// 	"height": 5,
					// 	"start": 1,
					// 	"end": 35
					// }],
					series: [{
							name: '总数',
							type: 'line',
							symbolSize: 5,
							symbol: 'circle',
							itemStyle: {
								normal: {
									color: 'rgba(170, 0, 255, 1.0)',
									barBorderRadius: 0,
								},
							},
							data: val1.sumBuilding,
						}, {
							name: '1#',
							type: 'bar',
							// stack: '总量',
							barMaxWidth: 35,
							barGap: '10%',
							itemStyle: {
								normal: {
									color: 'rgba(255, 0, 0, 1.0)',
								},
							},
							data: val1.firstBuilding,
						},

						{
							name: '2#',
							type: 'bar',
							// stack: '总量',
							itemStyle: {
								normal: {
									color: 'rgba(255, 85, 0, 1.0)',
									barBorderRadius: 0,
								},
							},
							data: val1.secondBuilding,
						},
						{
							name: '3#',
							type: 'bar',
							// stack: '总量',
							itemStyle: {
								normal: {
									color: 'rgba(255, 255, 0, 1.0)',
									barBorderRadius: 0,
								},
							},
							data: val1.thirdBuilding,
						},
						{
							name: '4#',
							type: 'bar',
							// stack: '总量',
							itemStyle: {
								normal: {
									color: 'rgba(85, 255, 0, 1.0)',
									barBorderRadius: 0,
								},
							},
							data: val1.forthBuilding,
						},
						{
							name: '5#',
							type: 'bar',
							// stack: '总量',
							itemStyle: {
								normal: {
									color: 'rgba(0,191,183,1)',
									barBorderRadius: 0,
								},
							},
							data: val1.fivthBuilding,
						},
						{
							name: '6#',
							type: 'bar',
							// stack: '总量',
							itemStyle: {
								normal: {
									color: 'rgba(0, 85, 255, 1.0)',
									barBorderRadius: 0,
								},
							},
							data: val1.sixthBuilding,
						},
					],
				}, true);
			},
		}
	}
</script>

<style scoped>
	#echarts {
		width: 100%;
		height: 100%;
	}
</style>
