当前位置：首页 > VUE

用vue实现echarts

2026-02-10 17:49:05VUE

使用 Vue 实现 ECharts

安装 ECharts 依赖

在项目中安装 ECharts 和 Vue-ECharts（可选）。Vue-ECharts 是官方提供的 Vue 封装版本，简化了集成过程。

npm install echarts vue-echarts

基础集成方式

直接引入 ECharts 并在 Vue 组件中初始化图表。适用于需要高度自定义的场景。

<template>
  <div ref="chartDom" style="width: 600px; height: 400px;"></div>
</template>

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

export default {
  mounted() {
    const chart = echarts.init(this.$refs.chartDom);
    chart.setOption({
      title: { text: '基础示例' },
      xAxis: { data: ['A', 'B', 'C'] },
      yAxis: {},
      series: [{ type: 'bar', data: [10, 20, 30] }]
    });
  }
};
</script>

使用 Vue-ECharts 组件

通过 vue-echarts 简化集成，推荐在大多数场景下使用。

<template>
  <VChart :option="chartOption" style="width: 600px; height: 400px;" />
</template>

<script>
import { use } from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent, TitleComponent } from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import VChart from 'vue-echarts';

// 按需注册组件
use([TitleComponent, GridComponent, BarChart, CanvasRenderer]);

export default {
  components: { VChart },
  data() {
    return {
      chartOption: {
        title: { text: 'Vue-ECharts 示例' },
        xAxis: { data: ['X', 'Y', 'Z'] },
        yAxis: {},
        series: [{ type: 'bar', data: [5, 20, 36] }]
      }
    };
  }
};
</script>

响应式更新图表

当数据变化时，自动更新图表。适用于动态数据场景。

<template>
  <VChart :option="chartOption" autoresize />
</template>

<script>
export default {
  data() {
    return {
      chartOption: {
        series: [{ data: [10, 20, 30] }]
      }
    };
  },
  methods: {
    updateData() {
      this.chartOption.series[0].data = [Math.random() * 100, Math.random() * 100, Math.random() * 100];
    }
  }
};
</script>

按需引入模块

通过 Tree Shaking 减少打包体积，仅引入需要的图表类型和组件。

import { LineChart, PieChart } from 'echarts/charts';
import { TooltipComponent, LegendComponent } from 'echarts/components';

销毁图表实例

在组件销毁时手动释放资源，避免内存泄漏。

export default {
  mounted() {
    this.chart = echarts.init(this.$refs.chartDom);
  },
  beforeUnmount() {
    if (this.chart) {
      this.chart.dispose();
    }
  }
};

主题定制

通过预定义主题或自定义主题实现样式统一。

用vue实现echarts

import * as echarts from 'echarts';
import theme from './customTheme.json';

echarts.registerTheme('myTheme', theme);
const chart = echarts.init(this.$refs.chartDom, 'myTheme');