Vue 中使用 ECharts

在 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

2. 在 babel.config.js 中配置：

module.exports = {plugins: ['equire']
};

3. 按需引入所需模块：

// 在组件中按需引入
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，并实现动态数据绑定和响应式更新。