java代码echarts实现数据图形化显示

ECharts是一款由百度前端技术部开发的，基于Javascript的数据可视化图表库.echarts是中国的,也是世界的.最近有时间,自己花了点时间学习了以下,下面我将从入门demo,动态从数据库中获取数据展示,和java自动生成,在代码里完成数据的设置和表的生成.这三个阶段来做下浅谈.

我是通过这种方式来引入echarts的,后面需要引用别的时候也会有具体模块的.

<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>

我们需要在页面先定义一个div,暂且id=main.后面就是通过js将图标生成在这个div中.

</head>
<body>
                   <div id="main" style="wide :600px;height: 480px"></div>
</body>
</html>

之后我们用js代码来初始化,填充图表数据

 <title>echarts的柱状图的测试案例</title>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
    // 路径配置
    require.config({
        paths: {
            echarts: 'http://echarts.baidu.com/build/dist'
        }
    });
    // 使用
    require(
        [
            'echarts',
            'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
        ],
        function (ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('main'));
            //x轴的参数列表
            var  xAxisData =["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子","帽子","围巾"];//后期这里是动态从数据库获取的json数据
            var data =[5, 20, 50, 10, 24, 20,24,32];

            //设置数据
            var option = {
                title: {
                    text: '树形图表：渐变色 阴影 点击缩放',
                    subtext: "冬季服装日销售统计"
                },
                tooltip: {  //提示
                    show: true
                },
                legend: {   //设置图例
                    data:['销量']
                },
                //设置坐标轴
                xAxis : [
                    {
                        type : 'category',
                        data :xAxisData  //这里就是刚刚我们设置的x轴的数据
                    }
                ],

                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                //设置数据
                series : [
                    {//树形的
                        "name":"销量",
                        "type":"bar",  //type=bar就是树形图标
                        "data":data
                    }
                ]
            };
            // 为echarts对象加载数据
            myChart.setOption(option);
        }

    );
</script>

这样一个简单的demo就完成了.只是这里面的数据我们是固定写在页面上的.

 接下来我们就要模拟在企业里面图标显示数据分析结果了.来演示一个查看班级人数.我也只是将上面demo中的数据动态添加而已,但是这却好过写死在前端页面.

   <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main'));
                //x轴的参数列表
                var  xAxisData =${xAxisData};
                var data =${data};

                //设置数据
                var option = {
                    title: {
                        text: '树形图表：渐变色 阴影 点击缩放',
                        subtext: "冬季服装日销售统计"
                    },
                    tooltip: {  //提示
                        show: true
                    },
                    legend: {   //设置图例
                        data:['人数']
                    },
                    //设置坐标轴
                    xAxis : [
                        {
                            type : 'category',
                            data :xAxisData
                        }
                    ],

                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    //设置数据
                    series : [
                        {//树形的
                            "name":"班级人数",
                            "type":"bar",
                            "data":data
                        }
                    ]
                };
                // 为echarts对象加载数据
                myChart.setOption(option);
            }
        );
    </script>
</head>

在后台controller里面我往model 里面添加modelAttribut("xAxisData",一个list集合里面是班级名称);注意这个list里面的String类型在传到前台来时候里面的String

要用""括起来.这是作为x轴的每列的名称

 添加modelAtrribute("data",和只获取到的每个班级人数的list集合);这个作为数据填充给图表.
)

这里的collection3是我们自己写的工具类,

 /**
  * 获取到所有的班级数据,这里传到前台的只要班级名称和人数
  */
@RequestMapping(value = {"list",""})
 public String findAllPie(Model model){
     List<TestPieClass> list = service.findList(new TestPieClass());
    List<String> className = Collections3.extractToList(list, "className");
    List<String> finalList = new ArrayList<>();
       for (String name : className){
          finalList.add("'".concat(name.concat(" '"))) ;
       }
    model.addAttribute("xAxisData",finalList );
       model.addAttribute("data",Collections3.extractToList(list,"num"));
     return "mods/echarts/other/testClassBar";
 }

完成后页面展示的效果是这样的(标题和副标题我没改)

接下来我要开始讲讲第三种更简单的将页面和数据分开的做法,我们直接在java代码中返回option给页面,页面在js里面填充生成图表.

用了GitHub上1533abe的开源项目,曾经用过他的通用mapper也是超级爽,他还有好几个开源项目.

我对应的jsp我写了一个对应的js,做演示.实际上写这一个js文件可以在其他页面上用的,谁用谁来引入.

 js里面动态生成

<%@ page contentType="text/html;charset=UTF-8" %>
<script>
// 基于准备好的dom，初始化echarts实例4
var myChart;
function refreshCharts(){
    jp.get("${ctx}/kindclothing/echarts/option", function (option) {
        // 指定图表的配置项和数据
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    })
    $('#testPieClassTable').bootstrapTable('refresh');
}

$(document).ready(function() {
    //初始化echarts 获取到echarts对象
    myChart = echarts.init(document.getElementById('main'));
    window.onresize = myChart.resize;

在jsp页面,我这个页面还有一个table,作为分页显示学生信息的.它与echarts无关哦

    <%@include file="fzqtestPieClassList.js" %>
</head>
<body>
   <div class="wrapper wrapper-content">
   <div class="panel panel-primary">
   <div class="panel-heading">
      <h3 class="panel-title">学生列表(测试数据)</h3>
   </div>
   <div class="panel-body">
      <div id="main" style="width: 100%;height: 300px"></div>

<table id="testPieClassTable"   data-tolbar="#toolbar"></table                                                                     接下来就是构造这个js函数里面的option了

在这里先演示饼形图:pie

@RequestMapping("test")

public String list(){  return "mods/echarts/other/fzqtestPieClassList";  }

/**
 * 饼形图的输出
 * @return
 */
 /*@RequestMapping(value = "option")
 @ResponseBody
 public GsonOption getOption(){
     GsonOption gsonOption = new GsonOption();
     gsonOption.title().text("班级学生人数统计表").subtext("测试");
     //option变态的地方在于这里需要设置多个option!!
     gsonOption.toolbox().show(true).feature(Tool.mark, Tool.dataView, Tool.restore, Tool.saveAsImage, new MagicType(Magic.pie, Magic.funnel)
             .option(new MagicType.Option().funnel(
                     new Funnel().x("25%").width("50%").funnelAlign(X.left).max(1548))));
     //构造数据给页面
     List<TestPieClass> list = service.findList(new TestPieClass());
     List<PieData> pieData  = new ArrayList<>();
           for (TestPieClass testPieClass :list)    {
            pieData.add( new PieData(testPieClass.getClassName(),testPieClass.getNum()));//在这里就完成了对x轴和数据表(y轴的数据设置)
           }
      Pie pie = new Pie().name("班级人数统计表");
           pie.setData(pieData);
           gsonOption.series(pie);
     return gsonOption;
  }*/

 饼形图显示效果

之后我又换成额树形图:和饼形图java代码略有不同

/**
 * 树形图的输出
 */
@RequestMapping(value = "option")
@ResponseBody
public GsonOption getOption(){
    GsonOption option = new GsonOption();
    option.title().text("班级学生信息分析图").subtext("测试");
    option.toolbox().show(true).feature(Tool.mark, Tool.dataView, Tool.restore, Tool.saveAsImage, new MagicType(Magic.line, Magic.funnel)
            .option(new MagicType.Option().funnel(  //以上是设置 数据视图,还原,作为图片保存,转为线形图, 等等图标
                    new Funnel().x("25%").width("50%").funnelAlign(X.left).max(1548))));
    //构造数据
    List<TestPieClass> list = service.findList(new TestPieClass());

    CategoryAxis categoryAxis = new CategoryAxis();
    categoryAxis.setData(Collections3.extractToList(list,"className"));  //这里是构造x轴数据,只要班级
    List<Bar> barList = new ArrayList<>(); 
    Bar bar = new Bar("班级人数信息");   //这次用bar对应的是树形图
      bar.stack("人数");
    bar.setData(Collections3.extractToList(list,"num")); //collection3这个工具类这样会获取到list集合中所有的班级 num的数据,组成一个list
    bar.markPoint().data(new PointData().type(MarkType.max).name("最大值"), new PointData().type(MarkType.min).name("最小值"));
    bar.markLine().data(new PointData().type(MarkType.average).name("平均值"));

    option.setCalculable(true);
    option.xAxis(categoryAxis);
    option.yAxis(new ValueAxis());
   Legend legend = new Legend();
    legend .setShow(true);   //这是设置图例
    option.setLegend(legend);
    option.series(bar);
    return option;
}

  跑起来访问test,会跳转到我们写的那个jsp页面,在这个jsp页面访问option,controller接收到这个请求返回一个gsonoPtion ,完成图表数据的填充

   当然这其中还有很多设置项,和css的样式的设置的.大家可以自行添加.

java代码echarts实现数据图形化显示

猜你喜欢