Echarts在JavaWeb中与后台的交互实现

本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.