菜单 搜索
首页 前端知识 一款基于JAVA开发的Echarts后台生成框架

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

2024-06-07 12:06:39 前端知识 前端哥 240 456 我要收藏

目录

前言

一、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饼图和折线图的实例化生成，让大家熟悉常见的开发方式，同时分析了官网示例存在的问题以及解决方案，希望对使用的朋友有所帮助。

转载请注明出处或者链接地址：https://www.qianduange.cn//article/11265.html
标签
echarts java生成
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

Jackson 反序列化失败，出现JSON: Unrecognized field

2024-06-13 21:06:48

高性能 Rust JSON 库 sonic-rs 优化实践

2024-06-13 21:06:41

labelme标签格式json转化成yolov8支持是数据集格式

2024-06-13 21:06:39

JWT（JSON Web Tokens）入门与Java实践

2024-06-13 21:06:39

1.10 Unity中的数据存储 JSON

2024-06-13 21:06:30

JSON 数据格式化方法

2024-06-13 21:06:26

常见的第三方依赖管理工具：Maven、Gradle、npm、Nuget……（什么是第三方依赖工具）

2024-06-13 21:06:26

【全网首出】npm run serve报错 Expression: thread_id_key != 0x7777

2024-06-13 21:06:20

vue3代码运行报错 No matching export in “node_modules/.pnpm/vue-demi@0.14.6_vue@3.2.47/node_modules/vue-dem

2024-06-13 21:06:20

npm install 出现 npm ERR! cb() never called! npm ERR! This is an error with npm itself.

2024-06-13 21:06:20

大家推荐的文章
1

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
2

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
3

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
4

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
5

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
6

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
7

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
8

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
9

UE4.27支持HTML5

2024-05-07 13:05:261000
10

前端vue项目使用Decimal.js做加减乘除求余运算

2024-04-23 21:04:401000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！