read_opc/reado-app/components/ecahrts/line-echarts.vue

<template>
	<view>
		<view id="echarts" class="echarts">
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			echartsData: Object
		},
		data() {
			return {
				option: {
					padding: [15, 10, 0, 15],
					legend: {
						type: 'scroll',
						pageIconSize: 18,
						margin: 20,
						itemGap: 20,
						lineHeight: 20,
						top: 0,
					},
					grid: {
						bottom: '25%',
						top: "50px",
						left: "45px",
						right: "30px"
					},
					xAxis: {
						type: 'category',
						data: [],
						axisLabel: {
							// interval: 60, // 自定义显示X轴坐标显示间隔
							textStyle: {
								color: '#626262',
								fontSize: '10',
							},
							formatter: (value, index) => {
								return value.substring(0, 9);
							}
						}
					},
					yAxis: {
						type: 'value',
						axisPointer: {
							snap: true,
							show: true,
							type: 'line',
							lineStyle: {
								color: 'rgba(98, 98, 98, 0.7)',
								type: 'solid'
							}
						}
					},
					series: [],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								show: false,
								backgroundColor: 'rgba(98, 98, 98, 0.8)'
							}
						},
						backgroundColor: 'rgba(50,50,50,0.5)',
						position: function(pos, params, el, elRect, size) {
							var obj = {
								top: 10
							};
							obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
							return obj;
						},
						formatter: function(params) {
							let result = ''
							for (let i in params) {
								if (i == 0) {
									result += params[i].axisValueLabel.substring(9, 17)
								}
								let value = '--'
								if (params[i].data !== null) {
									value = params[i].data
								}
								// #ifdef H5
								result += '\n' + params[i].seriesName + '：' + value
								// #endif

								// #ifdef APP-PLUS
								result += '<br/>' + params[i].marker + params[i].seriesName + '：' + value
								// #endif
							}
							return result;
						}
					},
					dataZoom: [{
							type: 'slider',
							show: true,
							start: 95,
							end: 100,
							handleSize: 8
						},
						{
							type: 'inside',
							start: 95,
							end: 100
						},
						{
							type: 'slider',
							show: false,
							yAxisIndex: 0,
							filterMode: 'empty',
							width: 12,
							height: '70%',
							handleSize: 8,
							showDataShadow: false,
							left: '93%'
						}
					]
				},
				lineTime: null
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<script module="echarts" lang="renderjs">
	import {
		nowDate,
		timeToDate
	} from '../../utils/date.js';
	let myChart
	export default {
		beforeDestroy() {
			clearInterval(this.lineTime)
			this.lineTime = null
		},
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = 'static/echarts.min.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
			this.getEmit()
		},
		methods: {
			initEcharts() {
				myChart = echarts.init(document.getElementById('echarts'))

				myChart.setOption(this.option)
			},
			getServerData() {
				const chartData = this.echartsData.chartItemList

				const timeData = chartData[0].valueTimeList
				const time = timeData.map(item => {
					return item.substring(0, 19).replaceAll('-', "")
				})
				const series = chartData.map(item => {
					return {
						type: 'line',
						name: item.describe ? item.describe : item.itemName,
						data: item.valueList
					}
				})
				this.option.xAxis.data = time
				this.option.series = series
			},
			getEmit() {
				const {
					bucketType,
					bucketValue
				} = this.echartsData
				let time = null
				switch (bucketType) {
					case 0:
						time = 86400000 * bucketValue

						break;
					case 1:
						time = 3600000 * bucketValue

						break;
					case 2:
						time = 60000 * bucketValue

						break;
					case 3:
						time = 1000 * bucketValue

						break;
				}
				this.getServerData()
				this.lineTime = setInterval(() => {
					const currentTime = nowDate();
					let lastTime;
					uni.getStorage({
						key: 'sTime',
						success: (o) => {
							lastTime = o.data;
						}
					})
					let chartParams = {
						id: this.echartsData.id,
						startTime: lastTime,
						endTime: currentTime
					}
					uni.setStorage({
						key: 'sTime',
						data: currentTime
					})
					uni.$http.get('/chart/getChartById', chartParams).then(res => {
						let chartItemList = res.data.data.chartItemList;
						chartItemList.forEach((item, index) => {
							if (item.itemId === this.echartsData.chartItemList[index].itemId) {
								if (item.valueList.length !== 0) {
									//执行将新数据添加进去，旧数据去除一个
									this.echartsData.chartItemList[index].valueList.push(...item
										.valueList)
									// this.echartsData.chartItemList[index].valueList.slice(0, item
									// 	.valueList.length)
									this.echartsData.chartItemList[index].valueList.slice(item
										.valueList.length, this.echartsData.chartItemList[
											index].valueList.length)
									this.echartsData.chartItemList[index].valueTimeList.push(...
										item
										.valueTimeList)
									// this.echartsData.chartItemList[index].valueTimeList.splice(0,
									// 	item
									// 	.valueTimeList.length)
									this.echartsData.chartItemList[index].valueTimeList.splice(
										item
										.valueTimeList.length, this.echartsData.chartItemList[
											index].valueTimeList.length)

								}
							}
						})
						this.initEcharts()
					})
				}, time)
			},
			// updateEcharts(newValue, oldValue, ownerInstance, instance) {
			// 	// 监听 service 层数据变更
			// 	myChart.setOption(newValue)
			// },
			// onClick(event, ownerInstance) {
			// 	// 调用 service 层的方法
			// 	ownerInstance.callMethod('onViewClick', {
			// 		test: 'test'
			// 	})
			// }
		}
	}
</script>

<style>
	.echarts {
		width: 100%;
		height: 540rpx;
	}
</style>