ECharts3笔记--使用Java快速开发ECharts图表

最新推荐文章于 2024-07-05 14:52:54 发布

Mo_JingQing

最新推荐文章于 2024-07-05 14:52:54 发布

阅读量1.7w

点赞数 1

分类专栏： Echarts3 java

本文链接：https://blog.csdn.net/mxdmojingqing/article/details/77340245

版权

java 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

Echarts3

2 篇文章 0 订阅

订阅专栏

推荐资源：https://github.com/abel533/ECharts

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

Echart-java 使用Java快速开发ECharts图表。

http://mvnrepository.com/artifact/com.github.abel533/ECharts Echart-x.x.x.jar

建议使用3.0后的版本，不需要AMD依赖，像正常的jar包引入即可。

ECharts 3 开始不再强制使用 AMD 的方式按需引入，代码里也不再内置 AMD 加载器。因此引入方式简单了很多，只需要像普通的 JavaScript 库一样用 script 标签引入。

下面简单讲下步骤，然后就贴出源码，供大家参考哈~跟多例子，请看官网-

2.开发步骤：跟引入普通的js文件类似

（1）引入ECharts文件

（2）为ECharts准备一个具备大小宽高的DOM容器

（3）基于转备好的dom,初始化echarts实例

（4）制定图表的配置项和数据

（5）使用刚制定的配置项和数据显示图表

静态展示例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta  charset="UTF-8">
<title>ECharts 样例</title>
 <!-- 1.引入echarts文件 -->
<!--下载好echart的js文件，像普通的js引入即可,也可引入在线的js-->
<script  type="text/javascript"  src="./js/echarts.js"></script>
</head>
<body>
	<!-- 2.为ECharts准备一个具备大小宽高的DOM容器 -->
	<div  id="main" style="width: 600px; height: 600px;"></div>
	<script  type="text/javascript">
		/* 3.初始化echarts实例 */
		var myChart = echarts.init(document.getElementById("main"));
		/* 4.设置图表的配置信息和数据，setOption用指定数据绘图 */
		var option={
			tooltip : {
				show : true
			},

			legend : {
				data : [ '销量' ]
			},

			xAxis : [ {
				type : 'category',
				data : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ]
			} ],

			yAxis : {
				type : 'value'
			},

			series : [ {
				name : "销量",
				type : "bar",
				data : [ 5, 20, 40, 10, 10, 20 ]
			} ]
		};
		
		myChart.setOption(option);
	</script>
</body>
</html>

模拟动态获取数据库的例子。以jfinal框架为例：记得下载echarts.jar

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Random;
import com.github.abel533.echarts.Option;
import com.github.abel533.echarts.axis.CategoryAxis;
import com.github.abel533.echarts.axis.ValueAxis;
import com.github.abel533.echarts.code.Trigger;
import com.github.abel533.echarts.data.PieData;
import com.github.abel533.echarts.json.GsonUtil;
import com.github.abel533.echarts.series.Bar;
import com.github.abel533.echarts.series.Pie;
import com.jfinal.core.Controller;
 
public class IndexController extends Controller {

public void index() {
String optionStr= GsonUtil.format(selectRemoveCauses());
setAttr("option", optionStr);
render("index.html");
}

 

public Option selectRemoveCauses(){

    //查询前20
    //数据库查询获取统计数据
    List<Map<String, Object>> list =new ArrayList<>();

    for(int i=0;i<10;i++) {
    Map<String, Object> map=new HashMap<>();
    map.put("NAME", "张三"+i);
    map.put("TOTAL", new Random().nextInt(50));
    list.add(map);
    }

   
    //创建Option
    Option option = new Option();
    option.title("剔除药品").tooltip(Trigger.axis).legend("金额（元）");
    //横轴为值轴
    option.xAxis(new ValueAxis().boundaryGap(0d, 0.01));
    //创建类目轴
    CategoryAxis category = new CategoryAxis();

    //柱状数据
    Bar bar = new Bar("金额（元）");
    //饼图数据
    Pie pie = new Pie("金额（元）");

    //循环数据
    for (Map<String, Object> objectMap : list) {
        //设置类目
        category.data(objectMap.get("NAME"));
        System.out.println(objectMap.get("NAME"));
        //类目对应的柱状图
        bar.data(objectMap.get("TOTAL"));
        //饼图数据
        System.out.println(objectMap.get("TOTAL"));
        pie.data(new PieData(objectMap.get("NAME").toString(), objectMap.get("TOTAL")));
    }

    //设置类目轴
    option.yAxis(category);
    //饼图的圆心和半径
    pie.center(900,380).radius(100);
    //设置数据
    option.series(bar, pie);
    //由于药品名字过长，图表距离左侧距离设置180，关于grid可以看ECharts的官方文档
    option.grid().x(180);
    //返回Option
    return option;
}

}

//记得为div设置一个宽高放图表

Html 中<div id="lring" style=“width: 400px;

height: 85%;background: #fff;”></div>

<script type="text/javascript">

var myChart = echarts.init(document.getElementById('lring'));

var option =#(option);

myChart.setOption(option);

</script>

最后：给一些笔记：

Echarts.init()初始化Echarts实例

setOption用指定数据绘图

Option对象

标题：title

图例：legend

X轴：xAxis

Y轴：yAxis

数据：series：Name/type/data

option 项中的配置：

tooltip 提示框，鼠标悬浮交互时的信息提示。

trigger: 触发类型

formatter: 正则设置格式提示框浮层内容格式器

legend: 图例组件

series：系列列表

Axis - 坐标轴

Grid - 网格

Title - 标题

Tooltip - 提示框

Legend - 图例组件

DataZoom - 数据区域缩放

DataRange - 值域漫游

Toolbox - 工具箱（内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。）

Timeline - 时间线

visualMap - 视觉映射组件

textStyle: {

fontSize: 18,

fontWeight: 'bolder',

color: '#333' // 主标题文字颜色

subtextStyle: {

color: '#aaa' // 副标题文字颜色

}

center:['30%','50%'], //设置饼的原心坐标不设置就会默认在中心的位置 (Object width, Object height）

radius : ['50%', '70%'], //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形

ECharts 中有一些通用的样式，诸如阴影、透明度、颜色、边框颜色、边框宽度等，这些样式一般都会在系列的 itemStyle 里设置。

例如阴影的样式可以通过下面几个配置项设置：

itemStyle : //图形样式

itemStyle: {

normal: {

// 阴影的大小

shadowBlur: 200,

// 阴影水平方向上的偏移

shadowOffsetX: 0,

// 阴影垂直方向上的偏移

shadowOffsetY: 0,

// 阴影颜色

shadowColor: 'rgba(0, 0, 0, 0.5)'

}

Node Package Manager 节点的软件包管理器（简称npm）

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

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

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

使用GsonOption,FsonOption的toString()方法返回给前端时，前端需要使用eval('('+optionJsonStr+')')转换为JSON结构

定义了一个Option对象，里面的参数都可以在里面以方法或者属性的方式调用。最后封装好Option后，把他放入jsonObject对象传回前台一接收json值即可。

formatter: "{a} <br/>{b}: {c} ({d}%)"

这里补充一下formatter格式化方法的参数说明：

{string}，模板（Template），其变量为：

{a} | {a0}

{b} | {b0}

{c} | {c0}s

{d} | {d0} （部分图表类型无此项）

多值下则存在多套{a1}, {b1}, {c1}, {d1}, {a2}, {b2}, {c2}, {d2}, ...

其中变量a、b、c在不同图表类型下代表数据含义为：

折线（区域）图、柱状（条形）图: a（系列名称），b（类目值），c（数值）, d（无）

散点图（气泡）图 : a（系列名称），b（数据名称），c（数值数组）, d（无）

饼图、雷达图 : a（系列名称），b（数据项名称），c（数值）, d（百分比）

弦图 : a（系列名称），b（项1名称），c（项1-项2值），d（项2名称)， e(项2-项1值)

力导向图 :

节点 : a（类目名称），b（节点名称），c（节点值）

边 : a（系列名称），b（源名称-目标名称），c（边权重）， d（如果为true的话则数据来源是边）

{Function}，传递参数列表如下：

<Array> params : 数组内容同模板变量，[[a, b, c, d], [a1, b1, c1, d1], ...]

<String> ticket : 异步回调标识

<Function> callback : 异步回调，回调时需要两个参数，第一个为前面提到的ticket，第二个为填充内容html

自己多琢磨，多练习很容易就上手的！

*重要*：Echart非静态数据，一般在cotroller中获取数据，设置option属性，返回option对象。

Mo_JingQing

关注

1
点赞
踩
16

收藏

觉得还不错? 一键收藏
3
评论
ECharts3笔记--使用Java快速开发ECharts图表

推荐资源：https://github.com/abel533/ECharts 本项目是一个供Java开发使用的ECharts的开发包，主要目的是方便在Java中构造ECharts中可能用到的全部数据结构，如完整的结构Option。Option中的数据Series，包含Bar-柱状图，Line-折线图，Pie-饼图，Chord-和弦图等，支持ECharts中的所有图表。支持所有的St...
复制链接

扫一扫

专栏目录