vue实现echarts项目
Vue 中集成 ECharts 的步骤
安装 ECharts 依赖
通过 npm 或 yarn 安装 ECharts 核心库：
npm install echarts --save
# 或
yarn add echarts全局或局部引入 ECharts
在 Vue 组件中直接引入 ECharts：
import * as echarts from 'echarts';如需按需引入模块（如减少打包体积）：
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent } from 'echarts/components';
echarts.use([BarChart, GridComponent]);初始化图表
在 Vue 组件的 mounted 生命周期中初始化图表：
mounted() {
const chartDom = this.$refs.chart;
const myChart = echarts.init(chartDom);
myChart.setOption({
xAxis: { type: 'category', data: ['Mon', 'Tue'] },
yAxis: { type: 'value' },
series: [{ data: [820, 932], type: 'bar' }]
});
}模板中绑定 DOM 元素
在模板中为图表容器指定宽高和 ref：
<template>
<div ref="chart" style="width: 600px; height: 400px;"></div>
</template>响应式与销毁处理
监听窗口变化自动调整
添加窗口大小变化监听器以自适应：
mounted() {
window.addEventListener('resize', this.handleResize);
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize);
},
methods: {
handleResize() {
this.myChart.resize();
}
}销毁时释放资源
在组件销毁前调用 dispose 方法：
beforeDestroy() {
if (this.myChart) {
this.myChart.dispose();
}
}高级用法示例
动态更新数据
通过方法更新图表数据：
methods: {
updateChart(newData) {
this.myChart.setOption({
series: [{ data: newData }]
});
}
}使用 Vue-ECharts 封装组件
安装官方适配库简化操作：
npm install vue-echarts组件化使用方式：
import ECharts from 'vue-echarts';
components: { 'v-chart': ECharts },
template: `<v-chart :option="chartOptions" />`注意事项
- 确保容器有明确的宽高，否则图表无法渲染。
- 复杂项目建议按需引入模块以减少打包体积。
- 服务端渲染（SSR）场景需使用
echarts/core并禁用 DOM 操作。
