当前位置: 首页 > 工具软件 > ECharts-Java > 使用案例 >

java图表库_Java版ECharts图表库ECharts-Java

卢伟志
2023-12-01

ECharts是一款功能非常强大的JavaScript图表库,

本项目是一个供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说明

Option正式代码中使用,不需要任何依赖。

GsonOption正式代码中可以使用,需要引入Gson包,使用toString()方法可以转换为JSON结构的数据(支持function,详情看下面的function说明)。

EnhancedOption测试专用,主要方便在浏览器中直接查看效果。

function说明

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

虽然像

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

{

formatter:function(value){

return value.substring(0,8);

}}//和{

formatter:(function(){

return ‘Temperature :
{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 :
{b}km : {c}°C’;})()”);

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

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

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

ECharts-Java的简单使用

@Testpublic void test() {

//地址:http://echarts.baidu.com/doc/example/line5.html

EnhancedOption option = new EnhancedOption();

option.legend(“高度(km)与气温(°C)变化关系”);

option.toolbox().show(true).feature(Tool.mark, Tool.dataView, new

option.calculable(true);

option.tooltip().trigger(Trigger.axis).formatter(“Temperature :
{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

]

}]}

 类似资料: