zhxf-app/pages/deviceDetail/components/chart2.vue

<template>
	<view class="content">

		<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts2"
			class="echarts"></view>

	</view>
</template>

<script>
	var dwtype = "2";
	var tes = '0';
	var tes2 = '';
	var tyss = "";
	if (dwtype == 2) {
		tes = '一周设备数值变化';
		tes2 = '水压值';
		tyss = "兆帕";
	}
	if (dwtype == 5) {
		tes = '一周水位值变化 (m)';
		tes2 = '水位值';
		tyss = "米";
		document.getElementById('dev_title_lab').innerHTML = '当前水位：';
		document.getElementById('dev_title_unit').innerHTML = 'm';
	}

	export default {
		props: {
			bindData: {
				type: Object,
				default: ''
			}
		},
		data() {
			return {
				option: {
					title: {
						x: 'center',
						text: tes
					},
					// tooltip: {
					//     trigger: 'axis',
					//     formatter:'{b}<br>{a} : {c} '+tyss+'<br>电量:{a} : {c}'
					// },
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							animation: false,
							label: {
								backgroundColor: '#505765'
							}
						}
					},

					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					toolbox: {
						// feature: {
						//     saveAsImage: {}
						// }
					},
					legend: {
						data: ['水压/水位(兆帕/米)', '电量/信号(%)'],
						left: 10
					},
					xAxis: {
						type: 'category',
						// boundaryGap: false,
						axisTick: {
							alignWithLabel: true
						},
						data: ["2021-06-11 12:48:19", "2021-06-11 12:18:17", "2021-06-11 11:48:17", "2021-06-11 11:18:17",
							"2021-06-11 10:48:17", "2021-06-11 10:18:17", "2021-06-11 09:48:17", "2021-06-11 09:18:19",
							"2021-06-11 08:48:19", "2021-06-11 08:18:19", "2021-06-11 07:48:17", "2021-06-11 07:18:17",
							"2021-06-11 06:48:17", "2021-06-11 06:18:18", "2021-06-11 05:48:17", "2021-06-11 05:18:18",
							"2021-06-11 04:48:19", "2021-06-11 04:18:17", "2021-06-11 03:48:17", "2021-06-11 03:18:17",
							"2021-06-11 02:48:17", "2021-06-11 02:18:17", "2021-06-11 01:48:17", "2021-06-11 01:18:24",
							"2021-06-11 00:48:17", "2021-06-11 00:18:16", "2021-06-10 23:48:17", "2021-06-10 23:18:17",
							"2021-06-10 22:48:21", "2021-06-10 22:18:19", "2021-06-10 21:48:17", "2021-06-10 21:18:21",
							"2021-06-10 20:48:17", "2021-06-10 20:18:16", "2021-06-10 19:48:17", "2021-06-10 19:18:16",
							"2021-06-10 18:48:17", "2021-06-10 18:18:17", "2021-06-10 17:48:19", "2021-06-10 17:18:19",
							"2021-06-10 16:48:19", "2021-06-10 16:18:17", "2021-06-10 15:48:18", "2021-06-10 15:18:16",
							"2021-06-10 14:48:16", "2021-06-10 14:18:17", "2021-06-10 13:48:16", "2021-06-10 13:18:18",
							"2021-06-10 12:48:17", "2021-06-10 12:18:16", "2021-06-10 11:48:16", "2021-06-10 11:18:16",
							"2021-06-10 10:48:16", "2021-06-10 10:18:18", "2021-06-10 09:48:16", "2021-06-10 09:18:17",
							"2021-06-10 08:48:18", "2021-06-10 08:18:16", "2021-06-10 07:48:18", "2021-06-10 07:18:16",
							"2021-06-10 06:48:16", "2021-06-10 06:18:16", "2021-06-10 05:48:16", "2021-06-10 05:18:16",
							"2021-06-10 04:48:18", "2021-06-10 04:18:16", "2021-06-10 03:48:18", "2021-06-10 03:18:18",
							"2021-06-10 02:48:18", "2021-06-10 02:18:16", "2021-06-10 01:48:18", "2021-06-10 01:18:18",
							"2021-06-10 00:48:18", "2021-06-10 00:18:16", "2021-06-09 23:48:16", "2021-06-09 23:18:16",
							"2021-06-09 22:48:16", "2021-06-09 22:18:16", "2021-06-09 21:48:18", "2021-06-09 21:18:16",
							"2021-06-09 20:48:18", "2021-06-09 20:18:16", "2021-06-09 19:48:16", "2021-06-09 19:18:22",
							"2021-06-09 18:48:15", "2021-06-09 18:18:16", "2021-06-09 17:48:15", "2021-06-09 17:18:18",
							"2021-06-09 16:48:15", "2021-06-09 16:18:21", "2021-06-09 15:48:18", "2021-06-09 15:18:16",
							"2021-06-09 14:48:15", "2021-06-09 14:18:15", "2021-06-09 13:48:15", "2021-06-09 13:18:15",
							"2021-06-09 12:48:15", "2021-06-09 12:18:15", "2021-06-09 11:48:17", "2021-06-09 11:18:16",
							"2021-06-09 10:48:17", "2021-06-09 10:18:18", "2021-06-09 09:48:18", "2021-06-09 09:18:15",
							"2021-06-09 08:48:17", "2021-06-09 08:18:15", "2021-06-09 07:48:17", "2021-06-09 07:18:17",
							"2021-06-09 06:48:17", "2021-06-09 06:18:17", "2021-06-09 05:48:18", "2021-06-09 05:18:17",
							"2021-06-09 04:48:17", "2021-06-09 04:18:17", "2021-06-09 03:48:17", "2021-06-09 03:18:15",
							"2021-06-09 02:48:17", "2021-06-09 02:18:18", "2021-06-09 01:48:17", "2021-06-09 01:18:17",
							"2021-06-09 00:48:18", "2021-06-09 00:18:17", "2021-06-08 23:48:17", "2021-06-08 23:18:17",
							"2021-06-08 22:48:17", "2021-06-08 22:18:16", "2021-06-08 21:48:15", "2021-06-08 21:18:16",
							"2021-06-08 20:48:17", "2021-06-08 20:18:14", "2021-06-08 19:48:17", "2021-06-08 19:18:14",
							"2021-06-08 18:48:25", "2021-06-08 18:18:16", "2021-06-08 17:48:15", "2021-06-08 17:18:16",
							"2021-06-08 16:48:15", "2021-06-08 16:18:16", "2021-06-08 15:18:14", "2021-06-08 14:48:17",
							"2021-06-08 14:18:16", "2021-06-08 13:48:19", "2021-06-08 13:18:14", "2021-06-08 12:48:14",
							"2021-06-08 12:18:19", "2021-06-08 11:48:15", "2021-06-08 11:18:16", "2021-06-08 10:48:14",
							"2021-06-08 10:18:21", "2021-06-08 09:48:16", "2021-06-08 09:18:16", "2021-06-08 08:48:17",
							"2021-06-08 08:18:14", "2021-06-08 07:48:16", "2021-06-08 07:18:16", "2021-06-08 06:48:14",
							"2021-06-08 06:18:17", "2021-06-08 05:48:16", "2021-06-08 05:18:16", "2021-06-08 04:48:17",
							"2021-06-08 04:18:16", "2021-06-08 03:48:17", "2021-06-08 03:18:17", "2021-06-08 02:48:14",
							"2021-06-08 02:18:16", "2021-06-08 01:48:16", "2021-06-08 01:18:14", "2021-06-08 00:48:17",
							"2021-06-08 00:18:16", "2021-06-07 23:48:16", "2021-06-07 23:18:16", "2021-06-07 22:48:16",
							"2021-06-07 22:18:15", "2021-06-07 21:48:14", "2021-06-07 21:18:16", "2021-06-07 20:48:16",
							"2021-06-07 20:18:16", "2021-06-07 19:48:14", "2021-06-07 19:18:16", "2021-06-07 18:48:13",
							"2021-06-07 18:18:16", "2021-06-07 17:48:15", "2021-06-07 17:18:16", "2021-06-07 16:48:17",
							"2021-06-07 16:18:14", "2021-06-07 15:48:13", "2021-06-07 15:18:16", "2021-06-07 14:48:13",
							"2021-06-07 14:18:14", "2021-06-07 13:48:15", "2021-06-07 13:18:14", "2021-06-07 12:48:13",
							"2021-06-07 12:18:15", "2021-06-07 11:48:15", "2021-06-07 11:18:14", "2021-06-07 10:48:16",
							"2021-06-07 10:18:13", "2021-06-07 09:48:14", "2021-06-07 09:18:14", "2021-06-07 08:48:13",
							"2021-06-07 08:18:13", "2021-06-07 07:48:16", "2021-06-07 07:18:15", "2021-06-07 06:48:15",
							"2021-06-07 06:18:16", "2021-06-07 05:48:15", "2021-06-07 05:18:15", "2021-06-07 04:48:13",
							"2021-06-07 04:18:16", "2021-06-07 03:48:15", "2021-06-07 03:18:15", "2021-06-07 02:48:15",
							"2021-06-07 02:18:13", "2021-06-07 01:48:15", "2021-06-07 01:18:14", "2021-06-07 00:48:15",
							"2021-06-07 00:18:18", "2021-06-06 23:48:17", "2021-06-06 23:18:15", "2021-06-06 22:48:13",
							"2021-06-06 22:18:14", "2021-06-06 21:48:22", "2021-06-06 21:18:18", "2021-06-06 20:48:13",
							"2021-06-06 20:18:15", "2021-06-06 19:48:16", "2021-06-06 19:18:15", "2021-06-06 18:48:15",
							"2021-06-06 18:18:13", "2021-06-06 17:48:13", "2021-06-06 17:18:16", "2021-06-06 16:48:13",
							"2021-06-06 16:18:12", "2021-06-06 15:48:13", "2021-06-06 15:18:12", "2021-06-06 14:48:15",
							"2021-06-06 14:18:17", "2021-06-06 13:48:14", "2021-06-06 13:18:18", "2021-06-06 12:48:14",
							"2021-06-06 12:18:12", "2021-06-06 11:48:15", "2021-06-06 11:18:15", "2021-06-06 10:48:13",
							"2021-06-06 10:18:15", "2021-06-06 09:48:13", "2021-06-06 09:18:13", "2021-06-06 08:48:17",
							"2021-06-06 08:18:12", "2021-06-06 07:48:13", "2021-06-06 07:18:12", "2021-06-06 06:48:12",
							"2021-06-06 06:18:15", "2021-06-06 05:48:15", "2021-06-06 05:18:14", "2021-06-06 04:48:14",
							"2021-06-06 04:18:15", "2021-06-06 03:48:14", "2021-06-06 03:18:18", "2021-06-06 02:48:17",
							"2021-06-06 02:18:14", "2021-06-06 01:48:18", "2021-06-06 01:18:14", "2021-06-06 00:48:14",
							"2021-06-06 00:18:14", "2021-06-05 23:48:14", "2021-06-05 23:18:14", "2021-06-05 22:48:14",
							"2021-06-05 22:18:17", "2021-06-05 21:48:17", "2021-06-05 21:18:14", "2021-06-05 20:48:14",
							"2021-06-05 20:18:14", "2021-06-05 19:48:14", "2021-06-05 19:18:14", "2021-06-05 18:48:13",
							"2021-06-05 18:18:12", "2021-06-05 17:48:13", "2021-06-05 17:18:16", "2021-06-05 16:48:12",
							"2021-06-05 16:18:14", "2021-06-05 15:48:16", "2021-06-05 15:18:15", "2021-06-05 14:48:11",
							"2021-06-05 14:18:13", "2021-06-05 13:48:11", "2021-06-05 13:18:13", "2021-06-05 12:48:11",
							"2021-06-05 12:18:12", "2021-06-05 11:48:13", "2021-06-05 11:18:13", "2021-06-05 10:48:11",
							"2021-06-05 10:18:11", "2021-06-05 09:48:13", "2021-06-05 09:18:11", "2021-06-05 08:48:10",
							"2021-06-05 08:18:11", "2021-06-05 07:48:10", "2021-06-05 07:18:10", "2021-06-05 06:48:11",
							"2021-06-05 06:18:11", "2021-06-05 05:48:10", "2021-06-05 05:18:11", "2021-06-05 04:48:10",
							"2021-06-05 04:18:11", "2021-06-05 03:48:10", "2021-06-05 03:18:11", "2021-06-05 02:48:10",
							"2021-06-05 02:18:13", "2021-06-05 01:48:10", "2021-06-05 01:18:10", "2021-06-05 00:48:12",
							"2021-06-05 00:18:10", "2021-06-04 23:48:13", "2021-06-04 23:18:10", "2021-06-04 22:48:10",
							"2021-06-04 22:18:10", "2021-06-04 21:48:10", "2021-06-04 21:18:10", "2021-06-04 20:48:12",
							"2021-06-04 20:18:12", "2021-06-04 19:48:10", "2021-06-04 19:18:10", "2021-06-04 18:48:10",
							"2021-06-04 18:18:10", "2021-06-04 17:48:12", "2021-06-04 17:18:12", "2021-06-04 16:48:10",
							"2021-06-04 16:18:12", "2021-06-04 15:48:10", "2021-06-04 15:18:10", "2021-06-04 14:48:10",
							"2021-06-04 14:18:12", "2021-06-04 13:48:10", "2021-06-04 13:18:12"
						]
					},
					yAxis: [{
						name: '水压/水位',
						type: 'value',
						max: 1
					}, {
						name: '电量/信号',
						nameLocation: 'start',
						max: 100,
						type: 'value',
						// inverse: true
					}],
					dataZoom: [{
						type: 'slider',
						xAxisIndex: 0,
						filterMode: 'empty',
						start: 0,
						end: 100
					}, {
						type: 'inside',
						xAxisIndex: 0,
						filterMode: 'empty',
						start: 0,
						end: 100
					}],

					series: [{
						name: tes2,
						type: 'line',
						stack: 'Pa',
						animation: false,
						data: ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0"
						],
						color: ['#2699fb'],
						yAxisIndex: 0
					}, {
						name: "信号强度",
						type: 'line',
						stack: '%',
						animation: false,
						data: [40, 40, 60, 60, 60, 60, 40, 60, 60, 60, 60, 60, 40, 40, 40, 60, 40, 60, 60, 60, 40,
							60, 60, 60, 40, 40, 60, 40, 60, 60, 60, 40, 40, 60, 40, 40, 60, 60, 60, 40, 40, 40,
							60, 60, 40, 40, 40, 40, 60, 60, 60, 60, 60, 60, 40, 60, 60, 60, 40, 40, 60, 60, 60,
							60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 40, 60, 60, 60, 60, 40, 40, 40, 60,
							60, 40, 40, 40, 60, 40, 60, 40, 60, 40, 60, 40, 60, 60, 60, 40, 60, 60, 60, 40, 40,
							40, 40, 40, 40, 40, 60, 40, 40, 60, 40, 40, 60, 60, 40, 40, 60, 40, 40, 60, 40, 40,
							40, 40, 60, 40, 40, 40, 40, 60, 60, 60, 60, 60, 60, 40, 40, 60, 60, 40, 40, 60, 60,
							40, 40, 60, 60, 60, 60, 60, 40, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 40, 60, 60,
							60, 60, 60, 40, 60, 60, 40, 60, 40, 60, 60, 60, 40, 40, 40, 40, 60, 40, 40, 40, 60,
							60, 40, 40, 40, 60, 60, 60, 60, 40, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60,
							60, 60, 60, 40, 60, 60, 40, 60, 60, 60, 60, 40, 60, 60, 40, 60, 60, 60, 60, 60, 60,
							60, 60, 60, 60, 60, 40, 60, 40, 40, 60, 60, 60, 60, 60, 60, 60, 40, 40, 60, 60, 60,
							60, 60, 60, 60, 60, 60, 40, 60, 60, 40, 60, 60, 60, 60, 40, 60, 40, 60, 60, 60, 60,
							60, 40, 60, 40, 40, 40, 40, 40, 40, 40, 40, 40, 40, 60, 40, 60, 40, 40, 40, 60, 40,
							60, 60, 60, 60, 40, 60, 60, 40, 60, 60, 60, 60, 60, 40, 60, 40, 60, 60, 60, 60, 60,
							60, 60, 60, 60, 60, 60, 60, 40, 40, 40, 40, 40, 40, 40, 40, 40, 60, 40, 60, 40
						],
						color: ['#ffff00'],
						yAxisIndex: 1
					}, {
						name: "电池电量",
						type: 'line',
						stack: 'a',
						animation: false,
						data: ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0",
							"0", "0", "0", "0", "2", "3", "4", "5", "5", "6", "6", "6", "8", "8", "8", "9",
							"10", "10", "10", "9", "8", "9", "9", "10", "11", "12", "10", "11", "11", "12",
							"11", "11", "12", "13", "12", "12", "12", "12", "12", "12", "12", "11", "11", "10",
							"11", "11", "9", "10", "11", "10", "10", "11", "10", "10", "11", "11", "11", "11",
							"11", "11", "10", "10", "10", "10", "11", "9", "10", "9", "9", "10", "10", "10",
							"10", "10", "9", "10", "9", "11"
						],
						color: ['#ff0000'],
						yAxisIndex: 1
					}]
				}
			}
		},
		onLoad() {

		},
		methods: {
			changeOption() {
				const data = this.option.series[0].data
				// 随机更新示例数据
				data.forEach((item, index) => {
					data.splice(index, 1, Math.random() * 40)
				})
			},
			onViewClick(options) {
				console.log(options)
			}
		}
	}
</script>

<script module="echarts" lang="renderjs">
	let myChart
	export default {
		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)
			}
		},
		methods: {
			initEcharts() {
				myChart = echarts.init(document.getElementById('echarts2'))
				// 观测更新的数据在 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>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.echarts {
		width: 100%;
		height: 500rpx;
		margin-bottom: 70rpx;
	}
</style>