第一步：首先在body裡給一個“容器”，方便在裡面繪製圖表

<!-- 容器：id:用來繫結option屬性  style:設定容器的大小、位置等樣式  ->

<div id="main" style="width:1100px;height:500px;margin-left:auto;margin-right: auto;"></div>

<!-- 獲取資料的方法按鈕  ->

<input type="button"  onClick="getDate(‘http://....’)" value="提交" /> 

第二步：編寫獲取資料的方法

//找到“容器”

var myChart = echarts.init(document.getElementById('main'));

//編寫獲取資料的方法

function getDate(url) {

         var vdate = new Array(); //時間：定義變數，接收返回的資料

         var intonum = new Array(); //進入：定義變數，接收返回的資料

         var sumMonth=0;; //總月數：定義變數，方便賦值

         var showPercentage=0;//資料顯示的百分比：定義變數，方便賦值

         var myzj=”這裡是副標題”;

   $.getJSON(url, function(json) {

       if (json.length > 0) {

       /* 資料溢位的時候：資料顯示的百分比 */

         sumJSON=json.length-2;
 
         sumMonth=sumJSON/20;

          showPercentage=Math.round(100/sumMonth);

    /*將資料迴圈賦值給變數*/

   for (var i = 0; i < json.length - 2; i++) {

          vdate.push(json[i].VDATE);  //JS中給資料賦值用的是.push方法

           intonum.push(parseInt(json[i].INTO_NUM));

          }

      }

}

// 給option中的一些屬性賦值【方便賦值option中的動態屬性】

   option.title.x = 'center';  //標題的位置

   option.dataZoom[0].end=showPercentage;  //外部滾動條顯示的資料佔比

   option.dataZoom[1].end=showPercentage;  //內部滑動顯示的資料佔比

   option.title.subtext=myzj;  //給副標題賦值
 
// 把剛指定的配置項和資料賦值給要繪製圖表的“容器”

  myChart.setOption(option);

});
 

第三步：在javascript中 配置option屬性(此處的屬性是常用到的)

 //定義成變數，方便一會兒賦值使用

var   option = {

    //工具箱

     toolbox : {

        show : true,

        feature : { //特徵

        saveAsImage : { //是否儲存為圖片

        show : true,

        excludeComponents : [ 'toolbox' ], //排除元件

        pixelRatio : 1 //圖片的畫素比率

                }

            }

    },

//標題

    title : {

        text:'圖表的名字（標題）',

        subtextStyle:{ //副標題

             fontSize:14,
    
             color:'red',

            }
    
        },

//工具提示【一般為空】

    tooltip : {

        /*  trigger: 'axis'-->滑鼠浮動上去會顯示X和Y的交叉點 */

     },

    legend : { //圖例

        left : '80%',  

        data : ['第一個含義']  //此處的名字要和“series”中的name一樣，否則不顯示

    },


//X軸

    xAxis : {

        type : 'category',//類別

        splitLine : {

            show : false
    
            },
    //分割線   

        axisLabel : { //軸標

            interval : 0, //間隔   

            rotate : -30, //旋轉

            },

        data : vdate,  //json返回的資料

        boundaryGap : true,

    },

//Y軸

    yAxis :  {

        type : 'value',

        scale:true, //echarts y軸百分比，不寫的話系統會自動分配

        axisLabel : {

            formatter : '{value} '

           },

        },

//當資料太多時，可以使用滾動條(在此為X軸資料)

    dataZoom :  

            [{   //外部顯示

                     type: 'slider',   //元件的型別：滑塊；

                    show: true,

                    start: 0,

                    end:20,

                    handleSize: 8

             },

             { //內部也有效果

                    type: 'inside',

                    start:0,

                    end:20,

              }],

 //圖表的一些配置

    series : [{

        name : '第一個含義',

        type : 'line', //折線

        data : intonum, //資料【由連線返回的JSON資料】

        symbol : 'circle', //符號

        symbolSize : 6, //符號大小

        color : [ '#0099FF' ],

        itemStyle : { normal: {label : {show: true}}} ,  

        markLine  : {
 
            lineStyle : {

              normal : {

                  type : 'solid', //實線

                  color : '#FF3300'

                    }

                 },

          data : [ {  //自帶的平均值屬性，不能改變小數點

                 type : 'average',

                 name : '平均值'

               } ]

           },

    }]

};
 

第四步：最後把所有的option配置項賦值給“容器”，以便“容器”根據配置項繪製圖表
 

myChart.setOption(option);

   最後：看一下效果圖