read_opc/reado-app/components/cycharts/cyChart2.vue

<template>
	<view class="container">
		<div class="moreTime">
			<div v-for="(item,index) in range" :key="index" @click="change(index)" :class="choiceTime===index?'bod':''">
				{{item}}
			</div>
		</div>
		<div class="childTime">
			<div v-for="(item,index) in childTime" v-show="choiceTime===index">
				<template>
					<template v-for="(o,i) in item">
						<div @click="getTime(i,o.value)" :class="choiceChildTime===i?'box':''">{{o.text}}</div>
					</template>
				</template>
			</div>
		</div>
		<view>
			<div id="echart_demo" style="height: 400px;">

			</div>
		</view>

	</view>
</template>

<script>
	import {
		nowDate,
		timeToDate
	} from '../../utils/date.js'
	import echart from '../echarts/echarts-uniapp.vue';
	import * as echarts from 'echarts';
	export default {
		components: {
			echart,
		},
		props: {
			//图表类型 bar,line,pie,table
			chartType: {
				type: String,
				default: 'bar'
			},
			//图表高度
			height: {
				type: String,
				default: '400px'
			},
			//后台定义的图表id
			chartId: {
				type: String,
				default: null
			}
		},
		data() {
			return {
				chartData: {},
				option: {},
				range: ["分", "时", "日", "周"],
				childTime: [
					[{
							value: 900000,
							text: "15分"
						},
						{
							value: 1800000,
							text: "30分"
						},
						{
							value: 2700000,
							text: "45分"
						}
					],
					[{
							value: 3600000,
							text: "1小时"
						},
						{
							value: 21600000,
							text: "6小时"
						},
						{
							value: 43200000,
							text: "12小时"
						},
						{
							value: 64800000,
							text: "18小时"
						}
					],
					[{
							value: 86400000,
							text: "1日"
						},
						{
							value: 259200000,
							text: "3日"
						},
						{
							value: 432000000,
							text: "5日"
						}
					],
					[{
							value: 604800000,
							text: "1周"
						},
						{
							value: 1209600000,
							text: "2周"
						},
						{
							value: 1814400000,
							text: "3周"
						},
						{
							value: 2419200000,
							text: "4周"
						}
					],
				],
				startTime: null,
				choiceTime: 0,
				choiceChildTime: 0,
			};
		},
		created() {
			this.startTime = timeToDate(new Date().getTime() - 900000)
			this.getServerData()

		},
		mounted() {
			//this.defineEcharts()
		},
		methods: {
			defineEcharts() {
				var chartDom = document.getElementById("echart_demo");
				//console.log(chartDom)
				var chart = echarts.init(chartDom)
				let option = {
					xAxis: {
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value'
					},
					dataZoom: [
					    {
					      type: 'slider',
					      show: true,
					      //xAxisIndex: [0],
					      start: 90,
					      end: 100
					    },
					
					  ],
					series: [{
						data: [120, 200, 150, 80, 70, 110, 130],
						type: 'bar'
					}]
				};
				chart.setOption(option)
				console.log('------------------------')
				console.log(chart.getOption())
			},
			//分时日周选择
			change(i) {
				this.choiceTime === i ? this.choiceTime = -1 : this.choiceTime = i
				this.choiceChildTime = -1
			},
			//二级时间选择
			getTime(i, val) {
				this.choiceChildTime = i
				this.startTime = timeToDate(new Date().getTime() - val)
				this.getServerData();
			},
			//获得图表数据
			getServerData() {
				let id = this.chartId
				let startTime = this.startTime
				let endTime = timeToDate(new Date().getTime())
				uni.$http.get(`/chart/getChartById?id=${id}&startTime=${startTime}&endTime=${endTime}`).then(res => {
					const data = res.data.data;
					const chartData = data.chartItemList
					//x轴数据，时间轴
					const timeData = chartData[0].valueTimeList
					let optionData = this.getChartOption(this.chartType)
					optionData.title.text = data.chartName
					//y轴数据，数据轴
					if (this.chartType == 'bar' || this.chartType == 'line') {
						const series = chartData.map(item => {
							return {
								// name: item.describe ? item.describe : item.itemName,
								name: item.describe ? item.describe : item.itemReadName,
								data: item.valueList,
								type: this.chartType
							}
						})
						optionData.xAxis.data = timeData
						optionData.series = series
					} else if (this.chartType == 'pie') {

					}
					this.option = optionData
					console.log(this.option)

				});
			},
			//获得图表option数据
			getChartOption(cType) {
				let option = {}
				if (cType == 'bar') {
					option = {
						title: {
							text: '',
							textStyle: {
								color: '#666666',
								fontWeight: 'normal',
								fontSize: '14'
							}
						},
						xAxis: {
							type: 'category',
							data: [],
							axisLabel: {
								formatter: function(value) {
									return value.substring(11, 19) + "\n" + value.substring(0, 10).split('-').join(
										'')
								}
							}
						},
						yAxis: {
							type: 'value'
						},
						legend: {
							type: 'scroll',
							top: 30
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross',
								lineStyle: {
									type: 'dashed'
								},
								label: {
									show: false
								}
							},
							textStyle: {
								color: '#ffffff'
							},
							confine: true,
							extraCssText: 'white-space: normal; word-break: break-all;',
							backgroundColor: 'rgba(108,106,120,0.9)',
							position: 'inside',
							formatter: function(params) {
								let result = ''
								for (let i in params) {
									let value = '--'
									if (params[i].data !== null) {
										value = params[i].data
									}
									result += '<br>' + params[i].seriesName + '：' +
										value
								}
								return result
							}
						},
						dataZoom: [
						    {
						      type: 'slider',
						      show: true,
						      //xAxisIndex: [0],
						      start: 1,
						      end: 35
						    },
						
						  ],
						series: []
					};
				} else if (cType == 'line') {
					option = {
						title: {
							text: '',
							textStyle: {
								color: '#666666',
								fontWeight: 'normal',
								fontSize: '14'
							}
						},
						xAxis: {
							type: 'category',
							data: [],
							axisLabel: {
								formatter: function(value) {
									return value.substring(11, 19) + "\n" + value.substring(0, 10).split('-').join(
										'')
								}
							}
						},
						yAxis: {
							type: 'value'
						},
						legend: {
							type: 'scroll',
							top: 30
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: {
								type: 'cross',
								lineStyle: {
									type: 'dashed'
								},
								label: {
									show: false
								},
							},
							textStyle: {
								color: '#ffffff'
							},
							confine: true,
							extraCssText: 'white-space: normal; word-break: break-all;',
							backgroundColor: 'rgba(108,106,120,0.9)', //通过设置rgba调节背景颜色与透明度
							position: 'inside',
							formatter: function(params) {
								let result = ''
								for (let i in params) {
									let value = '--'
									if (params[i].data !== null) {
										value = params[i].data
									}
									result += '<br>' + params[i].seriesName + '：' +
										value
								}
								return result
							}
						},
						dataZoom: [{
								type: 'inside',
								start: 90,
								end: 100
							},
							{
								type: 'slider',
								show: true,
								start: 90,
								end: 100,
								bottom: 10
							}
						],
						series: []
					};
				} else if (cType == 'pie') {
					option = {
						title: {
							text: '',
							textStyle: {
								color: '#666666',
								fontWeight: 'normal',
								fontSize: '14'
							}
						},
						legend: {
							type: 'scroll',
							orient: 'vertical',
							left: 'left',
							top: 20
						},
						tooltip: {
							trigger: 'item',
							confine: true,
							extraCssText: 'white-space: normal; word-break: break-all;',
							backgroundColor: 'rgba(108,106,120,0.9)',
							textStyle: {
								color: '#ffffff'
							},
						},
						series: []
					};
				}
				return option
			}
		}
	};
</script>
<script module="myecharts" lang="renderjs">
	let myChart
	export default {
		mounted() {
			console.log('bbbbbbbbb')
			this.initEcharts()
			if (typeof window.echarts === 'function') {
				
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = './echarts.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				myChart = myecharts.init(document.getElementById('echart_demo'))
				console.log('aaaaaaaaa')
				// 观测更新的数据在 view 层可以直接访问到
				myChart.setOption(this.option)
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 监听 service 层数据变更
				myChart.setOption(newValue)
			},
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				ownerInstance.callMethod('onViewClick', {
					test: 'test'
				})
			}
		}
	}
</script>

<style scoped>
	.moreTime {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 80vw;
		margin: auto
	}

	.bod {
		border-bottom: 3px solid #007AFF;
	}

	.box {
		border: 1px solid #007AFF !important;
	}

	.childTime {

		margin: 16rpx 60rpx 0 60rpx;
	}

	.childTime>div {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.childTime>div>div {
		width: 140rpx;
		padding: 10rpx;
		border: 1px solid #e6e6e6;
		border-radius: 16rpx;
		color: #7e7e7e;
		font-size: 26rpx;
		text-align: center;
	}
</style>