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

xiaoxiao2021-02-28  18

这是我用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>

 

转载请注明原文地址: https://www.6miu.com/read-1450101.html

最新回复(0)