1. 程式人生 > >echart統計圖表折線圖demo

echart統計圖表折線圖demo

var deptName = "";
 $(document).ready(function(){
     //折線圖
       testLine();
  
  });
 
  var myChart = echarts.init(document.getElementById('line'));
  //折線圖
     function testLine(){
       $.ajax({
            //提交資料的型別 POST GET
            type:"POST",
            //提交的網址
            url:"<%=basePath%>test/echart_getLineData.action",
            //提交的資料
            data:{deptName : deptName},
            //返回資料的格式
            datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
            //在請求之前呼叫的函式
            //beforeSend:function(){$("#msg").html("logining");},
            //成功返回之後呼叫的函式            
            success:function(data){
            var result = eval("("+data+")");
            myChart.setOption({
              title: {
                    text: '部門人數統計',
                    subtext: ''
                },
                tooltip: {
                    trigger: 'axis'
                },
                toolbox: {
                    show: true,
                    feature: {
                     dataView : {show: true, readOnly: false},
                        saveAsImage: {show : true}
                    }
                },
                xAxis:  {
                    type: 'category',
                    boundaryGap: false,
                    data: result.xData

                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} 人'
                    }
                },
                visualMap: {
                    show: false,
                    dimension: 0,
                    pieces: [{
                        lte: 6,
                        color: 'green'
                    }, {
                        gt: 6,
                        lte: 8,
                        color: 'red'
                    }, {
                        gt: 8,
                        lte: 14,
                        color: 'green'
                    }, {
                        gt: 14,
                        lte: 17,
                        color: 'red'
                    }, {
                        gt: 17,
                        color: 'green'
                    }]
                },
                series: [
                    {
                        name:'用電量',
                        type:'line',
                        smooth: true,
                        data: result.yData,

                       
                    }
                ]
      });
            
            },
            //呼叫執行後呼叫的函式
            //complete: function(XMLHttpRequest, textStatus){
              /// alert(XMLHttpRequest.responseText);
              // alert(textStatus);
                //HideLoading();
            //},
            //調用出錯執行的函式
            error: function(){
                //請求出錯處理
                $.message.alert("出錯了");
            }        
         });
     }