vue2中动态生成多个统计图

在Vue2中，动态生成多个统计图通常通过组件化和数据驱动的方式实现。你可以结合Vuex管理状态、Element UI或其他前端图表库如ECharts或AntV来完成这个任务。以下是一个简单的步骤概述：

1. **安装依赖**：
首先确保已经安装了`vue`, `element-ui`和选择的图表库（例如`echarts`）。

npm install vue element-ui echarts

2. **创建组件**：
创建一个自定义的统计图组件，它接受图表数据和配置作为props。

<template>
  <div :style="{width: '400px', height: '300px'}">
    <your-chart :options="chartOptions" />
  </div>
</template>

<script>
import YourChartComponent from './YourChart.vue';

export default {
  name: 'StatisticalChart',
  props: {
    data: { type: Array, required: true },
    config: { type: Object, default: () => ({}) }
  },
  components: {
    YourChartComponent,
  },
  computed: {
    chartOptions() {
      return this.config.map((configItem, index) => ({
        ...configItem,
        series: this.data[index].map(dataSeries => dataSeries),
      }));
    }
  }
};
</script>

3. **在父组件中使用**：
父组件需要提供每个统计图的数据和配置，并将它们传递给统计图组件。

<template>
  <div>
    <statistical-chart v-for="(item, index) in chartDataAndConfigs" :key="index" :data="item.data" :config="item.config" />
  </div>
</template>

<script>
import StatisticalChart from '@/components/StatisticalChart.vue';
...
data() {
  return {
    chartDataAndConfigs: [
      { data: yourChartData1, config: defaultConfig1 },
      { data: yourChartData2, config: defaultConfig2 },
      // 添加更多配置和数据对
    ],
  };
}
</script>