|
@@ -93,6 +93,23 @@
|
|
|
'margin-top': (-cHeight * (pixelRatio - 1)) / 2 + 'px',
|
|
'margin-top': (-cHeight * (pixelRatio - 1)) / 2 + 'px',
|
|
|
}"
|
|
}"
|
|
|
></canvas>
|
|
></canvas>
|
|
|
|
|
+ <canvas
|
|
|
|
|
+ v-show="!tiemshow"
|
|
|
|
|
+ canvas-id="canvasColumnB"
|
|
|
|
|
+ id="canvasColumnB"
|
|
|
|
|
+ class="charts"
|
|
|
|
|
+ @touchstart="touchLineB($event)"
|
|
|
|
|
+ @touchmove="moveLineB($event)"
|
|
|
|
|
+ @touchend="touchEndLineB($event)"
|
|
|
|
|
+ disable-scroll="true"
|
|
|
|
|
+ :style="{
|
|
|
|
|
+ width: cWidth * pixelRatio + 'px',
|
|
|
|
|
+ height: cHeight * pixelRatio + 'px',
|
|
|
|
|
+ transform: 'scale(' + 1 / pixelRatio + ')',
|
|
|
|
|
+ 'margin-left': (-cWidth * (pixelRatio - 1)) / 2 + 'px',
|
|
|
|
|
+ 'margin-top': (-cHeight * (pixelRatio - 1)) / 2 + 'px',
|
|
|
|
|
+ }"
|
|
|
|
|
+ ></canvas>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="condition">
|
|
<view class="condition">
|
|
|
<scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
|
|
<scroll-view scroll-top="0" scroll-x="true" class="scroll-X">
|
|
@@ -153,6 +170,7 @@
|
|
|
<script>
|
|
<script>
|
|
|
import uCharts from "../../components/js_sdk/u-charts/u-charts/u-charts.js";
|
|
import uCharts from "../../components/js_sdk/u-charts/u-charts/u-charts.js";
|
|
|
var canvaColumnA = null;
|
|
var canvaColumnA = null;
|
|
|
|
|
+var canvaColumnB = null;
|
|
|
export default {
|
|
export default {
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
@@ -266,9 +284,11 @@ export default {
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
tiemchange(e) {
|
|
tiemchange(e) {
|
|
|
|
|
+ console.log(e);
|
|
|
//切换时间
|
|
//切换时间
|
|
|
- this.begintime = parseInt(+new Date(e.startDate) / 1000);
|
|
|
|
|
- this.end = parseInt(+new Date(e.endDate) / 1000);
|
|
|
|
|
|
|
+ // this.begintime = parseInt(+new Date(e.startDate) / 1000);
|
|
|
|
|
+ this.begintime = parseInt(+new Date(`${e.startDate} 00:00:00`) / 1000);
|
|
|
|
|
+ this.end = parseInt(+new Date(`${e.endDate} 00:00:00`) / 1000);
|
|
|
this.histprydatas();
|
|
this.histprydatas();
|
|
|
this.getChartLine();
|
|
this.getChartLine();
|
|
|
},
|
|
},
|
|
@@ -370,11 +390,23 @@ export default {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
console.log(regroupData);
|
|
console.log(regroupData);
|
|
|
- this.showColumn("canvasColumnA", xtitle, regroupData);
|
|
|
|
|
|
|
+ // 分割折线图
|
|
|
|
|
+ const regroupDataNum = Math.ceil(regroupData.length / 2);
|
|
|
|
|
+ const options1 = regroupData.filter((v, i) => {
|
|
|
|
|
+ return i < regroupDataNum;
|
|
|
|
|
+ });
|
|
|
|
|
+ const options2 = regroupData.filter((v, i) => {
|
|
|
|
|
+ return i >= regroupDataNum;
|
|
|
|
|
+ });
|
|
|
|
|
+ console.log(options1, options1);
|
|
|
|
|
+
|
|
|
|
|
+ this.showColumn("canvasColumnA", xtitle, options1);
|
|
|
|
|
+ this.showColumn("canvasColumnB", xtitle, options2);
|
|
|
this.canvastishiTF = true;
|
|
this.canvastishiTF = true;
|
|
|
} else {
|
|
} else {
|
|
|
this.canvastishiTF = false;
|
|
this.canvastishiTF = false;
|
|
|
this.showColumn("canvasColumnA", xtitle, []);
|
|
this.showColumn("canvasColumnA", xtitle, []);
|
|
|
|
|
+ this.showColumn("canvasColumnB", xtitle, []);
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
prev() {
|
|
prev() {
|
|
@@ -397,41 +429,79 @@ export default {
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
showColumn(id, xtitle, xinfo) {
|
|
showColumn(id, xtitle, xinfo) {
|
|
|
|
|
+ console.log(id);
|
|
|
var _self = this;
|
|
var _self = this;
|
|
|
- canvaColumnA = new uCharts({
|
|
|
|
|
- canvasId: id,
|
|
|
|
|
- type: "line",
|
|
|
|
|
- legend: {
|
|
|
|
|
- position: "top",
|
|
|
|
|
- },
|
|
|
|
|
- fontSize: 11,
|
|
|
|
|
- background: "#FFFFFF",
|
|
|
|
|
- pixelRatio: 1,
|
|
|
|
|
- animation: true,
|
|
|
|
|
- dataLabel: false,
|
|
|
|
|
- categories: xtitle,
|
|
|
|
|
- series: xinfo,
|
|
|
|
|
- enableScroll: true, //开启图表拖拽功能
|
|
|
|
|
- xAxis: {
|
|
|
|
|
- disableGrid: true,
|
|
|
|
|
- type: "grid",
|
|
|
|
|
- gridType: "dash",
|
|
|
|
|
- itemCount: 4, //x轴单屏显示数据的数量,默认为5个
|
|
|
|
|
- scrollShow: true, //新增是否显示滚动条,默认false
|
|
|
|
|
- // scrollAlign: 'left', //滚动条初始位置
|
|
|
|
|
- scrollBackgroundColor: "#F7F7FF", //默认为 #EFEBEF
|
|
|
|
|
- scrollColor: "#DEE7F7", //默认为 #A6A6A6
|
|
|
|
|
- },
|
|
|
|
|
- yAxis: {},
|
|
|
|
|
- width: _self.cWidth * 1,
|
|
|
|
|
- height: _self.cHeight * 1,
|
|
|
|
|
- extra: {
|
|
|
|
|
- line: {
|
|
|
|
|
- type: "curve",
|
|
|
|
|
|
|
+ if (id === "canvasColumnA") {
|
|
|
|
|
+ canvaColumnA = new uCharts({
|
|
|
|
|
+ canvasId: id,
|
|
|
|
|
+ type: "line",
|
|
|
|
|
+ legend: {
|
|
|
|
|
+ position: "top",
|
|
|
},
|
|
},
|
|
|
- },
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ fontSize: 11,
|
|
|
|
|
+ background: "#FFFFFF",
|
|
|
|
|
+ pixelRatio: 1,
|
|
|
|
|
+ animation: true,
|
|
|
|
|
+ dataLabel: false,
|
|
|
|
|
+ categories: xtitle,
|
|
|
|
|
+ series: xinfo,
|
|
|
|
|
+ enableScroll: true, //开启图表拖拽功能
|
|
|
|
|
+ xAxis: {
|
|
|
|
|
+ disableGrid: true,
|
|
|
|
|
+ type: "grid",
|
|
|
|
|
+ gridType: "dash",
|
|
|
|
|
+ itemCount: 4, //x轴单屏显示数据的数量,默认为5个
|
|
|
|
|
+ scrollShow: true, //新增是否显示滚动条,默认false
|
|
|
|
|
+ // scrollAlign: 'left', //滚动条初始位置
|
|
|
|
|
+ scrollBackgroundColor: "#F7F7FF", //默认为 #EFEBEF
|
|
|
|
|
+ scrollColor: "#DEE7F7", //默认为 #A6A6A6
|
|
|
|
|
+ },
|
|
|
|
|
+ yAxis: {},
|
|
|
|
|
+ width: _self.cWidth * 1,
|
|
|
|
|
+ height: _self.cHeight * 1,
|
|
|
|
|
+ extra: {
|
|
|
|
|
+ line: {
|
|
|
|
|
+ type: "curve",
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ });
|
|
|
|
|
+ } else if (id === "canvasColumnB") {
|
|
|
|
|
+ canvaColumnB = new uCharts({
|
|
|
|
|
+ canvasId: id,
|
|
|
|
|
+ type: "line",
|
|
|
|
|
+ legend: {
|
|
|
|
|
+ position: "top",
|
|
|
|
|
+ },
|
|
|
|
|
+ fontSize: 11,
|
|
|
|
|
+ background: "#FFFFFF",
|
|
|
|
|
+ pixelRatio: 1,
|
|
|
|
|
+ animation: true,
|
|
|
|
|
+ dataLabel: false,
|
|
|
|
|
+ categories: xtitle,
|
|
|
|
|
+ series: xinfo,
|
|
|
|
|
+ enableScroll: true, //开启图表拖拽功能
|
|
|
|
|
+ xAxis: {
|
|
|
|
|
+ disableGrid: true,
|
|
|
|
|
+ type: "grid",
|
|
|
|
|
+ gridType: "dash",
|
|
|
|
|
+ itemCount: 4, //x轴单屏显示数据的数量,默认为5个
|
|
|
|
|
+ scrollShow: true, //新增是否显示滚动条,默认false
|
|
|
|
|
+ // scrollAlign: 'left', //滚动条初始位置
|
|
|
|
|
+ scrollBackgroundColor: "#F7F7FF", //默认为 #EFEBEF
|
|
|
|
|
+ scrollColor: "#DEE7F7", //默认为 #A6A6A6
|
|
|
|
|
+ },
|
|
|
|
|
+ yAxis: {},
|
|
|
|
|
+ width: _self.cWidth * 1,
|
|
|
|
|
+ height: _self.cHeight * 1,
|
|
|
|
|
+ extra: {
|
|
|
|
|
+ line: {
|
|
|
|
|
+ type: "curve",
|
|
|
|
|
+ },
|
|
|
|
|
+ },
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
},
|
|
},
|
|
|
|
|
+
|
|
|
touchLineA(e) {
|
|
touchLineA(e) {
|
|
|
console.log(e);
|
|
console.log(e);
|
|
|
canvaColumnA.scrollStart(e);
|
|
canvaColumnA.scrollStart(e);
|
|
@@ -448,6 +518,22 @@ export default {
|
|
|
},
|
|
},
|
|
|
});
|
|
});
|
|
|
},
|
|
},
|
|
|
|
|
+ touchLineB(e) {
|
|
|
|
|
+ console.log(e);
|
|
|
|
|
+ canvaColumnB.scrollStart(e);
|
|
|
|
|
+ },
|
|
|
|
|
+ moveLineB(e) {
|
|
|
|
|
+ canvaColumnB.scroll(e);
|
|
|
|
|
+ },
|
|
|
|
|
+ touchEndLineB(e) {
|
|
|
|
|
+ canvaColumnB.scrollEnd(e);
|
|
|
|
|
+ //下面是toolTip事件,如果滚动后不需要显示,可不填写
|
|
|
|
|
+ canvaColumnB.showToolTip(e, {
|
|
|
|
|
+ format: function (item, category) {
|
|
|
|
|
+ return category + " " + item.name + ":" + item.data;
|
|
|
|
|
+ },
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
},
|
|
},
|
|
|
onLoad(option) {
|
|
onLoad(option) {
|
|
|
this.eqinfo = JSON.parse(option.shebei);
|
|
this.eqinfo = JSON.parse(option.shebei);
|
|
@@ -593,7 +679,7 @@ export default {
|
|
|
margin: 20px auto;
|
|
margin: 20px auto;
|
|
|
box-shadow: 0 0 10rpx #bcb9ca;
|
|
box-shadow: 0 0 10rpx #bcb9ca;
|
|
|
padding-top: 20rpx;
|
|
padding-top: 20rpx;
|
|
|
- height: 550rpx;
|
|
|
|
|
|
|
+ height: 1000rpx;
|
|
|
|
|
|
|
|
.canvastishi {
|
|
.canvastishi {
|
|
|
font-size: 32rpx;
|
|
font-size: 32rpx;
|