vue+echarts实现一个叠堆柱状图

关于一些经常用到的参考文档：这里都罗列一下,查找起来比较方便

Element UI手册：https://cloud.tencent.com/developer/doc/1270
github地址：https://github.com/ElemeFE/element

vue2.0官方网站：http://caibaojian.com/vue/guide/installation.html
element-ui官方网站：https://element.eleme.cn/#/zh-CN
Echarts官网：https://echarts.apache.org/zh/index.html

---

在项目里面，很多的时候都会遇到统计图，无论是折线图，柱状图还是饼状图，无论是vue框架，react框架，还是我们的小程序，都可以直接使用我们的百度团队开发的可视化图形框架Echarts，使用起来也比较简单粗暴，直接在项目里面安装，引入使用就是了。

1:在项目里面安装echarts

cnpm install echarts --s

2：在需要用图表的地方引入

import echarts from "echarts";

3：在template里面写一个div,用于盛饭图表的容器,可以设置一下长宽，也可以根据项目的是要做成自适应长宽高。

4：引入json格式的接口,这里可以从后端小伙伴那里拿过来，也可以自己取模拟一个数据，都是可以的。

import { getQuerycheckList } from "@/api/dashboard/healthy";

下面是json数据例子

{
    "msg": "success",
    "code": 1,
    "data": {
        "healthStat": [{
            "id": 1,
            "statTime": "2021-01-08",
            "healthPersonCount": 2,
            "notHealthPersonCount": 3
        }, {
            "id": 2,
            "statTime": "2021-01-09",
            "healthPersonCount": 5,
            "notHealthPersonCount": 6
        }, {
            "id": 3,
            "statTime": "2021-01-18",
            "healthPersonCount": 0,
            "notHealthPersonCount": 1
        }, {
            "id": 4,
            "statTime": "2021-01-21",
            "healthPersonCount": 0,
            "notHealthPersonCount": 0
        }, {
            "id": 5,
            "statTime": "2021-01-22",
            "healthPersonCount": 0,
            "notHealthPersonCount": 0
        }]
    }
}

5：具体代码，请求接口，以及对请求到的json数据进行遍历，并且赋值到上面的echarts图表的框架里面去。

效果是这样的~