ECharts學習記錄

一、ECharts在GitHub的地址以及需要引入文件地址：

　　1、Github地址：https://github.com/ecomfe/echarts

　　2、官網下載文件地址：http://echarts.baidu.com/download.html

二、各類配置參數：

　　1、tilte：（標題：詳情見鏈接http://echarts.baidu.com/option.html#title）　

title: {
          show: true/false,    //控制是否顯示標題，默認為true
          text: '標題內容',
          link: '主標題文本超鏈接',    //默認為''
          target: '指定窗口打開主標題超鏈接。' ,   //可選blank/self
          textStyle: {
             color: '',
             fontFamily: 'serif/'monospace/Arial/Courier New/Microsoft YaHei',
             fontSize: '',
             fontStyle: 'normal/italic/oblique',
             align: 'left/center/right'
             ...
         },
        subtext: '副文本標題'，    //可用\n換行  (sublink,subtarget等與text相同)
       ...
}

　　2、legend：（圖例組件：詳情見鏈接http://echarts.baidu.com/option.html#legend.type）

legend: {
    type: 'plain/scroll',      //默認為plain，當使用 'scroll' 時，需要細節配置
    show: true/false,
    zlevel: 5,    //所有圖形的 zlevel 值。zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面
    left: 'center/left/right' / 20% / 20px,    //圖例組件離容器左側的距離
    top: 'top/middle/bottom' / 20% / 20px,    //圖例組件離容器頂部的距離
    width: 'auto' / 200px,    //圖例組件的寬度。默認自適應
    height: 'auto' / 200px,    //圖例組件的高度。默認自適應
    orient: 'horizontal/vertical',    //圖例列表的布局朝向
    align: 'auto/left/right',     //圖例標記和文本的對齊
    padding: [5]/[5, 10]/[2, 3, 4, 5],    //圖例內邊距，單位px，默認各方向內邊距為5，接受數組分別設定上右下左邊距。
    itemGap: 10,     //圖例每項之間的間隔。橫向布局時為水平間隔，縱向布局時為縱向間隔 
    itemWidth: 25,    //圖例標記的圖形寬度。
    itemHeight: 14,    //圖例標記的圖形高度。
    formatter: 'Legend {name}' / function (name) {
        return 'Legend ' + name;
    }    //用來格式化圖例文本，支持字符串模板和回調函數兩種形式。
    selectedMode: true/false / 'single/multiple',    //圖例選擇的模式，控制是否可以通過點擊圖例改變系列的顯示狀態。默認開啟圖例選擇，可以設成 false 關閉;或者設成 'single' 或者 'multiple' 使用單選或者多選模式。
    inactiveColor: '#CCC',    //圖例關閉時的顏色
    selected: {
        // 選中'系列1'
        '系列1': true,
        // 不選中'系列2'
        '系列2': false
    },    //圖例選中狀態表。
    textStyle: {...}    //同title
    ...
}

3、xAxis：（橫坐標：詳情見鏈接http://echarts.baidu.com/option.html#xAxis）

xAxis: {
  show: true,
  gridIndex: 0,    //x 軸所在的 grid 的索引，默認位於第一個 grid。
  position: 'bottom',    //默認 grid 中的第一個 x 軸在 grid 的下方，第二個 x 軸視第一個 x 軸的位置放在另一側。 
  offset: 0,    //X 軸相對於默認位置的偏移，在相同的 position 上有多個 X 軸的時候有用。
  type: 'category/value/time/log',    //'value' 數值軸，適用於連續數據。
     //'category' 類目軸，適用於離散的類目數據，為該類型時必須通過 data 設置類目數據。
    //'time' 時間軸，適用於連續的時序數據，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同，例如會根據跨度的范圍來決定使用月，星期，日還是小時范圍的刻度。
    //'log' 對數軸。適用於對數數據。
  name: '坐標軸名稱',
  nameLocation: 'start/middle/center/end',
  nameTextStyle: {...},   //同title
  nameGap: 15,    //坐標軸名稱與軸線之間的距離
  nameRotate: 45,    //坐標軸名字旋轉，角度值
  inverse: false,    //是否是反方向坐標軸
  boundaryGap: ['20%', '20%'] / true/false,     //坐標軸兩邊留白策略，類目軸和非類目軸的設置和表現不一樣。  
  min: 'dataMin' / 1,    //坐標軸刻度最小值
  max: 'dataMax' / 20,    //坐標軸刻度最大值
  scale: false,    //只在數值軸中（type: 'value'）有效。是否是脫離 0 值比例。設置成 true 后坐標刻度不會強制包含零刻度。在雙數值軸的散點圖中比較有用。 在設置 min 和 max 之后該配置項無效。
  splitNumber: 5,    //坐標軸的分割段數，需要注意的是這個分割段數只是個預估值，最后實際顯示的段數會在這個基礎上根據分割后坐標軸刻度顯示的易讀程度作調整。 在類目軸中無效。
  minInterval: 0,    //自動計算的坐標軸最小間隔大小。只在數值軸或時間軸中（type: 'value' 或 'time'）有效
  maxInterval: ,    //自動計算的坐標軸最大間隔大小。 例如，在時間軸（（type: 'time'））可以設置成 3600 * 24 * 1000 保證坐標軸分割刻度最大為一天。
  interval: number，    //強制設置坐標軸分割間隔
  logBase: 10,    //對數軸的底數，只在對數軸中（type: 'log'）有效。
  silent: false/true,     //坐標軸是否是靜態無法交互。
  triggerEvent: false,    //坐標軸的標簽是否響應和觸發鼠標事件，默認不響應。
  axisLine: {
    show: true,    //是否顯示坐標軸軸線。
    onZero: true,    //X 軸或者 Y 軸的軸線是否在另一個軸的 0 刻度上，只有在另一個軸為數值軸且包含 0 刻度時有效。
    onZeroAxisIndex: number,    //當有雙軸時，可以用這個屬性手動指定，在哪個軸的 0 刻度上。
    symbol: 'none/arrow / ['none, 'arrow'']',    //軸線兩邊的箭頭。
    symbolSize: [10, 15],    //軸線兩邊的箭頭的大小，第一個數字表示寬度（垂直坐標軸方向），第二個數字表示高度（平行坐標軸方向）。
    lineStyle: {
      color: '#333',    //{
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: 'red' // 0% 處的顏色
            }, {
                offset: 1, color: 'blue' // 100% 處的顏色
            }],
            globalCoord: false // 缺省為 false
        }
      width: 1,
      type: 'solid/dashed/dotted',
      shadowBlur: '',    //圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設置圖形的陰影效果。示例：
        {
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            shadowBlur: 10
        }
      shadowColor: '#333',    //陰影顏色。支持的格式同color
      shadowOffsetX: 0,    //陰影水平方向上的偏移距離。
      shadowOffsetY: 0,    //陰影垂直方向上的偏移距離。
      opacity: 1,     //圖形透明度。支持從 0 到 1 的數字，為 0 時不繪制該圖形。
    }
  },
  axisTick: {
    show: true,    //是否顯示坐標軸刻度
    alignWithLabel: false,    //類目軸中在 boundaryGap 為 true 的時候有效，可以保證刻度線和標簽對齊。
    interval: ,    //坐標軸刻度的顯示間隔，在類目軸中有效。默認同 axisLabel.interval 一樣。
    inside: false,    //坐標軸刻度是否朝內，默認朝外。
    length: 5,    //坐標軸刻度的長度
    lineStyle: {同axisLine.lineStyle}    
  },
  axisLabel: {
    show: true,    //是否顯示刻度標簽
    interval: auto/2,    //坐標軸刻度標簽的顯示間隔，在類目軸中有效。
    inside: false,    //刻度標簽是否朝內，默認朝外。
    rotate: 40,    //刻度標簽旋轉的角度，在類目軸的類目標簽顯示不下的時候可以通過旋轉防止標簽之間重疊。 旋轉的角度從 -90 度到 90 度。
    margin: 8,    //刻度標簽與軸線之間的距離。
    formatter: '{value} kg' / function (value, index) {
        // 格式化成月/日，只在第一個刻度顯示年份
        var date = new Date(value);
            var texts = [(date.getMonth() + 1), date.getDate()];
            if (index === 0) {
                texts.unshift(date.getYear());
            }
            return texts.join('/');
        },    //刻度標簽的內容格式器，支持字符串模板和回調函數兩種形式。
    showMinLabel: 'null/true/false',    //是否顯示最小 tick 的 label。
    showMaxLabel: 'null/true/false',    //是否顯示最大 tick 的 label。
    color: '#333',
    fontSize: 14,
    fontStyle: 'normal/italic/oblique',
    fontWeight: 'bold/normal/600',
    fontFamily: 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...,
    align: 'center/left/right',
    verticalAlign: 'middle/top/bottom',
    lineHeight: 56,
    backgroundColor: '#333',
    borderColor: '#333',
    borderWidth: 2,
    borderRadius: 4,
    padding: 2,
    shadowColor: 'transparent',    //文字塊的背景陰影顏色。
    shadowBlur: 0,     //文字塊的背景陰影長度。
    shadowOffsetX: 0,    //文字塊的背景陰影 X 偏移。
    shadowOffsetY: 0,    //文字塊的背景陰影 Y 偏移
    textBorderColor: 'transparent',    //文字本身的描邊顏色。
    textBorderWidth: 0,    //文字本身的描邊寬度
    textShadowColor: transparent,    //文字本身的陰影顏色。
    textShadowBlur: 0,    //文字本身的陰影長度
    textShadowOffsetX: 0,    //文字本身的陰影 X 偏移  
    textShadowOffsetY: 0,    //文字本身的陰影 Y 偏移
    rich: {        //在 rich 里面，可以自定義富文本樣式。利用富文本樣式，可以在標簽中做出非常豐富的效果。
        color  ~  shadowOffsetY  ...    //樣式同上color ~ shadowOffsetY  
    }
  },
  splitLine: {
    show: true,
    interval: auto;    //坐標軸分隔線的顯示間隔，在類目軸中有效。
    lineStyle: {
        width: 1,
        type: 'solid/dotted/dashed',    //分割線類型
        color: #CCC,
        shadowBlur: ,    //圖形陰影的模糊大小。該屬性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起設置圖形的陰影效果    //{ shadowColor: 'rgba(0, 0, 0, 0.5)',shadowBlur: 10 }
        shadowColor: '#CCC',    //陰影顏色。支持的格式同color。
        shadowOffsetX: 0,    //陰影水平方向上的偏移距離。
        shadowOffsetY: 0,    //陰影垂直方向上的偏移距離。
        opacity: 0    //圖形透明度。支持從 0 到 1 的數字，為 0 時不繪制該圖形。
    }
  },
  splitArea: {
    interval: auto,    //坐標軸分隔區域的顯示間隔，在類目軸中有效。
    show: true,
    areaStyle: {
        color  ~  opacity    //同上
    }
  },
  data: [
    {
        value: string    //單個類目名稱。    // 所有類目名稱列表
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
// 每一項也可以是具體的配置項，此時取配置項中的 `value` 為類目名
data: [{
    value: '周一',
    // 突出周一
    textStyle: {
        fontSize: 20,
        color: 'red'
    }
}, '周二', '周三', '周四', '周五', '周六', '周日']
    }
  ]
}  

 

 

4、yAxis:  （縱坐標：詳情見鏈接http://echarts.baidu.com/option.html#yAxis）

yAxis: {
    position: 'left/right',
    type: 'value',    //類型默認為value
    //其余參數都同xAxis
} 

 

5、tooltip:（提示框組件：詳情見鏈接http://echarts.baidu.com/option.html#tooltip）

6、series:（系列列表：詳情見鏈接http://echarts.baidu.com/option.html#series）