關於SSM與echart結合的問題總結
這是我用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>
相關文章
- 關於move tablespace的問題總結
- Echart——結合SpringMVCSpringMVC
- 關於中文亂碼問題（總結）
- 關於echarts使用的常見問題總結Echarts
- 關於修改分割槽表的問題總結
- Java關於初始化問題的總結（一）Java
- 關於ora-02391問題的總結
- 關於 flex 面試題總結Flex面試題
- mysql相關問題總結MySql
- 關於react我的理解與總結React
- 關於while（cin）回車結束 和 while（cin）與cin.get（）結合時發現的問題While
- 關於寫死namespace與攔截器結合使用導致死迴圈的問題namespace
- 關於熱部署-理解與總結熱部署
- 關於Unity 如何與Blazor Server結合UnityBlazorServer
- 關於題目集7~8的總結
- 關於題目集1~3的總結
- 回溯問題Python框架總結——排列組合問題Python框架
- 關於資料庫間連結問題彙總---Oracle資料庫Oracle
- 關於近期的總結
- 關於UIWebView的總結UIWebView
- 關於BeautifulSoup的總結
- 關於HTML的總結HTML
- 及其容易出錯題總結 --關於繼承組合介面等等繼承
- 演算法問題總結-連結串列相關演算法
- 問題總結
- SpringMVC-12-SSM回顧與總結SpringMVCSSM
- 關於 Laravel 中 Ajax 問題的小結Laravel
- C++ 關於static variables的學習中遇到的問題總結C++
- 關於ORACLE的鎖表與解鎖總結Oracle
- 徹底學會使用epoll(六)——關於ET的若干問題總結
- Java,InputStream,Socket阻塞.(關於HTTP請求的IO問題自我總結)JavaHTTP
- 關於Java建構函式（Constructor）的常見問題總結Java函式Struct
- sqlserver關於always on的總結SQLServer
- mysql關於variable的總結MySql
- ORACLE關於NULL的總結OracleNull
- 關於ORACLE鎖的總結Oracle
- 關於jboss配置的總結
- 子序列與子串問題總結