關(guān)于一些經(jīng)常用到的參考文檔：這里都羅列一下,查找起來(lái)比較方便

Element UI手冊(cè)：https://cloud.tencent.com/developer/doc/1270
github地址：https://github.com/ElemeFE/element

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

在項(xiàng)目里面，很多的時(shí)候都會(huì)遇到統(tǒng)計(jì)圖，無(wú)論是折線圖，柱狀圖還是餅狀圖，無(wú)論是vue框架，react框架，還是我們的小程序，都可以直接使用我們的百度團(tuán)隊(duì)開(kāi)發(fā)的可視化圖形框架Echarts，使用起來(lái)也比較簡(jiǎn)單粗暴，直接在項(xiàng)目里面安裝，引入使用就是了。

1:在項(xiàng)目里面安裝echarts

cnpm install echarts --s

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

import echarts from "echarts";

3：在template里面寫(xiě)一個(gè)div,用于盛飯圖表的容器,可以設(shè)置一下長(zhǎng)寬，也可以根據(jù)項(xiàng)目的是要做成自適應(yīng)長(zhǎng)寬高。

 <div id="main" style="width: 100%; height: 400px"></div>

4：引入json格式的接口,這里可以從后端小伙伴那里拿過(guò)來(lái)，也可以自己取模擬一個(gè)數(shù)據(jù)，都是可以的。

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

下面是json數(shù)據(jù)例子

{
    "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：具體代碼，請(qǐng)求接口，以及對(duì)請(qǐng)求到的json數(shù)據(jù)進(jìn)行遍歷，并且賦值到上面的echarts圖表的框架里面去。

<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <el-row
        style="background: #fff; padding: 16px 16px 0; margin-bottom: 32px"
      >
        <div id="main" style="width: 100%; height: 400px"></div>
      </el-row>
    </div>
  </div>
</template>
<script>
import { getQuerycheckList } from "@/api/dashboard/healthy";
import echarts from "echarts";
export default {
  name: "",
  data() {
    return {
      charts: "",
      arr1: [],
      arr2: [],
      arr3: [],
    };
  },
  created() {
    //健康看板統(tǒng)計(jì)接口定義
    this.getQuerycheckList();
  },
  methods: {
    //健康看板統(tǒng)計(jì)接口定義
    getQuerycheckList() {
      const params = {
        startTime: "2021-01-08",
        stopTime: "2021-02-01",
      };
      this.dataLoading = true;
      getQuerycheckList(params).then((res) => {
        console.log("查詢健康看板統(tǒng)計(jì)接口定義接口", res);
        //統(tǒng)計(jì)總數(shù)
        this.total=res.data;
        this.arr1 = res.data.healthStat.map((a) => a.statTime);
        this.arr2 = res.data.healthStat.map((a) => a.healthPersonCount);
        this.arr3 = res.data.healthStat.map((a) => a.notHealthPersonCount);
        // this.opinionData =response.data.healthStat;
        this.drawLine("main");
        this.dataLoading = false;
      });
    },
    drawLine(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
            type: "shadow", // 默認(rèn)為直線，可選為：'line' | 'shadow'
          },
        },
        legend: {
          data: ["健康", "不健康"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.arr1,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "健康",
            type: "bar",
            itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: "#49E8B4" // 0% 處的顏色
                            }, {
                                offset: 0.6,
                                color: "#49E8B4" // 60% 處的顏色
                            }, {
                                offset: 1,
                                color: "#3CB796" // 100% 處的顏色
                            }], false)
                        }
                    },
            data: this.arr2,
          },

          {
            name: "不健康",
            type: "bar",
            itemStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                offset: 0,
                                color: "#F9BB84" // 0% 處的顏色
                            }, {
                                offset: 0.6,
                                color: "#F9BB84" // 60% 處的顏色
                            }, {
                                offset: 1,
                                color: "#F487B9" // 100% 處的顏色
                            }], false)
                        }
                    },
            data: this.arr3,
          },
        ],
      });
    },
  },
};
</script>

效果是這樣的~