Echarts连接数据库,实时绘制图表详解

devtools/2024/12/24 7:09:02/

文章目录

  • Echarts连接数据库,实时绘制图表详解
    • 一、引言
    • 二、步骤一:环境准备与数据库连接
    • 三、步骤二:数据获取与处理
    • 四、步骤三:ECharts图表配置与渲染
      • 1、配置ECharts选项
      • 2、动态加载数据
    • 五、其他交互功能
    • 六、总结

Echarts连接数据库,实时绘制图表详解

一、引言

在现代数据可视化领域,ECharts 是一个非常流行的开源JavaScript可视化库,它能够流畅地运行在PC和移动设备上,并且兼容当前绝大部分浏览器。ECharts 提供了丰富的图表类型和交互功能,使得数据展示变得更加直观和生动。本文将详细介绍如何将ECharts与数据库连接,实现实时数据的可视化绘制。
在这里插入图片描述

二、步骤一:环境准备与数据库连接

1、环境搭建

在开始之前,确保你的环境中已经安装了ECharts和数据库(如MySQL)。你可以通过以下方式引入ECharts:

<!-- 引入ECharts文件 -->
<script src="js/echarts.js"></script>

在这里插入图片描述

2、数据库连接

使用Java作为后端语言,通过JDBC连接MySQL数据库。首先,确保你的Class.forName加载了正确的数据库驱动,我这里使用的是Springboot:

server:port: 8083
spring:datasource:url: jdbc:mysql://localhost:3306/your_database?useSSL=falseusername: rootpassword: your_passworddriver-class-name: com.mysql.cj.jdbc.Driver

在这里插入图片描述
测试数据库连接是否成功:

public class DBTest {public static void main(String[] args) {try {Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/your_database?useSSL=false", "root", "your_password");if (conn != null) {System.out.println("数据库连接成功!");}} catch (SQLException e) {e.printStackTrace();System.out.println("数据库连接失败!");}}
}

在这里插入图片描述

三、步骤二:数据获取与处理

1、查询数据库

编写SQL查询语句,从数据库中获取需要展示的数据。例如,我们想要获取最近一周的销售数据:

在这里插入图片描述

    <select id="educational" resultType="com.qcby.qz.entity.Echars">SELECT educational as name, count(*) AS valueFROM jobGroup BY educational</select>

2、数据处理

在Java后端,编写代码处理查询结果,并将数据转换为ECharts所需的格式。例如,将查询结果转换为JSON数组:

在这里插入图片描述

@RequestMapping("/salesData")
@ResponseBody
public List<SalesData> getSalesData() {List<SalesData> salesDataList = salesService.getSalesData();// 转换为ECharts需要的数据格式List<String> names = new ArrayList<>();List<Integer> values = new ArrayList<>();for (SalesData data : salesDataList) {names.add(data.getProductName());values.add(data.getTotalQuantity());}Map<String, Object> result = new HashMap<>();result.put("names", names);result.put("values", values);return new ArrayList<>(result.values());
}

四、步骤三:ECharts图表配置与渲染

1、配置ECharts选项

前端页面,配置ECharts的选项,包括标题、工具箱、坐标轴和系列等:

在这里插入图片描述

 option = {//  backgroundColor: '#00265f',tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},grid: {left: '0%',top: '10px',right: '0%',bottom: '4%',containLabel: true},xAxis: [{type: 'category',data: keys,axisLine: {show: true,lineStyle: {color: "rgba(255,255,255,.1)",width: 1,type: "solid"},},axisTick: {show: false,},axisLabel: {interval: 0,// rotate:50,show: true,splitNumber: 15,textStyle: {color: "rgba(255,255,255,.6)",fontSize: '12',},},}],yAxis: [{type: 'value',axisLabel: {//formatter: '{value} %'show: true,textStyle: {color: "rgba(255,255,255,.6)",fontSize: '12',},},axisTick: {show: false,},axisLine: {show: true,lineStyle: {color: "rgba(255,255,255,.1	)",width: 1,type: "solid"},},splitLine: {lineStyle: {color: "rgba(255,255,255,.1)",}}}],series: [{type: 'bar',data: values,barWidth: '35%', //柱子宽度// barGap: 1, //柱子之间间距itemStyle: {normal: {color: '#2f89cf',opacity: 1,barBorderRadius: 5,}}}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});

2、动态加载数据

使用AJAX从后端获取数据,并动态更新ECharts图表:

在这里插入图片描述

// 发送请求获取数据$.ajax({type: "get",url: "/echars/educational",dataType: "json",success: function (data) {// 将所有的key放在一个数组中var keys = [];var values = [];for (var i = 0; i < data.length; i++) {if (data[i].name == null || data[i].name === "") {continue;}if (data[i].value > 100) {keys.push(data[i].name);values.push(data[i].value);}}option = {//  backgroundColor: '#00265f',tooltip: {trigger: 'axis',axisPointer: {type: 'shadow'}},grid: {left: '0%',top: '10px',right: '0%',bottom: '4%',containLabel: true},xAxis: [{type: 'category',data: keys,axisLine: {show: true,lineStyle: {color: "rgba(255,255,255,.1)",width: 1,type: "solid"},},axisTick: {show: false,},axisLabel: {interval: 0,// rotate:50,show: true,splitNumber: 15,textStyle: {color: "rgba(255,255,255,.6)",fontSize: '12',},},}],yAxis: [{type: 'value',axisLabel: {//formatter: '{value} %'show: true,textStyle: {color: "rgba(255,255,255,.6)",fontSize: '12',},},axisTick: {show: false,},axisLine: {show: true,lineStyle: {color: "rgba(255,255,255,.1	)",width: 1,type: "solid"},},splitLine: {lineStyle: {color: "rgba(255,255,255,.1)",}}}],series: [{type: 'bar',data: values,barWidth: '35%', //柱子宽度// barGap: 1, //柱子之间间距itemStyle: {normal: {color: '#2f89cf',opacity: 1,barBorderRadius: 5,}}}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);window.addEventListener("resize", function () {myChart.resize();});}});

注意渲染图表要在请求完数据以后

五、其他交互功能

在ECharts中,可以应用许多高级交互功能来增强用户体验和数据的可视化展示。以下是一些ECharts中常用的高级交互功能:

  1. 动画效果(Animation)
    ECharts 提供了多种动画效果,可以在图表的初始化、数据更新时展现。动画效果可以通过 animation 配置项来开启和定制。

    option = {animation: true,animationDelay: function (idx) {return Math.random() * 200;},animationDuration: 500,animationEasing: 'elasticOut'
    };
    

    这允许开发者为图表添加更加生动的动画效果,提升视觉效果。

  2. 数据缩放(Data Zoom)
    数据缩放功能允许用户在图表中缩放查看数据,这对于展示大量数据的图表非常有用。

    option = {dataZoom: [{type: 'slider', // 数据缩放的类型,'slider' 表示滑动条型start: 0, // 数据窗口的起始百分比end: 100 // 数据窗口的结束百分比},{type: 'inside', // 内置型数据缩放,通过鼠标滚轮放大缩小start: 0, // 数据窗口的起始百分比end: 100 // 数据窗口的结束百分比}]
    };
    

    用户可以通过滑动条或鼠标滚轮来放大或缩小图表,查看特定区域的数据。

  3. 数据区域选择(Data Range)
    数据区域选择组件允许用户选择数据的某个范围进行查看。

    option = {visualMap: {type: 'continuous',min: 0,max: 100,left: 'left',top: 'bottom',text: ['高', '低'], // 文本,默认为数值文本calculable: true, // 是否显示拖动用的手柄inRange: {color: ['lightskyblue', 'yellow', 'orangered']}}
    };
    

    用户可以通过拖动手柄来选择数据的特定范围,图表会相应地展示所选范围的数据。

  4. 工具箱(Toolbox)
    工具箱组件提供了保存为图片、数据视图、动态类型切换等功能。

    option = {toolbox: {show: true,feature: {saveAsImage: { show: true, title: "保存为图片" },dataView: { show: true, title: "数据视图" },magicType: { show: true, title: { line: "折线图", bar: "柱状图" } }}}
    };
    

    用户可以通过工具箱进行多种交互操作,如保存图表、查看数据、切换图表类型等。

  5. 图表联动
    ECharts 支持多个图表之间的联动,用户可以通过操作一个图表来影响其他图表。常见的场景是多个图表展示相同数据的不同维度,通过联动操作可以让图表同步变化。
    这使得用户可以在多个图表之间进行交互,比如在一个图表中选择一个数据点,其他图表会展示与该数据点相关的信息。

  6. 实时数据更新
    ECharts 提供了 setOption 方法用于更新图表的数据,这对于需要显示动态实时数据的图表非常有用。
    用户可以设置定时器,定期从服务器获取新数据,并使用 setOption 方法更新图表,实现实时数据的展示。

这些高级交互功能使得ECharts不仅能够展示静态的数据图表,还能够提供动态的、交互式的用户体验,适用于各种复杂的数据展示和分析场景。

六、总结

通过上述步骤,我们成功地将ECharts与数据库连接,并实现了实时数据的可视化绘制。这种方法不仅可以用于销售数据,还可以广泛应用于其他需要实时数据展示的场景。ECharts的灵活性和强大的功能使其成为数据可视化的优选工具。


版权声明:本博客内容为原创,转载请保留原文链接及作者信息。

参考文章

  • ECharts 教程 | 菜鸟教程
  • ECharts连接数据库的具体实现

http://www.ppmy.cn/devtools/144924.html

相关文章

ssr实现方案

目录 序言 一、流程 二、前端要做的事情 三、节点介绍 四、总结 序言 本文不是详细的实现过程&#xff0c;是让你最快最直接的理解ssr的真正实现方法&#xff0c;有前端经验的同学&#xff0c;能够很好的理解过程&#xff0c;细节根据具体项目实现 一、前端要做的事情 1.…

[Effective C++]条款38-39 复合和private继承

本文初发于 “天目中云的小站”&#xff0c;同步转载于此。 条款38 : 通过复合塑膜出has-a或"is-implemented-in-terms-of" 在条款32中我们认识了public继承意味着is-a, 本条款将会认识两个新的关系, 均可通过"复合"这一操作实现出来. 复合 所谓复合, 就是…

漏洞检测工具:允许TRACE方法漏洞

允许TRACE方法漏洞 漏洞定义 TRACE方法是HTTP协议中定义的一种调试方法&#xff0c;主要用于测试或诊断Web服务器连接。Web服务器在配置时未正确禁用HTTP TRACE方法&#xff0c;从而允许客户端向服务器发送TRACE请求&#xff0c;并导致服务器返回可能包含敏感信息的响应。 漏…

无人零售及开源 AI 智能名片 S2B2C 商城小程序的深度剖析

摘要&#xff1a;本文聚焦无人零售这一新兴零售模式及其发展浪潮中崛起的开源 AI 智能名片 S2B2C 商城小程序。深入阐述无人零售的发展态势&#xff0c;细致剖析其驱动因素、现存问题&#xff0c;全面详细介绍小程序的功能特性、应用优势以及对无人零售的潜在价值&#xff0c;旨…

基于Java Web的“使用Ajax实现无刷新实时显示公告信息”实验

1.实验目的 学习和掌握jQuery获取网页元素对象的格式。使用JDBC进行数据库的连接以及使用Statement对象执行SQL查询语句。掌握使用Properties类加载Properties文件中参数的方式。使用<jsp:UseBean>标签创建对象。使用$.get方法向服务器发送请求以及获取服务器中的数据。…

Wux weapp 组件库的 bug—— wux-picker选择器组件无法正确初始化到选定的value

options的value为Number&#xff0c;组件无法正常使用 解决方案&#xff0c;修改picker-view/utils.js中的getIndexFromValue函数&#xff0c;如下&#xff1a; export function getIndexFromValue(value, col [], fieldNames DEFAULT_FIELD_NAMES) {//return getRealIndex(…

MFC/C++学习系列之简单记录2——thread和Release

MFC/C学习系列之简单记录2——thread和Release 前言MFC的Release版本发布Thread的相关知识简单举例使用 引用学习总结 前言 针对最近用到得东西进行记录&#xff01; MFC的Release版本发布 基于VC 6.0平台进行Release版本生成。 Project——>SettingSetting For——>W…

BigBlueButton视频会议 vs 华为云会议的详细对比

BigBlueButton视频会议 vs 华为云会议的详细对比 作者&#xff1a;BBBEasy中国区团队&#xff0c;Github地址&#xff1a;https://github.com/lihaiya/bbbeasy BigBlueButton与华为云会议是两款功能强大且各具特色的视频会议系统。以下是对这两者的详细对比&#xff0c;包括功…