一款基于JAVA开发的Echarts后台生成框架

news2024/11/24 7:23:36

目录

前言

一、Echarts后台生成框架

1、简介

2、开源地址

 3、支持类型

二、图表生成实战

1、项目使用

2、后台折线图生成

 3、Echarts改造

4、最终效果

 总结

前言

        之前的博文主要分享了一些关于Echarts的基本开发知识，在之前的博客中主要介绍的是在前端页面进行参数生成并进行页面展示。在日常开发过程当中，在前端进行参数构建也是一件比较麻烦的事情，在常见的Java后台开发当中，我们可以在后台进行参数的生成，然后再前台进行数据的渲染，因为Echarts采用的是Json的参数形式进行组织，但是Echarts支持的图形类型比较多，在这么多的图形中进行参数构建也是一件非常不容易组织的事情。有没有一种在后台进行参数的框架？

        本文分享一款基于Java开发的Echarts后台生成框架，支持自动生成Echarts的参数，通过生成Echarts饼图和折线图的实例化生成，让大家熟悉常见的开发方式，同时分析了官网示例存在的问题以及解决方案，希望对使用的朋友有所帮助。

一、Echarts后台生成框架

1、简介

        本项目是一个供Java开发使用的ECharts的开发包，主要目的是方便在Java中构造ECharts中可能用到的全部数据结构，如完整的结构Option。Option中的数据Series，包含Bar-柱状图，Line-折线图，Pie-饼图，Chord-和弦图等，支持ECharts中的所有图表。支持所有的Style类，如AreaStyle,ChordStyle,ItemStyle,LineStyle,LinkStyle等等。支持多种Data数据类型，一个通用的Data数据，以及PieData,MapData,ScatterData,KData等针对性的数据结构。

        使用本项目直接构造一个Option对象，转换为JSON后直接用myChart.setOption(option)，或者也可以在前端构造基本的Option对象，然后使用本项目来构造其中需要的任意某部分的数据，如使用Series支持的图表类型创建Series数据。

2、开源地址

        项目的开源地址如下ECharts - Java类库，感兴趣的朋友可以在gitee中可以将源码下载下来。这是一个有1.9KStar的项目，代码有一定历史了，项目也非常稳定，虽然Echarts目前在Apache的版本也更新到了5.x，这个项目是基于Echarts3.x系列的，但是一些基本的图形是可以用的，如果有一定的研发能力，可以在这个版本的基础上进行适配，改造成适合5.x版本的代码。

 3、支持类型

        图表类型3.x版本(2.x版本支持的图表不一样)

  • Line - 折线（面积）图
  • Lines - 线图
  • Bar - 柱状（条形）图
  • Scatter - 散点（气泡）图
  • EffectScatter - 涟漪效果散点图
  • Candlestick - K线图
  • Pie - 饼（圆环）图
  • Graph - 关系图,可以实现force
  • Map - 地图
  • Gauge - 仪表盘
  • Funnel - 漏斗图
  • Treemap - 矩形树图
  • Heatmap - 热力图
  • Boxplot - 箱形图
  • Parallel - 平行坐标系
  • Sankey - 桑基图

        ECharts组件

  • Axis - 坐标轴
  • Grid - 网格
  • Title - 标题
  • Tooltip - 提示
  • Legend - 图例
  • DataZoom - 数据区域缩放
  • DataRange - 值域漫游
  • Toolbox - 工具箱
  • Timeline - 时间线
  • visualMap - 视觉映射组件

二、图表生成实战

1、项目使用

        如果要在自己的项目中使用，可以使用下面的Maven定义。

<dependency>
  <groupId>com.github.abel533</groupId>
  <artifactId>ECharts</artifactId>
  <version>最新版本</version>
</dependency>

2、后台折线图生成

        后台折线图生成可以可以参考com.github.abel533.echarts.samples.line.Line9.Java

package com.github.abel533.echarts.samples.line;

import com.github.abel533.echarts.axis.CategoryAxis;
import com.github.abel533.echarts.axis.LogAxis;
import com.github.abel533.echarts.axis.ValueAxis;
import com.github.abel533.echarts.code.Magic;
import com.github.abel533.echarts.code.Tool;
import com.github.abel533.echarts.code.Trigger;
import com.github.abel533.echarts.code.X;
import com.github.abel533.echarts.feature.MagicType;
import com.github.abel533.echarts.series.Line;
import com.github.abel533.echarts.util.EnhancedOption;
import org.junit.Test;

/**
 * @author liuzh
 */
public class LineTest9 {

    @Test
    public void test() {
        //地址:http://echarts.baidu.com/doc/example/line9.html
        EnhancedOption option = new EnhancedOption();
        option.title().text("对数轴示例").x(X.center);


        option.legend().x(X.left).data("2的指数", "3的指数");

        option.toolbox().show(true).feature(
                Tool.mark,
                Tool.dataView,
                new MagicType(Magic.line, Magic.bar),
                Tool.restore,
                Tool.saveAsImage);
        option.tooltip().trigger(Trigger.item).formatter("{a} <br/>{b} : {c}");
        option.calculable(true);

        option.yAxis(new LogAxis());
        CategoryAxis categoryAxis = new CategoryAxis();
        categoryAxis.name("x").splitLine().show(false);
        categoryAxis.data("一", "二", "三", "四", "五", "六", "七", "八", "九");

        option.xAxis(categoryAxis);

        ValueAxis valueAxis = new ValueAxis();
        valueAxis.axisLabel().formatter("{value} °C");
        option.xAxis(valueAxis);

        Line line = new Line("3的指数");
        line.data(1, 3, 9, 27, 81, 247, 741, 2223, 6669);
        Line line2 = new Line("2的指数");
        line2.data(1, 2, 4, 8, 16, 32, 64, 128, 256);
        option.series(line, line2);
        option.exportToHtml("line7.html");
        option.view();
    }
}

        通过官方的示例代码，经过运行之后，会使用默认浏览器打开一个页面，但是你会发现打开的页面是空白，并没有正确的展示报表页面，如下图所示。

         打开浏览器的调试功能可以发现，有如下的报错信息，是因为echarts.js文件没有正确引用：

 3、Echarts改造

        通过跟踪代码，我们找到了模板生成的代码，可以看到在具体模板的定义路径

/**
     * 读取模板并写入数据
     *
     * @param option
     * @return
     */
    private static List<String> readLines(Option option) {
        String optionStr = GsonUtil.format(option);
        InputStream is = null;
        InputStreamReader iReader = null;
        BufferedReader bufferedReader = null;
        List<String> lines = new ArrayList<String>();
        String line;
        try {
            is = OptionUtil.class.getResourceAsStream("/template");
            iReader = new InputStreamReader(is, "UTF-8");
            bufferedReader = new BufferedReader(iReader);
            while ((line = bufferedReader.readLine()) != null) {
                if (line.contains("##option##")) {
                    line = line.replace("##option##", optionStr);
                }
                lines.add(line);
            }
        } catch (Exception e) {
        } finally {
            if (is != null) {
                try {
                    is.close();
                } catch (IOException e) {
                    //ignore
                }
            }
        }
        return lines;
    }

        在resource目录下有一个template的文件，通过这里定义了生成的echarts文件信息。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts - Generate By @isea533/abel533</title>
    <style>*{ margin:0} html,body{ height:100%} .wrapper{ min-height:100%; height:auto !important; height:100%; margin:0 auto -155px} .footer,.push{ height:155px} table.gridtable{ font-family:verdana,arial,sans-serif; font-size:11px; color:#333; border-width:1px; border-color:#666; border-collapse:collapse; margin:5px auto} table.gridtable th{ border-width:1px; padding:8px; border-style:solid; border-color:#666; background-color:#dedede} table.gridtable td{ border-width:1px; padding:8px; border-style:solid; border-color:#666; background-color:#fff} .middle{ text-align:center; margin:0 auto; width:90%; height:auto} .info{ font-size:12px; text-align:center; line-height:20px; padding:40px} .info a{ margin:0 10px; text-decoration:none; color:green}</style>
</head>
<body>
<div class="wrapper">
    <div class="middle">
        <h1 style="padding: 70px 0 20px;">ECharts效果</h1>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="height:400px"></div>
    </div>
    <div class="push"></div>
</div>
<div class="footer">
    <div class="info">
        ECharts - JAVA开发工具：
        <a href="http://git.oschina.net/free/ECharts" target="_blank">项目地址</a>
        <a href="http://echarts.baidu.com" target="_blank">ECharts地址</a>
        <br/>
        作者：<a href="http://blog.csdn.net/isea533" style="margin: 0;" target="_blank">@Isea533/abel533</a>
    </div>
</div>
</body>
<!-- ECharts单文件引入 -->
<!--
<script src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
-->
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));

var option = ##option##;

// 为echarts对象加载数据
myChart.setOption(option);
</script>
</html>

        图上被注释掉的就是不能使用的echarts.min.js引用资源，将其替换至最新版本的js即可。如果是离线环境，可以将js另存为即可。

4、最终效果

        再次运行代码，可以看到如下的运行效果。

        写在后面，这个开源组件现在也不维护了，echarts现在也更新到了5.x版本，如果还想使用使用java生成符合Echarts5.x的图，可以参考基于 Apache ECharts 5.x 的 Java 可视化类库。 

 总结

        以上就是本文的主要内容，本文分享一款基于Java开发的Echarts后台生成框架，支持自动生成Echarts的参数，通过生成Echarts饼图和折线图的实例化生成，让大家熟悉常见的开发方式，同时分析了官网示例存在的问题以及解决方案，希望对使用的朋友有所帮助。

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

魏副业而战：她又办了2套图书证

魏副业而战：她又办了2套图书证

我是魏哥&#xff0c;与其躺平&#xff0c;不如魏副业而战&#xff01; 社群成员董姐又办了2套图书证&#xff0c;加上之前的1套&#xff0c;她已经有3套图书证了。 3套图书证意味着可以开9个闲鱼图书店铺。是不是感觉很NB。 董姐说&#xff0c;2套图书证等了快一个多月&…
阅读更多...
Flink基本原理剖析讲解

Flink基本原理剖析讲解

1.Flink简介 Flink是一个批处理和流处理结合的统一计算框架&#xff0c;其核心是一个提供了数据分发以及并行化计算的流数据处理引擎。它的最大亮点是流处理&#xff0c;是业界最顶级的开源流处理引擎。 Flink最适合的应用场景是低时延的数据处理&#xff08;Data Processing…
阅读更多...
面试题更新之-伪元素和伪类

面试题更新之-伪元素和伪类

文章目录 伪元素和伪类是什么&#xff1f;伪元素&#xff08;Pseudo-elements&#xff09;:伪类&#xff08;Pseudo-classes&#xff09;: css伪元素和伪类的区别使用css伪元素的好处使用css伪类的好处 伪元素和伪类是什么&#xff1f; 在CSS中&#xff0c;伪元素&#xff08;…
阅读更多...
星云零售信贷基于 Apache Doris 的 OLAP 演进之路

星云零售信贷基于 Apache Doris 的 OLAP 演进之路

本文导读&#xff1a; 腾梭科技是国内领先的零售金融数字化及安全服务提供商&#xff0c;是腾讯投资且在金融领域的战略合作伙伴&#xff0c;并与腾讯联合研发了“星云智慧信贷解决方案。在其信贷业务转型过程中&#xff0c;随着系统规模不断扩大&#xff0c;早期架构无法再满…
阅读更多...
centos7根分区、文件系统扩容

centos7根分区、文件系统扩容

1、 输入lsblk&#xff0c;查看到新硬盘sde&#xff0c;根目录现71G. 2、 创建分区fidisk /dev/sde 3、 刷新分区 partprobe /dev/sde&#xff0c;并创建物理卷 pvcreate /dev/sde1 4、 查看卷组名 vgdisplay 5、 将物理卷扩展到卷组 vgextend centos /dev/sde1 6、 查看逻辑巻…
阅读更多...
linux系统安装步骤教程详解

linux系统安装步骤教程详解

linux是现在常用的一类操作系统&#xff0c;我们可以通过U盘、光驱、或者虚拟机进行安装。 具体步骤如下&#xff1a; 1.去https://www.centos.org/download/下载centos系统&#xff0c;其中CentOS-7.0-x86_64-DVD-1503-01.iso 是标准安装版&#xff0c;推荐下载这个; 2.使用U盘…
阅读更多...
OCR技术的昨天今天和明天！2023年最全OCR技术指南！

OCR技术的昨天今天和明天！2023年最全OCR技术指南！

OCR是一项科技革新&#xff0c;通过自动化大幅减少人工录入的过程&#xff0c;帮助用户从图像或扫描文档中提取文字&#xff0c;并将这些文字转换为计算机可读格式。这一功能在许多需要进一步处理数据的场景中&#xff0c;如身份验证、费用管理、自动报销、业务办理等都显得尤为…
阅读更多...
MySQL常见笔试题

MySQL常见笔试题

前言 数据库的考察在面试时可是十分常见的&#xff0c;MySQL作为一种常用的关系型数据库管理系统&#xff0c;对于它的介绍在面试时可是必不可少的&#xff0c;下面就是一些常见笔试题的模拟&#xff0c;希望可以帮助到你&#x1f642;&#x1f642; 所用到的表如下&#xff…
阅读更多...
国产MCU-CW32F030开发学习-BH1750模块

国产MCU-CW32F030开发学习-BH1750模块

国产MCU-CW32F030开发学习-BH1750模块 硬件平台 CW32_48F大学计划板CW32_IOT_EVA物联网开发评估套件BH1750数字型光照强度传感器 BH1750 BH1750是一款数字型光照强度传感器&#xff0c;能够获取周围环境的光照强度。其测量范围在0~65535 lx。lx勒克斯&#xff0c;是光照强…
阅读更多...
界面设计利器！10款Sketch插件合集，助你事半功倍！

界面设计利器！10款Sketch插件合集，助你事半功倍！

在界面设计领域&#xff0c;Sketch以其高效、小巧的优势获得了不少设计团队的喜爱&#xff0c;帮助全球设计师创造了许多不可思议的作品。在使用Sketch的过程中&#xff0c;辅助使用一些Sketch插件&#xff0c;可以让我们更加高效地完成设计任务。本篇文章&#xff0c;我们将揭…
阅读更多...
torch分布式通信基础

torch分布式通信基础

torch分布式通信基础 1. 点到点通信2. 集群通信 官网文档&#xff1a;WRITING DISTRIBUTED APPLICATIONS WITH PYTORCH 1. 点到点通信 # 同步&#xff0c;peer-2-peer数据传递 import os import torch import torch.distributed as dist import torch.multiprocessing as mpdef…
阅读更多...
热点探测技术架构设计与实践

热点探测技术架构设计与实践

1. 概述 说到热点问题&#xff0c;首先我们先理解一下什么是热点&#xff1f; 热点通常意义来说&#xff0c;是指在一段时间内&#xff0c;被广泛关注的物品或事件&#xff0c;例如微博热搜&#xff0c;热卖商品&#xff0c;热点新闻&#xff0c;明星直播等等&#xff0c;所以…
阅读更多...
领域知识图谱的医生推荐系统：利用BERT+CRF+BiLSTM的医疗实体识别，建立医学知识图谱，建立知识问答系统

领域知识图谱的医生推荐系统：利用BERT+CRF+BiLSTM的医疗实体识别，建立医学知识图谱，建立知识问答系统

项目设计集合&#xff08;人工智能方向&#xff09;&#xff1a;助力新人快速实战掌握技能、自主完成项目设计升级&#xff0c;提升自身的硬实力&#xff08;不仅限NLP、知识图谱、计算机视觉等领域&#xff09;&#xff1a;汇总有意义的项目设计集合&#xff0c;助力新人快速实…
阅读更多...
Xcode报错--访问keychain，出现弹窗处理方案

Xcode报错--访问keychain，出现弹窗处理方案

情景 访问keychain弹出弹窗&#xff0c;不想人工点击&#xff0c;比如自动化测试中使用keychain中的证书的情况 原因 Mac的保护机制 处理 1、人工&#xff1a;输入Password&#xff0c;点击Allow或者Always Allow 2、命令行处理 security unlock-keychain -p "<…
阅读更多...
Spring @RequestMapping 工作原理

Spring @RequestMapping 工作原理

Spring RequestMapping 工作原理 配置基础启动类及Controller类 SpringBootApplication public class DemoServiceApplication {public static void main(String[] args) {SpringApplication.run(DemoServiceApplication.class, args);} }RestController public class HelloC…
阅读更多...
列表定义状态比较不错的UI写法

列表定义状态比较不错的UI写法

<el-table-columnprop"status"label"状态"align"left":formatter"formatTd" ><template slot-scope"scope"><span class"grayStatus" v-if"scope.row.status 1">未开始</span>…
阅读更多...
Linux安装最新版的gcc13.1.0编译器，支持c++20、23

Linux安装最新版的gcc13.1.0编译器，支持c++20、23

Linux安装最新版的gcc13.1.0编译器&#xff0c;支持c20、23 最近在写c20的代码&#xff0c;所以需要升级支持c20及23的编译器&#xff0c;貌似gcc11就已经支持了c20了&#xff0c;但是我这里选择了最新的13.1版本。本文全程实操&#xff0c;上机验证通过。 查看gcc版本 gcc -v…
阅读更多...
MySql 高级-0711

MySql 高级-0711

3. 查询截取分析 分析 分析&#xff0c;至少跑一天&#xff0c;看看生产的慢 SQL 情况开启慢查询日志&#xff0c;设置阙值&#xff0c;比如超过5秒钟的就是慢SQL&#xff0c;并将它抓取出来。explain慢SQL分析Show Profile运维经理 or DBA 进行SQL 数据库服务器的参数调优 总…
阅读更多...
QT-QRegExp和QRegularExpression

QT-QRegExp和QRegularExpression

1.QRegExp qt5.0版本之前正则表示示类是QRegExp,通过它能够筛选出我们想要的数据,它的构造函数如下所示: QRegExp::QRegExp(const QString &pattern, Qt::CaseSensitivity cs Qt::CaseSensitive, QRegExp::PatternSyntax syntax); 其中QRegExp::PatternSyntax syntax用…
阅读更多...
【Leetcode】面试题 02.07. 链表相交

【Leetcode】面试题 02.07. 链表相交

给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表没有交点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 一看不会&#xff0c;一看答案就懂 我们求出两个链表的长度&#xff0c;并求出两个…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023