在项目中使用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');

在项目中使用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');