关于SSM与echart结合的问题总结

最新推荐文章于 2023-11-19 18:35:43 发布

mnk

最新推荐文章于 2023-11-19 18:35:43 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

文章标签： ssm 框架 echart图问题总结

本文链接：https://blog.youkuaiyun.com/qq_20952287/article/details/78778041

本文总结了在使用SSM（Spring、SpringMVC、MyBatis）框架结合ECharts图表时遇到的问题，包括映射文件配置、CSS和JS的引入及配置、Ajax同步异步问题、SpringMvc控制层设置、数据结构设计以及ECharts图表在JSP中的实现代码。通过这些问题的解决，展示了完整的SSM与ECharts集成过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是我用ssm框架和echart图实现的效果：

以下是我遇到的问题和解决办法

1.映射文件的配置（XXMapper.xml）：

2.css，js的问题：

3.css，js地址的配置

4.ajax的同步异步问题

5.springMvc控制层的相关配置和访问页面的控制

6.存储echart图数据的数据结构：

7.这是echart图的jsp代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE html>

<html>

<head>

    <base href="<%=basePath%>">

    <meta charset="utf-8">

    <title>ECharts</title>

    <!-- 引入 echarts.js -->

    <script src="js/echarts.js"></script>

    <script src="js/jquery-3.2.1.min.js"></script>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">

      

       

           var colors = ['#5793f3', '#d14a61', '#675bba'];

           var area="";

           var loan="";

           var asset="";

           var rate="";

            $.ajax({

            url:"<%=basePath%>showechart",

            type:"post",

            data:{"data_Time":"201706"},

            dataType:"json",

            async:false,

            success:function(data){

                area = data.modelMap.area;//横坐标名（宁德市分行。。。。。。）

                loan = data.modelMap.loan;//货款余额

                asset = data.modelMap.asset;//资产余额

                rate = data.modelMap.rate;//归行率

            },

            error:function(data){

               alert("error");

            }

           

          });

         

         

        var arr1 = loan;

           var arr2 = asset;

           var arr3 = rate;

           var loanMax =  eval("Math.max(" + loan.toString() + ")");

           var assetMax =  eval("Math.max(" + asset.toString() + ")");

           var rateMax =  eval("Math.max(" + rate.toString() + ")");

           option = {

               title: {

                     text: '图例',

                     x:'center',

                     y:'top'

                },

                color: colors,

                tooltip: {

                     trigger: 'axis',

                     axisPointer: {type: 'cross'}

                },

                grid: {

                    top: '20%',

                     right: '20%'

                },

                toolbox: {

                     feature: {

                           dataView: {show: true, readOnly: false},

                           restore: {show: true},

                           saveAsImage: {show: true}

                     }

                },

                legend: {

                     data:['归行率','货款余额','资产余额'],

                     y:'8%'

                },

                xAxis: [

                     {

                           type: 'category',

                           axisTick: {

                                alignWithLabel: true

                           },

                           data: area,

                           axisLabel:{

                                 interval:0,

                                rotate:60,

                           }

                     }

                ],

                yAxis: [

                     {

                           type: 'value',

                           name: '归行率',

                           min: 0,

                           max: rateMax,

                           position: 'right',

                           offset: 60,

                           axisLine: {

                                lineStyle: {

                                     color: colors[2]

                                }

                           },

                           axisLabel: {

                                formatter: '{value} %'

                           }

                     },

                     {

                           type: 'value',

                           name: '资产余额',

                           min: 0,

                           max: assetMax,

                           position: 'right',

                           axisLine: {

                                lineStyle: {

                                     color: colors[1]

                                }

                           },

                           axisLabel: {

                                formatter: '{value} '

                           }

                     },

                     {

                           type: 'value',

                           name: '货款余额',

                           min: 0,

                           max: loanMax,

                           position: 'left',

                           axisLine: {

                                lineStyle: {

                                     color: colors[0]

                                }

                           },

                           axisLabel: {

                                formatter: '{value} '

                           }

                     }

                ],

                series: [

                    {

                           name:'贷款余额',

                           type:'bar',

                           yAxisIndex: 2,

                           data: arr1

                     },

                

                     {

                           name:'资产余额',

                           type:'bar',

                           yAxisIndex: 1,

                           data:arr2

                     },

                     {

                           name:'归行率',

                           type:'line',

                           yAxisIndex: 0,

                           data:arr3

                     }

                ]

           };

         // 基于准备好的dom，初始化echarts实例

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

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

        myChart.setOption(option);

    </script>

</body>

</html>