echarts3 line chart, bar graph

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib prefix="e" uri="/firefly-theme-taglib" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
//TODO 引入jquery
<script src="${pageContext.request.contextPath}/system/script/echarts3/echarts.min.js"></script>
<style type="text/css">
    #main{margin:0 auto;border:0px solid #000;width:700px;height:500px}
</style>
<script type="text/javascript">
$(function() {
    var myChart = echarts.init(document.getElementById('main ' ));
     // the specified configurations and graph data 
    myChart.setOption ({ 
            ToolTip: { 
                Trigger: ' Axis ' , 
                axisPointer: { 
                    type: ' Cross ' , 
                    crossStyle: { 
                        Color: ' # 999 ' 
                    } 
                } 
            }, 
            Toolbox: { 
                Feature: { 
                    DataView: {Show: to true , readOnly: to false },
                    magicType: {Show: to true , type: [ ' Line ' , ' bar ' ]}, 
                    Restore: {Show: to true }, 
                    saveAsImage: {Show: to true } 
                } 
            }, 
            
            Legend: { 
                Data: [ ' approve funding ' , ' reimbursement of expenses ' , ' remaining funds ' ] 
            }, 
            XAXIS: [ 
                { 
                    type: ' category' , 
                    Data: [], 
                    axisPointer: { 
                        type: ' Shadow ' 
                    } 
                } 
            ], 
            YAXIS: [ 
                   { 
                       type: ' value ' , 
                       min: 0 , 
                       name: ' (ten thousand yuan) ' , 
                   } 
            ], 
            Series: [ 
                { 
                    name : ' approval of funds ', 
                    Type: ' bar ' , 
                    Data: [] 
                }, 
                { 
                    name: ' reimbursement of expenses ' , 
                    type: ' bar ' , 
                    Data: [] 
                }, 
                { 
                    name: ' surplus funds ' , 
                    type: ' bar ' , 
                    Data: [ ] 
                } 
            ] 
    }); 
    myChart.showLoading ();    // first display data is loaded before loading a simple piece of animation 
    var names = [];     // budget account type of the array (for holding the actual X-axis coordinate value) 
    var numsOne = [];     // approved funds array (actually used to bloom Y coordinate value) 
    var numsTwo = [];     // claims provision array (for holding the actual Y coordinate value) 
    var numsThree = [];   // remaining funds array (for holding the actual Y coordinate value) 
    $ .ajax ({ 
        of the type: " POST " , 
        the async: to true ,             // asynchronous request (synchronous request will lock the browser, the user must wait for the request to complete other operations can perform) 
        url: "! talentProjectAction do_selectDate.action " ,   // request to the action 
        Data: {},     // the transmission request data 
        dataType: " JSON " ,         // return data in the form of JSON 
        : Success function (Data) {
             // perform a successful request the function contents, result that is returned from the server objects json 
            IF (Data) {
                 for ( var I = 0 ; I < data.length; I ++ ) {        
                    names.push (Data [I] .name);     // in turn remove the category type of the array and fills
                    numsOne.push (Data [I] .approvalFee);     // one by one taken out and filled into categories category array 
                    numsTwo.push (Data [I] .expendedFee);     // one by one taken out and filled into categories category array 
                    numsThree.push (data [ I] .surplusFee);     // in turn extracted category type of the array and fills 
                }                 
                   myChart.hideLoading ();     // hides loading animation 
                   myChart.setOption ({         // load data table 
                       XAXIS: [ 
                               { 
                                   type: ' category ' , 
                                   data: names,
                                   axisPointer: { 
                                       type: ' Shadow ' 
                                   } 
                               } 
                           ], 
                        Series: [ 
                              { 
                                  name: ' approve funding ' , 
                                  type: ' bar ' , 
                                  Data: numsOne 
                              }, 
                              { 
                                  name: ' reimbursement of expenses ' , 
                                  Type: ' bar ' , 
                                  Data: numsTwo 
                              }, 
                              { 
                                  name: ' surplus funds ' , 
                                  type: ' bar ' , 
                                  : Data numsThree 
                              } 
                          ] 
                   ;}) 
            } 
       }, 
      : error function (errorMsg) {
             // execute the request fails the function
        ep.alert ( " Chart request data fails! " ); 
        myChart.hideLoading (); 
      } 
   }) 
}); 
</ Script > 
</ head > 
< body class = "EP-nopadding popOperate-body" > 
    < div ID = "main" > </ div > 
</ body > 
</ HTML >


 

Guess you like

Origin www.cnblogs.com/dreamShines/p/11025001.html