ECharts简单使用
后端代码：
package com.dataManager.utility.vo;
import java.util.ArrayList;
import java.util.List;
/**
* @文件名: EchartData.java
* @功能描述: ECharts数据封装类
* @author SunF
* @date 2015-6-2 下午08:26:28
*
*/
public class EChartData {
//数据分组
private List<String> legend = new ArrayList<String>();
//横坐标
private List<String> category = new ArrayList<String>();
//纵坐标
private List<Series> series = new ArrayList<Series>();
public EChartData(List<String> legendList,
List<String> categoryList, List<Series> seriesList) {
this.legend = legendList;
this.category = categoryList;
this.series = seriesList;
}
@Override
public String toString() {
return "EChartData [legend=" + legend + ", category=" + category
+ ", series=" + series + "]";
}
//get、set略...
}
package com.dataManager.utility.vo;
import java.util.List;
/**
* @文件名: Series.java
* @功能描述: Echarts封装数据类
* @author SunF
* @date 2015-6-2 下午08:27:16
*
*/
public class Series {
private String name;
private String type;
//这里不能用String，不然前台显示不正常（特别是在做数学运算的时候）
private List<Double> data;
public Series( String name, String type, List<Double> data) {
this.name = name;
this.type = type;
this.data = data;
}
@Override
public String toString() {
return "Series [name=" + name + ", type=" + type + ", data=" + data
+ "]";
}
//get、set略...
}
前端代码：
<div id="echarts" style="width:860px;height:250px"></div>
<!-- 其他略 -->
<script src="<%=path%>/js/echarts/echarts-all.js" type="text/javascript"></script>
<script type="text/javascript">
//绑定
var myChart = echarts.init(document.getElementById('echarts'));
myChart.showLoading({
text : "图表数据正在努力加载..."
});
var option = {
title : {
text: '热点实时监控',
subtext: ''
},
tooltip : {
show : true,
trigger: 'axis'
},
legend: {
data:['空']
},
toolbox: {
show : true,
feature : {
mark : {show: false},
dataView : {show: true, readOnly: true},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data : ['00:00','1:00','2:00','3:00','4:00','5:00','6:00']
}
],
yAxis : [
{
type : 'value',
axisLabel : {
formatter: '{value}'
}
}
],
series : [
{
name:'数值',
type:'line',
itemStyle: {
normal: {
areaStyle: {type: 'default'}, //面积区域颜色
lineStyle: {
color : '#E8514E', //折线颜色
shadowColor:'rgba(0,0,0,0.4)'
}
}
},
data:[1, 2, 3, 4, 5, 2, 1],
markPoint : {
data : [
{type : 'min', name: '最小值'},
{type : 'max', name: '最大值'}
]
}
/* ,
markLine : {
itemStyle: {
normal: {
lineStyle: {
color : '#336699', //平均线颜色
shadowColor:'rgba(0,0,0,0.4)'
}
}
},
data : [
{type : 'average', name: '平均值'}
]
} */
}
]
};
myChart.setOption(option);
myChart.hideLoading(); //隐藏加载等待
//以上为一个数据为零的空图，仅做初始化使用。
</script>
<script type="text/javascript">
/*AJAX更新图标信息*/
function ajaxGetChartData(monitorNo) {
//判断热点id
if(undefined != monitorNo || "" != monitorNo){
monitorNo = 'id='+monitorNo;
}else{
monitorNo = {};
}
//获得图表的options对象
var options = myChart.getOption();
//Ajax获取封装ECharts的数据
$.ajax({
type : "post",
async : false, //同步执行
url : "<%=path%>/monitorAjax/createChart.v",
data : monitorNo,
dataType : "json", //返回数据形式为json
success : function(result) {
if (result) {
options.legend.data = result.legend;
options.xAxis[0].data = result.category;
options.series[0].data = result.series[0].data;
//更新图表信息
myChart.hideLoading();
//加载数据项
myChart.setOption(options);
}
},
error : function(errorMsg) {
/* alert("图表请求数据失败!"); */
myChart.hideLoading();
}
});
}
</script>
//其他
package com.dataManager.utility.util;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import net.sf.json.JSONObject;
import com.dataManager.entity.MonitorOutput;
import com.dataManager.utility.vo.EChartData;
import com.dataManager.utility.vo.Series;
public class EchartsUtils {
/**
* @功能描述: 创建图表
* @param DataList
* @return
*/
public static EChartData createMonitorChart(List<MonitorOutput> DataList){
if(null == DataList || DataList.size() < 1){
return emptyLineData();
}
EChartData date = createEChartData(DataList);
return date;
}
/**
* @功能描述: 根据监测点数据列表创建EChartData数据模型
* @param dataList 数据集合 (最新10个数据，倒序)
*/
private static EChartData createEChartData(List<MonitorOutput> dataList) {
//横坐标
List<String> category = new ArrayList<String>();
//纵坐标
List<Series> series = new ArrayList<Series>();
List<Double> valueList = new ArrayList<Double>();
for(int i=dataList.size()-1; i>=0; i--){
String date = dataList.get(i).getStamp().toString();
String xNum = date.substring(11, 19);
Double value = dataList.get(i).getValue();
category.add(xNum);
valueList.add(value);
}
String lineName = dataList.get(0).getMonitor().getNumber();
series.add(new Series(lineName, "line", valueList ));
//数据分组
List<String> legend = new ArrayList<String>(Arrays.asList(new String[]{lineName}));
EChartData data = new EChartData(legend, category, series);
return data;
}
/**
* @功能描述: 返回空图表
* @return
*/
private static EChartData emptyLineData() {
//数据分组
List<String> legend = new ArrayList<String>(Arrays.asList(new String[]{"无"}));
//横坐标
List<String> category = new ArrayList<String>(
Arrays.asList(new String []{"0","1","2","3","4","5","6"}));
//纵坐标
List<Series> series = new ArrayList<Series>();
series.add(new Series("无", "line",
new ArrayList<Double>(Arrays.asList(
0d,0d,0d,0d,0d,0d,0d))));
EChartData data=new EChartData(legend, category, series);
return data;
}
public static void main(String[] args){
EChartData ee = createMonitorChart(null);
System.out.println(ee.toString());
String jsessionid = JSONObject.fromObject(ee).toString();
System.out.println(jsessionid);
}
}