java后台封装echarts（java里的封装）

今天给各位分享java后台封装echarts的知识，其中也会对java里的封装进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

1、怎么用java编写echarts代码2、java后台运行如何实现将数据转化成echart图3、如何用java整合echarts生成饼图4、在java EE中怎么使用Echarts

怎么用java编写echarts代码

html代码：放2个div，取个id就行。引用写好的js。测试类型echarts代码：1、在BusinessJs/echarts.js中引用echarts及zrender：

java后台运行如何实现将数据转化成echart图

传输JSON数据.

后台自己组装需要的数据.

不通项目架构有不通的方式

可以通过 response 通过流写出去

spring 可以加上 @ResponseBody 这个注解

如何用java整合echarts生成饼图

首先要把echarts所需的js和swf文件导入进去

  //后台拼图标所需xml

  StringBuffer outXml = new StringBuffer();//任务列表xml字符串

  @Action(“/task/loadMyTaskPercentXml”)

    public String loadMyTaskPercentXml()

    {

        HttpServletResponse res = ServletActionContext.getResponse();

        res.setHeader(“Cache-Control”, “no-store”);

        res.setHeader(“Pragma”, “no-cache”);

        res.setDateHeader(“Expires”, 0);

        res.setContentType(“text/xml;charset=GBK”);

        PrintWriter out = res.getWriter();

        StringBuffer outXml = new StringBuffer(

            “?xml version=\”1.0\” encoding=\”GBK\”?\n”);

        outXml

            .append(“chart baseFontSize=\’12\’ caption=\’任务统计\’ subcaption=\’\’  yAxisMinValue=\’51650.1\’ yAxisMaxValue=\’71118.3\’ xaxisname=\’日期\’ yaxisname=\’数量\’ hovercapbg=\’FFECAA\’ hovercapborder=\’F47E00\’ formatNumberScale=\’0\’  decimalPrecision=\’0\’ showvalues=\’1\’ numdivlines=\’10\’ numVdivlines=\’0\’ shownames=\’1\’ rotateNames=\’1\'”);

        outXml.append(“\n”);

        outXml.append(“set name=\’已完成任务(%)”);

        outXml.append(“\’ value=\'” + s1.replace(“%”, “”) + “”);

        outXml.append(“\’ /”);

        outXml.append(“\n”);

        outXml.append(“set name=\’未完成任务(%)”);

        outXml.append(“\’ value=\'” + s2.replace(“%”, “”) + “”);

        outXml.append(“\’ /”);

        outXml.append(“\n”);

        outXml.append(“/chart\n”);

        out.print(outXml.toString());

        out.flush();

        out.close();

        return null;

    }

    在后台进行拼装xml，并且返回到页面

    div style=”display:none” id=”taskListGraph”${outXml}/div

    script  type=”text/javascript”

        var text= document.getElementById(“taskListGraph”).innerHTML

var chart2 = new FusionCharts(“${base}/swf/Bar2D.swf?ChartNoDataText=暂无数据XMLLoadingText=正在载入数据，请稍候”, “chart02”, “610”, “276”);

chart2.setDataXML(text);

chart2.render(‘jdbox’);

chart2.addParam(“wmode”, “Opaque”);

    /script

    这样图就生成好了！

在java EE中怎么使用Echarts

@Override

public Option selectRemoveCauses() throws BusinessException {

//查询前20

PageHelper.startPage(1, 20, false);

//数据库查询获取统计数据

ListMapString, Object list = kc22Mapper.selectRemoveCauses();

//为了数据从大到小排列，这里需要倒叙

Collections.sort(list, new ComparatorMapString, Object() {

@Override

public int compare(MapString, Object o1, MapString, Object o2) {

return -1;

}

});

//创建Option

Option option = new Option();

option.title(“剔除药品”).tooltip(Trigger.axis).legend(“金额（元）”);

//横轴为值轴

option.xAxis(new ValueAxis().boundaryGap(0d, 0.01));

//创建类目轴

CategoryAxis category = new CategoryAxis();

//柱状数据

Bar bar = new Bar(“金额（元）”);

//饼图数据

Pie pie = new Pie(“金额（元）”);

//循环数据

for (MapString, Object objectMap : list) {

//设置类目

category.data(objectMap.get(“NAME”));

//类目对应的柱状图

bar.data(objectMap.get(“TOTAL”));

//饼图数据

pie.data(new PieData(objectMap.get(“NAME”).toString(), objectMap.get(“TOTAL”)));

}

//设置类目轴

option.yAxis(category);

//饼图的圆心和半径

pie.center(900,380).radius(100);

//设置数据

option.series(bar, pie);

//由于药品名字过长，图表距离左侧距离设置180，关于grid可以看ECharts的官方文档

option.grid().x(180);

//返回Option

return option;

}

代码中的注释很详细。

Service返回Option后，在Controller层返回，Controller层代码如下：

[java] view plain copy 在CODE上查看代码片派生到我的代码片

@RequestMapping(” /removecauses”)

public

@ResponseBody

WebResult removecauses() throws Exception {

WebResult result = new WebResult();

try {

Option option = injuryService.selectRemoveCauses();

result.isOK();

result.setData(option);

} catch (BusinessException e) {

result.setException(e);

}

return result;

}

SpringMVC配置的返回JSON，这里的WebResult不用多考虑，就是一层统一的封装，和ECharts图表无关。

然后是前台页面，使用jQuery的getJSON方法获取数据，完整的页面代码如下：

[html] view plain copy 在CODE上查看代码片派生到我的代码片

body style=”padding:0″

div style=”padding:10px;clear: both;”

div id=”psLine” style=”height:600px;”/div

/div

/body

script src=”jslib/echarts/echarts-all.js”/script

script type=”text/javascript”

//图表

var psLineChar = echarts.init(document.getElementById(‘psLine’));

//查询

function loadDrugs() {

psLineChar.clear();

psLineChar.showLoading({text: ‘正在努力的读取数据中…’});

$.getJSON(‘analysis/removecauses.html’, function (data) {

if (data.success) {

psLineChar.setOption(data.data, true);

psLineChar.hideLoading();

} else {

alert(‘提示’, data.msg);

}

});

}

//载入图表

loadDrugs();

转

关于java后台封装echarts和java里的封装的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。