你见过这么酷炫的图表吗?还不赶紧拿货!-JEPLUS软件快速开发平台



一、效果展示

image.png

二、准备工作

JEPLUS平台版本:5.0.0.1

Eclipse版本:4.3以上 

Intellij IDEA : 2015以上,推荐使用IDEA2017版本以上(功能更强大,UI更美观,支持各种插件,还在等什么?)

Resin : 3.0以上

Tomcat:6.0以上

JDK:1.7以上

ApacheServer:2.0以上

三、技术要求

Java水平:最好具备初级及以上水平

JavaScript水平:具备初级水平,最好有EXT.js的使用经验

数据库水平:能实现简单的增删查改


四、实现步骤

首先我们选择图报表引擎,选择图表,然后选择任意一个实例图表,因为我们这次选择的自定义ECharts报表制作和我们数据源选择没有太大的关系。

image.png

我们选择EChart,点击启用EChart图表,点击启用自定义配置。

image.png

点击配置项,在配置里可以编写我们自定义的EChart.js代码,里面最重要的对象是option对象,大家此时有个印象即可,不用太关注作用,后面我会说。

image.png

此时我们打开EChart官网,这里我直接放置链接:http://echarts.baidu.com/,进入官网,点击实例

image.png

选择官方实例

image.png

这里面有很多酷炫的图形表,大家可以根据需求进行选择。

image.png

这里我选择“极坐

标系下的堆叠柱状图”,大家可以选择自己喜欢的,不用和我的相同,因为它们的用法是相同的。

image.png

我们点击进去,左边会有相应的代码,我们将option直接复制一下

image.png

接下来我们回到之前打开的ECharts.js代码界面,将我们刚才复制的option代码直接复制到我们的EChart.js里面。其他的所有图标都是这样,找到option对象,复制到我们的代码里面,怎么样,是不是既简单又快速的做出精美的界面。

image.png

我们点击一下保存,之后执行预览一下,我们精美的报表就制作出来了,

image.png

下面我跟大家简单介绍一下关于option代码的一些常用配置

angleAxis下面的data指的是圆圈外围的参考数据,这里指的是周一,周二等等。

image.png

series下可以指定对象,每个对象对应一种颜色,并且对象分层展示,例如对象A显示在最里层,对象B显示在中层,对象C显示在外层。

每个对象下的name指的是对象的名字,和图表最上层的图例相对应。

image.png

每个对象下的data属性就是我们的数据,每个数据对应着图表中指定对象,指定时间的长度,这些数据和angleAxis的data相对应。在本案例中比如name为A对象的data数组对应着angleAxis下data的周一、周二...其他对象也是如此。

在这里我想和大家谈一下我的学习感受,在应用这些图表的时候,都是只要粘贴option的代码贴到平台的EChart.js代码中,可能会有一些option的配置会有一些差别,这时候我们应该多观察,图表展示的和代码中数据的联系,这样才能举一反三,制作出更多的酷炫图表。


猜你喜欢

转载自blog.csdn.net/JEPLUS123/article/details/80631187