在项目中使用Echarts
前期准备在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 = serieslist; } }else{ $("#line").hide(); $("#noData").show(); } myChart.setOption(lineOption, true); }, complete : function() { //请求完成的处理 }, error : function() { //请求出错处理 com_div_msg("加载失败"); } }) } |
| $(function(){ //相关页面初始化的处理； ...... //查询统计数据 queryData(); }) |
在对应的统计的action中：
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'); |