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

来源：互联网发布：淘宝双十一数据统计编辑：程序博客网时间：2024/06/07 17:08

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

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

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

2.css，js的问题：

3.css，js地址的配置

4.ajax的同步异步问题

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

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

7.这是echart图的jsp代码

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

String path = request.getContextPath();

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

<!DOCTYPEhtml>

<html>

<head>

<basehref="<%=basePath%>">

<metacharset="utf-8">

<title>ECharts</title>

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

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

</head>

<body>

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

<scripttype="text/javascript">

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

vararea="";

varloan="";

varasset="";

varrate="";

$.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");

}

});

vararr1 = loan;

vararr2 = asset;

vararr3 = rate;

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

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

varrateMax = 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实例

varmyChart = echarts.init(document.getElementById('main'));

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

myChart.setOption(option);

</script>

</body>

</html>

阅读全文

0 0