Vue中使用ECharts图表：用数组拼接series渲染多个图表

在Vue中使用ECharts图表，可以使用数组的方法将option中的series拼接起来渲染。具体步骤如下：

在Vue组件中，引入ECharts库。

import echarts from 'echarts'

在Vue组件的mounted钩子函数中，创建一个ECharts实例，并传入DOM元素。

mounted() {
  // 创建ECharts实例
  this.chart = echarts.init(this.$refs.chart)
}

在需要渲染图表的方法中，使用数组的concat方法将option中的series拼接起来。

renderChart() {
  // 拼接series数组
  const series = [].concat(
    this.option1.series,
    this.option2.series,
    this.option3.series
  )

  // 设置option的series属性
  const option = {
    ...this.option1, // 保留option1的其他属性
    series: series
  }

  // 渲染图表
  this.chart.setOption(option)
}

在Vue组件的模板中，使用ref属性指定一个DOM元素，用于渲染ECharts图表。

<template>
  <div>
    <div ref='chart' style='width: 600px; height: 400px;'></div>
    <button @click='renderChart'>渲染图表</button>
  </div>
</template>

调用renderChart方法来渲染图表。

<script>
export default {
  data() {
    return {
      option1: {
        // option1的配置
      },
      option2: {
        // option2的配置
      },
      option3: {
        // option3的配置
      }
    }
  },
  mounted() {
    // 创建ECharts实例
    this.chart = echarts.init(this.$refs.chart)
  },
  methods: {
    renderChart() {
      // 拼接series数组
      const series = [].concat(
        this.option1.series,
        this.option2.series,
        this.option3.series
      )

      // 设置option的series属性
      const option = {
        ...this.option1, // 保留option1的其他属性
        series: series
      }

      // 渲染图表
      this.chart.setOption(option)
    }
  }
}
</script>

这样，就可以使用数组的方法将option中的series拼接起来渲染ECharts图表了。