SpringBoot+Vue+Echarts实现双柱体柱状图

霸道流氓气质 2021-11-25 19:25:21
SpringBoot vue 实现 Echarts springboot+vue+echarts

场景

 

若依前后端分离版本地搭建开发环境并运行项目的教程:

若依前后端分离版手把手教你本地搭建环境并运行项目_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面搭建架构的基础上,实现使用Echarts获取后台数据并显示双柱体的柱状图。

这里有两个对象,每个对象都有身高和体重两个属性。

注:

博客:
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、若依框架已经集成了Echarts不用再重复引进。

新建组件BarChart.vue

​
<template>
  <div :style="{ height: '200px', width: '400px' }" />
</template>
<script>
import echarts from "echarts";
import request from '@/utils/request'
require("echarts/theme/macarons"); // echarts theme
export default {
  name: "twoZhuBarChart",
  data() {
    return {
      typeData: [
            { product: "公众号", 体重: 43, 身高: 85 },
            { product: "霸道的程序猿", 体重: 43, 身高: 85 },
          ],
    };
  },
  created() {
    this.getList().then((response) => {
      this.typeData[0].体重=response.data[0].weight;
      this.typeData[0].身高=response.data[0].height;
      this.typeData[1].体重=response.data[1].weight;
      this.typeData[1].身高=response.data[1].height;
      this.initChart(this.typeData);
    });
  },
  methods: {
    getList() {
      return request({
        url: "/echarts/getTwoZhuData",
        method: "get",
      });
    },
    initChart(typeData) {
      this.chart = echarts.init(this.$el, "macarons");
      this.chart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器,坐标轴触发有效
            type: "shadow", // 默认为直线,可选为:'line' | 'shadow'
          },
        },
        grid: {
          top: 10,
          left: "2%",
          right: "2%",
          bottom: "3%",
          containLabel: true,
        },
        legend: {
          //图例
          data: ["身高", "体重"],
        },
        xAxis: [
          {
            type: "category",
            data: ["公众号", "霸道的程序猿"],
            axisPointer: {
              type: "shadow",
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位:(kg/cm)",
            min: 0,
            max: 150,
            interval: 10,
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        dataset: {
          source: typeData,
        },
        series: [
          {
            name: "身高",
            type: "bar",
            barWidth: "40%",
          },
          {
            name: "体重",
            type: "bar",
            barWidth: "40%",
          },
        ],
      });
    },
  },
};
</script>
​

要实现给柱状图赋值,需要设置数据源为类似

      typeData: [
            { product: "公众号", 体重: 43, 身高: 85 },
            { product: "霸道的程序猿", 体重: 43, 身高: 85 },
          ],

的对象数组格式。

2、上面页面加载完之后调用后台接口,后台接口实现

package com.ruoyi.web.controller.system;
import com.ruoyi.common.core.controller.BaseController;
import com.ruoyi.common.core.domain.AjaxResult;
import com.ruoyi.system.domain.TwoZhuModel;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.List;
@RestController
@RequestMapping("/echarts")
public class EchartsController extends BaseController
{
    @GetMapping("/getTwoZhuData")
    public AjaxResult getTwoZhuData()  {
        List<TwoZhuModel> resultMap = new ArrayList<TwoZhuModel>();
        TwoZhuModel zhangsan=new TwoZhuModel();
        zhangsan.setName("公众号");
        zhangsan.setHeight(100);
        zhangsan.setWeight(50);
        TwoZhuModel lisi = new TwoZhuModel();
        lisi.setName("霸道的程序猿");
        lisi.setHeight(66);
        lisi.setWeight(25);
        resultMap.add(zhangsan);
        resultMap.add(lisi);
        return AjaxResult.success(resultMap);
    }
}

后台构造两个对象,每个对象有两个属性,对象实体声明

package com.ruoyi.system.domain;
import com.ruoyi.common.annotation.Excel;
import com.ruoyi.common.core.domain.BaseEntity;
import org.apache.commons.lang3.builder.ToStringBuilder;
import org.apache.commons.lang3.builder.ToStringStyle;
public class TwoZhuModel extends BaseEntity
{
    private String name;
    private int weight;
    private int height;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getWeight() {
        return weight;
    }
    public void setWeight(int weight) {
        this.weight = weight;
    }
    public int getHeight() {
        return height;
    }
    public void setHeight(int height) {
        this.height = height;
    }
}

版权声明
本文为[霸道流氓气质]所创,转载请带上原文链接,感谢
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/121532203

  1. Fonction de flèche JavaScript
  2. JavaScript - déconstruction assignations
  3. Building CentOS 7.6 with Linux
  4. JavaScript - type d'emballage
  5. linux deepin/ubuntu安装flameshot火焰截图
  6. JavaScript - encapsulation et héritage (deux)
  7. JavaScript JS method for writing 99 multiplication table
  8. 從零開始學java - 第二十五天
  9. Apprendre Java à partir de zéro - jour 25
  10. Les voitures d'hiver, les voitures électriques et les voitures à essence ne sont pas les mêmes?
  11. JavaScript - ceci pointe vers le problème
  12. Copie JavaScript
  13. Spring boot quickly integrates swagger
  14. linux deepin/ubuntu安裝flameshot火焰截圖
  15. Capture d'écran de flamme de l'installateur de flamme Linux deepin / Ubuntu
  16. Jquery DOM et jquery, fonctions d'entrée (bases)
  17. Méthode d'instance jquery
  18. Méthode et démonstration de code dans l'interface de liste en Java
  19. 【错误记录】Java 中 ArrayList 排序 ( 使用 Comparator 接口时注意 compare 返回值是 -1 和 +1 )
  20. Démarrage du Zookeeper
  21. Java oom Cognition
  22. Java 开发者最困惑的四件事,值得一看!,BAT面试文档
  23. Java 将两个对象list里面的 某个字段值抽取到一个list里,java选择排序原理
  24. Java 多线程 —— 生产者消费者问题,从基础到深入案例
  25. Java 中设计模式 之 工厂模式,java反射机制的底层原理
  26. 【錯誤記錄】Java 中 ArrayList 排序 ( 使用 Comparator 接口時注意 compare 返回值是 -1 和 +1 )
  27. 【 enregistrement des erreurs 】 tri ArrayList en Java (Notez que les valeurs de retour de comparaison sont - 1 et + 1 lors de l'utilisation de l'interface de comparaison)
  28. Pourquoi Xiaopeng P5 est - il devenu un grand succès dans le cercle? Le Salon de l'automobile de Guangzhou montre encore des compétences polyvalentes
  29. Java 開發者最困惑的四件事,值得一看!,BAT面試文檔
  30. Les quatre choses les plus déroutantes pour les développeurs Java valent la peine d'être regardées! Document d'entrevue sur les MTD
  31. k8s-Pod污点与容忍
  32. k8s-Pod污点与容忍
  33. K8s POD Contamination and Tolerance
  34. K8s POD Contamination and Tolerance
  35. mysql常用语句——GROUP BY和HAVING
  36. Spring boot quickly integrates swagger
  37. mysql常用語句——GROUP BY和HAVING
  38. MySQL Common statements - group by and having
  39. Le défi du pinceau leetcode - Javascript: 110. Arbre binaire équilibré
  40. [notes d'apprentissage de première ligne] day44: XMLHttpRequest
  41. java调用RFC延长调用时间
  42. java調用RFC延長調用時間
  43. Java call RFC prolonge le temps d'appel
  44. Le modèle d'usine du modèle de conception en Java, le principe sous - jacent du mécanisme de réflexion Java
  45. Java Multithreading - producer Consumer issues, From Basic to Deep case
  46. OushuDB 安装与升级之安装 HDFS
  47. OushuDB 安装与升级之安装 Zookeeper
  48. Java-String-对象,你真的了解了吗?,mysql教程入门到精通
  49. Linux引导过程与服务控制
  50. Java-8新特性:学习如何使用Lambda表达式(一,线程池的实现原理
  51. Java 读写锁 ReentrantReadWriteLock 源码分析,headfirstjavapdf百度云
  52. JAVA 获取系统日期时间,初级java开发常见的面试题
  53. MySQL judges the salary changes based on the existing data
  54. k8s-Pod污點與容忍
  55. Java extrait une valeur de champ de deux listes d'objets dans une liste, et Java sélectionne le principe de tri
  56. java中ArrayList应用实例,阿里巴巴java面试流程
  57. Java个人技术知识点总结(框架篇),kafka聊天服务器架构
  58. JavaWeb快速入门--Servlet(2),java程序设计精编教程第三版上机实践
  59. JavaWeb - 文件的上传,核心API的使用,文件下载,附学习笔记 面试整理 进阶书籍
  60. Netty原理:pipeline