小蓝xlanll

这个屌丝很懒，什么也没留下！

热门标签

Echarts-java后端封装option--（一）柱状图/折线图测试用例(https://blog.csdn.net/Angel_G/article/details/69139584)_java后端barseries图

作者：小蓝xlanll | 2024-03-12 17:39:41

踩

java后端barseries图

最近由于要使用到百度的echarts来做图表的展示，近些天一直在学习echarts的使用，说实话百度echarts的官方文档对于前端通过js来完成图表的展示，确实有很方便之处，但是对于某些数据的处理和赋值都在前端完成确实有些繁琐，国人对于这方面矢志不渝，在后端通过封装好option对象然后转成json传到前端极大的简化了前端对option的操作。这里就简单的写一些后端对option对象的封装。
首先引入 echarts的jar包依赖和js脚本

这里后端使用 ECharts-2.2.7.jar
下载地址 http://mvnrepository.com/artifact/com.github.abel533/ECharts
前端使用 echart.js
下载地址 http://echarts.baidu.com/echarts2/
前后端都是使用2.X版本 echarts对2.x支持比较全面
注意：echarts的后端封装是针对于Echarts2.x相契合的对于3.x之后没有进行更新所以如果使用尽量安装2.x的官方文档进行相应的option对象的后台封装！！切记
依赖引入完之后就可以开始写代码了
1.前后端实现 – 柱状图表

后端首先进行option对象的封装

代码如下：

/**
* 柱状图------图表测试 Controller
*
*/
@Controller
@RequestMapping("/echart")
public class EchartsController {

/**
     * 柱状图图表option 的封装测试用例--路段人流数据
     * @return
     */
    @RequestMapping(value = "/bar",method = RequestMethod.POST)
    @ResponseBody()
    public String bar(){

        //由于是测试用例首先声明 1.标题   2.x轴代表的路段 3.路段数据
        //标题
        String title = "路段人流数据统计";
        //路段
        String[] roads = {"长江路","长河路","长安路","西湖路","建安路"};
        //路段数据
        int[] datas = {123,153,643,234,453};

        //####开始构建option对象 ######
        //这里先做最简单的测试用用例其他渲染的属性大家可以在了解之后自行测试使用
        //1.创建option对象    有两种方式一种是直接创建option但是在封装好option之后要使用json转换工具进行格式的转换
        //这里使用第二种方式直接构建GsonOption 通过toString方法可转换成json
        Option option = new GsonOption();

//2.设置标题可选
option.title().text(title).x("left");//将标题传入即可并且支持链式调用设置显示位置居左

        //3.设置图例可选
        option.legend("路段数据");
        //4.设置工具栏可选
        option.toolbox().show(true).feature(Tool.mark,
                Tool.magicType); //设置可标记

        //5.设置显示工具
        option.tooltip().show(true).
                formatter("{a}</br>{b}:{c}");//设置显示的格式当鼠标放到柱状图上时的显示格式

        //6.设置x轴数据
        CategoryAxis categoryAxis = new CategoryAxis();
        categoryAxis.data(roads);
        option.xAxis(categoryAxis);

        //7.设置y轴这里不给指定数据自动调整
        ValueAxis valueAxis = new ValueAxis();
        option.yAxis(valueAxis);

        //8.填充柱状图数据
        Bar bar = new Bar();
        bar.name("路段数据");
        for(int i = 0; i < roads.length; i++){
            Map<String,Object> map = new HashMap<>();
            map.put("value",datas[i]);
            map.put("name",roads[i]);
            bar.data(map);//指定路段装入指定数据
        }
        //装入数据表中
        option.series(bar);
        //option进行json格式处理
        String result = option.toString();
        return result ;
    }

}

其中特别要注意的是option最后转换成json格式的数据

如果使用Option opiton = new Option()来构建的option对象在传入前端时可使用Goolge的Gson转换jar进行json的转换
例如 new Gson().toJosn(option);
如果使用的是 Option option = new GsonOption(); 来构建的对象
可直接对option进行toString()即可 GsonOption对toString进行了重写;

传入前端的数据用eval（）方法对json字符串进行解析并加上（）后可直接使用

前端代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
//一定要指定div的高度和宽度以便能撑起图标
<div id="echart"style="height:300px;width:600px;>

</div>

    initEcharts();
    function initEcharts(){
         echarts.clear();
         echarts.showLoading({text: '正在努力的读取数据中...'});
        $.ajax({
            url:"/echarts/bar",
            type:"post",
            success:function(data){
                var option = eval("("+data+")");
                echarts.setOption(option);
                echarts.hideLoading();

}

})

}

</script>

显示图表如下：

这里写图片描述

解释一下图标

1.代表标题并且居左
2.代表图例在填充内容是bar的name应与之对应
3.代表工具栏
4.代表显示工具格式如上 – –：–
5.代表x轴路段名称
折线图测试

直接上代码：
java封装option代码：

/**
     * 折线图的测试用例
     * @return
     */
    @RequestMapping(value = "/line",method =RequestMethod.POST,
    produces = {"application/text;charset=UTF-8"})
    @ResponseBody()
    public String line(){
        String title = "断舍离";
        String[] types = {"断","舍","离"};
        int[][] datas = {{13,456,72,68,242,445,81},
                        {123,46,752,78,22,45,841},
                        {123,456,72,778,222,45,841}};
        String[] weeks ={"星期一","星期二","星期三","星期四","星期五","星期六","星期日"};

Option option = new GsonOption();

option.title().text(title).x("left");
option.legend().data(types).x("center");

option.tooltip().show(true);
option.toolbox().show(true).feature(Tool.magicType,Tool.dataZoom);

CategoryAxis categoryAxis = new CategoryAxis();

        categoryAxis.data(weeks);
        option.xAxis(categoryAxis);
        option.yAxis(new ValueAxis());

//循环为了获取多条折线数据
for(int i =0;i< types.length;i++){

           //创建line对象
           Line line = new Line();
           String type = types[i];
           line.name(type);
           for(int j = 0; j<weeks.length;j++){

line.data(datas[i][j]);

           }
            option.series(line);
       }
        return option.toString();
    }

前端代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
//一定要指定div的高度和宽度以便能撑起图标
<div id="echart"style="height:300px;width:600px;>

</div>

    initEcharts();
    function initEcharts(){
         echarts.clear();
         echarts.showLoading({text: '正在努力的读取数据中...'});
        $.ajax({
            url:"/echarts/line",
            type:"post",
            success:function(data){
            //对传过来的json字符串转化为json对象等同于 JSON.parse(data);
                var option = eval("("+data+")");
                echarts.setOption(option);
                echarts.hideLoading();

}

})

}

</script>

结果如下图：

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/225031

Echarts-java后端封装option--（一）柱状图/折线图 测试用例(https://blog.csdn.net/Angel_G/article/details/69139584)_java后端barseries图

Echarts-java后端封装option--（一）柱状图/折线图测试用例(https://blog.csdn.net/Angel_G/article/details/69139584)_java后端barseries图