当前位置：首页 > VUE

vue如何实现echarts

2026-03-30 07:04:05VUE

Vue 中实现 ECharts 的方法

安装 ECharts 依赖

在 Vue 项目中通过 npm 或 yarn 安装 ECharts：

npm install echarts --save
# 或
yarn add echarts

引入 ECharts

在 Vue 组件中直接引入 ECharts：

import * as echarts from 'echarts';

创建图表容器

在模板中定义一个 DOM 容器用于渲染图表：

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

初始化图表

在 mounted 生命周期钩子中初始化图表：

mounted() {
  const chartDom = document.getElementById('chart-container');
  const myChart = 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);
}

响应式调整

监听窗口大小变化时重新调整图表大小：

mounted() {
  // ...初始化图表代码
  window.addEventListener('resize', () => {
    myChart.resize();
  });
}

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

按需引入（优化体积）

如果只需要部分图表类型，可以按需引入模块：

import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, GridComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([
  BarChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  CanvasRenderer
]);

封装为可复用组件

将图表逻辑封装为可复用的 Vue 组件：

vue如何实现echarts

<template>
  <div :id="chartId" :style="{ width: width, height: height }"></div>
</template>

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

export default {
  props: {
    chartId: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '400px'
    },
    option: {
      type: Object,
      required: true
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chart = echarts.init(document.getElementById(this.chartId));
      chart.setOption(this.option);

      window.addEventListener('resize', () => {
        chart.resize();
      });
    }
  }
};
</script>