vue中的echarts的legend的显示问题

Question

请问这种图怎么通过ajax动态赋值呢？

Answer 1

可以把option写在computed里面，option里面的变量可以通过写在method或者watch里，变量变化eCharts就会重新渲染

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

computed里面的option：

computed: {
  option () {
    return {
      legend: {
        show: true,
        bottom: 'bottom',
        data: this.typeStr
      },
      grid: {   // 调整图表与容器距离
        left: '4%',
        right: '4%',
        containLabel: true
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        data: this.localDateStrAxis,
        type: 'category',
        min: 'datamin',
        boundaryGap: true,    // x坐标轴两端留白
        axisLine: {
          lineStyle: {
            color: '#f0f0f0'
          }
        },
        axisTick: {
          lineStyle: {
            color: '#f0f0f0'
          }
        },
        axisLabel: {
          color: '#5b5d61'
        }
      },
      yAxis: this.yAxis,
      series: this.series
    }
  }
}

watch里面的内容：

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里的具体代码，逻辑就是：当localValueAxis这个值变化后我让eCharts的yAxis、series等重新赋值，vue自然就会重新渲染eCharts了。希望能帮到题主。

Answer 2

ajax动态赋值echarts（饼图和柱形图）

Answer 3

我想知道楼主的图上的，环状图中间的发货量2012.3是怎么设置上去的，看了api还是不知道怎么弄