vue中使用Echarts折线图和扇形图

前言：

在最近的一次项目中用到了Echarts折线图，并且是在vue里面使用，使用的时候遇到了一个很大的坑，并且网上都是一些官方案例，都没有用到具体的实际项目中。现在就来让我给你们详细介绍一下在具体项目中如何使用。

Echarts折线图

使用方法

1. 安装：npm install echarts --save
安装的具体方法在以前所讲的使用vue-cli搭建SPA项目里面
2 引入： import echarts from 'echarts'

3.定义具备高宽的 DOM 容器。

4. echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的折线图
   代码如下：

在看一下我们的后台方法，我们需要在后台把它把我们的数据转换成它需要的格式
如图所示：

这里就遇到了我所遇到的坑，这样去运行是不会出来结果的
解决方法：
绘图方法必须放到axios回调函数里面
解决代码：

效果如图所示：

Echarts扇形图

这个就不多说了，跟Echarts折线图其实都差不多的，只是有一点要注意，它的绘图方法必须在axios回调函数里面赋完值之后，在进行绘图方法，如图所示：

代码如下：

效果如图所示：

谢谢大家，多多指教！！！