vue中的echarts的legend的顯示問題

ajax動態(tài)賦值echarts（餅圖和柱形圖）

可以把option寫在computed里面，option里面的變量可以通過寫在method或者watch里，變量變化eCharts就會重新渲染

以下是我自己的一段代碼：

computed里面的option：

computed: {
  option () {
    return {
      legend: {
        show: true,
        bottom: 'bottom',
        data: this.typeStr
      },
      grid: {   // 調(diào)整圖表與容器距離
        left: '4%',
        right: '4%',
        containLabel: true
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        data: this.localDateStrAxis,
        type: 'category',
        min: 'datamin',
        boundaryGap: true,    // x坐標(biāo)軸兩端留白
        axisLine: {
          lineStyle: {
            color: '#f0f0f0'
          }
        },
        axisTick: {
          lineStyle: {
            color: '#f0f0f0'
          }
        },
        axisLabel: {
          color: '#5b5d61'
        }
      },
      yAxis: this.yAxis,
      series: this.series
    }
  }
}

watch里面的內(nèi)容：

watch: {
  // 值更新時即時更新eCharts
  localValueAxis: {
    handler: function (n, o) {
      this.series = []
      this.yAxis = []
      for (let i = 0; i < n.length; i++) {
        this.series.push({
          name: this.typeStr[i],
          type: 'line',
          data: n[i],
          yAxisIndex: i,
          areaStyle: { opacity: 0.3 }
        })
        this.yAxis.push({
          name: this.typeStr[i],
          type: 'value',
          axisLine: {
            show: false
          },
          axisLabel: {
            color: '#787a7d'
          },
          axisTick: {
            show: false
          },
          splitNumber: 3,
          splitLine: {
            show: true
          }
        })
      }
    },
    deep: true
  }
}

不用太過在意watch里的具體代碼，邏輯就是：當(dāng)localValueAxis這個值變化后我讓eCharts的yAxis、series等重新賦值，vue自然就會重新渲染eCharts了。希望能幫到題主。