Vue实现多个echarts排版
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>注意事项
- 确保容器有明确宽高，否则 ECharts 无法渲染。
- 在组件销毁时调用
dispose()释放资源。 - 动态数据更新时需调用
setOption并传递notMerge: false参数。
