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:　是否開啟動畫。

轉載于:https://www.cnblogs.com/wyryuebanwan/p/10371430.html