在HTML寫個空div

<div id="mainTL" style="height:100% ;width:100%;"></div>

JS中：

myChartTL = echarts.init(document.getElementById(‘mainTL‘));

$(function(){
   // 指定圖表的配置項和數據
    var optionTL = {
        title : {
            text : ‘案卷受理統計‘,

　　　　　　　　top : 20,
　　　　　　　　textStyle:{
　　　　　　　　　　color:‘#fff‘,
　　　　　　　　　　fontSize:20
　　　　　　　　},
　　　　　　　　//

            x : ‘center‘
        },

　　　　　　areaStyle:{
　　　　　　　　normal:{
　　　　　　　　　　//顏色漸變函數 前四個參數分別表示四個位置依次為左、下、右、上
　　　　　　　　　　color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
　　　　　　　　　　offset: 0,
　　　　　　　　　　color: ‘rgba(255,234,0,0.96)‘
　　　　　　　　　　}, {
　　　　　　　　　　offset: .54,
　　　　　　　　　　color: ‘rgba(255,234,0,0.36)‘
　　　　　　　　　　},{
　　　　　　　　　　offset: 1,
　　　　　　　　　　color: ‘rgba(255,234,0,0.0)‘
　　　　　　　　　 }])

　　　　　　　　}
　　　　　　},

        grid: {
            left: ‘5%‘,
            right: ‘5%‘,
            bottom: ‘10%‘,
            containLabel: true
        },
        tooltip : {
            // 提示框觸發方式：trigger,坐標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用
            trigger : ‘axis‘
        },
        legend : {
            
 
// 靠右顯示
            //x : ‘right‘,
            y:‘top‘,
　　　　　　　//設置圖標的大小
            itemWidth:15,
            itemHeight:10,
            /*{
                name : ‘受理量‘,
                itemStyle  : {
                    color : ‘CornflowerBlue‘
                    //把 itemStyle變為textStyle 字體跟隨圖標顏色
                    //color : ‘auto‘
                }
            },*/
            data : [ ‘受理量‘, ‘辦結量‘, ‘退件量‘, ‘超期量‘ ],
            orient : ‘horizontal‘,
            top : 30
        },
        // 是否啟用拖拽重計算特性，默認關閉(即值為false)
        calculable : true,
        xAxis : [ {

　　　　　 type : ‘category‘,

　　　　　　　　//留白策略
　　　　　　　　boundaryGap : false,
　　　　　　　　axisLine:{
　　　　　　　　　　lineStyle:{
　　　　　　　　　　　　color:‘#fff‘
　　　　　　　　　　}
　　　　　　　　},

　　　　　　　　//去掉中間的分割線
　　　　　　　　splitLine:{
　　　　　　　　　　show:false
　　　　　　　　},

　　　　　//數據過多時，想要顯示全部時需要加上如下屬性
　　　　　　　　axisLabel:{
　　　　　　　　　　interval: 0,
　　　　　　　　　　//字體斜向顯示
　　　　　　　　　　rotate:30,

　　　　　　　　　　textStyle : {
　　　　　　　　　　　　fontSize:14
　　　　　　　　　　}

},

data : []

        } ],
        //yAxis : {},
        yAxis : [{
             //type: ‘category‘,
             type: ‘value‘
             //splitNumber   :5

　　　　　　　　 axisLine:{
　　　　　　　　　　 lineStyle:{
　　　　　　　　　　　　color:‘#fff‘
　　　　　　　　　　}
　　　　　　　　},
　　　　　　　　axisLabel : {
　　　　　　　　　　textStyle : {
　　　　　　　　　　　　fontSize:14
　　　　　　　　　　}
　　　　　　　　},
　　　　　　　　//去掉中間的分割線
　　　　　　　　splitLine:{
　　　　　　　　　　show:false
　　　　　　　　}

　　　　　　　　//最小單位刻度為1

　　　　　　　 　minInterval: 1,

　　　　　　　　　//最大值
　　　　　　　　 max:max

}],

series : [{　　　

　　　　　　name:‘受理量‘,
　　　　　　type:‘bar‘,
　　　　　　//調整柱子寬度
　　　　　　barWidth:20,

　　　　　　data:data

　　　　 }]
    };
    //ajax加載之前先顯示一段簡單的loading動畫
    myChartTL.showLoading();    
    //ajax加載成功之後隱藏loading動畫
    myChartTL.hideLoading();   

    // 使用剛指定的配置項和數據顯示圖表。
    myChartTL.setOption(optionTL);  
}

圖標自適應窗口

    //窗口自適應
    $(window).resize(function() {  
        myChartTL.resize();
    }).resize();

百度Echarts的使用總結