安装 echarts 依赖
先 cd 到你的项目下，然后在终端输入以下代码，安装相关依赖。
- npm 安装
npm install echarts
- yarn 安装
yarn add echarts
新建基础组件
下图是一个最基本的 vue 的目录结构，在项目根目录下的 src/components 中新建一个 Chart.vue 组件。
该组件的作用是加载并初始化 echarts 容器，并根据配置的变化更新图表。
下图为 Chart.vue 组件中的配置：
上图中的代码都表示什么意思呢？
- 首先，为了能使用 echarts，我们需要先 import 它；
- echarts 官网中规定，要想使 echart 生效，需要一个 dom 元素作为容器并调用它的 init 方法才能进行初始化，那么在 vue 中要想获取 dom 元素就必须给对应标签中添加 ref 属性；
- ref 中保存的元素需要在 dom 加载完成后才会有值，所以可以在 mounted 生命周期中获取；
- 接着创建一个 props 属性 options，该属性用来接收父组件传过来的配置；
- 这时，虽然 Chart.vue 组件能用了，但是当 options(这里的 options 相当于后端传过来的数据)发生变化时，图表不会跟着刷新，为了让图表实时刷新，可以使用 vue 中的 watch；
- echarts 官网规定 echarts 容器必须加宽高，否则不能正常显示图表。
下方为源码：
<template>
<div id="chart">
<div ref="echartRef" class="chart"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data() {
return {
chart: null,
};
},
props: {
options: {
type: Object,
default: () => {},
},
},
mounted() {
// dark 为暗黑模式，不需要可以不加
const chart = echarts.init(this.$refs.echartRef, 'dark');
this.chart = chart;
this.chart.setOption(this.options);
},
watch: {
options: {
handler: function(newOption) {
this.chart.setOption(newOption);
},
deep: true,
},
},
};
</script>
<style scoped>
.chart {
width: 50%;
height: 300px;
background-color: #bee7e9;
}
</style>
新建饼图配置文件
说明：以下内容都以饼图为例进行讲解，掌握后，使用者可以自行添加其他类型的图表组件。
完成上一步后，假设现在需要在页面展示一个饼图，可以按照以下步骤来做：
在 src 下新建一个 charts 文件夹，然后在该文件夹下新建一个 pieOptions.js 文件，如下图所示：
然后去 echarts 官网，找一个饼图的配置，并把配置粘贴上去，下图是 pieOptions.js 中的内容：
新建一个饼图组件
接着，以饼图为例，在 src/components 下新建一个 PieChart.vue 组件，创建此组件的目的是为了复用，以后遇到生成饼图的需求，都可以直接调用此组件。
下图为 PieChart.vue 组件对应内容：
下方为源码：
<template>
<div id="pie-chart">
<Chart :options="pieOptions"></Chart>
</div>
</template>
<script>
import pieOptions from '../charts/pieOptions';
import Chart from "./Chart.vue";
export default {
data() {
return {
pieOptions
}
},
components: { Chart },
};
</script>
<style scoped lang="scss"></style>
在 App.vue 中使用
最后，我们在 App.vue 或其他 .vue 文件中引用刚刚创建好的饼图组件就可以了，代码如下：
App.vue 的位置：
App.vue 中的代码：
执行 npm run serve 或者 yarn serve （取决于你的 package.json 中定义的脚本是什么）运行代码，至此，一个简单的页面就完成了，效果如下图：
说明：为了演示效果，我给页面背景加了灰色，实际开发中根据需求来配置就行。
各组件关系图
为了便于大家理解，我画了上面出现的几个组件的关系图，大家可以对照这个图再梳理一遍他们之间的关系，首先 App.vue 引用了 PieChart.vue，然后 PieChart.vue 又引用了 Chart.vue 和 pieOptions.js。
