關於一些經常用到的參考文檔:這裏都羅列一下,查找起來比較方便
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>
效果是這樣的~