echarts项目移入vue

### 集成ECharts至Vue项目的流程

#### 安装 ECharts 依赖

对于希望在 Vue2 项目中集成 ECharts 的开发者来说，推荐使用 ECharts 4.x 或者 5.x 版本来确保最佳的兼容性和稳定性[^1]。可以通过 npm 来安装所需的包：

npm install echarts --save

#### 全局引入 ECharts

为了让整个应用都能访问到 ECharts 实例，在 `main.js` 文件里执行如下操作可实现全局注册：

import Vue from 'vue';
import App from './App.vue';

// 引入 ECharts 并挂载到 Vue 原型链上以便组件内调用 this.$echarts 初始化实例
import echarts from 'echarts';
Vue.prototype.$echarts = echarts;

new Vue({
    render: h => h(App),
}).$mount('#app');

这样做的好处在于任何地方都可以通过 `this.$echarts.init()` 方法快速创建图表对象而无需重复导入模块。

#### 页面中的具体使用方法

当需要在一个特定页面展示图表时，则可以在对应的单文件组件(SFC)内部编写初始化逻辑以及定义 DOM 结构用于容纳图表容器:

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

<script>
export default {
name: "ChartComponent",
mounted() {
const chartDom = document.getElementById('chart-container');
let myChart = this.$echarts.init(chartDom);
var option;
option = {
title : { text: '某站点用户访问来源' },
tooltip : {},
legend: { data:['人数'] },
series : [
{ name:'访问来源',
type:'pie', radius : '55%',
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:274, name:'联盟广告'}
]
}]
};
myChart.setOption(option);

window.onresize = function () {
myChart.resize();
}
},
beforeDestroy(){
if (!this.chart) return;
window.onresize = null;
this.chart.dispose(); // 销毁实例释放资源
delete this.chart;
}
}
</script>

上述代码片段展示了如何构建一个简单的饼图，并且考虑到了窗口大小变化后的自适应调整问题；同时也注意到了销毁钩子函数里的清理工作以防止内存泄漏等问题的发生。