Echarts柱狀圖常用配置項


柱狀圖:

histogram={
    dataZoom:[ //用於區域縮放,從而能自由關注細節的數據信息,或者概覽數據整體,或者去除離群點的影響
                type:'inside' //內置於坐標系中,使用戶可以在坐標系上通過鼠標拖拽、鼠標滾輪、手指滑動(觸屏上)來縮放或漫游坐標系
                     'slider' //有單獨的滑動條,用戶在滑動條上進行縮放或漫游
                     'select' //提供一個選框進行數據區域縮放。即 toolbox.feature.dataZoom,配置項在 toolbox 中。
             ],
            //dataZoom主要是對視圖的操作,比如要拉動視圖,鼠標滾動視圖什么的,詳情請看官網介紹
    title:{//柱狀圖title
                text:"柱狀圖title",
                textStyle:{
                                fontSize://title文字大小
                            },
                padding:[]//柱狀圖內邊距
            },
    color://柱狀圖顏色,
    tooltip:{//提示框組件,即鼠標移動到指定位置會出現提示,類似img的alt屬性
                trigger:'item' //數據項圖形觸發,主要在散點圖,餅圖等無類目軸的圖表中使用
                        'axis' //坐標軸觸發,主要在柱狀圖,折線圖等會使用類目軸的圖表中使用
                         'none' //什么都不觸發
                axisPointer:{//坐標軸指示器,顯示當前鼠標移動的坐標
                                type:'shadow' //默認為直線,可選'line','shadow'
                            }
            },
    grid:{//視圖x軸,y軸距離邊界多遠,就好像position的定位差不多
            left:'10%',坐標軸距離左邊邊界多遠
            containLabel:true //只用當containLabel為true時,left才會生效
         },
    textStyle:{//全局的字體樣式,注意區分title中的textStyle
                    ....
                },
    xAxis:[{
              type:'category',//類目軸,適用於離散的類目數據,為該類型時必須通過 data 設置類目數據---**此處使用category表示柱狀圖的x軸下坐標值**
                    'value' // 數值軸,適用於連續數據
                    'time' //時間軸,適用於連續的時序數據,與數值軸相比時間軸帶有時間的格式化,在刻度計算上也有所不同,例如會根據跨度的范圍來決定使用月,星期,日還是小時范圍的刻度
                    'log' //對數軸。適用於對數數據
                data: [{
                        value: '周一',// 突出周一
                        textStyle: {
                                        fontSize: 20,
                                        color: 'red'
                                    }
                        }, '周二', '周三', '周四', '周五', '周六', '周日'],
                axisTick:{
                            show:true //是否顯示坐標軸刻度,
                            alignWithLabel:true //類目軸中在 boundaryGap 為 true 的時候有效,可以保證刻度線和標簽對齊
                        },
                axisLabel:{
                             show:true,//是否顯示刻度標簽
                             interval:0 //坐標軸刻度標簽的顯示間隔   0強制顯示所有標簽,1表示『隔一個標簽顯示一個標簽』,如果值為 2,表示隔兩個標簽顯示一個標簽,以此類推
                             rotate:50 //x軸數據太多可以嘗試旋轉一定角度,不至於太難看
                                       //刻度標簽旋轉的角度,在類目軸的類目標簽顯示不下的時候可以通過旋轉防止標簽之間重疊。旋轉的角度從 -90 度到 90 度
                          }
          }]
    yAxis:[{ //與xAxis類似,表示在y軸顯示,xAxis的type為category,所以yAxis的type應該為value
            type:'value'
          }],
    series:[{//圖表類型,此配置項為重要配置項
                type:'bar',//表示柱狀圖,還有'line'折線圖,'pie'餅狀圖,'Scatter'散點圖,'GEO/Map'地理坐標/地圖,'Candlestick'K線圖,'Radar'雷達圖,'Boxplot'盒須圖,'Heatmap'熱力圖,'Graph'關系圖,'Lines'路徑圖等等等
                name:'bar',//系列名稱,用於tooltip的顯示,legend 的圖例篩選,在 setOption 更新數據和配置項時用於指定對應的系列
                barWidth:30,//狀態圖寬度
                data:[10, 20, 30, 40],//表示數據的數量,比如成績90分的有10個人
                label:{//圖形上的文本標簽,可用於說明圖形的一些數據信息,比如值,名稱等
                            show:true,
                            position:'top'//顯示的位置
                      }
           }]
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM