|
@@ -0,0 +1,342 @@
|
|
|
|
+<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>
|