Echarts是非常强大的统计图插件,平时在做统计分析是会用到的比较多,下面做了个简单的集成demo
首先是html为Echarts提供容器,然后请求后台为echarts构建数据,最后进行渲染,代码比较简单
html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>

    <script src="/plugins/JQuery/jquery-3.3.1.min.js"></script>
    <script src="/plugins/ECharts/echarts.min.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例

        $.ajax({
            type : "GET",//提交方式
            url  : "/getEchartsInfo",//提交地址
            data : { },//提交的数据
            dataType : "json",
            success  : function(data){  //返回结果
                var xaxix = data.xAxisData;
                var xval = data.xVal;
                var xval1 = data.xVal1;
                var myChart = echarts.init(document.getElementById('main'));        //main为Echarts绑定的容器
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: 'ECharts集成测试'
                    },
                    tooltip: {},
                    legend: {
                        data:['销量','闹着玩']
                    },
                    xAxis: {
                        data: xaxix
                    },
                    yAxis: {},
                    series: [{
                        name: '销量',
                        type: 'bar',
                        data: xval
                    },{
                        name: '闹着玩',
                        type: 'line',
                        data: xval1
                    }]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                myChart.on('click', function (params) {
                    console.log(params);
                });
            },
            error : function(data){
                alert("错误");
            }
        });



    </script>
</body>
</html>

后台:

 	@ResponseBody
    @RequestMapping("getEchartsInfo")
    public JSONObject getEchartsInfo(){
        JSONObject jo = new JSONObject();
        JSONArray xAxisDataJa = new JSONArray();
        xAxisDataJa.add("衬衫");
        xAxisDataJa.add("羊毛衫");
        xAxisDataJa.add("雪纺衫");
        xAxisDataJa.add("裤子");
        xAxisDataJa.add("高跟鞋");
        xAxisDataJa.add("袜子");
        jo.put("xAxisData",xAxisDataJa);
        JSONArray varJa = new JSONArray();
        varJa.add("150");
        varJa.add("200");
        varJa.add("36");
        varJa.add("100");
        varJa.add("108");
        varJa.add("209");
        jo.put("xVal",varJa);

        JSONArray varJa1 = new JSONArray();
        varJa1.add("18");
        varJa1.add("15");
        varJa1.add("100");
        varJa1.add("50");
        varJa1.add("70");
        varJa1.add("60");
        jo.put("xVal1",varJa1);
        return jo;
    }

效果如图:

在这里插入图片描述
Echarts还有其他丰富的图表功能,详情可参照Echarts官网
https://www.echartsjs.com/index.html

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐