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
向您推荐>>Eolink开发者社区

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

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生