ssh下echarts折線和柱狀圖

頁面

引入所需要的js包

 <script type="text/javascript" src="../js/echarts.js"></script>
        <script type="text/javascript" src="../js/bar.js"></script>
       <script type="text/javascript" src="../js/line.js"></script>  

頁面放一個echarts容器

<div id="main1" style="height:400px"></div>
<button type="button" id="button1">顯示/隱藏</button>

echarts配置

<script type="text/javascript">
$(function() {
$("#button1").click(function() {
$("#main1").slideToggle(999);
});
});

var a1=eval(${json});

        // 路徑配置  
        require.config({  
       
            paths : {  
                'echarts' : '../js',  
                'echarts/chart/bar' : '../js' ,
                'echarts/chart/line' : '../js'  
            }  
        });  
  
        // 使用  
        require([ 'echarts', 'echarts/chart/bar', 'echarts/chart/line' // 使用柱狀圖就加載bar模塊和折線圖，按需加載  
        ], function(ec) {  
            // 基於準備好的dom，初始化echarts圖表  
            var myChart = ec.init(document.getElementById('main1'));  
  
            var option = {  
                title : {  
                    text : '統計圖表',  
                    subtext : '選擇總數'  
                },  
                tooltip : {  
                    trigger : 'axis'  
                },  
                  
                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 :function (){
var arr=[]; 
for(var i=0;i<a1.length;i++){
console.log(a1[i].context);
arr.push(a1[i].optionName);
} 
return arr;
}()
}], 


                yAxis : [ {  
                    type : 'value'  
                } ],  
                series : [ {  
                    
                    type : 'line',  
                    data : function (){
var arr=[]; 
for(var i=0;i<a1.length;i++){
console.log(a1[i].context);
arr.push(a1[i].opcount);
} 
return arr;
}()
}], 
                     
                   
               
            };  
  
            // 爲echarts對象加載數據   
          myChart.setOption(option); 
        }); 
        
</script>

引入所需要的json包，到網上搜一下 ，一大堆。

action

HttpServletRequest request = ServletActionContext.getRequest();
List<Options> liOp = optionService.getOptionBySubjectOf(subjectOf);//獲得數據
JsonConfig config = new JsonConfig();
config.setExcludes(new String[]{"question"});//關聯屬性去掉
String json = JSONArray.fromObject(liOp, config).toString();
request.setAttribute("json", json);

方法我不寫了  ，每個人的都不一樣，