Vue 中使用 ECharts 自动生成 Series：语句拼接技巧

<template>
  <div id="chart"></div>
</template>
<script>
import echarts from 'echarts';

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(document.getElementById('chart'));
      
      // 生成 series 的数据
      const data = [
        { name: 'Series 1', data: [1, 2, 3, 4, 5] },
        { name: 'Series 2', data: [6, 7, 8, 9, 10] },
        { name: 'Series 3', data: [11, 12, 13, 14, 15] },
      ];
      
      // 使用字符串拼接生成 series 的配置
      let series = '';
      data.forEach((item, index) => {
        series += `{\n          name: '${item.name}',\n          type: 'line',\n          data: [${item.data.join(',')}]\n        }`;
        
        // 添加逗号分隔
        if (index < data.length - 1) {
          series += ',';
        }
      });
      
      // 生成完整的 echarts 配置
      const option = {
        xAxis: {
          type: 'category',
          data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {
          type: 'value'
        },
        series: [${series}]
      };
      
      // 设置 echarts 配置并渲染图表
      chart.setOption(option);
    }
  }
};
</script>
<style>
#chart {
  width: 400px;
  height: 300px;
}
</style>
<p>在上述示例中，首先在 <code>mounted</code> 钩子函数中调用 <code>initChart</code> 方法来初始化图表。然后在 <code>initChart</code> 方法中，通过字符串拼接的方式生成 series 的配置。最后将生成的 series 配置放入完整的 echarts 配置中，并使用 <code>setOption</code> 方法来渲染图表。</p>