java echartutil_Echart图表使用-java-Springmvc

​

前两天要用图表表示一个表内数据量的变化图，折线图或柱状图均可以。

Echart图表数据​，ajax请求数据，后台是调取数据。

具体：①前台：

charset=UTF-8"

pageEncoding="UTF-8"%>

/p>

Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

content="text/html; charset=UTF-8">

表格内部数据量变化图查询

file="../../easyui_lib.jsp"%>

class="fm_lab">数据库名称:

name="tableSchemaSch" id='tableSchemaSch' class="easyui-combobox" value="" data-options="url:'${ctx}/Dictionary/getCombobox.do?type=datasource_config.db_name&all=false' ,panelHeight: 'auto',valueField:'id', textField:'text'">

class="fm_lab">表名:

name="tableNameSch"  id='tableNameSch' value="" class="easyui-combobox" data-options="url:'${ctx}/Dictionary/getCombobox.do?type=tables1.TABLE_NAME&all=false' ,valueField:'id', textField:'text'">

查询日期从 id='startTimeSch'class="easyui-datebox" required="required">

至   class="easyui-datebox" required="required">

class="easyui-linkbutton" iconCls="icon-search" οnclick="getchartData()">查询

style="height:600px;border:1px solid

#ccc;padding:10px;">

$("#endTimeSch").datebox({

onSelect:function(date){

var nowDate = new Date();

if(date>nowDate){

alert("不能选择今天以后的日期，请重新选择 ")

$("#endTimeSch").datebox("setValue","");

}

}

});

$("#startTimeSch").datebox({

onSelect:function(date){

var nowDate = new Date();

if(date>nowDate){

alert("不能选择今天以后的日期，请重新选择 ")

$("#startTimeSch").datebox("setValue","");

}

}

});

//加载Echarts

var myChart;

var option;

// 路径配置

require.config({

paths:{

echarts:

'./js'

}

});

// 使用

require(

[

'echarts',

'echarts/chart/line', // 使用柱状图就加载bar模块，按需加载

'echarts/chart/bar'

],

function (ec) {

//

基于准备好的dom，初始化echarts图表

myChart

= ec.init(document.getElementByIdx_x('picturePlace'));

option =

{

title : {

text: '表格内部数据量统计图',

subtext: '数据量变化折线图 ',

x:'center'  //水平安放位

},

tooltip : { //提示框，鼠标悬浮交互时的信息提示

trigger: 'item',

formatter: "{a}

{b} : {c}"

},

legend: {  //图例

show:true,

orient : 'vertical',

x : 'left',

data:['表内数据数量']

},

toolbox: {  //工具箱，每个图表最多仅有一个工具箱

show : true,

feature : {

mark : {show:

true},

dataView : {show:

true, readOnly: false},

magicType:{show:true,type:['line','bar']},

restore : {show:

true},

saveAsImage :

{show: true}

}

},

calculable : true,

xAxis: [

{

//显示策略，可选为：true(显示) | false(隐藏)，默认值为true

show: true,

//坐标轴类型，横轴默认为类目型'category'

type: 'category',

//类目型坐标轴文本标签数组，指定label内容。 数组项通常为文本，'\n'指定换行

data: []

}

],

//直角坐标系中纵轴数组，数组中每一项代表一条纵轴坐标轴，仅有一条时可省略数值

//纵轴通常为数值型，但条形图时则纵轴为类目型

yAxis: [

{

//显示策略，可选为：true(显示) | false(隐藏)，默认值为true

show: true,

//坐标轴类型，纵轴默认为数值型'value'

type: 'value',

//分隔区域，默认不显示

splitArea: {show: true}

}

],

series : [

{

name:'表内数据数量 ',

type:'line',

data:

[],

//系列中的数据标注内容

markPoint: {

data: [

{type: 'max', name: '最大值'},

{type: 'min', name: '最小值'}

]

},

//系列中的数据标线内容

markLine: {

data: [

{type: 'average', name: '平均值'}

]

}

}

]

};

//

为echarts对象加载数据

myChart.setOption(option);

}

);

function getchartData(){

var tableSchema =

$('#tableSchemaSch').combobox('getText');

var tableName =

$('#tableNameSch').combobox('getText');

var startTimeSch =

$('#startTimeSch').datebox('getValue');

var endTimeSch =

$('#endTimeSch').datebox('getValue');

if(tableSchema == ""||

tableSchema == null){

alert("请您选择数据库名称 ！ ");

return false;

}

if(tableName == ""||

tableName == null){

alert("请您选择要查询的表格名称 ！  ");

return false;

}

if(startTimeSch == ""||

startTimeSch == null){

alert("请您选择查询的开始时间  ");

return false;

}

if(endTimeSch == ""||

endTimeSch == null){

alert("请您选择查询的结束时间  ");

return false;

}

//获得图表的options对象

var options =

myChart.getOption();

var _data =

{"tableSchema":tableSchema,"tableName":tableName,"startTime":startTimeSch,"endTime":endTimeSch};//这里可以加请求的参数

myChart.showLoading({

text: '正在努力的读取数据中...'

});

//通过ajax获取数据

$.ajax({

type:"post",

async:false,

url:"${ctx}/TablesDataCount/getCount.do",//请求路径

dataType:"json",//返回数据形式为json

data:_data,

success:function(result){

if(result){

options.legend.data = result.legend;

//legend赋值数据

options.xAxis[0].data=

result.category;;//x轴赋值数据

options.series[0].data=

result.series[0].data;//y轴赋值数据

myChart.hideLoading();

myChart.setOption(options);

}

},

error:function(errorMsg){

alert("图表请求数据失败啦!");

myChart.hideLoading();

}

})

}

②后台controller

@RequestMapping(value="/getCount.do",  produces =

{"application/json;charset=UTF-8"})

public @ResponseBody

Echarts  getCount(String startTime,String endTime,String

tableName,String tableSchema,HttpServletRequest request,

HttpServletResponse response) {

//int dvalue = tablesDataCountService.getDvalue(startTime,

endTime);//两个日期之间相隔天数

ArrayList allDatesList=new

ArrayList();

allDatesList=tablesDataCountService.getAllDates(startTime,

endTime);//日期List

HashMap map=new

HashMap();

ArrayList countList=new

ArrayList();

for(int m=0;m

map.put("tableSchema", tableSchema);

map.put("tableName", tableName);

map.put("saveTime", allDatesList.get(m));

TablesDataCount

tablesDataCount=tablesDataCountService.getCount(map);

int

count=IfStringUtils.isNullOrEmpty(tablesDataCount)?0:tablesDataCount.getDataCount();

countList.add(count);//表格数量

}

List legend = new

ArrayList(Arrays.asList(new

String[]{"表格内部数据量统计"}));

List category =

allDatesList;//横坐标

List series = new

ArrayList();//纵坐标

series.add(new Series("数据量统计", "line",countList));

//对应日期的数据量

Echarts data=new

Echarts(legend, category, series);

return data;

// String json = new JsonMapper().toJson(map);

// return josn;

}

③Class Series

package org.durcframework.autocode.entity;

import java.util.List;

public class Series {

public String name;

public String type;

public List

data;//这里要用int 不能用String 不然前台显示不正常(特别是在做数学运算的时候)

public Series( String name, String type,

List data) {

super();

this.name = name;

this.type = type;

this.data = data;

}

}

④class tablesDataCount存放数据量表格

package org.durcframework.autocode.entity;

import com.lenovo.btcp.common.annotation.Display;

public class TablesDataCount {

//

@Display(title = "id")

private Integer id;

//

// Date d=new Date();

@Display(title = "tableschema")

private String tableSchema;

//

@Display(title = "tablename")

private String tableName;

//

@Display(title = "datacount")

private Integer dataCount;

//

// @Display(title = "savetime",format="yyyy-MM-dd

HH:mm:ss"  )

@Display(title = "savetime")

private String saveTime;

public String getSaveTime() {

return saveTime;

}

public void setSaveTime(String saveTime) {

this.saveTime = saveTime;

}

//

@Display(title = "comment")

private String comment;

public void setId(Integer id){

this.id = id;

}

public Integer getId(){

return this.id;

}

public String getTableSchema() {

return tableSchema;

}

public void setTableSchema(String tableSchema) {

this.tableSchema = tableSchema;

}

public String getTableName() {

return tableName;

}

public void setTableName(String tableName) {

this.tableName = tableName;

}

public Integer getDataCount() {

return dataCount;

}

public void setDataCount(Integer dataCount) {

this.dataCount = dataCount;

}

// public Date getSaveTime() {

// return saveTime;

// }

//

// public void setSaveTime(Date saveTime) {

// this.saveTime = saveTime;

// }

public String getComment() {

return comment;

}

public void setComment(String comment) {

this.comment = comment;

}

}

⑥Echart 图表类

package org.durcframework.autocode.entity;

import java.util.ArrayList;

import java.util.List;

public class Echarts {

public List legend = new

ArrayList();//数据分组

public List category = new

ArrayList();//横坐标

public List series = new

ArrayList();//纵坐标

public Echarts(List

legendList, List

categoryList, List

seriesList) {

super();

this.legend = legendList;

this.category = categoryList;

this.series = seriesList;

}

}

这就是全部的实现方法还有类。