echarts简单集成

最新推荐文章于 2024-06-17 04:15:06 发布

没忄没肺

最新推荐文章于 2024-06-17 04:15:06 发布

阅读量1.8k

点赞数 1

分类专栏： java echarts 文章标签： echarts集成

本文链接：https://blog.csdn.net/qq_32131937/article/details/88411091

版权

java 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

echarts

2 篇文章 0 订阅

订阅专栏

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

没忄没肺

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
echarts简单集成

Echarts是非常强大的统计图插件，平时在做统计分析是会用到的比较多，下面做了个简单的集成demo首先是html为Echarts提供容器，然后请求后台为echarts构建数据，最后进行渲染，代码比较简单html：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt;...
复制链接

扫一扫

专栏目录