当前位置：首页 > VUE

Vue实现多个echarts排版

2026-02-21 06:58:21VUE

Vue 中实现多个 ECharts 排版的方法

使用 Flex 布局或 Grid 布局

通过 CSS Flex 或 Grid 布局可以灵活控制多个 ECharts 实例的排列方式。Flex 适合一维排列（行或列），Grid 适合二维复杂布局。

<div class="charts-container">
  <div ref="chart1" class="chart-item"></div>
  <div ref="chart2" class="chart-item"></div>
</div>

/* Flex 横向排列 */
.charts-container {
  display: flex;
  gap: 20px; /* 图表间距 */
}
.chart-item {
  flex: 1; /* 等分宽度 */
  height: 400px;
}

/* Grid 网格排列 */
.charts-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 两列 */
  gap: 20px;
}

动态响应式调整

通过监听窗口变化，动态调整 ECharts 实例的大小：

import { onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';

export default {
  setup() {
    const charts = [];

    const initChart = (dom) => {
      const chart = echarts.init(dom);
      chart.setOption({ /* 配置项 */ });
      charts.push(chart);
      return chart;
    };

    const resizeCharts = () => {
      charts.forEach(chart => chart.resize());
    };

    onMounted(() => {
      window.addEventListener('resize', resizeCharts);
    });

    onUnmounted(() => {
      window.removeEventListener('resize', resizeCharts);
    });

    return { initChart };
  }
};

使用 ECharts 的 `group` 功能

如果需要联动（如鼠标悬停同步高亮），可以通过 group 属性将多个图表绑定到同一组：

const chart1 = echarts.init(document.getElementById('chart1'));
const chart2 = echarts.init(document.getElementById('chart2'));

chart1.setOption({
  group: 'shared', // 同一组名
  /* 其他配置 */
});
chart2.setOption({
  group: 'shared',
  /* 其他配置 */
});

封装可复用的图表组件

创建通用组件便于重复使用：

<!-- EChartWrapper.vue -->
<template>
  <div ref="chartDom" :style="{ width, height }"></div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';

export default {
  props: {
    option: Object,
    width: { type: String, default: '100%' },
    height: { type: String, default: '400px' },
    group: String
  },
  setup(props) {
    const chartDom = ref(null);
    let chartInstance = null;

    const initChart = () => {
      chartInstance = echarts.init(chartDom.value);
      chartInstance.setOption({
        ...props.option,
        group: props.group
      });
    };

    onMounted(initChart);
    onUnmounted(() => {
      if (chartInstance) chartInstance.dispose();
    });

    return { chartDom };
  }
};
</script>