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

叁歲伎倆 2022-11-07 05:50 257阅读 0赞

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

Element UI手册：[https://cloud.tencent.com/developer/doc/1270][https_cloud.tencent.com_developer_doc_1270]  
github地址：[https://github.com/ElemeFE/element][https_github.com_ElemeFE_element]

vue2.0官方网站：[http://caibaojian.com/vue/guide/installation.html][http_caibaojian.com_vue_guide_installation.html]  
element-ui官方网站：[https://element.eleme.cn/\#/zh-CN][https_element.eleme.cn_zh-CN]  
Echarts官网：[https://echarts.apache.org/zh/index.html][https_echarts.apache.org_zh_index.html]

--------------------

在项目里面，很多的时候都会遇到统计图，无论是折线图，柱状图还是饼状图，无论是vue框架，react框架，还是我们的小程序，都可以直接使用我们的百度团队开发的可视化图形框架Echarts，使用起来也比较简单粗暴，直接在项目里面安装，引入使用就是了。

1:在项目里面安装echarts

cnpm install echarts --s

![73ba60e0e47c146b92e98150608abc12.png][]

2：在需要用图表的地方引入

import echarts from "echarts";

![2efcf7e40b77b1b8d1b6b0bd44b53f81.png][]

3：在template里面写一个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>

效果是这样的~

![61f24208fbfede14889f2ab28fe4667c.png][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]

[https_cloud.tencent.com_developer_doc_1270]: https://links.jianshu.com/go?to=https%3A%2F%2Fcloud.tencent.com%2Fdeveloper%2Fdoc%2F1270
[https_github.com_ElemeFE_element]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FElemeFE%2Felement
[http_caibaojian.com_vue_guide_installation.html]: https://links.jianshu.com/go?to=http%3A%2F%2Fcaibaojian.com%2Fvue%2Fguide%2Finstallation.html
[https_element.eleme.cn_zh-CN]: https://links.jianshu.com/go?to=https%3A%2F%2Felement.eleme.cn%2F%23%2Fzh-CN
[https_echarts.apache.org_zh_index.html]: https://links.jianshu.com/go?to=https%3A%2F%2Fecharts.apache.org%2Fzh%2Findex.html
[73ba60e0e47c146b92e98150608abc12.png]: /images/20221023/5c6aa839ad034b0781d079cf1e5e6d12.png
[2efcf7e40b77b1b8d1b6b0bd44b53f81.png]: /images/20221023/2b2d22e3368145bcbca8efd8055259e5.png
[61f24208fbfede14889f2ab28fe4667c.png]: /images/20221023/9f408a0759ce462998e38798e9989cb1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: /images/20221023/73eda7bb3c2f4130acd5b96836a348de.png