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>


效果是這樣的~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章