Echarts与后台(SSM) 数据交互

一、Echarts 是什么？

在说 Echarts 是什么之前,先来看看我们常看到的数据图形:

  

 

 

这就是 Echarts 搞出来的,通俗一点来说,Echarts 就是可视化图形界面,获取到后台的数据,通过图形的形式形象化的展现在你的面前。 相对于死板的数据字符串,清晰的图形分析简直好到不能再好。

当后台管理系统有一定的数据量后，我们可能需要对这些数据进行统计、分析，提炼出更多有用的信息，而为了使这些冰冷的数据显得更平易近人，更直观的传达信息，我们可以使用图表来将数据表达出来，实现数据可视化。Echarts框架就可以让我们快速的构建出图表来展示数据

 

 

二、Echarts 与后台交互呈现数据:

关于 Echarts 的详细介绍,可以到 Echarts官网 进行详细的研究,这篇文章的重点是实现与后台的交互,不与后台交互,数据都是模拟的假数据,作为一个资(jia)深(de)的全栈,掌握一些基础的前后台交互还是很有必要的。

 

梳理需求

1. 要干嘛——统计这一年的订单每个月信息；
2. 要知道什么——订单数量，订单金额；
3. 什么图表合适——看个人，折线图比较好观察订单每个月数量和对应的金额；
4. 选择的图表需要什么数据——订单数量，订单金额，还有日期；

 

1.第一步先下载一个echarts插件，
下载地址：http://echarts.baidu.com/

2.第二步

下载之后就是一个js文件，

把它放到你创建的文件夹里面

然后再引入进你写的html里面

3.控制器

 

@RequestMapping(value="getAllTwo",produces="application/json;charset=utf-8")    public @ResponseBody List countsellnum(){

    List<Orderform> countsellnum = OrdService.getAll();

    return countsellnum;

}

三、画图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器，再初始化图表，ajax请求数据，显示在图表中

<div id="main1" class="layui-col-sm12" style="height: 300px;"></div>

 

<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main1'));

// 指定图表的配置项和数据

var option = {

   title: {

        text: '订单信息'

    },

    grid: {

        top: '15%',

        right: '1%',

        left: '1%',

        bottom: '10%',

        containLabel: true

    },

    tooltip: {

        trigger: 'axis'

    },

    legend: {

        data:['订单数量','订单金额']

    },

    xAxis: {

        type: 'category',

        data: ['2020.06','2020.07','2020.08','2020.09','2020.10','2020.11','2020.12']

    },

    yAxis: {

        type: 'value'

    },

    series: [

        {

             name:'订单数量',

             type:'line',

             stack: '总量',

             data:[0, 300, 340, 420, 500, 530, 800]

         },

         {

             name:'订单金额',

             type:'line',

             stack: '总量',

             data:[0, 10000000, 10500000, 15040000, 30000000, 30300000, 250000000]

         },

    ]

};





// 在数据为动态加载之前建筑loading动画

myChart.showLoading();



// 对数据进行重写,变成动态数据



var maxScores=[];

var minScores=[];

var sNames=[];



$.ajax({

    type:"post",

    async:true,

    url:"infController/getAllTwo",

    data:{},

    dataType:"json",

    // 回调函数

    success:function (result) {

        if(result != null && result.length > 0) {

            for(let i = 0; i <result.length; i ++) {

                maxScores.push(result[i].orderformid);

                minScores.push(result[i].orderformmoney);

                sNames.push(result[i].orderformtime);

            }

            // 隐藏加载动画

            myChart.hideLoading();



            // 重新载入 Option

            myChart.setOption({

                xAxis:{

                    data:sNames    // 重写 x 轴

                },

                series:[

                    {

                        name:'订单数量',

                        data:maxScores

                    },

                    {

                        name:'订单金额',

                        data:minScores

                    }

                ]

            })

        }

    }

})

// 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

后台传过来的 json 数据才是图形的关键