在项目里面，很多的时候都会遇到统计图，无论是折线图，柱状图还是饼状图，无论是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>
效果是这样的~
