ECharts學習記錄

時間 2019-11-09

標籤 echarts 學習記錄简体版

原文原文鏈接

1、ECharts在GitHub的地址以及須要引入文件地址：html

　　一、Github地址：https://github.com/ecomfe/echartsgit

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

2、各種配置參數：數組

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

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相同)
       ...
}

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

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
    ...
}

三、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'
    }
}, '週二', '週三', '週四', '週五', '週六', '週日']
    }
  ]
}

四、yAxis: （縱座標：詳情見連接http://echarts.baidu.com/option.html#yAxis）佈局

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

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

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。