当前位置：首页 > 前端教程

elementui echart

2026-03-05 23:28:42前端教程

ElementUI 与 ECharts 的集成方法

安装依赖
确保项目中已安装 ElementUI 和 ECharts：

npm install element-ui echarts --save

引入组件
在 Vue 文件中引入 ElementUI 的容器组件（如 el-card、el-row）和 ECharts：

import { Card, Row, Col } from 'element-ui';
import * as echarts from 'echarts';

挂载 ECharts 到 DOM
在模板中定义容器，并通过 ref 获取 DOM 节点：

<el-card>
  <div ref="chart" style="width: 600px; height: 400px;"></div>
</el-card>

初始化图表
在 mounted 钩子中初始化图表并配置选项：

mounted() {
  const chart = echarts.init(this.$refs.chart);
  chart.setOption({
    title: { text: '示例图表' },
    tooltip: {},
    xAxis: { data: ['A', 'B', 'C'] },
    yAxis: {},
    series: [{ name: '数据', type: 'bar', data: [10, 20, 30] }]
  });
}

常见问题与优化

响应式适配
监听窗口变化时调用 ECharts 的 resize 方法：

window.addEventListener('resize', () => chart.resize());

销毁实例
组件销毁时移除监听并释放资源：

beforeDestroy() {
  window.removeEventListener('resize', this.resizeHandler);
  this.chart.dispose();
}

按需引入 ECharts
若需减小体积，可仅导入所需模块：

import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';

示例：结合 ElementUI 布局

使用 ElementUI 的栅格系统布局多个图表：

elementui echart

<el-row :gutter="20">
  <el-col :span="12">
    <div ref="chart1" style="height: 300px;"></div>
  </el-col>
  <el-col :span="12">
    <div ref="chart2" style="height: 300px;"></div>
  </el-col>
</el-row>

通过上述方法，可以高效地将 ECharts 嵌入 ElementUI 的页面结构中，并实现灵活的交互与布局。