Echarts學習之路2(基本配置項)


title:標題組件,包含主標題和副標題。

title:{
      text:"",//主標題
      link:"",//主標題文本超鏈接
      target:"",//指定窗口打開主標題超鏈接。'self' 當前窗口打開,blank' 新窗口打開
      textStyle:{//主標題樣式
         color:"#333",
         ......
     },
  subtext:'',//副標題文本,支持使用\n換行
      sublink:""//副標題文本超鏈接
      subtarget:'blank/self' 
      subtextStyle:{}//副標題樣式
      textAlign:"auto/left/right/center",//整體(包括text和subtext)的水平對齊
      textVerticalAlign:"auto/top/bottom/middle",//整體(包括text和subtext)的垂直對齊
      padding:[default:5],//標題內邊距,單位px,默認各方向內邊距為5,接受數組分別設定上右下左邊距。
      itemGap:[default:10],//主副標題之間的間距
      zlevel:[default:0],//所有圖形的 zlevel 值,zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面
      z:[default:2],//組件的所有圖形的z值。控制圖形的前后順序。z值小的圖形會被z值大的圖形覆蓋,z相比zlevel優先級更低,而且不會創建新的 Canvas
      left:'auto'/20%/'right'/'center',//grid 組件離容器左側的距離。
      right:'',
      top:"",
      bottom:"",
      backgroundColor:'transparent',//標題背景色,默認透明。
      borderColor:[default:'#ccc'],//標題的邊框顏色。支持的顏色格式同 backgroundColor。
      borderWidth:[default:0],
      borderRadius:[default:0],
      ....
}

  legend:圖例組件。圖例組件展現了不同系列的標記(symbol),顏色和名字。可以通過點擊圖例控制哪些系列不顯示。

legend:{
         type:"plain/scroll",//'plain':普通圖例。缺省就是普通圖例。'scroll':可滾動翻頁的圖例。當圖例數量較多時可以使用。
         id:"",//組件ID,指定則可用於在 option 或者 API 中引用組件。
         show:true/false,
         zlevel:[default:0],
         z:[default:2],
         left:'',
         top:'',
         right:'',
         bottom:'',
         width:'',//圖例組件的寬度。默認自適應。
         height:'',
         orient:'horizontal/vertical',//圖例列表的布局朝向。
         align:'',//圖例標記和文本的對齊。默認自動
         padding:[default:5],//圖例內邊距,單位px,默認各方向內邊距為5,接受數組分別設定上右下左邊距。
         itemGap:[ default: 10 ],//圖例每項之間的間隔。橫向布局時為水平間隔,縱向布局時為縱向間隔
         itemWidth:[ default: 25 ],//圖例標記的圖形寬度。
         itemHeight:[ default: 14 ],
         symbolKeepAspect:[default:true],//如果圖標(可能來自系列的 symbol 或用戶自定義的 legend.data.icon)是 path:// 的形式,是否在縮放時保持該圖形的長寬比。
         formatter:[default:null],//用來格式化圖例文本,支持字符串模板和回調函數兩種形式,
                                               示例:// 使用字符串模板,模板變量為圖例名稱 {name}
                                                       formatter: 'Legend {name}'
                                                        // 使用回調函數
                                                        formatter: function (name) {
                                                                     return 'Legend ' + name;
                                                        }
        selectedMode:[default:true],//圖例選擇的模式,控制是否可以通過點擊圖例改變系列的顯示狀態。默認開啟圖例選擇,可以設成 false 關閉。
        inactiveColor:[default:'#ccc'],//圖例關閉時的顏色。
        textStyle:{},//圖例的公用文本樣式。
        tooltip:{show:true},//圖例的 tooltip 配置,配置項同 tooltip。默認不顯示,可以在 legend 文字 
                                      很多的時候對文字做裁剪並且開啟 tooltip,
                                       legend: {
                                                     formatter: function (name) {
                                                                    return echarts.format.truncateText(name, 40, 
                                                                          '14px Microsoft Yahei', '…');
                                                     },
                                                      tooltip: {
                                                                    show: true
                                                       }
                                       }
         data:[{                  //圖例的數據數組。
               name:"系列1",
               icon:"circle",// 強制設置圖形為圓。
               textStyle:{color:'red'},//// 設置文本為紅色
          }],
      ......
      
}

  grid:直角坐標系內繪圖網格,單個 grid 內最多可以放置上下兩個 X 軸,左右兩個 Y 軸。可以在網格上繪制折線圖柱狀圖散點圖(氣泡圖)

grid:{
       id:"",
       show:[default:false],//是否顯示直角坐標系網格。
       zlevel:[default:0],
       z:[default:2],
       left:'10%',
       right:"",
       top:60,
       bottom:60,
       width:[default:auto],
       height:[default:auto],
      containLabel:[default:false],//grid 區域是否包含坐標軸的刻度標簽。
      backgroundColor:"#ccc",
      ....
     tooltip:{
                show:true,//是否顯示提示框組件,包括提示框浮層和 axisPointer。
                trigger:'item',//觸發類型。item/axis,item:數據項圖形觸發,主要在散點圖,餅圖等無類目軸的 
                圖表中使用。axis:坐標軸觸發,主要在柱狀圖,折線圖等會使用類目軸的圖表中使用。
                position:,// // 絕對位置,相對於容器左側 10px, 上側 10 pxposition: [10, 10]// 相對位置,放 
                置在容器正中間position: ['50%', '50%']
                formatter:,//提示框浮層內容格式器,支持字符串模板和回調函數兩種形式。
                padding:5
                textStyle:{},
                   .....
     }
}

  xAxis:直角坐標系 grid 中的 x 軸,一般情況下單個 grid 組件最多只能放上下兩個 x 軸,多於兩個 x 軸需要通過配置 offset 屬性防止同個位置多個 x 軸的重疊。

xAaxis:{

        id:,
        show:true,
        gridIndex:0,//x 軸所在的 grid 的索引,默認位於第一個 grid。
        position:'top/bottom',//x 軸的位置。
        offset:0,//X 軸相對於默認位置的偏移,在相同的 position 上有多個 X 軸的時候有用
        type:"category".//,坐標軸類型,'value' 數值軸,適用於連續數據。'category' 類目軸,適用於離散的類目數據,為該類型時必須通過 data 設置類目數據。'time' 時間軸,適用於連續的時序數據,與數值軸相比時間軸帶有時間的格式化,在刻度計算上也有所不同,例如會根據跨度的范圍來決定使用月,星期,日還是小時范圍的刻度。'log' 對數軸。適用於對數數據。
         name:"",//坐標軸名稱。
         nameLocation:'start/middle/center/end',//坐標軸名稱顯示位置。
         nameTextStyle:{}//坐標軸名稱的文字樣式。
         nameGap:15,坐標軸名稱與軸線之間的距離。
         nameRotate:null,//坐標軸名字旋轉,角度值。
         inverse:false,//是否是反向坐標軸
         boundaryGap: ['20%', '20%'],//坐標軸兩邊留白策略,類目軸和非類目軸的設置和表現不一樣。
         min:null.,//坐標軸刻度最小值,可以設置成特殊值 'dataMin',此時取數據在該軸上的最小值作為最小刻度。
         max:null,//   坐標軸刻度最大值。可以設置成特殊值 'dataMax',此時取數據在該軸上的最大值作為最大刻度。
         scale:false,//只在數值軸中(type: 'value')有效,是否是脫離 0 值比例。設置成 true 后坐標刻度不會強制包含零刻度。在雙數值軸的散點圖中比較有用
         splitNumber:5,//坐標軸的分割段數,需要注意的是這個分割段數只是個預估值,最后實際顯示的段數會在這個基礎上根據分割后坐標軸刻度顯示的易讀程度作調整。在類目軸中無效
         minInterval:0,//自動計算的坐標軸最小間隔大小。可以設置成1保證坐標軸分割刻度顯示成整數,只在數值軸或時間軸中(type: 'value' 或 'time')有效。
         maxInterval:,//自動計算的坐標軸最大間隔大小。在時間軸((type: 'time'))可以設置成 3600 * 24 * 1000 保證坐標軸分割刻度最大為一天。只在數值軸或時間軸中(type: 'value' 或 'time')有效。
         interval:,//強制設置坐標軸分割間隔。
         logBase:10,//對數軸的底數,只在對數軸中(type: 'log')有效。
         axisLine:{//坐標軸軸線相關設置。
                   show:true,
                   onZero:true,//X 軸或者 Y 軸的軸線是否在另一個軸的 0 刻度上,只有在另一個軸為數值軸 
                  且包含 0 刻度時有效。
                   symbol:'none',//軸線兩邊的箭頭,
                   lineStyle:{},//坐標線樣式
         },
        axisTick:{//坐標軸刻度相關設置。
                    show:true,
                    length:5,
                    inside:false,
                    lineStyle:{},
                    .....
        },
        axisLabel:{//坐標軸刻度標簽的相關設置。
           ....
        } 
        splitLine:{//坐標軸在 grid 區域中的分隔線。
                  show:true,
                  interval:'auto',//坐標軸分隔線的顯示間隔,
                  lineStyle:{}
        },
        splitArea:{//坐標軸在 grid 區域中的分隔區域,默認不顯示。
                 show:true,
                  areaStyle:{}
        },
        data:[{
               value:"",//單個類目名稱。
               textStyle:{},//類目標簽的文字樣式。
          }],
        ......
}

  

 yAxis:直角坐標系 grid 中的 y 軸,一般情況下單個 grid 組件最多只能放左右兩個 y 軸,多於兩個 y 軸需要通過配置 offset 屬性防止同個位置多個 Y 軸的重疊.

與xAxis一致。

 tooltip:提示框組件。

tooltip:{
        show:true,
        trigger:"item",//item:數據項圖形觸發,主要在散點圖,餅圖等無類目軸的圖表中使用。axis:坐標軸觸發,主要在柱狀圖,折線圖等會使用類目軸的圖表中使用。
        axisPointer:{  //坐標軸指示器配置項。
          type:"line",   //line:直線指示器,shadow:陰影指示器,none:無指示器,cross:十字准星指示器
          axis:"auto",//指示器的坐標軸。默認情況,坐標系會自動選擇顯示哪個軸的 ,可以是x,y,radius,angle
          snap:false,//坐標軸指示器是否自動吸附到點上。默認自動判斷。這個功能在數值軸和時間軸上比較有意 
          義,可以自動尋找細小的數值點。
          z:,
           label:{//坐標軸指示器的文本標簽。
             show:false,
             precision:"auto",//文本標簽中數值的小數點精度。默認根據當前軸的值自動判斷。也可以指定如 2 
                                        表示保留兩位小數
             formatter:null,//文本標簽文字的格式化器。
             margin:3,//label 距離軸的距離。
             color:"#fff",//
             ......
            },
           lineStyle:{}//axisPointer.type 為 'line' 時有效。
           shadowStyle:{}//axisPointer.type 為 'shadow' 時有效。
           crossStyle:{},//axisPointer.type 為 'cross' 時有效。
           .......
        },
       .......
}    

  toolbox:工具欄。內置有導出圖片數據視圖動態類型切換數據區域縮放重置五個工具。

toolbox:{
           id:"",
           show:true,
           orient:"horizontal",//工具欄 icon 的布局朝向。
           itemSize:15,//工具欄 icon 的大小。
           itemGap:10,//工具欄 icon 每項之間的間隔。橫向布局時為水平間隔,縱向布局時為縱向間隔。
           showTitle:true;//是否在鼠標 hover 的時候顯示每個工具 icon 的標題。
           ......
}

  textStyle:全局的字體樣式。

textStyle:{
        color:"#fff",
        fontStyle:"normal",
        fontWeight:"normal",
        fontFamily:"sans-serif",
        fontSize:12,
        lineHeight:,
        width:,
        height:,
        textBorderColor:"",
        textBorderWidth:"",
        textShadowColor:"transparent",
        textShadowBlur:0,//文字本身的陰影長度。
        textShadowOffsetX:0,//文字本身的陰影 X 偏移。
        textShadowOffsetY:0//文字本身的陰影 Y 偏移
}

series:系列列表。每個系列通過 type 決定自己的圖表類型

 

series:[
   type:"line",//折線圖
   name:"",//系列名稱,
   coordinateSystem:"cartesian2d",//該系列使用的坐標系,'cartesian2d':二維直角坐標系,'polar':使用極坐標系,通過 polarIndex 指定相應的極坐標組件
    xAxisIndex:0,//使用的 x 軸的 index,在單個圖表實例中存在多個 x 軸的時候有用。
    yAxisIndex:0,//使用的 y 軸的 index,在單個圖表實例中存在多個 y軸的時候有用。
    polarIndex:0,//使用的極坐標系的 index,在單個圖表實例中存在多個極坐標系的時候有用。
    symbol:"emptyCircle",//標記的圖形。
                                ECharts 提供的標記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 
                                'pin', 'arrow', 'none',可以通過 'image://url' 設置為圖片,其中 URL 為圖片的鏈 
                                 接,或者 dataURI。URL 為圖片鏈接例如:
                                    'image://http://xxx.xxx.xxx/a/b.png'
    symbolSize:4,//標記的大小,可以設置成諸如 10 這樣單一的數字,也可以用數組分開表示寬和高,例如 [20, 10] 表示標記寬為20,高為10。
    symbolRotate:,//標記的旋轉角度
    symbolKeeoAspect:false,//如果 symbol 是 path:// 的形式,是否在縮放時保持該圖形的長寬比
    symbolOffset:[0,0],//標記相對於原本位置的偏移,例如 [0, '50%'] 就是把自己向上移動了一半的位置,在 symbol 圖形是氣泡的時候可以讓圖形下端的箭頭對准數據點。
    showSymbol:true,//是否顯示 symbol, 如果 false 則只有在 tooltip hover 的時候顯示
    cursor:"poniter",
    step:false,//是否是階梯線圖
    label:{
        show:false,//默認不顯示
        position:"top",   //標簽的位置。
        distance:5,   //距離圖形元素的距離,
        rotate:,   //標簽旋轉。從 -90 度到 90 度。正值是逆時針。
        offset:,   //是否對文字進行偏移。默認不偏移。例如:[30, 40] 表示文字在橫向上偏移 30,縱向上偏移 40。
        color:""
        ......
     },//圖形上的文本標簽,可用於說明圖形的一些數據信息,比如值,名稱等,
     itemStyle:{  //折線拐點標志的樣式。
      ......
     },
     lineStyle:{}//線條樣式。
     areaStyle:{},//區域填充樣式。
     emphasis:{},//圖形的高亮樣式。
     smooth:false,//是否平滑曲線顯示。
     data:[{name:"",value:"",symbol:"circle",....}],//系列中的數據內容數組。數組項通常為具體的數據項。
    ......
]

 

  type:"pie/bar/lines" ........

 

 animation: 是否開啟動畫。


免責聲明!

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



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