第二次没有图标显示是因为第一次初始化之后, 关闭页面没有初始化变量, 加上下面代码处理就可以了
beforeDestroy() {
canvaLineA = null;
},
全部代码如下
<template>
<view class="bg">
<view class="charts-title"
>说明: 各项总体进度对比图, 包含计划进度和实际进度</view
>
<view class="qiun-columns">
<view class="qiun-charts">
<canvas
canvas-id="canvasLineA"
id="canvasLineA"
class="charts"
disable-scroll="true"
@touchstart="touchLineA"
@touchmove="moveLineA"
@touchend="touchEndLineA"
></canvas>
</view>
</view>
</view>
</template>
<script>
import { listReportOfItem } from "@/api/modules/monitor.js";
import uCharts from "@/pageMonitor/static/js/ucharts.js";
var _self;
var canvaLineA = null;
export default {
name: "totalTrend",
data() {
return {
options: null,
endTime: null,
beginTime: null,
cWidth: "",
cHeight: "",
pixelRatio: 1,
serverData: "",
chartData: {
categories: [],
series: [
{
name: "人数",
data: [],
},
],
},
};
},
watch: {},
methods: {
// 获取图表数据
getDataList() {
let that = this;
listReportOfItem().then((res) => {
console.log(res.data);
const arr = res.data;
that.chartData.categories = arr.itemNameList;
const series = [
{
data: arr.totalWeightPlanList,
name: "计划",
},
{
data: arr.totalWeightActualList,
name: "实际",
},
];
that.chartData.series = series;
this.showLineA("canvasLineA", this.chartData);
});
},
showLineA(canvasId, chartData) {
console.log('canvaLineA')
console.log(canvaLineA)
if (!canvaLineA) {
canvaLineA = new uCharts({
$this: _self,
canvasId: canvasId,
type: "column",
fontSize: 11,
legend: true,
dataLabel: true,
dataPointShape: true,
background: "#FFFFFF",
pixelRatio: _self.pixelRatio,
categories: chartData.categories,
series: chartData.series,
animation: false,
enableScroll: true, //开启图表拖拽功能
xAxis: {
disableGrid: false,
type: "grid",
gridType: "dash",
itemCount: 4,
scrollShow: true,
scrollAlign: "left",
scrollBackgroundColor: "#F7F7FF",
scrollColor: "#DEE7F7",
},
yAxis: {
//disabled:true
gridType: "dash",
splitNumber: 8,
min: 10,
max: 180,
format: (val) => {
return val.toFixed(0);
},
},
width: _self.cWidth * _self.pixelRatio,
height: _self.cHeight * _self.pixelRatio,
extra: {
lineStyle: "straight",
},
});
} else {
const option = {
categories: chartData.categories,
series: chartData.series,
};
canvaLineA.updateData(option);
}
},
touchLineA(e) {
canvaLineA.scrollStart(e);
canvaLineA.showToolTip(e, {
format: function (item, category) {
return category + " " + item.name + ":" + item.data;
},
});
},
moveLineA(e) {
canvaLineA.scroll(e);
},
touchEndLineA(e) {
canvaLineA.scrollEnd(e);
},
},
onLoad() {
console.log("onload");
},
onShow() {
_self = this;
//#ifdef MP-ALIPAY
uni.getSystemInfo({
success: function (res) {
if (res.pixelRatio > 1) {
//正常这里给2就行，如果pixelRatio=3性能会降低一点
//_self.pixelRatio =res.pixelRatio;
_self.pixelRatio = 2;
}
},
});
//#endif
this.cWidth = uni.upx2px(750);
this.cHeight = uni.upx2px(500);
console.log("onShow");
this.getDataList();
},
beforeDestroy() {
canvaLineA = null;
}
};
</script>
<style lang="scss" scoped>
$bgColor: #fff;
.bg {
height: 100vh;
display: flex;
flex-flow: column;
background-color: $bgColor;
.line {
color: #888;
font-size: 28rpx;
text-align: center;
margin: 50rpx 0;
.line1 {
display: inline-block;
height: 1rpx;
width: 42%;
background: #eee;
position: relative;
top: -12rpx;
left: -17rpx;
}
}
.charts-title {
margin: 30rpx 5rpx 50rpx;
color: #737070;
font-size: 29rpx;
}
}
page {
background: #f2f2f2;
width: 750upx;
overflow-x: hidden;
}
.qiun-padding {
padding: 2%;
width: 96%;
}
.qiun-wrap {
display: flex;
flex-wrap: wrap;
}
.qiun-rows {
display: flex;
flex-direction: row !important;
}
.qiun-columns {
display: flex;
flex-direction: column !important;
}
.qiun-common-mt {
margin-top: 10upx;
}
.qiun-bg-white {
background: #ffffff;
}
.qiun-title-bar {
width: 96%;
padding: 10upx 2%;
flex-wrap: nowrap;
}
.qiun-title-dot-light {
border-left: 10upx solid #0ea391;
padding-left: 10upx;
font-size: 32upx;
color: #000000;
}
.qiun-charts {
width: 750upx;
height: 500upx;
background-color: #ffffff;
}
.charts {
width: 750upx;
height: 500upx;
background-color: #ffffff;
}
</style>
