Vue 中使用 ECharts

时间：2025-03-29 15:41:17

在 Vue 中使用 ECharts 主要分为以下步骤，结合代码示例详细说明：

1. 安装 ECharts

通过 npm 或 yarn 安装 ECharts：

npm install echarts --save
# 或
yarn add echarts

2. 基础使用（完整引入）

在 Vue 组件中使用 
<template>
  <div ref="chartDom" style="width: 600px; height: 400px;"></div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

export default {
  setup() {
    const chartDom = ref(null);
    let myChart = null;

    // 初始化图表
    onMounted(() => {
      myChart = echarts.init(chartDom.value);
      myChart.setOption({
        title: { text: '基础柱状图' },
        xAxis: { data: ['A', 'B', 'C', 'D', 'E'] },
        yAxis: {},
        series: [{ type: 'bar', data: [5, 20, 36, 10, 15] }]
      });
    });

    // 销毁图表
    onBeforeUnmount(() => {
      if (myChart) myChart.dispose();
    });

    return { chartDom };
  }
};
</script>

3. 按需引入（优化体积）

通过 babel-plugin-equire 按需引入
  1. 安装插件：
npm install babel-plugin-equire --save-dev
  1. 在 babel.config.js 中配置：
module.exports = {
  plugins: ['equire']
};
  1. 按需引入所需模块：
// 在组件中按需引入
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]);

4. 动态数据更新

通过 watch 监听数据变化并更新图表：

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const data = ref([5, 20, 36, 10, 15]);
    let myChart = null;

    // 监听数据变化
    watch(data, (newData) => {
      if (myChart) {
        myChart.setOption({
          series: [{ data: newData }]
        });
      }
    });

    return { data };
  }
};
</script>

5. 自适应窗口大小

监听窗口变化并调用 resize 方法：

onMounted(() => {
  myChart = echarts.init(chartDom.value);
  window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
});

const handleResize = () => {
  myChart.resize();
};

6. 封装可复用的图表组件 

<!-- EChartsWrapper.vue -->
<template>
  <div ref="chartDom" :style="{ width, height }"></div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount, watch } from 'vue';
import * as echarts from 'echarts';

export default {
  props: {
    option: Object,   // 图表配置
    width: { type: String, default: '100%' },
    height: { type: String, default: '400px' }
  },
  setup(props) {
    const chartDom = ref(null);
    let myChart = null;

    onMounted(() => {
      myChart = echarts.init(chartDom.value);
      myChart.setOption(props.option);
    });

    watch(
      () => props.option,
      (newOption) => {
        myChart.setOption(newOption);
      },
      { deep: true }
    );

    onBeforeUnmount(() => {
      myChart.dispose();
    });

    return { chartDom };
  }
};
</script>

7. 使用示例 

<template>
  <EChartsWrapper :option="chartOption" />
</template>

<script>
import EChartsWrapper from './components/EChartsWrapper.vue';

export default {
  components: { EChartsWrapper },
  data() {
    return {
      chartOption: {
        title: { text: '动态折线图' },
        xAxis: { data: ['1月', '2月', '3月', '4月', '5月'] },
        yAxis: {},
        series: [{ type: 'line', data: [30, 45, 60, 35, 70] }]
      }
    };
  }
};
</script>

常见问题

  1. 图表不显示

    • 确保容器设置了宽高（如 <div style="width: 600px; height: 400px">）。
    • 确认 echarts.init() 在 onMounted 生命周期中调用。

  2. 内存泄漏

    • 在 onBeforeUnmount 中调用 myChart.dispose() 销毁实例。

  3. 按需引入失败

    • 检查 babel-plugin-equire 配置是否正确。

通过以上步骤，可以高效地在 Vue 中集成 ECharts，并实现动态数据绑定和响应式更新。

相关文章