当前位置：首页 > VUE

vue如何实现echarts

2026-02-18 06:23:18VUE

在Vue中实现ECharts的步骤

安装ECharts依赖

通过npm或yarn安装ECharts库：

npm install echarts --save
# 或
yarn add echarts

引入ECharts

在Vue组件中引入ECharts：

import * as echarts from 'echarts';

创建图表容器

在Vue组件的模板中添加一个容器元素：

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

初始化图表

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

mounted() {
  this.initChart();
},
methods: {
  initChart() {
    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: [10, 20, 30, 40, 50]
        }
      ]
    };
    myChart.setOption(option);
  }
}

响应式调整

监听窗口大小变化，调整图表尺寸：

methods: {
  initChart() {
    const chartDom = document.getElementById('chart-container');
    const myChart = echarts.init(chartDom);
    // ...设置option
    window.addEventListener('resize', function() {
      myChart.resize();
    });
  }
}

销毁图表

在组件销毁时移除图表实例和事件监听：

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

使用Vue-ECharts封装组件

为了更方便地在Vue中使用ECharts，可以封装一个可复用的组件：

创建ECharts组件

<template>
  <div ref="chart" style="width: 100%; height: 100%;"></div>
</template>

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

export default {
  props: {
    option: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    option: {
      handler(newVal) {
        if (this.chart) {
          this.chart.setOption(newVal);
        }
      },
      deep: true
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      this.chart.setOption(this.option);
      window.addEventListener('resize', this.resizeChart);
    },
    resizeChart() {
      this.chart && this.chart.resize();
    }
  },
  beforeDestroy() {
    if (this.chart) {
      window.removeEventListener('resize', this.resizeChart);
      this.chart.dispose();
    }
  }
};
</script>

使用封装组件

在父组件中使用封装好的ECharts组件：

vue如何实现echarts

<template>
  <div>
    <e-charts :option="chartOption" />
  </div>
</template>

<script>
import ECharts from './ECharts.vue';

export default {
  components: {
    ECharts
  },
  data() {
    return {
      chartOption: {
        title: {
          text: '封装后的图表'
        },
        // ...其他配置
      }
    };
  }
};
</script>