当前位置：首页 > VUE

vue实现多个图表展示

2026-03-26 23:56:19VUE

Vue 实现多个图表展示的方法

在 Vue 项目中展示多个图表通常需要选择合适的图表库，并通过组件化的方式组织代码。以下是实现多图表展示的具体方法：

安装图表库

推荐使用 echarts 或 chart.js 等主流图表库。以 echarts 为例：

npm install echarts --save

封装基础图表组件

创建一个可复用的基础图表组件 BaseChart.vue：

<template>
  <div ref="chartDom" style="width: 100%; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: {
    option: {
      type: Object,
      required: true
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chartDom);
      chart.setOption(this.option);
      window.addEventListener('resize', () => chart.resize());
    }
  }
};
</script>

多图表布局实现

在父组件中引入多个图表组件，并通过 flex 或 grid 布局：

<template>
  <div class="chart-container">
    <BaseChart :option="lineOption" />
    <BaseChart :option="barOption" />
    <BaseChart :option="pieOption" />
  </div>
</template>

<script>
import BaseChart from './BaseChart.vue';

export default {
  components: { BaseChart },
  data() {
    return {
      lineOption: {
        xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
        yAxis: { type: 'value' },
        series: [{ data: [820, 932, 901], type: 'line' }]
      },
      barOption: {
        xAxis: { type: 'category', data: ['A', 'B', 'C'] },
        yAxis: { type: 'value' },
        series: [{ data: [120, 200, 150], type: 'bar' }]
      },
      pieOption: {
        series: [{
          type: 'pie',
          data: [
            { value: 335, name: 'A' },
            { value: 310, name: 'B' }
          ]
        }]
      }
    };
  }
};
</script>

<style>
.chart-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
</style>

动态加载数据

通过 API 异步获取图表数据：

async fetchChartData() {
  const res = await axios.get('/api/chart-data');
  this.lineOption.series[0].data = res.data.lineData;
  this.barOption.series[0].data = res.data.barData;
}

响应式调整

监听窗口变化时重置图表尺寸：

vue实现多个图表展示

mounted() {
  window.addEventListener('resize', this.handleResize);
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
},
methods: {
  handleResize() {
    this.$refs.charts.forEach(chart => chart.resize());
  }
}