1.引人echarts.js 

<script src="echarts.min.js"></script>

2. 為 ECharts 準備一個具備大小（寬高）的 DOM(文件物件模型)

<div id="main" style="width: 600px;height:400px;"></div>

3.條形圖的一些配置引數：

'''1. 設定圖表的標題'''
title: {
        text: '這是圖表的標題文字'
}
'''2. 滑鼠放在圖示上面的顯示資訊,不設定的話就是true'''
tooltip: {show: true}
'''3. 設定圖例'''   
legend: {
         data:['圖例文字']
}
'''4. 設定x軸的資料'''
xAxis: {
         data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
}
'''5. 設定y軸的資料'''
xAxis: {
         data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
}
'''6. 設定畫圖的型別'''
series: [{
          name: '滑鼠放在圖上面的提示文字',
          type: 'bar',  // 以及畫圖的型別
          data: [畫圖的資料]
}]
'''7.設定背景色，因為是全域性的，所以直接在 option 下設定'''
//可以通過顏色的英文設定
backgroundColor:'red'
'''也可以通過#的方式設定'''     
backgroundColor:'#ffffff'  
'''8. 設定圖表中所有文字的顏色'''
'''四個引數分別為RGB的三個顏色以及一個透明度alpha,如果不行設定透明度的話，直接把rgba中的a去掉然後分別再括號裡寫上RGB對應的三個引數值'''
textStyle: {
            color: 'rgba(255, 0, 255,0.8)'
},
'''9. 設定loading動畫  資料載入時，需要時間等待，則可以加上這個動畫效果'''、
'''啟動動畫'''
myChart.showLoading();
'''關閉動畫'''
myChart.hideLoading();
'''10. 座標軸觸發，主要在柱狀圖'''
tooltip : {
           trigger: 'axis'
}
'''11. 相關工具欄的設定'''
toolbox: {
          '''是否顯示工具欄'''
          show : true,
          '''顯示的工具欄是垂直的還是水平的，預設是水平的'''
          orient : 'vertical',
          '''工具欄圖示的大小，預設是15'''
          itemSize:20,
          '''工具欄圖示之間的距離，預設是10'''
          itemGap:15,
          '''各工具配置項'''
          feature : {
                     '''展現當前圖表所用的資料，編輯後可以動態更新，設定顯示該工具，只讀設定為false'''
                    dataView : {show: true, readOnly: false},
                    '''動態型別切換,顯示該工具，可以新增的型別為，line, bar, stack, tiled'''
                    magicType : {show: true, type: ['line', 'bar']},
                    '''配置項還原工具，設定顯示'''
                    restore : {show: true},
                    '''設定是否可以儲存圖片'''
                    saveAsImage : {show: true}
           }
}
'''12. '''
xAxis : [
        {
'''類目軸，適用於離散的類目資料，為該型別時必須通過 data 設定類目資料.還有'value' 數值軸，適用於連續資料,有'time' 時間軸等等'''
         type : 'category',
         name : '這是x軸的名稱',
         '''設定x軸名稱的的位置，餐廚有('start','center','end')'''
         nameLocation : 'center',
         '''設定x軸名稱與x軸的距離，預設是15'''
         nameGap:28,
         '''設定x軸的名稱旋轉的度數'''
         nameRotate:10,
         '''設定x軸的是否是反向座標軸，預設就是false'''
         inverse:false,
         '''設定x軸的字型樣式'''
         nameTextStyle : {
             '''設定字型顏色'''
             color:'rgb(238,99,99)',
             '''設定座標軸名稱文字字型的粗細'''
             fontWeight:'bold',
             '''設定字型的大小'''
             fontSize:17
                    },
         data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
         }
],
'''13. '''
series : [
         {
              name:'蒸發量',
              type:'bar',
              data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
             '''圖表標註'''
              markPoint : {
                  '''標註的資料陣列'''
                  data : [
                        '''type:特殊的標註型別，用於標註最大值最小值等,name為標註名稱'''
                         {type : 'max', name: '最大值'},
                         {type : 'min', name: '最小值'}
                          ]
              },
              markLine : {
                    '''圖表標線'''
                  data : [
                         {type : 'average', name: '平均值'}
                        ]
               }
         },
         {
               name:'降水量',
               type:'bar',
               data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,2.3],
               markPoint : {
                    data : [
                            {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
                            {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                        ]
                },
                markLine : {
                    data : [
                            {type : 'average', name : '平均值'}
                          ]
                }
         },
 

  顏色RGB對照大全

 Echarts裡面內建了兩個屬性，'light'和'drak'

4. 餅圖的配置引數：

'''1. 設定餅圖的大小'''
radius: '60%',
'''2. 是否通過設定 roseType 顯示成南丁格爾圖。南丁格爾圖會通過半徑表示資料的大小。'''
roseType: 'angle'
'''3. 設定標籤的視覺引導線的顏色'''
labelLine: {
    lineStyle: {
        color: 'rgba(255, 255, 255, 0.3)'
    }
}
'''4. 設定扇形的顏色'''
itemStyle: {
    // 設定扇形的顏色
    color: '#c23531',
    //陰影
    shadowBlur: 200,
    //陰影顏色
    shadowColor: 'rgba(0, 0, 0, 0.5)'
}
''' 5. 設定每個扇形的顏色'''
data: [
    { // 第一個扇形的大小
    value:400,  
    name:'第一個標籤文字',
    // 設定樣式
    itemStyle: {
        color: '#c23531'
       }
    },
    { // 第二個扇形的大小
    value:600,  
    name:'第二個標籤文字',
    itemStyle: {
        color: '#c23531'
       }
    }
 ...]
'''6. 滑鼠放在圖上的高亮顯示'''
emphasis: {
           itemStyle: {
           // 高亮時點的顏色。
           color: 'blue'
           },
           label: {
            // 是否顯示，預設就是True，
            show: true,
            formatter: '高亮時標籤的文字。'
            }
}
'''7. series'''
(1)series-pie.center  :  餅圖的中心（圓心）座標，陣列的第一項是橫座標，第二項是縱座標。
   支援設定成百分比，設定成百分比時第一項是相對於容器寬度，第二項是相對於容器高度。
   例如：  center: ['50%', '50%']
 

<script type="text/javascript">
    // 基於準備好的dom，初始化echarts例項
    var myChart = echarts.init(document.getElementById('main'));

    myChart.setOption({
        series : [
            {
                name: '訪問來源',
                type: 'pie',
                radius: '60%',
                data:[
                    {value:235, name:'視訊廣告'},
                    {value:274, name:'聯盟廣告'},
                    {value:310, name:'郵件營銷'},
                    {value:335, name:'直接訪問'},
                    {value:400, name:'搜尋引擎'}
                ]
            }
        ]
    })
</script>
 

5. 折線圖的配置引數

"""有關折線圖的setOption的引數"""
'''1. 工具欄的相關設定'''
toolbox: {
                show: true,
                feature: {
                '''資料區域縮放'''
                    dataZoom: {
                    '''指定哪些 yAxis 被控制。如果預設(none)則控制所有的y軸'''
                        yAxisIndex: 'none'
                    },
                    '''資料檢視，即工具欄中的資料檢視的相關配置'''
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
'''2. x軸的相關設定'''
 xAxis:  {
                type: 'category',
                '''設定座標的點是否與x軸的標籤對齊，false為對齊，true為不對齊'''
                boundaryGap: false,
                data: ['週一','週二','週三','週四','週五','週六','週日']
            },
'''3. y軸的相關設定'''
yAxis: {
                type: 'value',
                '''座標軸刻度標籤的相關設定'''
                axisLabel: {
                    '''刻度標籤的內容格式器，支援字串模板和回撥函式兩種形式。'''
                    formatter: '{value} °C'
                }
            },
'''4. 系列列表。每個系列通過 type 決定自己的圖表型別'''
series: [
            ///第一個線
            {
                name:'最高氣溫',
                type:'line',
                data:[11, 11, 15, 13, 12, 13, 10],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                //圖表標註線
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            },
            

//第二個線
            {
                name:'最低氣溫',
                type:'line',
                data:[1, -2, 2, 5, 3, 2, 0],
                markPoint: {
                    data: [
                    '''valueL:設定值，xAxis:標註值的x軸位置，yAxis:標註的y軸設定'''
                        {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                    ]
                },
                markLine: {
                    data: [
                        //第一個標註線
                        {type: 'average', name: '平均值'},
                        [
                        //第二個標註線文字
                        {
                            symbol: 'none',
                            '''標註相對容器的螢幕 x 座標'''
                            x: '90%',
                            yAxis: 'max'
                        }, 
                        // 第二個標註線
                        {
                            symbol: 'circle',
                            '''標線的文字位置和值的相關設定'''
                            label: {
                                    '''設定標線文字的位置，start\middle\end''''
                                    position: 'start',
                                    '''標籤內容格式器，支援字串模板和回撥函式兩種形式'''
                                    formatter: '最大值'
                                }
                            },
                            type: 'max',
                            name: '最高點'
                        }]
                    ]
                }
            }
        ]

6. 散點圖的配置引數

'''1. 直角座標系內繪製網格，'''
grid: {
    show:true,
    '''網格距離容器左邊的百分比'''
    left: '5%',
    '''距離右邊的'''
    right: '7%',
    '''距離底部的百分比'''
    bottom: '3%',
    //網格的區域是否包含座標軸的標籤
    containLabel: true
},
'''2. 資料項的設定，即滑鼠放在點上的提示內容'''
tooltip : {
    ''' function(params) 回撥函式的格式 '''
    formatter : function (params) {
        '''seriesName 系列名稱
           value  傳入的資料值'''
        if (params.value.length > 1) {
            return params.seriesName + ' :<br/>'
            + params.value[0] + 'cm '
            + params.value[1] + 'kg ';
        }
        else {
            return params.seriesName + ' :<br/>'
            + params.name + ' : '
            + params.value + 'kg ';
        }
    },
    axisPointer:{
        show: true,
        '''十字準星指示器'''
        type : 'cross',
        lineStyle: {
            '''線的型別'''
            type : 'solid'
        }
    }
'''3. 散點圖的工具欄的相關設定 '''
toolbox: {
    feature: {
        '''資料區域縮放。'''
        dataZoom: {},
        brush: {
        '''使用的按鈕，rect:開啟矩形框選擇功能
            polygon:開啟任意形狀選擇功能
            clear: 清空所有選框'''
            type: ['rect', 'polygon', 'clear']
        }
    }
},
'''4. x軸的相關設定'''
xAxis : [
    {
        type : 'value',
        '''是否脫離0刻度，設定成 true 後坐標刻度不會強制包含零刻'''
        scale:true,
        axisLabel : {
            formatter: '{value} cm'
        },
        '''座標軸在 grid 區域中的分隔線。'''
        splitLine: {
        '''是否顯示分隔線，預設會顯示'''
            show: false
        }
    }
],
'''5. series.markArea    圖示的標域 常用於標記圖表中某個範圍的資料'''
markArea: {
    '''預設為 false，即響應和觸發滑鼠事件。'''
    silent: true,
    '''該標域的樣式。'''
    itemStyle: {
        ''' 設定標域為透明(transparent)，或者rgb(c,c,c)形式'''
            color: 'transparent',
        '''描邊線寬，為0時無描邊'''
            borderWidth: 1,
        '''描邊型別： 預設為實線(solid)。/dashed/dotted'''
            borderType: 'dashed'
    },
    '''標域的資料陣列'''
    '''分別有標域的左上角的座標資料以及右下角的資料'''
    data: [[{
        name: '女性分佈區間',
        xAxis: 'min',
        yAxis: 'min'
    }, {
        xAxis: 'max',
        yAxis: 'max'
    }]]
},