sbf123官网

付费投稿计划

本文由码农网 –
小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

ECharts-Java项目简介

ECharts是一款功能非常强大的JavaScript图表库,ECharts-Java是ECharts的Java版,用Java代码实现了ECharts的所有图表功能,ECharts中的Json结构也都转换成了Java对象,这样我们使用起来会非常方便,设置也相当灵活。

本项目是一个供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后直接用js设置myChart.setOption(option),或者你也可以在前段构造基本的Option对象,然后使用本项目来构造其中需要的任意某部分的数据,如使用Series支持的图表类型创建Series数据。

项目支持

图表类型

  • Line – 折线(面积)图
  • Bar – 柱状(条形)图
  • Scatter – 散点(气泡)图
  • K – K线图
  • Pie – 饼(圆环)图
  • Radar – 雷达(面积)图
  • Chord – 和弦图
  • Force – 力导向布局图
  • Map – 地图
  • Gauge – 仪表盘
  • Funnel – 漏斗图
  • Island – 孤岛图(官方未提供,这里只有数据Island对象)

ECharts组件

  • Axis – 坐标轴
  • Grid – 网格
  • Title – 标题
  • Tooltip – 提示
  • Legend – 图例
  • DataZoom – 数据区域缩放
  • DataRange – 值域漫游
  • Toolbox – 工具箱
  • Timeline – 时间线

Option说明

  1. Option正式代码中使用,不需要任何依赖。
  2. GsonOption正式代码中可以使用,需要引入Gson包,使用toString()方法可以转换为JSON结构的数据(支持function,详情看下面的function说明)。
  3. EnhancedOption测试专用,主要方便在浏览器中直接查看效果。

function说明

由于JSON标准中不包含function类型,因而大多数的JSON库都不直接支持这种类型,处理这种类型最简单的方式就是转换为JSON字符串时,对字符串进行处理。

虽然像Jackson
json和fastjson通过注解或者自定义的实现序列化接口可以实现,毕竟和JSON库的结合太密切了,而且使用起来也很麻烦,不如直接处理字符串,或者在js中处理。

本项目中提供了GSON实现的GsonOption,就是重写了toString()方法,改为输出JSON结构的字符串,并且支持以下两种function形式:

{
formatter:function(value){
return value.substring(0,8);
}}//和{
formatter:(function(){
return ‘Temperature : <br/>{b}km : {c}°C’;
})()}

当然这种形式在Java中书写的时候有着严格的要求:

option.tooltip().trigger(Trigger.axis).formatter(“function(value){return
value.substring(0,8);}”);option.tooltip().trigger(Trigger.axis).formatter(“(function(){return
‘Temperature : <br/>{b}km : {c}°C’;})()”);

  1. 先看第一种,这里的"function中,双引号和function必须连着,中间不能存在空格,否则不会识别。然后是结尾的}",这里也必须连着不能有空格,在首尾这两段代码之间不能出现}",否则会判断出错。如果在{}中的代码有字符串,请使用单引号',双引号出现在单引号内时使用"即可。除此之外没有别的限制。
  2. 再看第二种,这里的"(function中,双引号、括号和function必须连着,中间不能存在空格,否则不会识别。然后是结尾的})()",这里也必须连着不能有空格,在首尾这两段代码之间不能出现})()",否则会判断出错。如果在{}中的代码有字符串,请使用单引号',双引号出现在单引号内时使用"即可。除此之外没有别的限制。

上述对function的处理很简单,不限制在formatter使用,所有值都能这么写,你可以参考写出自己的Option

ECharts-Java的简单使用

@Testpublic void test() {
//地址:
EnhancedOption option = new EnhancedOption();
option.legend(“高度(km)与气温(°C)变化关系”);

option.toolbox().show(true).feature(Tool.mark, Tool.dataView, new
class=”wp_keywordlink”>MagicType(Magic.line,
Magic.bar), Tool.restore, Tool.saveAsImage);

option.calculable(true);
option.tooltip().trigger(Trigger.axis).formatter(“Temperature :
<br/>{b}km : {c}°C”);

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

CategoryAxis categoryAxis = new CategoryAxis();
categoryAxis.axisLine().onZero(false);
categoryAxis.axisLabel().formatter(“{value} km”);
categoryAxis.boundaryGap(false);
categoryAxis.data(0, 10, 20, 30, 40, 50, 60, 70, 80);
option.yAxis(categoryAxis);

Line line = new Line();
line.smooth(true).name(“高度(km)与气温(°C)变化关系”).data(15, -50,
-56.5, -46.5, -22.1, -2.5, -27.7, -55.7,
-76.5).itemStyle().normal().lineStyle().shadowColor(“rgba(0,0,0,0.4)”);
option.series(line);
option.exportToHtml(“line5.html”);
option.view();}

代码生成的json结果:

{
    "calculable": true,
    "toolbox": {
        "show": true,
        "feature": {
            "restore": {
                "show": true,
                "title": "还原"
            },
            "magicType": {
                "show": true,
                "title": {
                    "line": "折线图切换",
                    "stack": "堆积",
                    "bar": "柱形图切换",
                    "tiled": "平铺"
                },
                "type": ["line", "bar"]
            },
            "dataView": {
                "show": true,
                "title": "数据视图",
                "readOnly": false,
                "lang": ["Data View", "close", "refresh"]
            },
            "mark": {
                "show": true,
                "title": {
                    "mark": "辅助线开关",
                    "markClear": "清空辅助线",
                    "markUndo": "删除辅助线"
                },
                "lineStyle": {
                    "color": "#1e90ff",
                    "type": "dashed",
                    "width": 2
                }
            },
            "saveAsImage": {
                "show": true,
                "title": "保存为图片",
                "type": "png",
                "lang": ["点击保存"]
            }
        }
    },
    "tooltip": {
        "trigger": "axis",
        "formatter": "Temperature : u003cbr/u003e{b}km : {c}°C"
    },
    "legend": {
        "data": ["高度(km)与气温(°C)变化关系"]
    },
    "xAxis": [{
        "type": "value",
        "axisLabel": {
            "formatter": "{value} °C"
        }
    }],
    "yAxis": [{
        "type": "category",
        "boundaryGap": false,
        "axisLine": {
            "onZero": false
        },
        "axisLabel": {
            "formatter": "{value} km"
        },
        "data": [
            0, 10, 20, 30, 40, 50, 60, 70, 80
        ]
    }],
    "series": [{
        "smooth": true,
        "name": "高度(km)与气温(°C)变化关系",
        "type": "line",
        "itemStyle": {
            "normal": {
                "lineStyle": {
                    "shadowColor": "rgba(0,0,0,0.4)"
                }
            },
            "emphasis": {}
        },
        "data": [
            15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5
        ]
    }]}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章