Vue 用 echarts画图时tooltip.formatter参数params不会更新。

Question

在Vue中使用echarts画折线图时，遇到一个很奇怪的问题。
由于待画的折线条数不确定，需要通过解析获取到的数据来确定，因此我在tootip的formmater以及series中均采用了函数来进行传递数值。画图的函数代码如下：

drawLineChart: (date, versionIndex, responseData, longTime) => {
        if (this.chartLine == null) {
          this.chartLine = echarts.init(document.getElementById('chartLine'))
        }
        this.chartLine.setOption({
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              console.log(params)
              console.log(responseData)
              var res = '时间：' + params[0].name + '<br/>'
              for (var i = 0; i < params.length; i++) {
                res += params[i].seriesName + '使用量：' + (params[i].value / 1000).toFixed(2) + 'k<br/>'
                res += params[i].seriesName + '增长数量：' +
                  (responseData[params[i].seriesName]['date_map_increment'][params[0].name] / 1000).toFixed(2) + 'k<br/>'
                res += params[i].seriesName + '增长率：' +
                  (responseData[params[i].seriesName]['date_map_growth_rate'][params[0].name] * 100).toFixed(1) + '%'
                if (i < versionIndex.length - 1) res += '<br/>'
              }
              return res
            }
          },
          legend: {
            data: versionIndex
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            'axisLabel': {
              interval: function (index, data) {
                if (longTime) {
                  var gap = Math.ceil(date.length / 32)
                  if (index % gap === 0) return true
                  return false
                } else {
                  return true
                }
//                var re = /.(\.01)$/
//                if (longTime) {
//                  if (re.test(data)) return true
//                  return false
//                }
//                return true
//              }
              }
            },
            data: date
          },
          yAxis: {
            type: 'value'
          },
          series: (function () {
            var res = []
            for (var i = 0; i < versionIndex.length; i++) {
              var item = {
                name: versionIndex[i],
                type: 'line',
                markPoint: {
                  data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                  ]
                },
                data: responseData[versionIndex[i]]['number']
              }
              res.push(item)
            }
            return res
          }())
        })
      }

现在的问题是 tooltips中formatter 参数params不会随着数据的变化来发生变化。我在每次用户点击查询时，会调用下图这个函数来触发数据的更新，但数据都更新了，params却没有更新。

打了log看了一下params，如下图一开始是七个图例（即七条线），params长度为7，后续重新查询了一下其他数据，只有六个图例，图以及数据都更新了，但params还是之前的那七个，导致formatter函数报错，界面卡死。

请问有人知道这是为什么吗？官网上给的配置项手册中也说得不是很详细。

Answer 1

问题解决了，是vue setOption时默认是合并， 如果要全部重新加载 要写成 setOption（{}，true），这样就可以了。

Answer 2

每一次重新查询了之后，需要把新的tooltip这个配置属性，通过myChart.setOption({ **** })重新设置吧？ 没代码，回答只能打问号。