Con respecto a este problema, el autor ha preguntado y buscado en los principales sitios web. Tomó mucho tiempo para finalmente resolverlo. ¡Grabe este problema y compártelo con otros amigos para resolverlo rápidamente! !
El subprograma utiliza el gráfico Echarts para saltar de la página actual a otra página. Al volver a la página actual, ¿desea volver a dibujar el gráfico?
Escenario: el gráfico está en la página de detalles. Salte de la página de detalles a la página de configuración. Si desactiva la suscripción de alertas en la configuración, el gráfico no necesita las líneas más altas y más bajas, así que regrese a la página de detalles para actualizar el gráfico. Se muestran estas dos líneas: Si el estado de la suscripción a la alerta está desactivado en los detalles y activado en la página de configuración, el gráfico de la página de detalles debe mostrar estas dos líneas.
A continuación se muestra el código fuente de la imagen de arriba
Para resolver el problema de la actualización del gráfico, el punto clave es usar el método wx: if: Deje que el gráfico se vuelva a representar cada vez que se recargue a través del método 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;
}Método gráfico
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
})
}Finalmente, al hacer clic en el gráfico de configuración para saltar a la página del dispositivo, echartShow se vuelve falso
this.setData({
echartShow: false
})