Echarts 柱狀圖屬性詳解

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

     // 指定圖表的配置項和數據
        var option = {
            //--------------    標題 title  ----------------   
            title: {                                
                text: '主標題',                
                textStyle:{                 //---主標題內容樣式    
                    color:'#fff'
                },

                subtext:'副標題',          //---副標題內容樣式
                subtextStyle:{
                    color:'#bbb'                
                },

                padding:[0,0,100,100]               //---標題位置,由於圖形是是放在一個dom中,所以用padding屬性來定位

            },

            //----------------   圖例 legend  -----------------
            legend: {
                type:'plain',               //----圖例類型，默認爲'plain'，當圖例不少時可以使用'scroll'
                top:'1%',                   //----圖例相對容器位置,top\bottom\left\right            
                selected:{
                    '銷量':true,          //----圖例選擇,圖形加載出來會顯示選擇的圖例，默認爲true
                },
                textStyle:{                 //----圖例內容樣式
                    color:'#fff',               //---全部圖例的字體顏色
                    //backgroundColor:'black',  //---全部圖例的字體背景色
                },              
                tooltip:{                   //圖例提示框，默認不顯示
                    show:true,
                    color:'red',
                },
                data:[                      //----圖例內容
                    {
                        name:'銷量',
                        icon:'circle',          //----圖例的外框樣式
                        textStyle:{
                            color:'#fff',       //----單獨設置某一個圖例的顏色
                            //backgroundColor:'black',//---單獨設置某一個圖例的字體背景色
                        }
                    }
                ],                      
            },

            //--------------   提示框 -----------------
            tooltip: {
                show:true,                  //---是否顯示提示框,默認爲true
                trigger:'item',             //---數據項圖形觸發
                axisPointer:{               //---指示樣式
                    type:'shadow',      
                    axis:'auto',    

                }

　　　　　　　　　
                padding:5,
                textStyle:{                 //---提示框內容樣式
                    color:"#fff",           
                },
            },

            //-------------  grid區域  ----------------
            grid:{
                show:false,                 //---是否顯示直角座標系網格
                top:80,                     //---相對位置，top\bottom\left\right  
                containLabel:false,         //---grid 區域是否包含座標軸的刻度標籤
                tooltip:{                   //---鼠標焦點放在圖形上，產生的提示框
                    show:true,  
                    trigger:'item',         //---觸發類型
                    textStyle:{
                        color:'#666',
                    },
                }
            },

            //-------------   x軸   -------------------
            xAxis: {
                show:true,                  //---是否顯示
                position:'bottom',          //---x軸位置
                offset:0,                   //---x軸相對於默認位置的偏移
                type:'category',            //---軸類型，默認'category'
                name:'月份',              //---軸名稱
                nameLocation:'end',         //---軸名稱相對位置
                nameTextStyle:{             //---座標軸名稱樣式
                    color:"#fff",
                    padding:[5,0,0,-5], //---座標軸名稱相對位置
                },
                nameGap:15,                 //---座標軸名稱與軸線之間的距離
                //nameRotate:270,           //---座標軸名字旋轉

                axisLine:{                  //---座標軸 軸線
                    show:true,                  //---是否顯示

                    //------------------- 箭頭 -------------------------
                    symbol:['none', 'arrow'],   //---是否顯示軸線箭頭
                    symbolSize:[8, 8] ,         //---箭頭大小
                    symbolOffset:[0,7],         //---箭頭位置

                    //------------------- 線 -------------------------
                    lineStyle:{
                        color:'#fff',
                        width:1,
                        type:'solid',
                    },
                },
                axisTick:{                  //---座標軸 刻度
                    show:true,                  //---是否顯示
                    inside:true,                //---是否朝內
                    lengt:3,                    //---長度
                    lineStyle:{
                        //color:'red',          //---默認取軸線的顏色
                        width:1,
                        type:'solid',
                    },
                },
                axisLabel:{                 //---座標軸 標籤
                    show:true,                  //---是否顯示
                    inside:false,               //---是否朝內
                    rotate:0,                   //---旋轉角度   
                    margin: 5,                  //---刻度標籤與軸線之間的距離
                    //color:'red',              //---默認取軸線的顏色
                },
                splitLine:{                 //---grid 區域中的分隔線
                    show:false,                 //---是否顯示，'category'類目軸不顯示，此時個人X軸爲類目軸，splitLine屬性是無心義的
                    lineStyle:{
                        //color:'red',
                        //width:1,
                        //type:'solid',
                    },
                },
                splitArea:{                 //--網格區域
                    show:false,                 //---是否顯示，默認false
                },              
                data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],//內容
            },

            //----------------------  y軸  ------------------------
            yAxis: {
                show:true,                  //---是否顯示
                position:'left',            //---y軸位置
                offset:0,                   //---y軸相對於默認位置的偏移
                type:'value',           //---軸類型，默認'category'
                name:'銷量',              //---軸名稱
                nameLocation:'end',         //---軸名稱相對位置value
                nameTextStyle:{             //---座標軸名稱樣式
                    color:"#fff",
                    padding:[5,0,0,5],  //---座標軸名稱相對位置
                },
                nameGap:15,                 //---座標軸名稱與軸線之間的距離
                //nameRotate:270,           //---座標軸名字旋轉

                axisLine:{                  //---座標軸 軸線
                    show:true,                  //---是否顯示

                    //------------------- 箭頭 -------------------------
                    symbol:['none', 'arrow'],   //---是否顯示軸線箭頭
                    symbolSize:[8, 8] ,         //---箭頭大小
                    symbolOffset:[0,7],         //---箭頭位置

                    //------------------- 線 -------------------------
                    lineStyle:{
                        color:'#fff',
                        width:1,
                        type:'solid',
                    },
                },
                axisTick:{                  //---座標軸 刻度
                    show:true,                  //---是否顯示
                    inside:true,                //---是否朝內
                    lengt:3,                    //---長度
                    lineStyle:{
                        //color:'red',          //---默認取軸線的顏色
                        width:1,
                        type:'solid',
                    },
                },
                axisLabel:{                 //---座標軸 標籤
                    show:true,                  //---是否顯示
                    inside:false,               //---是否朝內
                    rotate:0,                   //---旋轉角度   
                    margin: 8,                  //---刻度標籤與軸線之間的距離
                    //color:'red',              //---默認取軸線的顏色
                },
                splitLine:{                 //---grid 區域中的分隔線
                    show:true,                  //---是否顯示，'category'類目軸不顯示，此時個人y軸爲類目軸，splitLine屬性是有意義的
                    lineStyle:{
                        color:'#666',
                        width:1,
                        type:'dashed',          //---類型
                    },
                },
                splitArea:{                 //--網格區域
                    show:false,                 //---是否顯示，默認false
                }                        
            },

            //------------ 內容數據  -----------------
            series: [
                {
                    name: '銷量',             //---系列名稱
                    type: 'bar',                //---類型
                    legendHoverLink:true,       //---是否啓用圖例 hover 時的聯動高亮
                    label:{                     //---圖形上的文本標籤
                        show:false,
                        position:'insideTop',   //---相對位置
                        rotate:0,               //---旋轉角度
                        color:'#eee',
                    },
                    itemStyle:{                 //---圖形形狀
                        color:'blue',
                        barBorderRadius:[18,18,0,0],
                    },
                    barWidth:'20',              //---柱形寬度
                    barCategoryGap:'20%',       //---柱形間距
                    data: [3020, 4800, 3600, 6050, 4320, 6200,5050,7200,4521,6700,8000,5020]
                }
            ]
        };

        // 使用剛指定的配置項和數據顯示圖表。
        myChart.setOption(option);
</script>

 

　　　　　　　　　　　　　　//{a}：series的name屬性　　　　　　　　　　//{b}：當前數據的name　　　　　　　　　　//{c}：當前數據的value　　　　　　　　　　//{d}：當前數據的百分比　　　　　　　　　　這是Echarts預約義的，固然能夠用formatter自定義