EChart在SpringMVC框架中的运用，封装折线图和饼图统计图框架

最近把EChart集成到SpringMVC框架中，分享给大家。

大致思路如下：

1.后端封装EChart的折线图和饼图实现EChartOptionUtil.java

public class EChartOptionUtil {
    public static String getLineOption(String showType, String legend,
            String xData, String yData) {
        String str = "{tooltip: {show: true},legend: {data:['"
                + legend
                + "']},xAxis : [{type : 'category',data : ["
                + xData
                + "]}],yAxis : [{type : 'value'}],series : [{'name':'工单数','type':'"
                + showType + "','data':[" + yData + "]}]}";
        return str;
    }

    public static String getPieOption(String title, 
            String xData, String yData) {
        String str = "{title : {text: '"+title+"',x:'center'},";
        str = str
                + "tooltip : {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},";
        str = str
                + "legend: {orient : 'vertical',x : 'left',data:["+xData+"]},";
        str = str
                + "toolbox: {show : true,feature : {mark : {show: true},dataView : {show: true, readOnly: false},magicType : {show: true,type: ['pie', 'funnel'],option: {funnel: {x: '25%',width: '50%',funnelAlign: 'left',max: 1548}}},restore : {show: true},saveAsImage : {show: true}}},";
        str = str + "calculable : true,";
        str = str
                + "series : [{name:'"+title+"',type:'pie',selectedMode: 'single',radius : '55%',center: ['50%', '60%'],data:["+yData+"]";
        str = str + "}]};";
        return str;
    }
}
 

2.SpringMVC框架的Controll中把数据，传入封装的EChartOptionUtil.java中的方法中

            mv.addObject("line",EChartOptionUtil.getLineOption("line","工单", StringUtils.join(titles.toArray(),","), StringUtils.join(datas.toArray(),",")));
            mv.addObject("bar",EChartOptionUtil.getLineOption("bar","工单", StringUtils.join(titles.toArray(),","), StringUtils.join(datas.toArray(),",")));

3.前端展现折线图和饼图

<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>    

<div id="line" style="height:400px;display:block;"></div>    
<div id="bar" style="height:400px;display:block;"></div>

    <script type="text/javascript">    document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. 
    function subSomething() 
    { 
        if(document.readyState == "complete"){ //当页面加载状态 
            // 基于准备好的dom，初始化echarts图表
            var myChart = echarts.init(document.getElementById('line'));     
            var option = ${line};            
            myChart.setOption(option); 
            
            var myChartbar = echarts.init(document.getElementById('bar'));            
            var optionbar = ${bar};            
            myChartbar.setOption(optionbar); 
        }     
    }     
    </script>    

下载源码，源码是基于MyEclipse的完整项目，导入到MyEclipse，运行就能看到如下效果：