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>

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="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="100%;height:600px;margin-left:0px;margin-right:6px;margin-bottom:8px;float:left;overflow:hidden;"></div>
    </div>
</div>

THE END.