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,用於盛飯圖表的容器,能夠設置一下長寬，也能夠根據項目的是要作成自適應長寬高。

<div id="main" style="width: 100%; height: 400px"></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圖表的框架裏面去。

<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() {
    //健康看板統計接口定義
    this.getQuerycheckList();
  },
  methods: {
    //健康看板統計接口定義
    getQuerycheckList() {
      const params = {
        startTime: "2021-01-08",
        stopTime: "2021-02-01",
      };
      this.dataLoading = true;
      getQuerycheckList(params).then((res) => {
        console.log("查詢健康看板統計接口定義接口", res);
        //統計總數
        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: {
            // 座標軸指示器，座標軸觸發有效
            type: "shadow", // 默認爲直線，可選爲：'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>

效果是這樣的~