uniapp 根据后台返回数据，循环展示echarts

备注：开始用了Ucharts --样式还可以，但是根据业务需要根据不同选择时间返回的数据条数不定，需要加横向滚动条，Ucharts加完后，页面Ucharts区块不能竖向滚动了，加了Ucharts群，也没解决竖向滚动问题，过段放弃Ucharts，开始了echarts的进坑之旅。
采用的是echarts-renderjs 插件
取模计算的方式来定义需要显示哪个echarts,拼装optionArr数组。
如果把echartsoption定义在data里，会导致Id重复，只能渲染最后四个

<uni-collapse-item v-for="(item,index) in list" :title="item.name" :key="index">
	<echarts class="temper-history-echarts"  :option="optionArr[index]" style="height:660rpx;"></echarts>
</uni-collapse-item>

<script>
	import Echarts from '@/components/echarts/echarts.vue'
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				startTime: currentDate,
				endTime: currentDate,
				autoplay: false,
				tabIndex: 0,
				list: [],
				optionArr: [],
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad() {
			this.getTemperHistory()
		},
		methods: {
			
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				// console.log(year - month - day)
				return `${year}-${month}-${day}`;
			},
	
			//获取 历史数据
			getTemperHistory() {
				let _this = this;
			
				this.$ajax.get({
					url: `/public`,
					param: {
						startTime:_this.startTime,
						endTime: _this.endTime
					}
				}).then((res) => {

					if (res.data.code == 200) {
						if (res.data.data.length == 0) {
							_this.listLength = 0
						} else {
							_this.list = res.data.data
							// console.log("_this.list")
							// console.log(_this.list)
							_this.listLength = res.data.data.length
							// optionArr
							// console.log('取余')
							// console.log(_this.listLength % 4)
							_this.optionArr = []
							for (var i = 0; i < _this.listLength; i++) {
								// console.log(i)
								if (i % 4 == 0) {
									_this.optionArr[i] = {
										notMerge: true,
										tooltip: {
											trigger: 'axis',
											"triggerOn": "click"
										},
										grid: {
											top: '15%',
											left: '15%',
											right: '5%',
											bottom: '10%',
											// containLabel: true
										},
										xAxis: [{
											type: 'category',
											boundaryGap: true,
											axisLine: { //坐标轴轴线相关设置。数学上的x轴
												show: true,
												lineStyle: {
													color: '#169CFF'
												},
											},
											axisLabel: { //坐标轴刻度标签的相关设置
												textStyle: {
													color: '#999999',
												},
											},
											axisTick: {
												show: true,
											},
											data: ['0', '4', '8', '12', '16', '20', ],
										}],
										yAxis: [{
											type: 'value',
											name: "（度）",
											nameTextStyle: {
												color: '#333',
												fontSize: 16
											},
											min: 0,
											splitNumber: 5,
											splitLine: {
												lineStyle: {
													type: 'dashed',
													color: '#D4D4D4'
												}
											},
											axisLine: {
												show: false,
											},
											axisLabel: {
												margin: 20,
												textStyle: {
													color: '#999999',

												},
											},
											axisTick: {
												show: false,
											},
										}],
										series: [{
											name: '注册总量',
											type: 'line',
											smooth: true, //是否平滑曲线显示
											// 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
											showAllSymbol: true,
											symbol: 'emptyCircle',
											symbolSize: 12,
											lineStyle: {
												normal: {
													width: 3,
													color: "#309E51", // 线条颜色
												},
												borderColor: '#f0f',
											},
											label: {
												show: true,
												position: 'top',
												textStyle: {
													color: '#707070',
													fontSize: 15
												}
											},
											itemStyle: {
												normal: {
													color: "#fff",
													borderColor: "#309E51",
													borderWidth: 3,
												}
											},
											tooltip: {
												show: false
											},
											data: [150, 200, 270, 300, 240, 250]
										}]
									}
								} else if (i % 4 == 1) {
									console.log(i)
									_this.optionArr[i] = {
										notMerge: true,
										tooltip: {
											trigger: 'axis',
											"triggerOn": "click"
										},
										grid: {
											top: '15%',
											left: '15%',
											right: '5%',
											bottom: '10%',
											// containLabel: true
										},
										xAxis: [{
											type: 'category',
											boundaryGap: true,
											axisLine: { //坐标轴轴线相关设置。数学上的x轴
												show: true,
												lineStyle: {
													color: '#169CFF'
												},
											},
											axisLabel: { //坐标轴刻度标签的相关设置
												textStyle: {
													color: '#999999',
													// margin: 15,
												},
											},
											axisTick: {
												show: true,
											},
											data: ['0', '4', '8', '12', '16', '20', ],
										}],
										yAxis: [{
											type: 'value',
											name: "（度）",
											nameTextStyle: {
												color: '#333',
												fontSize: 16
											},
											min: 0,
											// max: 140,
											splitNumber: 5,
											splitLine: {
												lineStyle: {
													type: 'dashed',
													color: '#D4D4D4'
												}
											},
											axisLine: {
												show: false,
											},
											axisLabel: {
												margin: 20,
												textStyle: {
													color: '#999999',

												},
											},
											axisTick: {
												show: false,
											},
										}],
										series: [{
											type: 'bar',
											barWidth: 6,
											itemStyle: {
												normal: {
													color: "#27BDFF",
													barBorderRadius: [30, 30, 0, 0],
												}
											},
											data: [150, 200, 270, 300, 240, 250]
										}]
									}
								} else if (i % 4 == 2) {
									_this.optionArr[i] = {
										notMerge: true,
										tooltip: {
											trigger: 'axis',
											"triggerOn": "click"
										},
										grid: {
											top: '15%',
											left: '15%',
											right: '5%',
											bottom: '10%',
											// containLabel: true
										},
										xAxis: [{
											type: 'category',
											boundaryGap: true,
											axisLine: { //坐标轴轴线相关设置。数学上的x轴
												show: true,
												lineStyle: {
													color: '#169CFF'
												},
											},
											axisLabel: { //坐标轴刻度标签的相关设置
												textStyle: {
													color: '#999999',
													// margin: 15,
												},
											},
											axisTick: {
												show: true,
											},
											data: ['0', '4', '8', '12', '16', '20', ],
										}],
										yAxis: [{
											type: 'value',
											name: "（度）",
											nameTextStyle: {
												color: '#333',
												fontSize: 16
											},
											min: 0,
											// max: 140,
											splitNumber: 5,
											splitLine: {
												lineStyle: {
													type: 'dashed',
													color: '#D4D4D4'
												}
											},
											axisLine: {
												show: false,
											},
											axisLabel: {
												margin: 20,
												textStyle: {
													color: '#999999',

												},
											},
											axisTick: {
												show: false,
											},
										}],
										series: [{
											type: 'line',
											smooth: true, //是否平滑曲线显示
											// 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
											showAllSymbol: true,
											symbol: 'emptyCircle',
											symbolSize: 12,
											lineStyle: {
												normal: {
													width: 3,
													color: "#FFA114", // 线条颜色
												},
												borderColor: '#f0f',
											},
											areaStyle: {
												normal: {
													color: 'rgba(255, 161, 20, 0.1)',
													shadowColor: 'rgba(0, 0, 0, 0.1)',
													shadowBlur: 10
												},
											},
											label: {
												show: true,
												position: 'top',
												textStyle: {
													color: '#707070',
													fontSize: 15
												}
											},
											itemStyle: {
												normal: {
													color: "#fff",
													borderColor: "#FFA114",
													borderWidth: 3,

												}
											},
											tooltip: {
												show: false
											},
											data: [0, 200, 270, 300, 240, 250]
										}]
									}
								} else if (i % 4 == 3) {
									_this.optionArr[i] = {
										notMerge: true,
										tooltip: {
											trigger: 'axis',
											"triggerOn": "click"
										},
										grid: {
											top: '15%',
											left: '15%',
											right: '5%',
											bottom: '10%',
											// containLabel: true
										},
										xAxis: [{
											type: 'category',
											boundaryGap: true,
											axisLine: { //坐标轴轴线相关设置。数学上的x轴
												show: true,
												lineStyle: {
													color: '#169CFF'
												},
											},
											axisLabel: { //坐标轴刻度标签的相关设置
												textStyle: {
													color: '#999999',
													// margin: 15,
												},
											},
											axisTick: {
												show: true,
											},
											data: ['0', '4', '8', '12', '16', '20', ],
										}],
										yAxis: [{
											type: 'value',
											name: "（度）",
											nameTextStyle: {
												color: '#333',
												fontSize: 16
											},
											min: 0,
											// max: 140,
											splitNumber: 5,
											splitLine: {
												lineStyle: {
													type: 'dashed',
													color: '#D4D4D4'
												}
											},
											axisLine: {
												show: false,
											},
											axisLabel: {
												margin: 20,
												textStyle: {
													color: '#999999',

												},
											},
											axisTick: {
												show: false,
											},
										}],
										series: [{
											type: 'bar',
											barWidth: 12,
											itemStyle: {
												normal: {
													color: "#8F77C9",
													barBorderRadius: [30, 30, 0, 0],
												}
											},
											data: [150, 200, 270, 300, 240, 250]
										}]
									}
								} else {
									console.log('空')
								}
								_this.optionArr[i].xAxis[0].data = res.data.data[i].categories
								_this.optionArr[i].series[0].data = res.data.data[i].data
								_this.optionArr[i].yAxis[0].name = res.data.data[i].unit
							}
						}
					}

				})
			},
			searchClick() {
				this.getTemperHistory()
			},
			
		},
	}
</script>