关于这个问题,作者是多方打听和各大网站搜索,花了比较长时间终于解决,记录一下,这个问题,也分享给其他朋友遇到这个问题能快速解决!!
小程序使用Echarts图表, 从当前跳转到另外一个页面,在返回当前页,要重新绘制图表?
场景: 图表是在详情页,从详情页跳转到设置页,如果在设置关闭预警订阅,那图表就不需要最高和最低的线就要了,所以返回到详情页要更新一下图表,就不显示这两条线,如果在详情是关闭预警订阅状态,在设置页开启的话,那详情页图表就得显示这个两条线。
下面是上图的源码
解决这个图表更新的问题,重点就是用的wx:if这个方法: 通过if方法每次重新加载的时候让图表重新渲染
<view class="container_chart" wx:if="{
{echartShow}}">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{
{ ec }}" bind:init="echartInit"></ec-canvas>
</view>
// 小Q折线图
function initChart(canvas, width, height) {
let setting = JSON.parse(app.globalData.eqiuList.setting);
console.log('折线', setting)
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // 初始化图表的时候设置像素比
});
canvas.setChart(chart);
var option = {
grid: {
containLabel: true,
left:0,
right:30,
top:15,
bottom: 20
},
tooltip: {
show: true,
trigger: 'axis',
// formatter: '{b}\n{c}℃'
formatter: function(params) {
var val = params[0].data.value * 1;
var axisVal = params[0].name;
var res = axisVal + '\n';
if(!Boolean(val)) {
// console.log('进来')
res = '/'
} else {
res+=val + '℃'
}
return res
}
},
xAxis: {
type: 'category',
boundaryGap: false,
// data: app.globalData.zxXAxisData,
data: time,
axisLine:{
lineStyle:{
color:'#dddddd'
}
},
axisLabel: {
textStyle: {
color: "#BFBFBF"
},
},
// show: false
},
yAxis: {
x: 'center',
type: 'value',
axisLine: {
lineStyle: {
color: '#dddddd'
}
},
splitLine: {
show: false,
lineStyle: {
color: '#dddddd',
type: 'dashed'
}
},
axisLabel: {
textStyle: {
color: "#BFBFBF"
},
},
max: Math.max(app.globalData.zxMax || 28, setting.upperTemperatureThreshold>100? app.globalData.zxMax : setting.upperTemperatureThreshold) + 1,
min: Math.min(app.globalData.zxMin || 25, setting.lowTemperatureThreshold <0 ? app.globalData.zxMin : setting.lowTemperatureThreshold) - 1
},
dataZoom: [
{
show: false,
realtime: true,
// start: Math.min(...app.globalData.zxXAxisData)*5-10,
// end: Math.max(...app.globalData.zxXAxisData)*5-5,
start: 1,
end: 100,
},
{
type: 'inside',
}
],
series: [{
name: '',
symbol: 'circle',
symbolSize: 8,
type: 'line',
smooth: true,
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#60F4E6'
}, {
offset: 1, color: '#47C8EF'
}],
global: false
} //"#46a3e9",
}
},
label: {
color: 'rgba(71, 200, 239, 1)'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0.1,
color: 'rgba(71, 200, 239, 0.2)'
}, {
offset: 1,
color: 'rgba(96, 244, 230, 0)'
}])
},
lineStyle: {
normal: {
width: 4,
color: "#2ec7c9",
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: 'linear',
colorStops: [{
offset: 0,
color: '#60F4E6' // 0% 处的颜色
}, {
offset: 1,
color: '#47C8EF' // 100% 处的颜色
}],
globalCoord: false // 缺省为 false
},
shadowColor: 'rgba(72,216,191, 0)',
shadowBlur: 10,
shadowOffsetY: 20
}
},
markLine: setting.upperTemperatureThreshold==-9999 || setting.warningSwitch==false ? {} : {
silent: true,
symbol: ['none', 'none'],
data: [{
name: 'max',
yAxis: setting.upperTemperatureThreshold,
lineStyle: {
color: '#FF3939'
},
label: {
formatter: '{c}℃'
}
}, {
name: 'min',
yAxis: setting.lowTemperatureThreshold,
lineStyle: {
color: '#33B0FF'
},
label: {
formatter: '{c}℃'
}
}]
},
data: formatData(app.globalData.zxSeriesData)
}]
};
chart.setOption(option);
return chart;
}
图表方法
data: {
ec: {
// onInit: initChart
},
echartShow: false
},
echartInit (e) {
console.log('e.detail', e);
initChart(e.detail.canvas, e.detail.width, e.detail.height);
},
onShow() {
this.setData({
echartShow: !this.data.echartShow
})
}
最后,在点击设置图表跳转到设备页的时候,echartShow 变成 false
this.setData({
echartShow: false
})