vue2中图表组件如何调用图表所在页面的数组

在Vue 2中，要将图表组件与所在页面的数据数组关联起来，通常会通过props或Vuex来传递数据。以下是步骤：

1. **通过props传递**：
- 在父组件中定义一个数组并作为prop传递给子组件：

   <template>
     <div>
       <chart-component :data="myDataArray" />
     </div>
   </template>

   <script>
   import ChartComponent from './ChartComponent.vue';
   
   export default {
     components: { ChartComponent },
     data() {
       return {
         myDataArray: [/* 数据列表 */]
       };
     }
   }
   </script>

子组件接受`data` prop并在内部渲染图表。

2. **通过Vuex管理状态**：
如果数据需要在应用的多个地方共享，可以使用Vuex store来存储数据：
- 父组件注入store并获取数据：

   <template>
     <div>
       <chart-component :data="chartData" />
     </div>
   </template>

   <script>
   import { mapState } from 'vuex';
   import ChartComponent from './ChartComponent.vue';

   export default {
     computed: {
       ...mapState(['myDataArray']) // 获取store中的数据
       chartData() {
         return this.myDataArray; // 返回给图表组件
       }
     },
     components: { ChartComponent }
   }
   </script>

子组件接收`chartData`计算属性来显示图表。

无论哪种方式，记得在子组件内部，你需要监听数据的变化，以便当数据更新时，图表能实时反映新数据。