echarts图表第一个案例

最新推荐文章于 2024-05-30 17:51:43 发布

weixin_34138139

最新推荐文章于 2024-05-30 17:51:43 发布

阅读量108

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cnsdhzzl/p/6136463.html

版权

1.action中获取到数据

@Override
    public String execute() throws Exception {
        List<Student> find = echartsService.find();
        Gson g = new Gson();
        String list = g.toJson(find);
        ServletActionContext.getResponse().setCharacterEncoding("UTF-8");
        ServletActionContext.getResponse().getWriter().write(list);
        System.out.println(list);
        return NONE;
    }

2.jsp页面应用echarts

<script type="text/javascript" src="<%=path%>/js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="<%=path%>/js/echarts.js" /></script>
<script type="text/javascript">
    $(function() {
        var myChart = echarts.init(document.getElementById("main"));
        $("#btn").click(function() {
            $.ajax({
                url : "echarts",
                success : function(data) {
                    var result = eval("(" + data + ")");
                    var noe = new Array();
                    var two = new Array();
                    $.each(result, function(i, dom) {
                        noe[i] = dom.name;
                        two[i] = dom.address;
                    });
                    // 指定图表的配置项和数据
                    var option = ({
                        title : {
                            text : 'ECharts图表'
                        },
                        tooltip : {
                            trigger : 'axis',
                            axisPointer : { // 坐标轴指示器，坐标轴触发有效
                                type : 'cross' // 默认为直线，可选为：'line' | 'shadow'|'cross'
                            }
                        },
                        toolbox : {
                            show : true,
                            feature : {
                                dataView : {
                                    show : true,
                                    readOnly : true
                                },
                                restore : {
                                    show : true
                                },
                                magicType : {
                                    type : [ 'line', 'bar', 'stack', 'tiled' ]
                                },
                                saveAsImage : {
                                    show : true
                                }
                            }
                        },
                        legend : {
                            data : [ '人数' ]
                        },
                        xAxis : {
                            data : two
                        },
                        yAxis : {},
                        series : [ {
                            name : '人数',
                            type : 'bar',
                            data : noe
                        } ]
                    });
                    myChart.setOption(option);
                },
                error : function(data) {
                    alert("请求报表错误");
                }
            });
        });
    });
</script>

3.准备一个具有宽高的容器(必须有宽高)

<body>
    <input type="button" value="显示图表" id="btn" />
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>

4.效果