场景

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

若依前后端分离版手把手教你本地搭建环境并运行项目_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 themeexport 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;}
}

SpringBoot+Vue+Echarts实现双柱体柱状图相关推荐

CC2530/ESP32+传感器+ZigBee+MQTT+MYSQL+Springboot+Vue+Echarts的老人卫生间防摔倒自动报警系统
CC2530/ESP32+传感器+ZigBee+MQTT+MYSQL+Springboot+Vue+Echarts的老人卫生间防摔倒自动报警系统写在前言运行效果展示一代版本 ESP32+MQTT ...
Springboot+Vue+Echarts实现51job大数据岗位分析数据大屏
效果图: 后端代码: 前端代码: 前后端分离开发,适合当大数据数据大屏大作业,需要源码请私信!
Vue + Echarts(v5.版本)的简单组件封装（折线图、柱状图、散点图、饼/环形图、仪表盘、雷达图）
项目中展示图表的地方很多,不想每次都写一长串的 options配置,就整合了一下常用的配置项,简单封装了一下,也能保证整个系统的图表风格统一,需要调整样式的时候也不用改很多地方 2022-11-07: ...
Echarts 双侧双表头柱状图折线图
Echarts 双侧双表头柱状图折线图带箭头区分颜色成品图片(如需折线图自行更改) 废话不多say 上代码
Vue+Echarts构建可视化大数据平台实战项目（上）粒子动效，登录界面抖动，背景图轮播★
Vue+Echarts构建可视化大数据平台实战项目(上) 前言分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就 ...
（上）Vue+Echarts构建可视化大数据平台实战项目分享（附源码）
前言分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就是:数据的展示.处理和分析.目的是借助于图形化手段,清晰有 ...
vue 雷达扫描_GitHub - suneildve/vueDataV: 基于Vue + Echarts 构建的数据可视化平台，酷炫大屏展示模板和组件库，持续更新各行各业实用模板和炫酷小组件。...
前言一个基于Vue前端框架和第三方图表库echarts构建的可视化大数据平台,通过vue项目构建.指令的灵活运用.组件封装.组件之间通信,使内部图表组件库可实现自由替换和组合. 项目中部分前端库采用 ...
Springboot+vue前后端分离考试系统
作者主页:编程指南针简介:Java领域优质创作者.CSDN博客专家 Java项目.简历模板.学习资料.面试题库.技术互助文末获取源码项目编号:BS-XX-104 指南针考试系统是一个多角色在线 ...
使用Docker部署SpringBoot+Vue博客系统
点击上方好好学java ,选择星标公众号重磅资讯.干货,第一时间送达今日推荐:硬刚一周,3W字总结,一年的经验告诉你如何准备校招! 个人原创100W+访问量博客:点击前往,查看更多在今年年 ...

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

场景

实现

SpringBoot+Vue+Echarts实现双柱体柱状图相关推荐

最新文章

热门文章