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