SpringBoot+Echarts+SpringDataJpa实现请求后台数据显示饼状图和条形图

最新推荐文章于 2022-11-29 18:52:51 发布
最新推荐文章于 2022-11-29 18:52:51 发布
阅读量1k 收藏 7
点赞数
文章标签： SpringBoot+Echarts+SpringDataJ
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/vnvmvmv/article/details/103827538
版权

           SpringBoot+Echarts+SpringDataJpa实现请求后台数据显示饼状图和条形图   

 创建Springboot项目

绘制一个简单的图表

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

前端显示页面

条形图：bar.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts</title>
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;position:absolute;top:50%;left: 50%;margin-top: -200px;margin-left: -300px;"></div>

<script type="text/javascript">
    $(document).ready(function() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var names=[];
        var nums=[];
        //数据加载完之前先显示一段简单的loading动画
        myChart.showLoading();
        $.ajax({
            type : "post",
            async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : "/EcharsShow",    //请求发送到dataActiont处
            data : {},
            dataType : "json",        //返回数据形式为json
            success : function(result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    for(var i=0;i<result.length;i+&
最低0.47元/天 解锁文章
*yu*
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SpringBoot+Vue+Echarts实现多条折线图
weixin_44960905的博客
08-15 1697
从txt中读取数据，并在前端进行展示
Spring Boot2.x版本使用ECharts动态绘制按时间段显示统计数据
C_AJing的博客
08-18 1748
ECharts简介：ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 官网地址：https://echarts.apache.org/zh/index.html 接下来，创建一个Spring Boot项目，使用ECharts实现按指定时间段和时间间隔内显示统计数据的
使用Echarts+springBoot +Mybatisplus连接数据库实现简单树状图和扇形图
weixin_61307867的博客
11-29 1338
使用Echarts+springBoot +Mybatisplus连接数据库实现简单树状图和扇形图
echarts多个折线图
Ych_cxy的博客
11-07 2533
option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, tooltip: { trigger: ...
SpringBoot+Vue整合E chart图表
活在当下的博客
06-16 1178
1.ECharts： 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。1.环境配置2.后端传数据3.数据绑定，实现数据可视化下载 引入 2.后端传数据 通过axios请求数据，并绑定tableDate 3.数据绑定，实现数据可视化 前端完整代码，这里用了Element Ui，initCharts()这个方法实现数据的绑定和图标的展示...
基于Python和条形图实现的世界杯数据可视化源码+详细项目说明+数据.tar
11-16
基于Python和条形图实现的世界杯数据可视化源码+详细项目说明+数据.tar 1 前言 要说时下最热门的活动，非2022卡塔尔世界杯莫属了。正好借此次机会，回顾一下过往的世界杯，就其历史数据做一些数据的呈现和分析工作...
基于SpringBoot + Mybatis + Thymeleaf + Redis + MongoDB + MySQL开发的商
05-09
：展示当前月收入及其环比（环比=（当前月收入 - 上个月收入）/ 上个月收入）、当前月订单数及其环比、网站访问量、当前月退单数及其环比、以条形图的形式(使用jquery插件）展示最近30天每天的收入和订单数 ...
可视化模板一：用echarts实现渐变条形+折线复合图
01-20
模板一：用echarts实现渐变条形+折线复合图
基于springboot+vue的音乐播放网站的设计与实现参考论文
09-22
在当下快节奏的生活环境下，人们的压力变得越来越大，为了缓解这一压力，人们在闲暇时间通过网络来娱乐放松自己，享受当下...统计分析：通过饼状图和条形图的形式来统计音乐网站中用户的性别比例和歌曲的类型，并将歌
毕业设计，基于Springboot+MySQL+hadoop+Vue+ElementU开发的疫情大数据分析Python爬取数据
02-04
学长从各省累计确诊人数随时间增长的态势以及空间分布随时间增长的态势入手，利用所收集的数据将各省累计确诊人数的时空分布用地图、折线图、堆叠条形图的形式呈现出来，从总体态势进行大致分析，然后再通过在不同...
Spring Boot 集成JFreeChart 生成图表
程序猿踩坑集锦
09-07 1136
Spring Boot 集成JFreeChart 生成饼状图，这是一个demo，开发时根据需要进行自定义可抽取工具类使用。
【SpringBoot学习】16、SpringBoot使用Echars实现数据可视化
Tellsea
06-15 3743
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。 ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可...
echarts 折线图——双折线图（多条折线也可以）
qq_40269801的博客
12-23 8372
option = { tooltip : { trigger : 'axis', formatter: '{b0}<br/>{a0}: {c0}万元<br />{a1}: {c1}万元', //指示器 axisPointer : { type : 'line', ...
echarts绘制多条折线图
热门推荐
qq_45018844的博客
11-11 1万+
效果 首先引入echarts可以看这篇文章哦~ 如何在项目中使用echarts 1.定义一个div 这里的height就是y轴的高度了~ <div style="width: 100%; height: 600px" ref="chart"></div> 2.定义一个方法init 在mounted引用 mounted() { this.init() }, 3.定义数据 这个一般是后台给的接口的数据，我这里是模拟的哦~ let lineData = {
Spring Boot笔记-echarts的使用及数据的修改
IT1995的博客
06-12 5324
目录 基本概念 代码及演示 基本概念 这里2D的一般使用这个js文件：echarts.js 3D的一般使用这个js文件：echarts-gl.min.js thymeleaf这个模版引擎，可以返回一个div，如下所示： //刷新雷达图 @GetMapping("/refreshRadarGraph/{value}") public String ...
SpringBoot+Echarts实现请求后台数据显示饼状图，条形图+poi实现导入导出exec表
qq_64688786的博客
11-29 1009
SpringBoot+Echarts实现请求后台数据显示饼状图，条形图+poi实现导入导出exec表
基于OpenCV的人脸模型训练
最新发布
06-23
开发环境PyCharm Community Edition
flask+mysql+echarts实现数据可视化
06-28
### 回答1： 使用Flask和MySQL来实现数据可视化，可以通过以下步骤来实现： 1. 使用Flask来搭建Web应用程序，根据需要设置路由和视图函数。 2. 使用MySQL数据库来存储数据，建立需要的数据表，并通过Flask的SQLAlchemy库进行数据库交互。 3. 使用Echarts库来实现数据可视化，通过Flask的路由将需要展示的数据传递给前端页面，并将数据绑定到Echarts图形中进行展示。 通过上述步骤，就可以实现Flask+MySQL+Echarts的数据可视化。 ### 回答2： Flask是一个用Python编写的轻量级Web应用框架；MySQL是一种关系型数据库；而Echarts是一个由百度公司开发的数据可视化库。将Flask、MySQL和Echarts组合使用，可以实现数据的可视化展示，使数据更具可读性和可理解性。 实现步骤如下： 1.搭建Flask框架，建立路由，用于数据传输。 2.连接MySQL数据库，使用Python的pymysql模块连接数据库。 3.从MySQL数据库中读取所需的数据，并将它们存入Python中的数据结构中，如字典或列表，然后将其传回到Flask应用中。 4.编写Echarts图表，并将数据插到其中。可以选择线形图、条形图、饼图、地图等不同的图表类型，并根据需求自定义颜色、字体、动画效果等。 5.最后将Echarts图表嵌入到Flask应用中，使其显示在网页上，供用户查看并互动。 对于使用Flask、MySQL和Echarts实现数据可视化的具体步骤，我将稍微详细说明一下。 一、搭建Flask框架 Flask是一个微型框架，采用了Werkzeug工具箱和Jinja2模板引擎。我们需要安装Flask和相关的依赖项，建立Flask应用程序，然后建立路由，使得我们可以传输数据到和从Flask应用程序中。 二、连接MySQL数据库 我们可以使用比Python标准库中的MySQLdb更流行的pymysql模块来连接我们的MySQL数据库。我们需要提供数据库的用户名和密码，以及主机名、端口、要使用的数据库等其他相关信息。连接后，可以通过Python执行SQL查询或更新，以读取或写入数据。 三、读取数据并传回Flask应用程序： 使用Python代码向数据库查询所需数据，从结果中提取所需信息，然后返回组成数据结构，如列表或字典。在Flask应用程序中设置一个路由，可以识别来自前端JavaScript的HTTP GET请求，并将响应作为JSON格式数据发送回前端。 四、编写Echarts图表 我们可以使用Echarts图表库中的各种类型的图表，用于不同的数据可视化需求。我们可以选择线形图、条形图、散点图、饼图、地图等。Echarts提供了一个函数接口，可以直接把数据传入图表，然后用JavaScript来呈现。 五、将Echarts图表嵌入到Flask应用中 将Echarts图表嵌入到Flask应用程序中，需要在前端JavaScript中调用我们已设置好的路由，向Flask应用程序请求数据，并在响应到达时调用Echarts图表组件来显示数据。 　　 综上所述，使用Flask、MySQL和Echarts结合实现数据可视化，可以让数据更生动形象，让用户对数据有更好的理解和掌握，进而提升整个数据应用的效率和可靠性。 ### 回答3： Flask是一个非常流行的Python Web框架，可以用来搭建Web应用程序。MySQL是一个开源、轻量级的关系型数据库管理系统。而echarts是一个非常强大的JavaScript图表库，可以用来展示各种数据。 通过将这三者结合起来，可以实现数据可视化，即将MySQL中的数据通过Flask进行处理和展示，并使用echarts将这些数据以图表的方式呈现出来。 实现该过程的基本步骤如下： 1.使用Python连接MySQL数据库并读取数据。 2.使用Flask框架编写Web应用程序，包括提供数据的API接口、前端页面等。 3.在前端页面中使用echarts库进行数据可视化展示。可以绘制多种类型的图表，如折线图、柱状图、饼图等，根据数据的具体情况选择合适的图表类型。 具体实现步骤如下： 1.安装MySQL和Flask库，分别使用以下命令： pip install mysql-connector-python pip install Flask 2.编写Python代码，连接MySQL数据库，并读取需要展示的数据。代码示例： import mysql.connector cnx = mysql.connector.connect(user='用户名', password='密码', host='主机名', database='数据库名') cursor = cnx.cursor() query = "SELECT * FROM 表名" cursor.execute(query) data = cursor.fetchall() 3.编写Flask应用程序，提供API接口。代码示例： from flask import Flask, jsonify app = Flask(__name__) @app.route("/data") def get_data(): # 数据读取及处理 return jsonify(data) if __name__ == "__main__": app.run() 4.编写前端页面，使用echarts库进行数据可视化展示。代码示例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>数据可视化展示</title> </head> <body> <!--echarts图表展示区域--> <div id="chart" style="width: 600px; height:400px;"></div> <!--echarts库的引入--> <script src="https://cdn.staticfile.org/echarts/4.2.0-rc.1/echarts.min.js"></script> <!--数据获取及图表绘制--> <script> var dataUrl = "/data"; $.get(dataUrl, function (data) { var chart = echarts.init(document.getElementById('chart')); var option = { xAxis: { type: 'category', data: data.xAxisData }, yAxis: { type: 'value' }, series: [{ data: data.seriesData, type: 'bar' }] }; chart.setOption(option); }); </script> </body> </html> 以上就是Flask MySQL echarts实现数据可视化的基本步骤，通过这种方式可以方便地展示各种类型的数据。在实际项目中，还需要根据具体情况进行相应的调整和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值