小程序使用Echarts图表, 从当前跳转到另外一个页面，在返回当前页，要重新绘制图表？

关于这个问题，作者是多方打听和各大网站搜索，花了比较长时间终于解决，记录一下，这个问题，也分享给其他朋友遇到这个问题能快速解决！！

小程序使用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
})