The applet uses the Echarts chart to jump from the current page to another page. When returning to the current page, do you want to redraw the chart?

Regarding this problem, the author has inquired about and searched on major websites. It took a long time to finally solve it. Record this problem and share it with other friends to solve this problem quickly! !

The applet uses the Echarts chart to jump from the current page to another page. When returning to the current page, do you want to redraw the chart? 

Scenario: The chart is on the detail page. Jump from the detail page to the settings page. If you turn off the alert subscription in the settings, then the chart does not need the highest and lowest lines, so return to the detail page to update the chart. These two lines are displayed. If the alert subscription status is turned off in the details and turned on on the settings page, the graph on the details page must display these two lines.

Below is the source code of the above picture

To solve the problem of chart update, the key point is to use the wx:if method: Let the chart re-render every time it is reloaded through the if method

<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;
}

Chart method

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
    })
}

Finally, when clicking the settings chart to jump to the device page, echartShow becomes false

this.setData({
   echartShow: false
})