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