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

elementui echart

2026-01-15 20:10:32前端教程

ElementUI 与 ECharts 集成方法

将 ElementUI 和 ECharts 结合使用，可以在 Vue 项目中实现美观且功能强大的数据可视化。以下是集成步骤和注意事项：

安装依赖

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

npm install element-ui echarts --save

如果使用 Vue 3，需安装适配版本：

npm install element-plus echarts --save

引入 ElementUI 和 ECharts

在 main.js 或入口文件中全局引入：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import * as echarts from 'echarts';

Vue.use(ElementUI);
Vue.prototype.$echarts = echarts; // 挂载到 Vue 原型，方便全局调用

在组件中使用 ECharts

创建一个容器并初始化图表：

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

<script>
export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = document.getElementById('chart-container');
      const myChart = this.$echarts.init(chartDom);
      const option = {
        title: { text: '示例图表' },
        tooltip: {},
        xAxis: { data: ['A', 'B', 'C', 'D', 'E'] },
        yAxis: {},
        series: [{ name: '数据', type: 'bar', data: [5, 20, 36, 10, 15] }]
      };
      myChart.setOption(option);
    }
  }
};
</script>

响应式调整

监听窗口变化，动态调整图表大小：

methods: {
  initChart() {
    const chartDom = document.getElementById('chart-container');
    const myChart = this.$echarts.init(chartDom);
    const option = { ... }; // 配置项
    myChart.setOption(option);

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

销毁图表

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

beforeDestroy() {
  window.removeEventListener('resize', this.myChart?.resize);
  this.myChart?.dispose();
}

结合 ElementUI 组件

例如，通过 el-select 动态切换图表数据：

elementui echart

<template>
  <div>
    <el-select v-model="chartType" @change="updateChart">
      <el-option label="柱状图" value="bar"></el-option>
      <el-option label="折线图" value="line"></el-option>
    </el-select>
    <div id="chart-container" style="width: 600px; height: 400px;"></div>
  </div>
</template>

<script>
export default {
  data() {
    return { chartType: 'bar' };
  },
  methods: {
    updateChart() {
      const option = {
        series: [{ type: this.chartType, data: [5, 20, 36, 10, 15] }]
      };
      this.myChart.setOption(option);
    }
  }
};
</script>