vue项目--后台管理系统（day10）携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，[

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第15天，点击查看活动详情

上一篇文章中我们完成了两个card品牌销量卡片的编写，接下里我们将使用Apache ECharts来完成我们的折线图，饼状图以及柱状图。

首先Apache ECharts的引入 :

一个基于JavaScript的开源可视化图标库，官网首页链接如下：echarts.apache.org/zh/index.ht…
我们点击链接后点击快速入门，点击获取ECharts
我们可以通过npm获取ECharts,在我们的项目终端窗口中输入

npm install echarts --save

等待他下载完成，如果下载缓慢的话我们可以使用淘宝镜像cnpm或者yarn进行安装，可能会快一些

下载成功之后我们点击官网的在项目中引入ECharts，可以看到我们引入ECharts只需要在目标文件里面写上如下代码

import * as echarts from 'echarts;

页面往下拉也有按需引入，如果你想要项目体积减小的话建议按需引入，但我们这只是个项目练习，我就选择了全局引入。

在项目中使用ECharts

在我们的项目中有折线图，柱状图以及饼状图，这三个图里面的具体数据我们后面会通过mock进行模拟数据的编写，这里我们先把ECharts先展示出来，数据后面再展示，图标的具体代码如下所示：

 <div class="graph">
        <el-card style="height:260px">
        <div style="height:240px" ref="userEcharts"></div>
        </el-card>
        <el-card style="height:260px">
        <div style="height:240px" ref="videoEcharts"></div>
        </el-card>
      </div>

但是在这之前我们需要在script里面初始化echats,具体的代码如下图所示：

初始化完成之后我们的数据就展示在我们的页面上了，这个ECharts功能非常强大，在我们的页面刚加载时，有一个动画效果展示我们的图标，使得用户体验感增加，后续会介绍通过引入mock来模拟数据，这些图标里的数据都是本地通过mock模拟出来的，还有通过axios封装来获取到这些图标数据的。