echarts bar 宽度|echarts+java封装类实现图表的实例

【www.bbyears.com--js教程】

介绍了一个基于.net封装的echarts类，今天分享一下：echarts+java封装类实现图表的demo。

1、echarts封装类：

package com.ffcs.wlan.model;
import java.util.ArrayList;
import java.util.List;
public class EchartData {
    public List legend = new ArrayList();//数据分组
    public List category = new ArrayList();//横坐标
    public List series = new ArrayList();//纵坐标
    public EchartData(List legendList, List categoryList, List seriesList) {
        super();
        this.legend = legendList;
        this.category = categoryList;
        this.series = seriesList;
    }
}

package com.ffcs.wlan.model;
import java.util.List;
public class Series  {
    public String name;
    public String type;
    public List data;//这里要用int 不能用String 不然前台显示不正常（特别是在做数学运算的时候）
    public Series( String name, String type, List data) {
        super();
        this.name = name;
        this.type = type;
        this.data = data;
    }
}

上面是Series 类。

2、控制器实现

package com.ffcs.wlan.controller;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.ffcs.wlan.model.EchartData;
import com.ffcs.wlan.model.Series;
@Controller
@RequestMapping("/echarts")
public class EntityController {
    private static final Logger logger = LoggerFactory.getLogger(EntityController.class);
    @RequestMapping("/line_data")
    @ResponseBody
    public EchartData lineData() {
        logger.info("lineData....");
        List legend = new ArrayList(Arrays.asList(new String[]{"最高气温"}));//数据分组
        List category = new ArrayList(Arrays.asList(new String []{"周一","周二","周三","周四","周五","周六","周日"}));//横坐标
        List series = new ArrayList();//纵坐标
        series.add(new Series("最高气温", "line",
                        new ArrayList(Arrays.asList(
                                21,23,28,26,21,33,44))));
        EchartData data=new EchartData(legend, category, series);
        return data;
    }
    @RequestMapping("/line_page")
    public String linePage() {
        logger.info("linePage....");
        return "report/line";
    }
}

3、jsp页面代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>




<script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts2.0/esl.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>


   
       
    <script type="text/javascript" language="javascript">
        var myChart;
        var eCharts;
        require.config({
            paths : {
                "echarts" : "${pageContext.request.contextPath}/js/echarts2.0/echarts" ,
                "echarts/chart/line" : "${pageContext.request.contextPath}/js/echarts2.0/echarts" //需要的组件
            }
        });
        require(
            [ "echarts",
              "echarts/chart/line"
            ], DrawEChart //异步加载的回调函数绘制图表
        );
        //创建ECharts图表方法
        function DrawEChart(ec) {
            eCharts = ec;
            myChart = eCharts.init(document.getElementById("main"));
            myChart.showLoading({
                text : "图表数据正在努力加载..."
            });
            //定义图表options
            var options = {
                title : {
                    text : "未来一周气温变化",
                    subtext : "纯属虚构",
                    sublink : "http://www.111cn.net"
                },
                tooltip : {
                    trigger : "axis"
                },
                legend : {
                    data : [ "最高气温" ]
                },
                toolbox : {
                    show : true,
                    feature : {
                        mark : {
                            show : true
                        },
                        dataView : {
                            show : true,
                            readOnly : false
                        },
                        magicType : {
                            show : true,
                            type : [ "line", "bar" ]
                        },
                        restore : {
                            show : true
                        },
                        saveAsImage : {
                            show : true
                        }
                    }
                },
                calculable : true,
                xAxis : [ {
                    type : "category",
                    boundaryGap : false,
                    data : [ "1", "2", "3", "4", "5", "6", "7" ]
                } ],
                yAxis : [ {
                    type : "value",
                    axisLabel : {
                        formatter : "{value} °C"
                    },
                    splitArea : {
                        show : true
                    }
                } ],
                grid : {
                    width : "90%"
                },
                series : [ {
                    name : "最高气温",
                    type : "line",
                    data : [ 11, 22, 33, 44, 55, 33, 44 ],//必须是Integer类型的,String计算平均值会出错
                    markPoint : {
                        data : [ {
                            type : "max",
                            name : "最大值"
                        }, {
                            type : "min",
                            name : "最小值"
                        } ]
                    },
                    markLine : {
                        data : [ {
                            type : "average",
                            name : "平均值"
                        } ]
                    }
                } ]
            };
            myChart.setOption(options); //先把可选项注入myChart中
            myChart.hideLoading();
            getChartData();//aja后台交互
        }
    </script>
    <script type="text/javascript">
        function getChartData() {
            //获得图表的options对象
            var options = myChart.getOption();
            //通过Ajax获取数据
            $.ajax({
                type : "post",
                async : false, //同步执行
                url : "${pageContext.request.contextPath}/echarts/line_data",
                data : {},
                dataType : "json", //返回数据形式为json
                success : function(result) {
                    if (result) {
                        options.legend.data = result.legend;
                        options.xAxis[0].data = result.category;
                        options.series[0].data = result.series[0].data;
                        myChart.hideLoading();
                        myChart.setOption(options);
                    }
                },
                error : function(errorMsg) {
                    alert("不好意思，大爷，图表请求数据失败啦!");
                    myChart.hideLoading();
                }
            });
        }
    </script>

注意路径${pageContext.request.contextPath}！

本文来源：http://www.bbyears.com/wangyezhizuo/100889.html