Spring 组合Echart.js

 由于工作需求，研究了下百度的Echart图表  http://echarts.baidu.com/doc/doc.html

看了下Echart简介，very good!  

（ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表）

 话不多说!  贴上我研发的代码！

 1： 引入Echarts  有三种方式

   1.1 ： 模块化包引入 （规范，但文件太多，用到了第三方库，不利于前端JS优化）

   1.2  ： 模块化单文件引入 （自定义引入，避免引入无必要的文件）

   1.3  ： 标签式单文件引入  （基于CMD规范，模式更单一，最方便，但要注意script标签要放于Body内）

为了以后开发可拓展，目前用的是第二种

 2 ： JS部分

<c:if test="${empty chartHint}"> 
    <div class="container featurette">
        <div class="row">
            <div id="graphic">
                <div id="main" style="height:400px;width:100%"></div>
            </div>
        </div>
    </div>
   </c:if>
<script type="text/javascript">
       /*  require.config({
            packages: [
                {
                    name: 'echarts',
                    location: 'echarts-2.2.1/src',
                    main: 'echarts'
                },
                {
                    name: 'zrender',                   
                    location: echarts-2.2.1/src/zrender/src',
                    main: 'zrender'
                }
            ]
        }); */
        require.config({
            paths: {
                echarts: 'echarts-2.2.1/src/echart'
            }
        });
        
        var option = {
            title : {show:true, text:'天气数据统计'},
            tooltip : {
                trigger: 'axis'
            },
            legend: {
                data:['蒸发量','降水量']
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            xAxis : [
                {
                    type : 'category',
                    data :[<c:if test='${not empty xAxisData}'>${xAxisData}</c:if>]
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    splitArea : {show : true}
                }
            ],
            series : [
                {
                    name:'蒸发量',
                    type:'line',
                    data:[<c:if test="${not empty vaporiseNumberSB}">${vaporiseNumberSB}</c:if>]
                },
                {
                    name:'降水量',
                    type:'line',
                    data:[<c:if test="${not empty rainfallNumberSB}">${rainfallNumberSB}</c:if>]
                }
            ]
        };
        
        require(
            [
                'echarts',
                'echarts/chart/line',
                'echarts/chart/bar'
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById('main'));
                myChart.setOption(option);
            }
        )
    </script>

3 Spring逻辑层处理

生成相应数据：譬如：

xAxisData ：'1月','2月','3月','4月','5月','6月','7月','8月

vaporiseNumberSB ：2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2

rainfallNumberSB ： 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2

 

 4： JS触发事件 来整个提交表单（携带所需参数）。

 5： 页面用JSTL 标签控制显示

 

最后 ，图片就不展示了，熟悉原理基本上都能搞定！ 

 

 

 

转载于:https://my.oschina.net/ZFrances/blog/403324