|
@@ -14,203 +14,7 @@
|
|
|
|
|
|
},
|
|
|
mounted() {
|
|
|
- // const categories = (function() {
|
|
|
- // let now = new Date();
|
|
|
- // let res = [];
|
|
|
- // let len = 10;
|
|
|
- // while (len--) {
|
|
|
- // res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
|
|
|
- // now = new Date(+now - 2000);
|
|
|
- // }
|
|
|
- // return res;
|
|
|
- // })();
|
|
|
- // const categories2 = (function() {
|
|
|
- // let res = [];
|
|
|
- // let len = 10;
|
|
|
- // while (len--) {
|
|
|
- // res.push(10 - len - 1);
|
|
|
- // }
|
|
|
- // return res;
|
|
|
- // })();
|
|
|
- // const data = (function() {
|
|
|
- // let res = [];
|
|
|
- // let len = 10;
|
|
|
- // while (len--) {
|
|
|
- // res.push(Math.round(Math.random() * 1000));
|
|
|
- // }
|
|
|
- // return res;
|
|
|
- // })();
|
|
|
- // const data2 = (function() {
|
|
|
- // let res = [];
|
|
|
- // let len = 0;
|
|
|
- // while (len < 10) {
|
|
|
- // res.push(+(Math.random() * 10 + 5).toFixed(1));
|
|
|
- // len++;
|
|
|
- // }
|
|
|
- // return res;
|
|
|
- // })();
|
|
|
- // this.option = {
|
|
|
- // title: {
|
|
|
- // // text: '水位监测信息'
|
|
|
- // },
|
|
|
- // tooltip: {
|
|
|
- // trigger: 'axis',
|
|
|
- // axisPointer: {
|
|
|
- // type: 'cross',
|
|
|
- // label: {
|
|
|
- // backgroundColor: '#283b56'
|
|
|
- // }
|
|
|
- // }
|
|
|
- // },
|
|
|
- // legend: {
|
|
|
- // // 图例文字颜色
|
|
|
- // textStyle: {
|
|
|
- // color: "#fff",
|
|
|
- // },
|
|
|
- // },
|
|
|
- // toolbox: {
|
|
|
- // show: true,
|
|
|
- // feature: {
|
|
|
- // // dataView: {
|
|
|
- // // readOnly: false
|
|
|
- // // },
|
|
|
- // // restore: {},
|
|
|
- // // saveAsImage: {}
|
|
|
- // }
|
|
|
- // },
|
|
|
- // dataZoom: {
|
|
|
- // show: false,
|
|
|
- // start: 0,
|
|
|
- // end: 100
|
|
|
- // },
|
|
|
- // xAxis: [{
|
|
|
- // type: 'category',
|
|
|
- // boundaryGap: true,
|
|
|
- // data: categories,
|
|
|
- // axisLabel: {
|
|
|
- // //x轴文字的配置
|
|
|
- // show: true,
|
|
|
- // textStyle: {
|
|
|
- // color: "rgba(255,225,255,1)",
|
|
|
- // },
|
|
|
- // },
|
|
|
- // splitLine: {
|
|
|
- // show: false,
|
|
|
- // lineStyle: {
|
|
|
- // type: 'dashed',
|
|
|
- // color: '#113d5e'
|
|
|
- // }
|
|
|
- // },
|
|
|
-
|
|
|
- // },
|
|
|
- // {
|
|
|
- // type: 'category',
|
|
|
- // boundaryGap: true,
|
|
|
- // data: categories2,
|
|
|
- // axisLabel: {
|
|
|
- // //x轴文字的配置
|
|
|
- // show: true,
|
|
|
- // textStyle: {
|
|
|
- // color: "rgba(255,225,255,1)",
|
|
|
- // },
|
|
|
- // },
|
|
|
- // splitLine: {
|
|
|
- // show: true,
|
|
|
- // lineStyle: {
|
|
|
- // type: 'dashed',
|
|
|
- // color: '#113d5e'
|
|
|
- // }
|
|
|
- // },
|
|
|
- // }
|
|
|
- // ],
|
|
|
- // yAxis: [{
|
|
|
- // type: 'value',
|
|
|
- // scale: true,
|
|
|
- // name: '水位/m',
|
|
|
- // axisLabel: {
|
|
|
- // //x轴文字的配置
|
|
|
- // show: true,
|
|
|
- // textStyle: {
|
|
|
- // color: "rgba(255,225,255,1)",
|
|
|
- // },
|
|
|
- // },
|
|
|
- // nameTextStyle: {
|
|
|
- // //y轴上方单位的颜色
|
|
|
- // color: "#fff",
|
|
|
- // },
|
|
|
- // nameGap: 25,
|
|
|
- // max: 30,
|
|
|
- // min: 0,
|
|
|
- // boundaryGap: [0.2, 0.2],
|
|
|
- // splitLine: {
|
|
|
- // show: false,
|
|
|
- // },
|
|
|
- // },
|
|
|
- // {
|
|
|
- // type: 'value',
|
|
|
- // scale: true,
|
|
|
- // name: '预警/m',
|
|
|
- // max: 1200,
|
|
|
- // nameGap: 25,
|
|
|
- // min: 0,
|
|
|
- // boundaryGap: [0.2, 0.2],
|
|
|
- // nameTextStyle: {
|
|
|
- // //y轴上方单位的颜色
|
|
|
- // color: "#fff",
|
|
|
- // },
|
|
|
- // axisLabel: {
|
|
|
- // //x轴文字的配置
|
|
|
- // show: true,
|
|
|
- // textStyle: {
|
|
|
- // color: "rgba(255,225,255,1)",
|
|
|
- // },
|
|
|
- // },
|
|
|
- // splitLine: {
|
|
|
- // show: false,
|
|
|
- // },
|
|
|
- // }
|
|
|
- // ],
|
|
|
- // series: [{
|
|
|
- // name: '水位高度',
|
|
|
- // type: 'bar',
|
|
|
- // xAxisIndex: 1,
|
|
|
- // yAxisIndex: 1,
|
|
|
- // data: data
|
|
|
- // },
|
|
|
- // {
|
|
|
- // name: '水位预警',
|
|
|
- // type: 'line',
|
|
|
- // data: data2
|
|
|
- // }
|
|
|
- // ]
|
|
|
- // };
|
|
|
- // this.app.count = 11;
|
|
|
- // let _this = this
|
|
|
- // setInterval(function() {
|
|
|
- // let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
|
|
|
- // data.shift();
|
|
|
- // data.push(Math.round(Math.random() * 1000));
|
|
|
- // data2.shift();
|
|
|
- // data2.push(+(Math.random() * 10 + 5).toFixed(1));
|
|
|
- // categories.shift();
|
|
|
- // categories.push(axisData);
|
|
|
- // categories2.shift();
|
|
|
- // categories2.push(_this.app.count++);
|
|
|
- // _this.option.xAxis = [{
|
|
|
- // data: categories
|
|
|
- // },
|
|
|
- // {
|
|
|
- // data: categories2
|
|
|
- // }
|
|
|
- // ]
|
|
|
- // _this.option.series = [{
|
|
|
- // data: data
|
|
|
- // },
|
|
|
- // {
|
|
|
- // data: data2
|
|
|
- // }
|
|
|
- // ]
|
|
|
- // }, 2100);
|
|
|
+
|
|
|
this.option = {
|
|
|
legend: {
|
|
|
/*这里是四个指标,(去年同期和本月是柱状,增减百分比是折线,平衡点是在柱状上的横线)*/
|