vue+echarts实现一个叠堆柱状图

王小婷

发布于 2021-03-05 11:18:15

1.6K0

发布于 2021-03-05 11:18:15

文章被收录于专栏：编程微刊

关于一些经常用到的参考文档：这里都罗列一下,查找起来比较方便

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>

效果是这样的~