本Web系统后台框架是：Spring+SpringMVC+Mybatis+Shiro+Maven。完整系统搭建的配置过程见上一篇文章：基于Spring+SpringMVC+Mybatis的Web系统搭建
这里仅抽取部分配置介绍实现Echarts图表展示的功能，其中数据均取自数据库，先看效果↓
【本着学习交流的心态，如果你发现错误或者有更好的实现方式，欢迎留言交流。】
1、部分配置
在pom.xml中加载json数据依赖
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.17</version>
</dependency>
在Spring-mvc中如下配置
<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerMapping"/>
<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter">
<property name="webBindingInitializer" ref="webBindingInitializer"/>
<property name="messageConverters">
<list>
<ref bean="stringConverter" />
<ref bean="fastjsonConverter" />
</list>
</property>
</bean>
<!-- 解析String请求数据 -->
<bean id="stringConverter"
class="org.springframework.http.converter.StringHttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>text/plain;charset=UTF-8</value>
</list>
</property>
</bean> <!-- 解析json请求数据，将json转换为java对象 -->
<bean id="fastjsonConverter"
class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<!-- 这里顺序不能反，一定先写text/html，不然ie下出现下载提示 -->
<value>text/html;charset=UTF-8</value>
<value>application/json;charset=UTF-8</value>
</list>
</property>
<property name="features">
<array value-type="com.alibaba.fastjson.serializer.SerializerFeature">
<!-- 空值继续输出 -->
<value>WriteMapNullValue</value>
<!-- 防止循环引用 -->
<value>DisableCircularReferenceDetect</value>
<!-- 格式化日期,默认格式为：yyyy-MM-dd HH:mm:ss -->
<value>WriteDateUseDateFormat</value>
</array>
</property>
</bean>
<!-- 防止循环引用 -->
<bean id="DisableCircularReferenceDetect" class="org.springframework.beans.factory.config.FieldRetrievingFactoryBean">
<property name="staticField" value="com.alibaba.fastjson.serializer.SerializerFeature.DisableCircularReferenceDetect"></property>
</bean> <!-- ContentNegotiatingViewResolver视图解析器，返回多视图 -->
<bean class="org.springframework.web.servlet.view.ContentNegotiatingViewResolver">
<property name="order" value="1"/>
<!-- 这里是否忽略掉accept header，默认就是false -->
<property name="ignoreAcceptHeader" value="true" />
<!-- 启用参数支持 -->
<property name="favorParameter" value="false"/>
<!-- 启用扩展名支持 -->
<property name="favorPathExtension" value="true"/>
<!-- 如果所有的mediaType都没匹配上，就会使用defaultContentType -->
<property name="defaultContentType" value="text/html" /> <property name="mediaTypes">
<map>
<entry key="json" value="application/json" />
<entry key="xml" value="application/xml" />
</map>
</property> <property name="defaultViews">
<list>
<!-- json视图 -->
<bean class="com.alibaba.fastjson.support.spring.FastJsonJsonView">
<property name="extractValueFromSingleKeyModel" value="true" />
<property name="features">
<array value-type="com.alibaba.fastjson.serializer.SerializerFeature">
<!-- 空值继续输出 -->
<value>WriteMapNullValue</value>
<!-- 防止循环引用 -->
<value>DisableCircularReferenceDetect</value>
<!-- 格式化日期,默认格式为：yyyy-MM-dd HH:mm:ss -->
<value>WriteDateUseDateFormat</value>
</array>
</property>
</bean>
</list>
</property>
</bean>
Spring-mvc.xml
2、Controller
@Controller
@RequestMapping(value = "/view")
public class EchartsController {
@Resource
private EchartService echartService; @RequestMapping(value = "/rain.html",method = RequestMethod.GET)
@ResponseBody
public Object showChart(){
Map<String, Object> map = new HashMap<String, Object>();
List<Float> clist1 = new ArrayList<Float>();
List<Float> clist2 = new ArrayList<Float>();
List<Float> clist3 = new ArrayList<Float>(); List<EcBar> chartList = echartService.listBar(); for(EcBar cl : chartList){
clist1.add(cl.getEvaporation());
clist2.add(cl.getRainfall());
clist3.add(cl.getAvgtemp());
}
map.put("c_eva",clist1);
map.put("c_rain",clist2);
map.put("c_avgt",clist3);
map.put("success1",true);
return map;
}
}
3、Ajax动态获取数据
showChart.js
var chartOutChar = null;
var option1 = {
tooltip: {
trigger: 'axis'
},
toolbox: {
feature: {
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar']},
restore: {show: true},
saveAsImage: {show: true}
}
},
legend: {
data:['蒸发量','降水量','平均温度']
},
xAxis: [
{
type: 'category',
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
}
],
yAxis: [
{
type: 'value',
name: '水量',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: '温度',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name:'蒸发量',
type:'bar',
data:[]
},
{
name:'降水量',
type:'bar',
data:[]
},
{
name:'平均温度',
type:'line',
yAxisIndex: 1,
data:[]
}
]
};
function loadChartOut() {
$.getJSON('/maze/rest/view/rain.html', function (data) {
//上面这个url是重点，组成为：项目名/过滤前缀/Controller中mapping值，当页面加载此js时，它会向后台取数据
if (data.success1) {
chartOutChar.showLoading({text: '正在努力的读取数据中...'});
chartOutChar.setOption({
series: [
{
name:'蒸发量',
data:data.c_eva
},
{
name:'降水量',
data:data.c_rain
},
{
name:'平均温度',
data:data.c_avgt
}
]
});
chartOutChar.hideLoading();
}else {
alert('提示', data.msg);
}
});
}
//载入图表
$(function () {
chartOutChar = echarts.init(document.getElementById('showChart'));
chartOutChar.setOption(option1);
loadChartOut();
window.addEventListener('resize', function () {
chartOutChar.resize();
mychart.resize();
});
});
4、Jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<script type="text/javascript" src="hemi/js/echarts.js"></script>
<script type="text/javascript" src="hemi/js/showChart.js"></script>
<script type="text/javascript" src="hemi/js/funnelView.js"></script> <h3 class="page-title">
Echarts 展示 <small>可视化图表</small>
</h3>
</div> <div class="row">
<div class="col-lg-6 col-sm-12 col-xs-12 col-sm-12">
<div id="showChart" style="width:100%;height:600px;margin-left:0px;margin-right:6px;margin-bottom:8px;float:left;overflow:hidden;"></div>
</div> <div class="col-lg-6 col-sm-12 col-xs-12 col-sm-12">
<div id="showFunnelChart" style="width:100%;height:600px;margin-left:0px;margin-right:6px;margin-bottom:8px;float:left;overflow:hidden;"></div>
</div>
</div>
THE END.