若依分离版 —引入echart连接Springboot后端

1. vue引入echart

(1)首先安装ECharts库。可以通过npm

npm install echarts --save

(2)在vue页面中添加一个容器元素来显示图表

<el-card class="mt20"><div id="ha" ref="main"></div>
</el-card>

(3)在vue页面中的script引入echart,使用import * as echarts from 'echarts'

并且连接后端数据

<script>
import * as echarts from 'echarts'
import { getlineChartData} from "@/api/echartdata";
export default {name: "Index",data() {return {};},mounted() {//加载后初始化图表this.initEcarts();},methods: {initEcarts() {// 初始化echarts实例let  myChart = echarts.init(this.$refs.main);getlineChartData().then(res => {console.log(res);console.log(res.axisData);console.log(res.seriesData1);console.log(res.seriesData2);let option = {title: {text: '每天数据'},//鼠标悬浮显示数字tooltip: {trigger: 'axis',axisPointer: {type: 'cross',label: {backgroundColor: '#6a7985'}}},legend: {data: ['联盟广告1', '联盟广告2']},xAxis: [{type: 'category',data: res.axisData,}],yAxis: [{type: 'value'}],series: [{name: '联盟广告1',type: 'line',data: res.seriesData1,},{name: '联盟广告2',type: 'line',data: res.seriesData2,}]};if (option && myChart.setOption) {// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);}});}}
};
</script>
(5)样式
<style scoped lang="scss">
#ha {width: 80%;height: 360px;}
</style>
2. 后端Controller模拟接口
@GetMapping("/lineChartData")
public Map<String, Object> getLineChartData() {Map<String, Object> model = new LinkedHashMap<>();
model.put("axisData", new String[]{"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"});
model.put("seriesData1", new Integer[]{120, 132, 101, 134, 190, 130, 120});
model.put("seriesData2", new Integer[]{220, 232, 101, 234, 290, 330, 220});
return model;
}
3. 后端查询数据

定义 :

public class EchartCount {public String name;public String count;

}

controller内容如下:

    @GetMapping("/lineChartData")public Map<String, Object> getLineChartData() {List<EchartCount> saimaCountList=tEchartServcie.getLiXiangData();Map<String, Object> model = new LinkedHashMap<>();model.put("axisData",    saimaCountList.stream().map(EchartCount::getName).collect(Collectors.toList()));model.put("seriesData1", saimaCountList.stream().map(EchartCount::getCount).collect(Collectors.toList()));model.put("seriesData2", return model;}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/787721.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

六、保持长期高效的七个法则(二)Rules for Staying Productive Long-Term(2)

Rule #5 - If your work changes, your system should too. 准则五&#xff1a;如果你的工作变了&#xff0c;你的系统也应该改变。 For some, work will be consistent enough to not need major changes.You simply stick to the same system and you’ll get the results y…

fbx smpl转换

目录 3.7 3.8版本&#xff1a; c sdk 3.9 自己编译 下面的库和代码结合 测试ok 大神编译了各个版本 smpl转fbx windows 可行代码 3.7 3.8版本&#xff1a; https://github.com/Shiiho11/FBX-Python-SDK-for-Python3.x c sdk vs2019 https://www.autodesk.com/develop…

openGauss 分区

分区 可获得性 本特性自openGauss 1.1.0版本开始引入。 特性简介 数据分区是在一个节点内部对数据按照用户指定的策略做进一步的水平分表&#xff0c;将表按照指定范围划分为多个数据互不重叠的部分。 客户价值 对于大多数用户使用场景&#xff0c;分区表和普通表相比具有…

【Spring】SpringBoot整合MybatisPlus的基本应用

&#x1f4dd;个人主页&#xff1a;哈__ 期待您的关注 一、MybatisPlus简介 先来看一下官方的简介吧。 MyBatis-Plus &#xff08;简称 MP&#xff09;是一个 MyBatis的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为 简化开发、提高效率而生。Myb…

安卓Android 架构模式及UI布局设计

文章目录 一、Android UI 简介1.1 在手机UI设计中&#xff0c;坚持的原则是什么1.2 安卓中的架构模式1.2.1 MVC (Model-View-Controller)设计模式优缺点 1.2.2 MVP(Model-View-Presenter)设计模式MVP与MVC关系&#xff1a; 1.2.3 MVVM(Model—View—ViewModel ) 设计模式1.2.4 …

关于 C/C++ 1Z(17)开源项目 openppp2 协同程式切换工作流

下述为开源项目 openppp2&#xff08;github&#xff09;构建工作在 C/C 17 的 stackful 有栈协同程式的工作流切换示意图&#xff1a; 在 openppp2 之中采用人工手动方式管理协同程式之间的切换&#xff0c;每个中断过程只是保存线程栈信息&#xff08;如寄存器、当前#PC EIP&…

Python PyQt5——QPainter 绘图用法与代码示例

QPainter是Qt框架中的一个类&#xff0c;用于在Qt基于应用程序中进行绘图和绘制图形。 使用QPainter&#xff0c;可以绘制各种形状&#xff0c;如线条、矩形、椭圆和多边形&#xff0c;以及文本和图像。它提供了用于指定颜色、画笔、笔刷和变换的方法。 QPainter 在 PyQt5 中…

Deferred library xxx was not loaded

Deferred 延迟修饰词作用下的文件库尚未完成载入

总结jvm中GC机制(垃圾回收)

前言 本篇博客博主将介绍jvm中的GC机制&#xff0c;坐好板凳发车啦~~ 一.GC相关 1.1回收栈内存 对于虚拟机栈&#xff0c;本地方法栈这部分区域而言&#xff0c;其生命周期与相关线程相关&#xff0c;随线程而生&#xff0c;随线程而灭。并且这三个区域的内存分配与回收具有…

maya安装笔记

目录 linux系统安装 linux系统安装 2020 Ubuntu安装maya2020全过程以及遇到的问题_ubuntu maya安装包-CSDN博客 下载地址&#xff1a; https://up.autodesk.com/2020/MAYA/18BBDBD5-9A15-4095-8D5E-089938EB8E24/Autodesk_Maya_2020_1_ML_Linux_64bit.tgz 参考&#xff1a…

成熟在用的二级医院手术麻醉系统源码 医疗管理系统源码 自主版权

成熟在用的二级医院手术麻醉系统源码 医疗管理系统源码 自主版权 手术麻醉临床信息系统有着完善的临床业务功能&#xff0c;能够涵盖整个围术期的工作&#xff0c;能够采集、汇总、存储、处理、展现所有的临床诊疗资料。通过该系统的实施&#xff0c;能够规范麻醉科的工作流程…

jnpf3.6私有化部署

文件内容 project web > 特别说明&#xff1a;源码、JDK、MySQL、Redis等安装或存放路径禁止包含中文、空格、特殊字符等## 一 技术栈- 主框架&#xff1a;Spring Boot Spring Framework - 持久层框架&#xff1a;MyBatis-Plus - 数据库连接池&#xff1a;Alibaba Druid -…

OpenCV与AI深度学习 | 实战 | YOLOv8自定义数据集训练实现手势识别 (标注+训练+预测 保姆级教程)

本文来源公众号“OpenCV与AI深度学习”&#xff0c;仅用于学术分享&#xff0c;侵权删&#xff0c;干货满满。 原文链接&#xff1a;实战 | YOLOv8自定义数据集训练实现手势识别 (标注训练预测 保姆级教程) 0 导 读 本文将手把手教你用YoloV8训练自己的数据集并实现手势识别…

小波包变换(WPT)和OMP实现压缩感知

压缩感知(Compressed Sensing)是一种信号处理理论,它可以从非常少量和不完整的采样中恢复信号,并且在图像处理、医学成像、通信等领域有着广泛的应用。下面是压缩感知算法的一般实现步骤和细节: 1. 压缩感知基本原理 压缩感知的基本思想是,信号通常具有一种稀疏性或者低…

IDEA中连接SQLserver数据库(DataGrip相同连接)

IDEA中连接SQLserver数据库(DataGrip相同连接) 1. 打开IDEA-database组件 2. 新建SQL server连接 3. 填写信息进行连接 填写连接名称&#xff0c;连接主机IP&#xff0c;端口&#xff0c;默认端口1433&#xff0c;数据库用户名密码&#xff0c;默认数据库用户名是sa 第一次连接…

2024最新软件测试【测试理论+ 接口自动化测试】面试题(内附答案)

一、测试理论 3.1 你们原来项目的测试流程是怎么样的? 我们的测试流程主要有三个阶段&#xff1a;需求了解分析、测试准备、测试执行。 1、需求了解分析阶段 我们的 SE 会把需求文档给我们自己先去了解一到两天这样&#xff0c;之后我们会有一个需求澄清会议&#xff0c; …

智能编码AI软件

目录 通义灵码 通义灵码 基于通义大模型&#xff0c;提供代码智能生成、研发智能问答能力 基于海量研发文档、产品文档、通用研发知识、阿里云的云服务文档和 SDK/OpenAPI 文档等进行问答训练&#xff0c; 为你答疑解惑&#xff0c;助你轻松解决研发问题。个人免费使用&#x…

每日OJ题_回文串dp①_力扣647. 回文子串

目录 力扣647. 回文子串 解析代码 力扣647. 回文子串 647. 回文子串 难度 中等 给你一个字符串 s &#xff0c;请你统计并返回这个字符串中 回文子串 的数目。 回文字符串 是正着读和倒过来读一样的字符串。 子字符串 是字符串中的由连续字符组成的一个序列。 具有不同…

Python实现逻辑回归(Logistic Regression)

Python实现逻辑回归(Logistic Regression) 1. 背景介绍 逻辑回归是一种广泛应用于分类问题的统计方法&#xff0c;特别是在二分类问题中。它是一种线性回归的扩展&#xff0c;用于预测目标变量的概率。逻辑回归在许多领域都有广泛的应用&#xff0c;如医疗诊断、金融欺诈检测…

LLMs 可能在 2 年内彻底改变金融行业

在艾伦图灵研究所&#xff08;The Alan Turing Institute&#xff09;最新的一项研究中&#xff0c;我们看到了大型语言模型&#xff08;Large Language Models&#xff0c;LLMs&#xff09;的一种可能性。它有望通过检测欺诈行为、生成财务洞察以及自动化客户服务&#xff0c;…