Echarts option常用屬性配置

阿新 • • 發佈：2020-10-07

Echarts option常用屬性配置

官網配置項詳情：https://echarts.apache.org/zh/option.html#title

成功繪製一個Echarts圖表至少包含三部分：x軸xAxis、y軸yAxis、系列列表series。

option = {
    xAxis: {
        type: 'category',  // x座標軸型別
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']  // 類目資料
    },
    yAxis: {
        type: 'value'  // y座標軸型別
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],  // 資料內容陣列
        type: 'line'   // 圖表型別 線形圖
    }]
};

xAxis常用配置

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

show 是否顯示座標軸

show:true / false，Boolean型別，是否顯示 x 軸，true顯示，false不顯示。

  xAxis: [{
    type: "category",  // 座標軸型別-類目軸
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],   // 類目資料
    show: true   // 顯示座標軸
  }],

position 座標軸位置

position:"top" / "bottom"，字串型別，預設 grid 中的第一個 x 軸在 grid 的下方（'bottom'），第二個 x 軸視第一個 x 軸的位置放在另一側。

  xAxis: [{
    type: "category",  // 座標軸型別-類目軸
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],   // 類目資料
    position: "bottom"  // 座標軸底部顯示
  }],

type 座標軸型別

type:"型別"，字串型別
型別可取值：

'value' 數值軸，適用於連續資料。

'category' 類目軸，適用於離散的類目資料。為該型別時類目資料可自動從 series.data 或 dataset.source 中取，或者可通過 xAxis.data 設定類目資料。
'time' 時間軸，適用於連續的時序資料，與數值軸相比時間軸帶有時間的格式化，在刻度計算上也有所不同，例如會根據跨度的範圍來決定使用月，星期，日還是小時範圍的刻度。
'log' 對數軸。適用於對數資料。

  xAxis: [{
    type: "category",  // 座標軸型別-類目軸
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],   // 類目資料
    name: "日期"  // 座標軸名稱
  }],

name 座標軸名稱

name:"x軸自定義名稱" 。字串型別，預設顯示在右側。

  xAxis: [{
    type: "category",  // 座標軸型別-類目軸
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],   // 類目資料
    show: true   // 顯示座標軸
  }],

nameTextStyle 座標軸名稱樣式

nameTextStyle 是一個物件，裡面包含多個屬性，例如：

color：座標軸名稱的顏色。
fontSize：字型大小，number型別。

  xAxis: [{
    type: "category",  // 座標軸型別-類目軸
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],   // 類目資料
    nameTextStyle: {
      color: "rgba(0, 255, 212, 1)",
      fontSize: 12
    }
  }],

axisLine 座標軸軸線相關設定

axisLine 是一個物件，裡面包含多個屬性，例如：

show:true/false 是否顯示座標軸軸線。
lineStyle 軸線樣式設定，是一個物件，裡面包含多個屬性，例如：
color：座標軸軸線顏色。
width：座標軸軸線的寬度，number型別。
type：座標軸軸線型別。可選型別：'solid'、'dashed'、'dotted'。
opacity：軸線透明度。number型別，取值範圍0~1，0為不繪製軸線。

  xAxis: [{
    type: "category",  // 座標軸型別-類目軸
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],   // 類目資料
    axisLine: {       // 座標軸軸線設定
      show: true,     // 顯示座標軸軸線
      lineStyle: {    // 軸線樣式設定
        color: "rgba(238, 10, 10, 1)",   // 軸線顏色
        width: 1,    // 軸線寬度
        type: "dashed",   // 軸線型別-虛線
        opacity: 0.8   // 軸線透明度0.8
      }
    }
  }],

axisTick 座標軸刻度相關設定

axisTick是一個物件，裡面包含多個屬性，例如：

show:true/false，是否顯示刻度，boolean型別，true為顯示，false為不顯示。
inside:true/false，刻度是否朝內，預設朝外，boolean型別，true朝內，false朝外。
length：座標軸刻度長度，number型別。
lineStyle：刻度樣式設定，是一個物件，裡面包含多個屬性，例如：
color：刻度線的顏色。
width：刻度線的寬度，number型別。
type：刻度線的型別。可選型別：'solid'、'dashed'、'dotted'。
opacity：刻度線透明度。number型別，取值範圍0~1，0為不繪製刻度線。

  xAxis: [{
    type: "category",  // 座標軸型別-類目軸
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],   // 類目資料
    axisTick: {             // 座標軸刻度線設定
      show: true,           // 顯示刻度線
      inside: false,        // 刻度線向外
      length: 5,            // 刻度線長度
      lineStyle: {          // 刻度線樣式設定
        width: 0,             //  刻度線寬度
        type: "dashed",       //  刻度線型別-虛線
        opacity: 0.8          //  刻度線透明度
      }
    }
  }],

axisLabel 座標軸刻度標籤相關設定

axisLabel 是一個物件，裡面包含多個屬性，例如：

show:true/false，是否顯示刻度標籤，boolean型別，true顯示，false不顯示。
inside:true/false，刻度標籤是否朝內，boolean型別，true朝內，false朝外。
rotate：標籤旋轉角度，number型別，刻度標籤旋轉的角度，在類目軸的類目標籤顯示不下的時候可以通過旋轉防止標籤之間重疊。旋轉的角度從 -90 度到 90 度。
margin：刻度標籤與軸線之間的距離，number型別。
color：刻度標籤文字顏色。
fontSize：文字字型大小，number型別。

  xAxis: [{
    type: "category",  // 座標軸型別-類目軸
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],   // 類目資料
    axisLabel: {     // 刻度標籤相關設定
      show: true,    // 顯示刻度標籤
      inside: false,    // 刻度標籤向外
      rotate: 20,    // 標籤旋轉角度
      margin: 15,    // 標籤與軸線間距離
      color: "rgba(42, 255, 0, 1)",    // 標籤字型顏色
      fontSize: 16    // 標籤字型大小
    }
  }],

splitLine 座標軸在 grid 區域中的分隔線

splitLine 是一個物件，裡面包含多個屬性，例如：

show:true/false，boolean型別，是否顯示分隔線。預設數值軸顯示，類目軸不顯示。
lineStyle 分割線樣式，是一個物件，裡面包含多個屬性，例如：

color：分隔線顏色，字串或陣列型別，可以設定成單個顏色。也可以設定成顏色陣列，分隔線會按陣列中顏色的順序依次迴圈設定顏色。
width：分隔線寬度，number型別。
type：分割線的型別。可選型別：'solid'、'dashed'、'dotted'。
opacity：分割線透明度。number型別，取值範圍0~1，0為不繪製分隔線。

  xAxis: [{
    type: "category",  // 座標軸型別-類目軸
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],   // 類目資料
    splitLine: {    // 分割線設定
      show: true,   // 顯示分割線
      lineStyle: {  // 分割線樣式設定
        color: "rgba(85, 255, 0, 1)",   // 分割線顏色
        width: 2,   // 分割線寬度
        type: "dashed",   // 分割線型別-虛線
        opacity: 0.5    // 分割線透明度0.5
      }
    }
  }],

data 類目資料

類目資料，在類目軸（type: 'category'）中有效。

  xAxis: [{
    type: "category",  // 座標軸型別-類目軸
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],   // 類目資料
  }],

xAxis基礎配置案例

option = {
  color: ["#3398DB"],
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  },
  grid: {},
  xAxis: [{
    type: "category",   // x座標軸型別
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],    // 類目資料
    show: true,                     // 顯示x軸
    name: "日期",                   // x軸名稱
    nameTextStyle: {                // 名稱樣式
      color: "rgba(11, 28, 157, 1)",  // 顏色
      fontSize: 12                    // 字型大小
    },
    axisLine: {                     // 軸線設定
      show: true,                   // 顯示軸線
      lineStyle: {                  // 軸線樣式設定
        color: "rgba(255, 0, 0, 1)", // 軸線顏色
        width: 0,                   // 軸線寬度
        type: "dashed"              // 軸線型別-虛線
      }
    },
    axisTick: {                     // 座標軸刻度
      show: true,                   // 顯示軸刻度
      inside: false,                // 軸刻度向外
      length: 5,                    // 軸刻度長度
      lineStyle: {                  // 軸刻度樣式
        width: 1,                   // 軸刻度寬度
        type: "dashed",             // 軸刻度虛線
        opacity: 0.8                // 透明度0.8
      }
    },
    axisLabel: {                    // 軸標籤設定
      show: true,                   // 顯示軸標籤
      inside: false,                // 標籤向外
      rotate: 20,                   // 標籤旋轉角度
      margin: 15,                   // 標籤距離軸線距離
      color: "rgba(42, 255, 0, 1)", // 軸標籤字型顏色
      fontSize: 16                  // 軸標籤字型大小
    },
    splitLine: {                    // 分割線設定
      show: true,                   // 顯示分割線
      lineStyle: {                  // 分割線樣式設定
        color: "rgba(85, 255, 0, 1)",  // 分割線顏色
        width: 2,                   // 分割線寬度
        type: "dashed",             // 分割線型別-虛線
        opacity: 0.5                // 分割線透明度
      }
    }
  }],
  yAxis: [{
    type: "value"
  }],
  series: [{
    name: "直接訪問",
    type: "bar",
    barWidth: "60%",
    data: [10, 52, 200, 334, 390, 330, 220]
  }]
}

yAxis常用配置

直角座標系 grid 中的 y 軸，一般情況下單個 grid 元件最多隻能放左右兩個 y 軸，多於兩個 y 軸需要通過配置 offset 屬性防止同個位置多個 Y 軸的重疊。

其常用配置項與 xAxis 相同。

yAxis配置案例

option = {
  color: ["#3398DB"],
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  },
  grid: {},
  xAxis: [{
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  }],
  yAxis: [{
    type: "value",    // y座標軸型別
    show: true,       // 顯示y軸
    name: "數量",     // y軸名稱
    nameTextStyle: {   // 名稱樣式
      color: "rgba(255, 17, 0, 1)",
      fontSize: 12
    },
    axisLine: {       // y軸軸線設定
      show: true,
      lineStyle: {
        color: "rgba(255, 242, 0, 1)",
        width: 0.5
      }
    },
    axisTick: {       // y軸刻度線設定
      show: true,
      length: 5
    },
    axisLabel: {      // y軸標籤設定
      show: true
    },
    splitLine: {      // y軸分割線設定
      show: true,
      lineStyle: {
        color: "rgba(218, 29, 29, 1)",
        width: 0.5
      }
    }
  }],
  series: [{
    name: "直接訪問",
    type: "bar",
    barWidth: "60%",
    data: [10, 52, 200, 334, 390, 330, 220]
  }]
}

title 標題元件

標題元件，包含主標題和副標題。

show 是否顯示標題元件

show:true/false，boolean型別，true為顯示，false為不顯示。

option = {
  title: {
    text: "這是主標題文字",   // 設定主標題文字
    show: true               // 顯示標題元件
  }
}

text 主標題文字

text:"主標題文字內容"，字串型別，設定主標題文字，支援使用 \n 換行。

option = {
  title: {
    text: "這是主標題文字",   // 設定主標題文字
    show: true               // 顯示標題元件
  }
}

subtext 副標題文字

subtext:"副標題文字"，字串型別，支援使用 \n 換行。

option = {
  title: {
    text: "這是主標題文字",        // 設定主標題文字
    subtext: "這是副標題文字",     // 設定副標題文字
    show: true                    // 顯示標題元件
  }
}

textStyle 主標題文字樣式

textStyle 是一個物件，裡面包含了多個屬性，例如：

color：標題文字顏色。
fontStyle：主標題文字字型風格。'normal'、'italic'、'oblique'
fontWeight：主標題文字字型粗細，'normal'、'bold'、'bolder'、'lighter'
fontFamily：主標題文字字體系列，'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
fontSize：主標題文字字型大小，number型別。

option = {
  title: {
    text: "這是主標題文字",        // 設定主標題文字
    subtext: "這是副標題文字",     // 設定副標題文字
    show: true,                  // 顯示標題元件
    textStyle: {                  // 設定主標題樣式
      fontSize: 20,               // 主標題字型大小
      color: "rgba(119, 255, 0, 1)",   // 主標題字型顏色
      fontStyle: "italic",             // 主標題字型風格-義大利斜體
      fontWeight: "bold",              // 主標題字型粗細-加粗
      fontFamily: "Courier New"        // 主標題字體系列
    },
  }
}

subtextStyle 副標題文字樣式

subtextStyle 是一個物件，裡面包含了多個屬性，例如：

color：副標題文字顏色
fontStyle：副標題文字字型的風格。字串型別，值可選'normal'、'italic'、'oblique'。
fontWeight：副標題文字字型粗細，字串型別，可選值'normal'、'bold'、'bolder'、'lighter'
fontFamily：副標題文字的字體系列。可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
fontSize：副標題文字大小，number型別。

option = {
  title: {
    text: "這是主標題文字",        // 設定主標題文字
    subtext: "這是副標題文字",     // 設定副標題文字
    show: true,                  // 顯示標題元件
    subtextStyle: {              // 副標題文字樣式
      fontSize: 15,              // 副標題字型大小
      color: "rgba(0, 13, 255, 1)",   // 副標題字型顏色
      fontStyle: "normal",            // 副標題字型風格-預設
      fontWeight: "lighter",          // 副標題字型粗細-加粗
      fontFamily: "monospace"         // 副標題字體系列
    },
  }
}

textAlign 整體水平對齊

textAlign 設定整體（包括 text 和 subtext）的水平對齊。可選值：'auto'、'left'、'right'、'center'。

option = {
  title: {
    text: "這是主標題文字",        // 設定主標題文字
    subtext: "這是副標題文字",     // 設定副標題文字
    show: true,                  // 顯示標題元件
    textAlign: "center"          // 居中對齊
  }
}

textVerticalAlign

textVerticalAlign 設定整體（包括 text 和 subtext）的垂直對齊。可選值：'auto'、'top'、'bottom'、'middle'。

option = {
  title: {
    text: "這是主標題文字",        // 設定主標題文字
    subtext: "這是副標題文字",     // 設定副標題文字
    show: true,                  // 顯示標題元件
    textVerticalAlign: "middle"  // 垂直居中
  }
}

itemGap 主副標題之間的間距

itemGap：主副標題之間的間距，number型別。

option = {
  title: {
    text: "這是主標題文字",        // 設定主標題文字
    subtext: "這是副標題文字",     // 設定副標題文字
    show: true,                  // 顯示標題元件
    itemGap: 15                  // 主副標題間距
  }
}

left title元件離容器左側的距離

title元件離容器左側的距離。left 的值可以是像 20 這樣的具體畫素值，可以是像 '20%' 這樣相對於容器高寬的百分比，也可以是 'left', 'center', 'right'。如果 left 的值為'left', 'center', 'right'，元件會根據相應的位置自動對齊。

top title元件離容器上側的距離

title 元件離容器上側的距離。top 的值可以是像 20 這樣的具體畫素值，可以是像 '20%' 這樣相對於容器高寬的百分比，也可以是 'top', 'middle', 'bottom'。如果 top 的值為'top', 'middle', 'bottom'，元件會根據相應的位置自動對齊。

right title 元件離容器右側的距離

title 元件離容器右側的距離。right 的值可以是像 20 這樣的具體畫素值，可以是像 '20%' 這樣相對於容器高寬的百分比。預設自適應。

bottom title 元件離容器下側的距離

title 元件離容器下側的距離。bottom 的值可以是像 20 這樣的具體畫素值，可以是像 '20%' 這樣相對於容器高寬的百分比。預設自適應。

option = {
  title: {
    text: "這是主標題文字",        // 設定主標題文字
    subtext: "這是副標題文字",     // 設定副標題文字
    show: true,                  // 顯示標題元件
    left: "20%",                 // 元件離容器左側的距離
    top: "10%",                  // 元件離容器上側的距離
    right: 20,                   // 元件離容器右側的距離
    bottom: 30                  // 元件離容器底部的距離
  }
}

title 配置案例

option = {
  title: {                          // 標題配置
    text: "這是主標題文字",          // 主標題文字
    subtext: "這是副標題文字",       // 副標題文字
    left: "20%",                    // 標題元件距離左側距離
    top: "10%",                     // 標題元件距離上部距離
    textStyle: {                    // 標題文字樣式設定
      fontSize: 20,                 // 標題文字字型大小
      color: "rgba(119, 255, 0, 1)", // 標題文字字型顏色
      fontStyle: "italic",           // 標題文字字型風格
      fontWeight: "bold",            // 標題文字字型粗細
      fontFamily: "Courier New"      // 標題文字字體系列
    },
    subtextStyle: {                  // 副標題樣式設定
      fontSize: 15,                  // 副標題字型大小
      color: "rgba(0, 13, 255, 1)",  // 副標題字型顏色
      fontStyle: "normal",           // 副標題字型風格
      fontWeight: "lighter",         // 副標題字型粗細
      fontFamily: "monospace"        // 副標題字體系列
    },
    show: true,                      // 顯示標題
    textAlign: "center",             // 標題水平居中
    textVerticalAlign: "middle",     // 標題垂直居中
    itemGap: 15,                     // 主副標題間距
    right: 20,                       // 標題元件距離右側距離
    bottom: 30                       // 標題元件距離底部距離
  }
}

grid 直角座標系內繪圖網格

單個 grid 內最多可以放置上下兩個 X 軸，左右兩個 Y 軸。可以在網格上繪製折線圖，柱狀圖，散點圖（氣泡圖）。

show 是否顯示直角座標系網格

show:true/false，是否顯示直角座標系網格，boolean型別，true顯示，false不顯示。

grid: {
    show: true  // 顯示直角座標系網格
}

left grid 元件離容器左側的距離

元件離容器左側的距離。left 的值可以是像 20 這樣的具體畫素值，可以是像 '20%' 這樣相對於容器高寬的百分比，也可以是 'left', 'center', 'right'。如果 left 的值為'left', 'center', 'right'，元件會根據相應的位置自動對齊。

  grid: {
    show: true,  // 顯示直角座標系網格
    left: "10%"  // 元件離容器左側的距離
  },

top grid 元件離容器上側的距離

grid 元件離容器上側的距離。top 的值可以是像 20 這樣的具體畫素值，可以是像 '20%' 這樣相對於容器高寬的百分比，也可以是 'top', 'middle', 'bottom'。如果 top 的值為'top', 'middle', 'bottom'，元件會根據相應的位置自動對齊。

  grid: {
    show: true,  // 顯示直角座標系網格
    left: "10%", // 元件離容器左側的距離
    top: 30      // 元件離容器上側的距離
  },

right grid 元件離容器右側的距離

grid 元件離容器右側的距離。right 的值可以是像 20 這樣的具體畫素值，可以是像 '20%' 這樣相對於容器高寬的百分比。

  grid: {
    show: true,  // 顯示直角座標系網格
    left: "10%", // 元件離容器左側的距離
    top: 30,     // 元件離容器上側的距離
    right: "20%",// 元件離容器右側的距離
  },

bottom grid 元件離容器下側的距離

grid 元件離容器下側的距離。bottom 的值可以是像 20 這樣的具體畫素值，可以是像 '20%' 這樣相對於容器高寬的百分比。

  grid: {
    show: true,  // 顯示直角座標系網格
    left: "10%", // 元件離容器左側的距離
    top: 30,     // 元件離容器上側的距離
    right: "20%",// 元件離容器右側的距離
    bottom: 5    // 元件離容器右側的距離
  },

width grid 元件的寬度

grid 元件的寬度。預設自適應。

  grid: {
    show: true,  // 顯示直角座標系網格
    width: "80%" // grid 元件寬度
  },

height grid 元件的高度

grid 元件的高度。預設自適應。

  grid: {
    show: true,    // 顯示直角座標系網格
    height: "50%"  // grid 元件高度
  },

backgroundColor 網格背景色，預設透明

網格背景色，預設透明。顏色可以使用 RGB 表示，比如 'rgb(128, 128, 128)' ，如果想要加上 alpha 通道，可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六進位制格式，比如 '#ccc'，此配置項生效的前提是，設定了 show: true。

  grid: {
    show: true,    // 顯示直角座標系網格
    backgroundColor: "rgba(235, 30, 30, 1)"   // 網格背景色
  },

borderColor 網格的邊框顏色

網格的邊框顏色。支援的顏色格式同 backgroundColor。注意：此配置項生效的前提是，設定了 show: true。

  grid: {
    show: true,    // 顯示直角座標系網格
    borderColor: "rgba(204, 204, 204, 1)" // 網格邊框顏色
  },

borderWidth 網格的邊框線寬

網格的邊框線寬。注意：此配置項生效的前提是，設定了 show: true。

  grid: {
    show: true,    // 顯示直角座標系網格
    borderColor: "rgba(204, 204, 204, 1)", // 網格邊框顏色
    borderWidth: 7   // 網格的邊框線寬
  },

直角座標系配置案例

option = {
  grid: {                   // 直角座標系網格配置
    show: true,             // 顯示直角座標系網格配置
    left: "10%",            // 網格距離左側距離
    top: 30,                // 網格距離上側距離
    right: "20%",           // 網格距離右側距離
    bottom: 5,              // 網格距離底部距離
    width: "80%",           // 網格寬度
    height: "50%",          // 網格高度
    backgroundColor: "rgba(235, 30, 30, 1)",   // 網格背景顏色
    borderColor: "rgba(204, 204, 204, 1)",     // 網格邊框顏色
    borderWidth: 7                             // 網格邊框寬度
  },
  xAxis: [{
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  }],
  yAxis: [{
    type: "value"
  }],
  series: [{
    name: "直接訪問",
    type: "bar",
    barWidth: "60%",
    data: [10, 52, 200, 334, 390, 330, 220]
  }]
}

show 是否顯示提示框元件

show:true/false，Boolean型別，true顯示，false不顯示。

 tooltip: { 
    show: true    // 顯示提示框
 },

trigger 觸發型別

觸發型別。字串型別。
可選值：

'item'：資料項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。
'axis'：座標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。在 ECharts 2.x 中只支援類目軸上使用 axis trigger，在 ECharts 3 中支援在直角座標系和極座標系上的所有型別的軸。並且可以通過 axisPointer.axis 指定座標軸。
'none'：什麼都不觸發。

  tooltip: {
    show: true    // 顯示提示框
    trigger: "axis",  // 座標軸觸發
  },

axisPointer 座標軸指示器配置項

座標軸指示器配置項。是一個物件，裡面包含了多個屬性，例如：
type：指示器型別，可選值：

'line' 直線指示器
'shadow' 陰影指示器
'none' 無指示器
'cross' 十字準星指示器。其實是種簡寫，表示啟用兩個正交的軸的 axisPointer。

  tooltip: {
    trigger: "axis", // 座標軸觸發
    axisPointer: {
      type: "cross"  // 十字準星指示器
    }
  },

  tooltip: {
    show: true       // 顯示提示框
    trigger: "axis", // 座標軸觸發
    axisPointer: {
      type: "cross"  // 十字準星指示器
    }
  },

legend 圖例元件

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

show 是否顯示圖例元件

show:true/false，Boolean型別，true顯示，false不顯示。

  legend: {
    show: true   // 顯示圖例
  },

left 圖例元件離容器左側的距離

圖例元件離容器左側的距離。left 的值可以是像 20 這樣的具體畫素值，可以是像 '20%' 這樣相對於容器高寬的百分比，也可以是 'left', 'center', 'right'。如果 left 的值為'left', 'center', 'right'，元件會根據相應的位置自動對齊。

  legend: {
    show: true,   // 顯示圖例
    left: "20%"   // 圖例元件離容器左側的距離
  },

top 圖例元件離容器上側的距離

圖例元件離容器上側的距離。top 的值可以是像 20 這樣的具體畫素值，可以是像 '20%' 這樣相對於容器高寬的百分比，也可以是 'top', 'middle', 'bottom'。如果 top 的值為'top', 'middle', 'bottom'，元件會根據相應的位置自動對齊。

  legend: {
    show: true,   // 顯示圖例
    top: 10       // 圖例元件離容器上側的距離
  },

right 圖例元件離容器右側的距離

圖例元件離容器右側的距離。right 的值可以是像 20 這樣的具體畫素值，可以是像 '20%' 這樣相對於容器高寬的百分比。預設自適應。

  legend: {
    show: true,   // 顯示圖例
    right: "15%"  // 圖例元件離容器右側的距離
  },

bottom 圖例元件離容器下側的距離

圖例元件離容器下側的距離。bottom 的值可以是像 20 這樣的具體畫素值，可以是像 '20%' 這樣相對於容器高寬的百分比。預設自適應。

  legend: {
    show: true,   // 顯示圖例
    bottom: 30    // 圖例元件離容器下側的距離
  },

width 圖例元件的寬度

圖例元件的寬度。預設自適應。number或字串型別。

  legend: {
    show: true,   // 顯示圖例
    width: "50%"  // 圖例元件的寬度
  },

height 圖例元件的高度

圖例元件的高度。預設自適應。number或字串型別。

  legend: {
    show: true,   // 顯示圖例
    height: 10    // 圖例元件的高度
  },

orient 圖例列表的佈局朝向

圖例列表的佈局朝向。可選值：'horizontal'、'vertical'。

  legend: {
    show: true,             // 顯示圖例
    orient: "horizontal"    // 圖例列表水平佈局
  },

itemGap 圖例每項之間的間隔

圖例每項之間的間隔。橫向佈局時為水平間隔，縱向佈局時為縱向間隔。number型別。

  legend: {
    show: true,             // 顯示圖例
    orient: "horizontal",   // 圖例列表水平佈局
    itemGap: 15             // 圖例每項之間的間隔
  },

itemWidth 圖例標記的圖形寬度

圖例標記的圖形寬度。number型別。

  legend: {
    itemWidth: 10           // 圖例標記的圖形寬度
  },

itemHeight 圖例標記的圖形高度

圖例標記的圖形高度。number型別。

  legend: {
    itemHeight: 15           // 圖例標記的圖形高度
  },

textStyle 圖例的公用文字樣式

圖例的公用文字樣式，是一個物件，裡面包含多個屬性，例如：

color：文字顏色。
fontStyle：文字風格。
fontWeight：文字粗細。
fontFamily ：字體系列。
fontSize：字型大小。

  legend: {
    textStyle: {                        // 圖例文字樣式
      color: "rgba(239, 15, 15, 1)",    // 文字顏色
      fontStyle: "italic",              // 字型風格
      fontWeight: "bold",               // 字型粗細
      fontFamily: "serif",              // 字體系列
      fontSize: 15                      // 字型大小
    }
  },

icon 圖例項的 icon

圖例項的 icon。ECharts 提供的標記型別包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'。

  legend: {
    icon: "circle"           // 圖例項的 icon
  },

data 圖例的資料陣列

圖例的資料陣列。陣列項通常為一個字串，每一項代表一個系列的 name（如果是餅圖，也可以是餅圖單個數據的 name）。圖例元件會自動根據對應系列的圖形標記（symbol）來繪製自己的顏色和標記，特殊字串 ''（空字串）或者 '\n'（換行字串）用於圖例的換行。如果 data 沒有被指定，會自動從當前系列中獲取。多數系列會取自 series.name 或 series.encode 的 seriesName 所指定的維度。如餅圖 and 漏斗圖等會取自 series.data 中的 name。

  legend: {
    data: ["溫度", "溼度"]           // 圖例的資料陣列
  },

legend 圖例元件配置案例

option = {
  color: ["#003366", "#006699", "#4cabce", "#e5323e"],
  dataset: {
    source: [
      ["type", "2012", "2013", "2014", "2015", "2016"],
      ["Forest", 320, 332, 301, 334, 390],
      ["Steppe", 220, 182, 191, 234, 290]
    ]
  },
  legend: {
    show: true,              // 顯示圖例
    left: "20%",             // 圖例元件離容器左側的距離
    top: 10,                 // 圖例元件離容器上側的距離
    right: "15%",            // 圖例元件離容器右側的距離
    bottom: 30,              // 圖例元件離容器下側的距離
    width: "50%",            // 圖例元件的寬度
    height: 10,              // 圖例元件的高度
    orient: "horizontal",    // 圖例列表水平佈局
    itemGap: 15,             // 圖例每項之間的間隔
    itemWidth: 10,           // 圖例標記的圖形寬度
    itemHeight: 15,          // 圖例標記的圖形高度
    textStyle: {             // 圖例文字樣式      
      color: "rgba(239, 15, 15, 1)",
      fontStyle: "italic",
      fontWeight: "bold",
      fontFamily: "serif",
      fontSize: 15                  
    },
    icon: "circle"     // 圖例項的 icon
  },
  xAxis: {
    type: "category",
    axisTick: {
      show: false
    }
  },
  yAxis: {},
  series: [{
    type: "bar"
  }, {
    type: "bar"
  }, {
    type: "bar"
  }, {
    type: "bar"
  }]
}

color 調色盤顏色列表

調色盤顏色列表。如果系列沒有設定顏色，則會依次迴圈從該列表中取顏色作為系列顏色。
預設為：['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']

option = {
  color: ["#003366", "#006699", "#4cabce", "#e5323e"],
}

dataZoom-slider 滑動條型資料區域縮放元件

滑動條型資料區域縮放元件（dataZoomSlider）

type

type:'slider'

dataZoom: [{
    type: 'slider'
}],

show 是否顯示元件

show:true/false，是否顯示縮放元件，boolean型別，true顯示，false不顯示。

  dataZoom: [{
    show: true   // 顯示元件
  }],

backgroundColor 背景顏色

元件的背景顏色。字串型別。

  dataZoom: [{
    show: true,
    backgroundColor: "rgba(9, 148, 244, 0)"   // 設定縮放元件背景顏色
  }],

fillerColor 選中範圍填充顏色

選中範圍填充顏色，字串型別。

  dataZoom: [{
    show: true,     // 顯示縮放元件
    backgroundColor: "rgba(241, 33, 10, 0)",    // 設定縮放背景色
    fillerColor: "rgba(204, 167, 167, 0.4)"     // 設定選中區域背景色
  }],

borderColor 邊框顏色

邊框顏色，字串型別。

 dataZoom: [{
    show: true,
    backgroundColor: "rgba(241, 33, 10, 0)",   // 設定背景顏色
    fillerColor: "rgba(204, 167, 167, 0.4)",   // 設定選中區域顏色
    borderColor: "rgba(176, 58, 91, 1)"        // 設定邊框顏色
  }],

textStyle 文字樣式設定

字型設定項，是一個物件，裡面包含多個屬性，例如：

color：設定字型顏色，字串型別。
fontStyle：設定字型風格，可選值有：'normal'、'italic'、'oblique'。
fontWeight：字型粗細設定，可選：'normal'、'bold'、'bolder'、'lighter'、100 | 200 | 300 | 400...
fontSize：文字大小。

  dataZoom: [{
    show: true,
    textStyle: {       // 文字樣式設定
      color: "rgba(90, 172, 226, 1)",  // 文字顏色
      fontStyle: "italic",             // 文字字型風格
      fontWeight: "bold",              // 文字粗細
      fontSize: 15                     // 文字字型大小
    }
  }],

start 資料視窗範圍的起始百分比

資料視窗範圍的起始百分比。範圍是：0 ~ 100。表示 0% ~ 100%。dataZoom-slider.start 和 dataZoom-slider.end 共同用百分比的形式定義了資料視窗範圍。

  dataZoom: [{
    show: true,
    start: 20   // 資料視窗範圍開始百分比
  }],

end 資料視窗範圍的結束百分比

資料視窗範圍的結束百分比。範圍是：0 ~ 100。dataZoom-slider.start 和 dataZoom-slider.end 共同用百分比的形式定義了資料視窗範圍。

  dataZoom: [{
    show: true,
    start: 20,   // 資料視窗範圍開始百分比
    end: 80      // 資料視窗範圍結束百分比
  }],

left 元件離容器左側的距離

left 的值可以是像 20 這樣的具體畫素值，可以是像 '20%' 這樣相對於容器高寬的百分比，也可以是 'left', 'center', 'right'。如果 left 的值為'left', 'center', 'right'，元件會根據相應的位置自動對齊。

  dataZoom: [{
    show: true,
    left: "15%"  // 容器距離左側距離
  }],

top 元件離容器上側的距離

dataZoom-slider元件離容器上側的距離。top 的值可以是像 20 這樣的具體畫素值，可以是像 '20%' 這樣相對於容器高寬的百分比，也可以是 'top', 'middle', 'bottom'。如果 top 的值為'top', 'middle', 'bottom'，元件會根據相應的位置自動對齊。

  dataZoom: [{
    show: true,
    top: 10       // 容器距離上側距離
  }],

right 元件離容器右側的距離

dataZoom-slider元件離容器右側的距離。right 的值可以是像 20 這樣的具體畫素值，可以是像 '20%' 這樣相對於容器高寬的百分比。預設自適應。

  dataZoom: [{
    show: true,
    right: "20%"   // 容器距離右側距離
  }],

bottom 元件離容器下側的距離

dataZoom-slider元件離容器下側的距離。bottom 的值可以是像 20 這樣的具體畫素值，可以是像 '20%' 這樣相對於容器高寬的百分比。預設自適應。

  dataZoom: [{
    show: true, 
    bottom: 30   // 容器距離下側距離
  }],

dataZoom-slider縮放元件配置案例

option = {
  color: ["#3398DB"],    // 設定顏色
  tooltip: {             // 提示框
    trigger: "axis"
  },
  xAxis: {               // x軸設定
    data: ["2014-07-14", "2014-07-15", "2014-07-16", "2014-07-17", "2014-07-18", "2014-07-19", "2014-07-20", "2014-07-21", "2014-07-22", "2014-07-23", "2014-07-24", "2014-07-25", "2014-07-26", "2014-07-27", "2014-07-28", "2014-07-29", "2014-07-30", "2014-07-31", "2014-08-01", "2014-08-02", "2014-08-03", "2014-08-05", "2014-08-06", "2014-08-07", "2014-08-08", "2014-08-09", "2014-08-10", "2014-08-11", "2014-08-12", "2014-08-13", "2014-08-14", "2014-08-15", "2014-08-16", "2014-08-17", "2014-08-18", "2014-08-19", "2014-08-20", "2014-08-21", "2014-08-22", "2014-08-23", "2014-08-24", "2014-08-25", "2014-08-26", "2014-08-27", "2014-08-28", "2014-08-29", "2014-08-30", "2014-08-31", "2014-09-01", "2014-09-03", "2014-09-04", "2014-09-05", "2014-09-06", "2014-09-07", "2014-09-08", "2014-09-09", "2014-09-10", "2014-09-11", "2014-09-12", "2014-09-13", "2014-09-14", "2014-09-15", "2014-09-16", "2014-09-17", "2014-09-18", "2014-09-19", "2014-09-20", "2014-09-21", "2014-09-22", "2014-09-23", "2014-09-24", "2014-09-25", "2014-09-26", "2014-09-27", "2014-09-28", "2014-09-29", "2014-09-30", "2014-10-01", "2014-10-02", "2014-10-03", "2014-10-04", "2014-10-05", "2014-10-06", "2014-10-07", "2014-10-08", "2014-10-09", "2014-10-10", "2014-10-11", "2014-10-14", "2014-10-15", "2014-10-16", "2014-10-17", "2014-10-18", "2014-10-19", "2014-10-20", "2014-10-21", "2014-10-22", "2014-10-23", "2014-10-24", "2014-10-25", "2014-10-26", "2014-10-27", "2014-10-28", "2014-10-29", "2014-10-30", "2014-10-31", "2014-11-01", "2014-11-03", "2014-11-04", "2014-11-05", "2014-11-07", "2014-11-08", "2014-11-09", "2014-11-10", "2014-11-11", "2014-11-13", "2014-11-14", "2014-11-15", "2014-11-16", "2014-11-17", "2014-11-18", "2014-11-19", "2014-11-23", "2014-11-24", "2014-11-25", "2014-11-26", "2014-11-27", "2014-11-28", "2014-11-29", "2014-12-01", "2014-12-02", "2014-12-03", "2014-12-05", "2014-12-06", "2014-12-07", "2014-12-08", "2014-12-09", "2014-12-10", "2014-12-11", "2014-12-13", "2014-12-14", "2014-12-15", "2014-12-17", "2014-12-19", "2014-12-22", "2014-12-23", "2014-12-25", "2014-12-26", "2014-12-27", "2014-12-28", "2014-12-29", "2014-12-30", "2015-01-01", "2015-01-02", "2015-01-03", "2015-01-04", "2015-01-05", "2015-01-06", "2015-01-07", "2015-01-08", "2015-01-09", "2015-01-10", "2015-01-11", "2015-01-12", "2015-01-13", "2015-01-14", "2015-01-15", "2015-01-16", "2015-01-17", "2015-01-18", "2015-01-19", "2015-01-20", "2015-01-22", "2015-01-23", "2015-01-24", "2015-01-25", "2015-01-26", "2015-01-28", "2015-01-29", "2015-01-31", "2015-02-01", "2015-02-02", "2015-02-03", "2015-02-05", "2015-02-06", "2015-02-09", "2015-02-10", "2015-02-11", "2015-02-12", "2015-02-13", "2015-02-14", "2015-02-15", "2015-02-16", "2015-02-18", "2015-02-19", "2015-02-20", "2015-02-21", "2015-02-22", "2015-02-23", "2015-02-24"]
  },
  yAxis: {          // y軸設定
    splitLine: {
      show: false
    }
  },
  dataZoom: [{     // 縮放設定
    show: true,    // 是否顯示縮放
    backgroundColor: "rgba(241, 33, 10, 0)",  // 縮放背景
    fillerColor: "rgba(204, 167, 167, 0.4)",  // 選中區域背景
    borderColor: "rgba(176, 58, 91, 1)",      // 邊框背景
    textStyle: {                              // 縮放文字設定
      color: "rgba(90, 172, 226, 1)",         // 文字顏色
      fontStyle: "italic",                    // 文字字型風格
      fontWeight: "bold",                     // 文字字型粗細
      fontSize: 15                            // 文字字型大小
    },
    start: 20,                                // 資料視窗範圍的開始百分比
    end: 80,                                  // 資料視窗範圍的結束百分比
    left: "15%",                              // 元件距離左側距離
    right: "20%",                             // 元件距離右側距離
    bottom: 30                                // 元件距離下側距離
  }],
  series: {
    name: "Beijing AQI",
    type: "bar",
    data: [156, 140, 133, 186, 182, 106, 119, 68, 54, 82, 90, 134, 188, 194, 159, 159, 169, 244, 199, 163, 149, 80, 67, 162, 140, 143, 125, 76, 119, 70, 104, 109, 159, 124, 135, 150, 164, 169, 83, 155, 75, 59, 78, 136, 103, 104, 176, 89, 127, 54, 100, 140, 186, 200, 61, 109, 111, 114, 97, 94, 66, 54, 87, 80, 84, 117, 168, 129, 127, 64, 60, 144, 170, 58, 87, 70, 53, 92, 78, 123, 95, 54, 68, 200, 314, 379, 346, 233, 80, 73, 76, 132, 211, 289, 250, 82, 99, 163, 267, 353, 78, 72, 88, 140, 206, 204, 65, 59, 150, 79, 63, 93, 80, 95, 59, 65, 77, 143, 98, 64, 93, 282, 155, 94, 196, 293, 83, 114, 276, 54, 65, 51, 62, 89, 65, 82, 276, 153, 52, 69, 113, 82, 99, 53, 103, 100, 73, 155, 243, 155, 125, 65, 65, 79, 200, 226, 122, 60, 85, 190, 105, 208, 59, 160, 211, 265, 386, 118, 89, 94, 77, 113, 143, 257, 117, 185, 119, 65, 87, 60, 108, 188, 143, 62, 100, 152, 166, 55, 59, 175, 293, 326, 153, 73, 267, 183, 394, 158, 86, 207]
  }
}

visualMap 連續型視覺對映元件

連續型視覺對映元件（visualMapContinuous）

type 型別

type:'continuous'/'piecewise'， continuous為連續型，piecewise為分段型。

min 元件的允許的最小值

指定 visualMapContinuous 元件的允許的最小值。number型別，'min' 必須使用者指定。[visualMap.min, visualMax.max] 形成了視覺對映的『定義域』。

max 元件的允許的最大值

指定 visualMapContinuous 元件的允許的最大值。number型別，'max' 必須使用者指定。[visualMap.min, visualMax.max] 形成了視覺對映的『定義域』。

  visualMap: {
    min: 3,   // 設定元件的允許的最小值
    max: 99,  // 設定元件的允許的最大值
  },

calculable 是否顯示拖拽手柄

是否顯示拖拽用的手柄（手柄能拖拽調整選中範圍）。

  visualMap: {
    min: 3,   // 設定元件的允許的最小值
    max: 99,  // 設定元件的允許的最大值
    calculable: true,  //設定手柄能拖拽
  },

realtime 拖拽時是否實時更新

realtime:true/false，boolean型別，拖拽時，是否實時更新。如果為ture則拖拽手柄過程中實時更新圖表檢視。如果為false則拖拽結束時，才更新檢視。

  visualMap: {
    min: 3,   // 設定元件的允許的最小值
    max: 99,  // 設定元件的允許的最大值
    calculable: true,  // 設定手柄能拖拽
    realtime: true,    // 拖拽時實時更新
  },

precision 資料展示的小數精度

資料展示的小數精度，預設為0，無小數點，number型別。

  visualMap: {
    min: 3,   // 設定元件的允許的最小值
    max: 99,  // 設定元件的允許的最大值
    calculable: true,  // 設定手柄能拖拽
    realtime: true,    // 拖拽時實時更新
    precision: 1,      // 小數精度
  },

itemWidth 圖形寬度

圖形的寬度，即長條的寬度。number型別。

  visualMap: {
    min: 3,   // 設定元件的允許的最小值
    max: 99,  // 設定元件的允許的最大值
    calculable: true,  // 設定手柄能拖拽
    realtime: true,    // 拖拽時實時更新
    precision: 1,      // 小數精度
    itemWidth: 20      // 圖形寬度
  },

itemHeight 圖形高度

圖形的高度，即長條的高度。number型別。

  visualMap: {
    min: 3,   // 設定元件的允許的最小值
    max: 99,  // 設定元件的允許的最大值
    calculable: true,  // 設定手柄能拖拽
    realtime: true,    // 拖拽時實時更新
    precision: 1,      // 小數精度
    itemWidth: 20,     // 圖形寬度
    itemHeight: 150    // 圖形高度
  },

inRange 定義在選中範圍中的視覺元素

定義在選中範圍中的視覺元素。
color: 圖元的顏色。

  visualMap: {
    min: 3,   // 設定元件的允許的最小值
    max: 99,  // 設定元件的允許的最大值
    calculable: true,  // 設定手柄能拖拽
    realtime: true,    // 拖拽時實時更新
    precision: 1,      // 小數精度
    itemWidth: 20,     // 圖形寬度
    itemHeight: 150,   // 圖形高度
    inRange: {         // 設定圖元的顏色
      color: ["#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8", "#ffffbf", "#fee090", "#fdae61", "#f46d43", "#d73027", "#a50026"]
    },
  }

visualMap 基礎配置案例

option = {
  tooltip: {},
  xAxis: {
    type: "category",
    data: [0, 1, 2, 3, 4]
  },
  yAxis: {
    type: "category",
    data: [0, 1, 2, 3, 4]
  },
  visualMap: {
    min: 0,
    max: 100,
    calculable: true,
    realtime: true,
    inRange: {
      color: ["#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8", "#ffffbf", "#fee090", "#fdae61", "#f46d43", "#d73027", "#a50026"]
    },
    inverse: false,
    precision: 1,
    itemWidth: 20,
    itemHeight: 150,
    align: "auto"
  },
  series: [{
    name: "Gaussian",
    type: "heatmap",
    data: [
      [0, 0, 50],
      [0, 1, 10],
      [0, 2, 50],
      [0, 3, 20],
      [0, 4, 50],
      [1, 0, 54.994209375000004],
      [1, 1, 30.98855287535156],
      [1, 2, 54.983669047750006],
      [1, 3, 54.980227686550776],
      [1, 4, 40.978760914000006],
      [2, 0, 59.9144],
      [2, 1, 80.87254178725],
      [2, 2, 59.83612736],
      [2, 3, 59.80991875325],
      [2, 4, 59.797737472],
      [3, 0, 99.60082187500001],
      [3, 1, 64.4705362889961],
    ],
    progressive: 1000,
    animation: false
  }]
}

series 系列列表

系列列表。每個系列通過 type 決定自己的圖表型別。例如 type:line 表示折線圖，type:bar 表示柱狀圖等。

折線圖 series-line

type 圖表型別

type:line，line表示圖表以折線的方式展示，字串型別。

  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: "line"    // 圖表展示方式
  }]

name 系列名稱

系列名稱，用於tooltip的顯示，legend 的圖例篩選，在 setOption 更新資料和配置項時用於指定對應的系列，字串型別。

series: [{
    name: '佔比',  // 系列名稱
    type: 'line',
    data: [820, 932, 901, 934, 1290, 1330, 1320],
}]

symbol 標記的圖形

標記的圖形。ECharts 提供的標記型別包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'。

series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: "line",
    symbol: "circle"   // 標記的圖形
}]

symbolSize 標記大小

標記的大小，可以設定成諸如 10 這樣單一的數字，也可以用陣列分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。

  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: "line",
    symbol: "circle",  // 標記的圖形
    symbolSize: 10     // 標記的大小
  }]

label 圖形上的文字標籤

用於設定顯示在圖形上的文字標籤，是一個物件，裡面包含了多個屬性值，例如：

show：boolean型別，是否顯示文字標籤，true顯示，false不顯示。
position：標籤位置，可以通過內建的語義宣告位置，可選值有：top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight。
distance：距離圖形元素的距離。當 position 為字元描述值（如 'top'、'insideRight'）時候有效。
color：文字顏色。
fontSize：字型大小。

series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: "line",
    symbol: "circle",
    symbolSize: 10,
    label: {      //文字標籤樣式設定
      show: true,           // 是否顯示文字標籤
      position: "top",      // 文字標籤顯示位置
      distance: 10,         // 距離圖形元素的距離
      color: "rgba(77, 255, 0, 1)",   // 文字顏色。
      fontSize: 13          // 文字字型大小
    }
  }]

itemStyle 折線拐點標誌樣式

折線拐點標誌的樣式，是一個物件，裡面包含多個屬性，例如：

color：圖形顏色。
borderColor：圖形的描邊顏色。

series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: "line",
    itemStyle: {     // 折線拐點標誌的樣式
      color: "rgba(161, 230, 43, 1)",      // 圖形顏色
      borderColor: "rgba(0, 89, 255, 1)"   // 圖形描邊顏色
    }
  }]

lineStyle 線條樣式

線條樣式。是一個物件，裡面包含多個屬性值，比如：

color：線的顏色。
width：線條的寬度。
type：線條型別，可選：'solid'、'dashed'、'dotted'。

  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: "line",
    lineStyle: {                      // 線條樣式修改
      color: "rgba(0, 38, 255, 1)",   // 線條顏色
      width: 5,                       // 線條寬度
      type: "dashed",                 // 設定線條虛線
      opacity: 0.6                    // 線條透明度設定
    }
  }]

smooth 平滑曲線

smooth:true/false，是否以平滑曲線的樣式顯示，true平滑曲線顯示，false折線顯示。

  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: "line",
    smooth: true
  }]

areaStyle 區域填充樣式

區域填充樣式設定，是一個物件裡面包含多個屬性，例如：

color：填充顏色。

series: [{
      type: 'line',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      smooth: true,
      areaStyle: {
         color: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0,
            color: '#1890ff' // 0% 處的顏色
           }, {
             offset: 0.7,
             color: '#fff' // 100% 處的顏色
          }],
          globalCoord: false // 預設為 false
        }
      }
    }]

data 系列中的資料內容陣列

系列中的資料內容陣列。陣列項通常為具體的資料項。注意，如果系列沒有指定 data，並且 option 有 dataset，那麼預設使用第一個 dataset。如果指定了 data，則不會再使用 dataset。系列中的資料內容陣列。陣列項通常為具體的資料項。

series: [{
      type: 'line',
      data: [820, 932, 901, 934, 1290, 1330, 1320],
      smooth: true,
    }]

折線圖基本配置案例

option = {
  xAxis: {     // x軸配置
    type: "category",   
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {},  // y軸配置，自適應
  series: [{  // 資料配置
    name: '佔比',
    data: [{  // 資料值
      value: 820,
      symbol: "rect"
    }, 932, 901, 934, 1290, 1330, 1320],
    type: "line",    // 圖表以折線圖展示
    symbol: "circle",   // 標記圖形
    symbolSize: 10,     // 標記大小
    label: {            // 文字標籤
      show: true,
      position: "top",
      distance: 10,
      color: "rgba(77, 255, 0, 1)",
      fontSize: 13
    },
    itemStyle: {       // 折線拐點標誌樣式
      color: "rgba(161, 230, 43, 1)",
      borderColor: "rgba(0, 89, 255, 1)"
    },
    lineStyle: {       // 線條樣式
      color: "rgba(0, 38, 255, 1)",
      width: 5,
      type: "dashed",
      opacity: 0.6
    },
    areaStyle: {       // 填充區域樣式
      color: "rgba(24, 215, 145, 1)",
      shadowColor: "rgba(179, 24, 24, 1)"
    }
  }]
}

柱狀圖 series-bar

type 圖表型別

type：'bar'，表示以柱狀圖的樣式展示。

  series: [{
    type: "bar",  // 圖表以柱狀圖樣式展示
    data: [5, 20, 36, 10, 10, 20, 4]
  }]

name 系列名稱

系列名稱，用於tooltip的顯示，legend 的圖例篩選，在 setOption 更新資料和配置項時用於指定對應的系列，字串型別。

  series: [{
    name: "Sale",   // 系列名稱
    type: "bar",
    data: [5, 20, 36, 10, 10, 20, 4]
  }]

label 圖形上的文字標籤

圖形上的文字標籤，可用於說明圖形的一些資料資訊，比如值，名稱等。是一個物件，裡面包含了多個屬性值，例如：

show：是否顯示文字標籤。
position：標籤的位置，可取值為：top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight。
distance：距離圖形元素的距離。當 position 為字元描述值（如 'top'、'insideRight'）時候有效。
formatter：字串模板模板變數有：{a}：系列名。{b}：資料名。{c}：資料值。
color：文字標籤顏色。
fontSize：標籤文字字型大小。

  series: [{
    name: "Sale",
    type: "bar",
    data: [5, 20, 36, 10, 10, 20, 4],
    label: {      // 文字標籤樣式
      show: true,        // 顯示文字標籤        
      position: "top",   // 標籤的位置
      distance: 7,       // 距離圖形元素的距離
      color: "rgba(0, 55, 255, 1)",   // 文字標籤的顏色
      fontSize: 15       // 文字標籤的字型大小
    }
  }]

itemStyle 圖形樣式

圖形樣式。是一個物件，裡面包含多個屬性值，例如：

color：柱條顏色，預設從全域性調色盤 option.color 獲取顏色。
borderColor：柱條邊框顏色。

  series: [{
    name: "Sale",
    type: "bar",
    data: [5, 20, 36, 10, 10, 20, 4],
    itemStyle: {      // 圖形樣式設定
      color: "rgba(0, 255, 30, 1)",         // 圖形顏色
      borderColor: "rgba(237, 29, 29, 1)"   // 圖形邊框顏色
    }
  }]

barWidth 柱條寬度

barWidth 柱條寬度，不設時自適應。可以是絕對值例如 40 或者百分數例如 '60%'。百分數基於自動計算出的每一類目的寬度。在同一座標系上，此屬性會被多個 'bar' 系列共享。此屬性應設置於此座標系中最後一個 'bar' 系列上才會生效，並且是對此座標系中所有 'bar' 系列生效。

  series: [{
    name: "Sale",
    type: "bar",
    data: [5, 20, 36, 10, 10, 20, 4],
    barWidth: 30   // 設定柱條的寬度
  }]

barGap 不同系列的柱條間隔

不同系列的柱間距離，為百分比（如 '30%'，表示柱子寬度的 30%）。

  series: [{
    name: "Sale",
    type: "bar",
    data: [5, 20, 36, 10, 10, 20, 4],
    barWidth: 30,   // 設定柱條的寬度
    barGap: "25%"   // 設定柱條間的間隔
  }]

data 系列中的資料內容陣列

系列中的資料內容陣列。陣列項通常為具體的資料項。注意，如果系列沒有指定 data，並且 option 有 dataset，那麼預設使用第一個 dataset。如果指定了 data，則不會再使用 dataset。

  series: [{
    name: "Sale",
    type: "bar",
    data: [5, 20, 36, 10, 10, 20, 4]
  }]

柱狀圖基本配置案例

option = {
  xAxis: {        // x軸配置
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {},      // y軸配置
  series: [{      // 資料配置
    name: "Sale", 
    type: "bar",
    data: [5, 20, 36, 10, 10, 20, 4],   // 資料值
    label: {        // 文字標籤
      show: true,
      position: "top",
      distance: 7,
      color: "rgba(0, 55, 255, 1)",
      fontSize: 15
    },
    itemStyle: {    // 柱條樣式設定
      color: "rgba(0, 255, 30, 1)",
      borderColor: "rgba(237, 29, 29, 1)"
    },
    barWidth: 30,  // 柱條寬度
    barGap: "25%"  // 柱條間隔
  }]
}

餅圖 series-pie

餅圖主要用於表現不同類目的資料在總和中的佔比。每個的弧度表示資料數量的比例。

type 圖表型別

type：'pie'，表示以柱狀圖的樣式展示。

series: [{
    type: "pie"
  }]

name 系列名稱

系列名稱，用於tooltip的顯示，legend 的圖例篩選，在 setOption 更新資料和配置項時用於指定對應的系列，字串型別。

  series: [{
    name: "Sale",   // 系列名稱
    type: "bar",
    data: [5, 20, 36, 10, 10, 20, 4]
  }]

legendHoverLink 圖例hover時聯動高亮

legendHoverLink:true/false，是否啟用圖例 hover 時的聯動高亮。true表示啟動高亮，false表示關閉高亮。

  series: [{
    type: "pie",
    data: [{
      value: 335,
      name: "Apple"
    }, {
      value: 310,
      name: "Grapes"
    }],
    legendHoverLink: true  // 啟動圖例hover聯動高亮
  }]
}

hoverAnimation hover在扇區上放大效果

hoverAnimation:true/false，是否開啟 hover 在扇區上的放大動畫效果，true表示開啟，false表示關閉。

  series: [{
    type: "pie",
    data: [{
      value: 335,
      name: "Apple"
    }, {
      value: 310,
      name: "Grapes"
    }],
    hoverAnimation: true  // 啟動hover在扇區上放大效果
  }]
}

hoverOffset 高亮扇區偏移距離

高亮扇區偏移距離，number型別。

  series: [{
    type: "pie",
    data: [{
      value: 335,
      name: "Apple"
    }, {
      value: 310,
      name: "Grapes"
    }],
    hoverOffset: 10   // 高亮扇區偏移距離
  }]
}

avoidLabelOverlap 是否啟用防止標籤重疊策略

是否啟用防止標籤重疊策略，預設開啟，在標籤擁擠重疊的情況下會挪動各個標籤的位置，防止標籤間的重疊。

  series: [{
    type: "pie",
    data: [{
      value: 335,
      name: "Apple"
    }, {
      value: 310,
      name: "Grapes"
    }],
    avoidLabelOverlap: true   // 啟用防止標籤重疊策略
  }]
}

left 元件離容器左側的距離

pie chart元件離容器左側的距離。left 的值可以是像 20 這樣的具體畫素值，可以是像 '20%' 這樣相對於容器高寬的百分比，也可以是 'left', 'center', 'right'。如果 left 的值為'left', 'center', 'right'，元件會根據相應的位置自動對齊。

top 元件離容器上側的距離

pie chart元件離容器上側的距離。top 的值可以是像 20 這樣的具體畫素值，可以是像 '20%' 這樣相對於容器高寬的百分比，也可以是 'top', 'middle', 'bottom'。如果 top 的值為'top', 'middle', 'bottom'，元件會根據相應的位置自動對齊。

right 元件離容器右側的距離

pie chart元件離容器右側的距離。right 的值可以是像 20 這樣的具體畫素值，可以是像 '20%' 這樣相對於容器高寬的百分比。預設自適應。

bottom 元件離容器下側的距離

pie chart元件離容器下側的距離。bottom 的值可以是像 20 這樣的具體畫素值，可以是像 '20%' 這樣相對於容器高寬的百分比。預設自適應。

  series: [{
    type: "pie",
    data: [{
      value: 335,
      name: "Apple"
    }, {
      value: 310,
      name: "Grapes"
    }],
    left: "10%"   // 元件離容器左側的距離
    top: 20       // 元件離容器上側的距離
    right: "15%"  // 元件離容器右側的距離
    bottom: "5%"  // 元件離容器下側的距離
  }]

width 元件寬度

pie chart元件的寬度。預設自適應。預設自適應 width:'auto'

  series: [{
    type: "pie",
    data: [{
      value: 335,
      name: "Apple"
    }, {
      value: 310,
      name: "Grapes"
    }],
    width: "90%"    // 設定元件寬度
  }]

height 元件高度

pie chart元件的高度。預設自適應。

  series: [{
    type: "pie",
    data: [{
      value: 335,
      name: "Apple"
    }, {
      value: 310,
      name: "Grapes"
    }],
    width: "90%"    // 設定元件寬度
    height: "90%"   // 設定元件高度
  }]

label 餅圖圖形上的文字標籤

餅圖圖形上的文字標籤，可用於說明圖形的一些資料資訊，比如值，名稱等。是一個物件，裡面包含多個屬性，例如：

show：是否顯示文字標籤。
position：標籤位置，可選值有：'outside'餅圖扇區外側，通過視覺引導線連到相應的扇區。'inside'餅圖扇區內部。'inner'同'inside'。'center'在餅圖中心位置。
formatter：標籤內容格式器，支援字串模板和回撥函式兩種形式，字串模板與回撥函式返回的字串均支援用 \n 換行。字串模板模板變數有：{a}：系列名。{b}：資料名。{c}：資料值。{d}：百分比。
color：文字顏色。
fontSize：字型大小。

option = {
  series: [{
    type: "pie",
    data: [{
      value: 335,
      name: "Apple"
    }, {
      value: 310,
      name: "Grapes"
    }],
    label: {
      show:true,
      position:'outside',
      formatter:'{b} - {d}%',
      color: "rgba(187, 255, 0, 1)",
      fontSize: 15
    }
  }]
}

labelLine 標籤的視覺引導線樣式

標籤的視覺引導線樣式，在 label 位置設定為'outside'的時候會顯示視覺引導線。是一個物件，裡面包含了多個屬性，例如：

show：是否顯示視覺引導線。
length：視覺引導線第一段的長度，number型別。
length2：視覺引導項第二段的長度，number型別。
smooth：是否平滑視覺引導線，預設不平滑，可以設定成 true 平滑顯示，也可以設定為 0 到 1 的值，表示平滑程度。
lineStyle：引導線樣式設定，是一個物件，裡面包含多個屬性值，例如：

color：引導線顏色。
width：線寬，number型別。
type：引導線型別，可選值：'solid'、'dashed'、'dotted'。

  series: [{
    type: "pie",
    data: [{
      value: 335,
      name: "Apple"
    }, {
      value: 310,
      name: "Grapes"
    }],
    labelLine: {      // 標籤視覺引導線樣式
      show: true,     // 是否顯示引導線
      length: 10,     // 引導線地段長度
      smooth: true,   // 引導線是否平滑
      lineStyle: {    // 引導線樣式設定
        color: "rgba(247, 20, 20, 1)",    // 引導線顏色
        type: "dashed",                   // 引導線設定虛線
        width: 2                          // 引導線線寬
      }
    }
  }]

itemStyle 圖形樣式

圖形樣式，是一個物件，裡面包含了多個屬性，例如：

color：圖形的顏色。預設從全域性調色盤 option.color 獲取顏色。

itemStyle: {
    color: "rgba(0, 89, 255, 1)"  // 圖形顏色
}

borderColor：邊框顏色。

itemStyle: {
    borderColor: "rgba(249, 12, 12, 1)"  // 邊框顏色
}

borderWidth：邊框寬度。

itemStyle: {
   borderWidth: 2  // 邊框寬度
}

center 餅圖的中心（圓心）座標

餅圖的中心（圓心）座標，陣列的第一項是橫座標，第二項是縱座標。支援設定成百分比，設定成百分比時第一項是相對於容器寬度，第二項是相對於容器高度。

  series: [{
    type: "pie",
    data: [{
      value: 335,
      name: "Apple"
    }, {
      value: 310,
      name: "Grapes"
    }],
    center: ["48%", "49%"]    // 餅圖的中心（圓心）座標
  }]

radius 餅圖的半徑

餅圖的半徑。可以為：number：直接指定外半徑值。string：例如，'20%'，表示外半徑為可視區尺寸（容器高寬中較小一項）的 20% 長度。Array.<number|string>：陣列的第一項是內半徑，第二項是外半徑。每一項遵從上述 number string 的描述。

  series: [{
    type: "pie",
    data: [{
      value: 335,
      name: "Apple"
    }, {
      value: 310,
      name: "Grapes"
    }],
    radius: ["23%", "76%"]    // 餅圖的半徑
  }]

data 系列中的資料內容陣列

系列中的資料內容陣列。陣列項可以為單個數值，如：

data: [1,2,3,4,5],

更多時候我們需要指定每個資料項的名稱，這時候需要每個項為一個物件：

data:[{
    // 資料項的名稱
    name: '資料1',
    // 資料項值8
    value: 10
}, {
    name: '資料2',
    value: 20
}]

需要對個別內容指定進行個性化定義時：

data:[{
    name: '資料1',
    value: 10
}, {
    // 資料項名稱
    name: '資料2',
    value : 56,
    //自定義特殊 tooltip，僅對該資料項有效
    tooltip:{},
    //自定義特殊itemStyle，僅對該item有效
    itemStyle:{}
}]

餅圖基本配置案例

option = {
  legend: {
    orient: "vertical",
    left: "left",
    data: ["Apple", "Grapes", "Pineapples", "Oranges", "Bananas"]
  },
  series: [{                // 資料配置
    type: "pie",            // 圖表以餅圖顯示
    data: [{                // 資料
      value: 335,           // 資料值
      name: "Apple"         // 資料名稱
    }, {
      value: 310,
      name: "Grapes"
    }, {
      value: 234,
      name: "Pineapples"
    }, {
      value: 135,
      name: "Oranges"
    }, {
      value: 1548,
      name: "Bananas"
    }],
    hoverAnimation: true,         // 扇區滑鼠移上放大
    legendHoverLink: true,        // 圖例移上高亮
    hoverOffset: 10,              // 扇區放大偏移量
    avoidLabelOverlap: true,      // 是否啟用防止標籤重疊策略
    left: "10%",                  // 元件距離左邊距離
    top: 20,                      // 元件距離上邊距離
    right: "15%",                 // 元件距離右邊距離
    bottom: "5%",                 // 元件距離下邊距離
    width: "90%",                 // 元件寬度
    height: "90%",                // 元件高度
    radius: ["23%", "76%"],       // 餅圖的半徑
    label: {                      // 標籤文字設定
      fontSize: 15
    },
    labelLine: {                  // 引導線樣式設定
      show: true,
      length: 10,
      length2: 50
    }
  }]
}

熱力圖 series-heatmap

熱力圖主要通過顏色去表現數值的大小，必須要配合 visualMap 元件使用。可以應用在直角座標系以及地理座標系上，這兩個座標系上的表現形式相差很大，直角座標系上必須要使用兩個類目軸。

type 圖表型別

type:'heatmap' 表示圖表以熱力圖的形式展示出來。

series: [{
    name: "Punch Card",
    type: "heatmap",      // 設定圖表以熱力圖的形式展示
  }]

name 系列名稱

系列名稱，用於tooltip的顯示，legend 的圖例篩選，在 setOption 更新資料和配置項時用於指定對應的系列。
type:'heatmap' 表示圖表以熱力圖的形式展示出來。

series: [{
    name: "Punch Card",   // 系列名稱設定為“Punch Card”
    type: "heatmap",      // 設定圖表以熱力圖的形式展示
  }]

coordinateSystem 該系列使用的座標系

該系列使用的座標系，可選：'cartesian2d'使用二維的直角座標系（也稱笛卡爾座標系），通過 xAxisIndex, yAxisIndex指定相應的座標軸元件。'geo'使用地理座標系，通過 geoIndex 指定相應的地理座標系元件。

series: [{
    name: "Punch Card",   // 系列名稱設定為“Punch Card”
    type: "heatmap",      // 設定圖表以熱力圖的形式展示
    coordinateSystem: 'cartesian2d'  // 使用直角座標系
  }]

label 標籤

設定標籤樣式，在直角座標系(coordinateSystem: 'cartesian2d')上有效，是一個物件，裡面包含了多個引數，例如：

show：是否顯示標籤，true顯示，false不顯示。
offset：是否對文字進行偏移。預設不偏移。例如：[30, 40] 表示文字在橫向上偏移 30，縱向上偏移 40。
rotate：標籤旋轉。從 -90 度到 90 度。正值是逆時針。
color：文字顏色。
fontSize：文字大小。

series: [{
    name: "Punch Card",   // 系列名稱設定為“Punch Card”
    type: "heatmap",      // 設定圖表以熱力圖的形式展示
    coordinateSystem: 'cartesian2d',  // 使用直角座標系
    label: {              // 標籤樣式設定 
      show: true,         // 顯示標籤
      rotate: 8,          // 標籤旋轉角度
      offset: [4.5, 4],   // 標籤偏移
      fontSize: 15,       // 標籤字型大小
      color: "rgba(42, 255, 0, 1)"  // 標籤文字顏色
    }
  }]

itemStyle 樣式設定

itemStyle 樣式設定，在直角座標系(coordinateSystem: 'cartesian2d')上有效。是一個物件，裡面有多個屬性，例如：

color：圖形的顏色，預設自適應。
borderWidth：邊框寬度。
borderColor：邊框顏色。
borderType：邊框型別，可取值：'solid', 'dashed', 'dotted'。

series: [{
    name: "Punch Card",   // 系列名稱設定為“Punch Card”
    type: "heatmap",      // 設定圖表以熱力圖的形式展示
    coordinateSystem: 'cartesian2d',  // 使用直角座標系
    itemStyle: {
      color: "rgba(39, 216, 236, 1)",
      borderWidth: 2,
      borderColor: "rgba(237, 32, 32, 1)",
      borderType: "dashed"
    }
  }]

data 系列中的資料內容陣列

系列中的資料內容陣列。陣列項通常為具體的資料項。
通常來說，資料用一個二維陣列表示。如下，每一列被稱為一個『維度』。

series: [{
    data: [
        // 維度X   維度Y   其他維度 ...
        [  3.4,    4.5,   15,   43],
        [  4.2,    2.3,   20,   91],
        [  10.8,   9.5,   30,   18],
        [  7.2,    8.8,   18,   57]
    ]
}]

基礎配置案例

option = {
  tooltip: {},
  xAxis: {
    type: "category",
    data: [0, 1, 2, 3, 4, 5, 6]
  },
  yAxis: {
    type: "category",
    data: [0, 1, 2, 3, 4, 5, 6]
  },
  visualMap: {
    min: 0,
    max: 100,
    calculable: true,
    realtime: true,
    inRange: {
      color: ["#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8", "#ffffbf", "#fee090", "#fdae61", "#f46d43", "#d73027", "#a50026"]
    }
  },
  series: [{
    name: "Gaussian",
    type: "heatmap",
    data: [
      [0, 0, 10],
      [0, 1, 20],
      [0, 2, 30],
      [0, 3, 40],
      [0, 4, 50],
      [0, 5, 60],
      [0, 6, 70],
      [1, 0, 54.994209375000004],
      [1, 1, 54.98855287535156],
      [1, 2, 54.983669047750006],
      [1, 3, 54.980227686550776],
      [1, 4, 54.978760914000006],
      [1, 5, 54.97964233398438],
      [1, 6, 54.983074003125],
      [2, 0, 59.9144],
      [2, 1, 59.87254178725],
      [2, 2, 80.83612736],
      [2, 3, 80.80991875325],
      [2, 4, 80.797737472],
      [2, 5, 59.80230078125],
      [2, 6, 90.825115776000004],
      [3, 0, 90.60082187500001],
      [3, 1, 64.4705362889961],
      [3, 2, 64.35634390175],
      [3, 3, 64.27246293910156],
      [3, 4, 64.230427154],
      [3, 5, 10.23854693603516],
      [3, 6, 10.301550051125],
      [4, 0, 10.8416],
      [4, 1, 68.557701681],
      [4, 2, 68.30702156800001],
      [4, 3, 68.11922918100001],
      [4, 4, 63.01867264],
      [4, 5, 68.023140625],
      [4, 6, 68.143015296],
      [5, 0, 72.412109375],
      [5, 1, 71.90412197265626],
      [5, 2, 71.45227109375],
      [5, 3, 71.10730203857422],
      [5, 4, 70.91138125],
      [5, 5, 70.89576721191406],
      [5, 6, 71.07918007812499],
      [6, 0, 75.10759999999999],
      [6, 1, 74.306365026875],
      [6, 2, 73.588477184],
      [6, 3, 73.030288488875],
      [6, 4, 72.69610342399999],
      [6, 5, 72.634326171875],
      [6, 6, 72.87470864],
    ],
    itemStyle: {
      color: "rgba(39, 216, 236, 1)",
      borderWidth: 2,
      borderColor: "rgba(237, 32, 32, 1)",
      borderType: "dashed"
    },
    coordinateSystem: 'cartesian2d',  // 使用直角座標系
    label: {              // 標籤樣式設定 
      show: true,         // 顯示標籤
      rotate: 8,          // 標籤旋轉角度
      offset: [4.5, 4],   // 標籤偏移
      fontSize: 15,       // 標籤字型大小
      color: "rgba(42, 255, 0, 1)"  // 標籤文字顏色
    }
  }]
}

Echarts option常用屬性配置

Echarts option常用屬性配置

xAxis常用配置

show 是否顯示座標軸

position 座標軸位置

type 座標軸型別

name 座標軸名稱

nameTextStyle 座標軸名稱樣式

axisLine 座標軸軸線相關設定

axisTick 座標軸刻度相關設定

axisLabel 座標軸刻度標籤相關設定

splitLine 座標軸在 grid 區域中的分隔線

data 類目資料

xAxis基礎配置案例

yAxis常用配置

yAxis配置案例

title 標題元件

show 是否顯示標題元件

text 主標題文字

subtext 副標題文字

textStyle 主標題文字樣式

subtextStyle 副標題文字樣式

textAlign 整體水平對齊

textVerticalAlign

itemGap 主副標題之間的間距

left title元件離容器左側的距離

top title元件離容器上側的距離

right title 元件離容器右側的距離

bottom title 元件離容器下側的距離

title 配置案例

grid 直角座標系內繪圖網格

show 是否顯示直角座標系網格

left grid 元件離容器左側的距離

top grid 元件離容器上側的距離

right grid 元件離容器右側的距離

bottom grid 元件離容器下側的距離

width grid 元件的寬度

height grid 元件的高度

backgroundColor 網格背景色，預設透明

borderColor 網格的邊框顏色

borderWidth 網格的邊框線寬

直角座標系配置案例

tooltip 提示框元件

show 是否顯示提示框元件

trigger 觸發型別

axisPointer 座標軸指示器配置項

tooltip 提示框元件配置案例

legend 圖例元件

show 是否顯示圖例元件

left 圖例元件離容器左側的距離

top 圖例元件離容器上側的距離

right 圖例元件離容器右側的距離

bottom 圖例元件離容器下側的距離

width 圖例元件的寬度

height 圖例元件的高度

orient 圖例列表的佈局朝向

itemGap 圖例每項之間的間隔

itemWidth 圖例標記的圖形寬度

itemHeight 圖例標記的圖形高度

textStyle 圖例的公用文字樣式

icon 圖例項的 icon

data 圖例的資料陣列

legend 圖例元件配置案例

color 調色盤顏色列表

dataZoom-slider 滑動條型資料區域縮放元件

type

show 是否顯示元件

backgroundColor 背景顏色

fillerColor 選中範圍填充顏色

borderColor 邊框顏色

textStyle 文字樣式設定

start 資料視窗範圍的起始百分比

end 資料視窗範圍的結束百分比

left 元件離容器左側的距離

top 元件離容器上側的距離

right 元件離容器右側的距離

bottom 元件離容器下側的距離

dataZoom-slider縮放元件配置案例

visualMap 連續型視覺對映元件

type 型別