1. 滑鼠點選觸發ajax，獲取data資料

$("#echartsContent).off("click",function(){
    var code=$("#codeInput").val();
    var startTime=$("#startTime").val();
    var endTime=$("#endTime").val();
    if(code==null || startTime=null || endTime==null || code=="" || startTime="" || endTime==""){
    alertDIV("請選擇時間或裝置")
    return;
}
    $.ajax({
        url:"",
        data:JSON.stringfy(postData),
        datatype:"json",
        contentType:"application/json;charset=utf-8",
        type:"post",
        error:function(){
          alertDIV("資料查詢錯誤")
        }，
        success:function(result){
          if(data.recode==0){
               echartsline(result) //echarts渲染函式
            }
        }    
            
    })
    
})
 

2. echarts渲染函式

function echartsline(result){
    $("#echartsline").empty();
    var totledata=result.value.rows;
        var lineX=[];
        var lineY=[];
        for(var n=0;n<totledata.length;n++){
            lineX.push(totledata[n].dataX)
        };
        for(var p=0;p<totledata.length;p++){
            lineY.push(totledata[p].dataY)
        };            
    option={
        title:{
            'text':'echartsTEST',
            'x':'center',
            'y':'top'
        },
        tooltip:{
            trigger:'axis',
            axisPointer:{
                type:'shadow'
            },
            formatter:function(){
                return param[0][1]+'<br/>'+param[0][2]+'</br>'
            }
        },
        legend:{
            data:["lineY"],
            'x':"left",
            'y':"top"
        },
        toolbox:{
            show:true,
            feature:{
            restore:{show:true}
            }
        },
        //是否啟用拖拽計算特性，預設關閉，折線圖拖拽後不能回到原來位置
        calculable:false,
        xAxis:[
            {
                type:"category",
                data:lineX,
                position:"bottom",
                buondaryGap:true,//空白策略 true留空
                axisLine:{
                    show:true,
                    lineStyle:{
                    color:"green",
                    type:"solid",
                    width:2
                },
                axisTick:{
                    show:true,
                    length:10,
                    linestyle:{
                        color:"red",
                        type:"soild",
                        width:2
                    }
                },
                axisLable:{
                    interval:"0",  //橫座標顯示的值，interval為0，則在橫座標顯示所有資料
                    rotate:45  //橫座標標記的旋轉角度
                }
              }    
            }
        ]，
        yAxis:[{
            type:"value",
            position:"left",
            splitNumber:5,
            boundaryGap:[0,0,1],
            axisLine:{
                show:true,
                lineStyle:{
                    color:"#1666c9",
                    type:"dsshed",
                    width:2
                }            
            },
            axisTick:{
                show:true,
                length:10,
                lineStyle:{
                    color:"green",
                    type:"solid",
                    width:2
                }
            },
            axisLable:{
                show:true,
                interval:"auto",
                rotate:0,
                margin:18,
                formatter:"{value}"
            }
            
        }],
        series:[{
            name:"lineY",
            type:"line",
            smooth:true,
            itemStyle:{
                normal:{
                    color:"#1666c9",
                    label:{
                        show:true,
                        formatter:function(value){
                            return "",
                        }
                    }
                }
            },
            data:lineY
        }]
    }
    if(null!=lineY){
        this.myLineChart=echarts.init(document.getElementbyId("echartsLine"))
    }
    else{
        if(null!=this.myLineChart){
           this.myLineChart.clear();
        }
        $("#echartsLine").html("<div>當前無資料</div>")
    }
}