前期准备

在echart官网中下载对应的ecarts插件。

如果是开发中建议下载源代码，把下载下来的echarts.js 放在对应的文件中。

页面

1、在页面中引入echarts.js。

<script type="text/javascript" src="${appPath}/plugins/echarts/echarts.js"></script>

2、定义存放ecahrt表格的容器。

<div id='line' style="height: 450px; border: 1px solid #ccc; padding: 10px;"></div>
<div id='noData' style="height: 450px; border: 1px solid #ccc; padding: 10px;text-align: center;color:red;font-size:16px;margin-top:20px;font-weight:bold">没有数据</div>

3、初始化echarts的配置。

var myChart = echarts.init(document.getElementById('line'),"light");
var lineOption = {
	title : {
		text : '',
		subtext : ''
	},
	tooltip : {
		trigger : 'axis' //item 在哪条线上显示哪条线上的数据，axis点在哪个坐标点上显示对于点上所有数据
},
legend : {
	data : []
},
toolbox : { //可视化的工具箱
		show : true,
		feature : {
			dataView : { //数据视图
				show : true
			},
			restore : { //重置
				show : true
			},
			dataZoom : { //数据缩放视图
				show : true
			},
			saveAsImage : {//保存图片
				show : true
			},
			magicType : {//动态类型切换
				type : [ 'bar', 'line' ]
			}
		}
	},
	calculable : true,
	xAxis : [ {
		type : 'category',
		boundaryGap : false,
		data : []
	} ],
	yAxis : [ {
		type : 'value',
		axisLabel : {
			formatter : '{value} '
		}
	} ],
	series : []
};
myChart.setOption(lineOption);

4、请求具体的统计数据，并更新echarts中的动态数据。

function queryData() {
	$("#line").show();
	$("#noData").hide();
		$.ajax( {
		url : '${appPath}/btb/sta/fsta0010_getLineImage.st',
		data : {},
		method : "POST",
		dataType : 'json',
		success : function(data) {
		//请求成功时处理
		var data = JSON.stringify(data.resultDataMap);
		var responseText = eval('(' + data + ')');
		lineOption.legend.data = responseText.legend;
		lineOption.xAxis[0].data = responseText.xAxis;
		var serieslist = responseText.series;
		if(serieslist.length > 0){
			for ( var i = 0; i < serieslist.length; i++) {
				lineOption.series[i] = serieslist[i];
		    }
		}else{
			$("#line").hide();
	        $("#noData").show();
		}
		myChart.setOption(lineOption, true);
	},
	complete : function() {
		//请求完成的处理
	},
	error : function() {
		//请求出错处理
		com_div_msg("加载失败");
	}
	})
}

$(function(){
    //相关页面初始化的处理；
    ......
    //查询统计数据
    queryData();
})

后台

在对应的统计的action中：

public String getLineImage() {
    List<EchartsEntity> echarts = new ArrayList<EchartsEntity>();
    // 自定义横坐标
    String[] xAxis = { "周一", "周二", "周三", "周四", "周五", "周六", "周日" };
    // 自定义各种类型的显示数据
    EchartsEntity entity1 = new EchartsEntity("邮件营销", "line", Arrays
    .asList(120, 132, 101, 134, 90, 230, 210));
    EchartsEntity entity2 = new EchartsEntity("联盟广告", "line", Arrays
    .asList(220, 182, 191, 234, 290, 330, 310));
    EchartsEntity entity3 = new EchartsEntity("视频广告", "line", Arrays
    .asList(150, 232, 201, 154, 190, 330, 410));
    echarts.add(entity1);
    echarts.add(entity2);
    echarts.add(entity3);
    String[] legend = { "邮件营销", "联盟广告", "视频广告" };
    resultDataMap = new HashMap<String, Object>();
    resultDataMap.put("xAxis", xAxis);
    resultDataMap.put("series", echarts);
    resultDataMap.put("legend", legend);
    System.out.println(GsonUtil.getJSONString(resultDataMap));
    return "json";
}

2、EchartsEntity

public class EchartsEntity {
    public String name;
    public String type;
    public List<?> data;
    //此处省略get,set方法    
}

配置文件

在对应的strus的配置文件中把后端的resultDataMap 作为json对象返回到页面中：

<package name="btbsta" extends="base" namespace="/btb/sta" strict-method-invocation="false">	 <action name="fsta0010_*" method="{1}" class="fsta0010Action">
	 	<result name="json" type="json">
		 		<param name="includeProperties">resultDataMap.*</param>
			</result>
	 </action>
</package>

示例结果

其他

更换主题

在有些情况下，为了和自己的系统的主题相适应，我们需要更改ecahrt默认的主题。

echarts.js自带

官方自带的主题有default，dark，light。这三种主题是不需要下载的。使用方法如下：

var myChart = echarts.init(document.getElementById('line'), 'light');

官网下载

echarts中除了自带的三种样式之外，还提供了其他主题。使用的方法如下：

1、在官网上下载对应的主题文件的js，例如macarons.js。

2、在页面中引入js。

3、在初始化echarts配置的时候，加入主题的名称即可。

var myChart = echarts.init(document.getElementById('line'), 'macarons');

echarts2.0版本的使用示例