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 分割線樣式，是一個對象，里面包含多個屬性，例如：

1. color：分隔線顏色，字符串或數組類型，可以設置成單個顏色。也可以設置成顏色數組，分隔線會按數組中顏色的順序依次循環設置顏色。
2. width：分隔線寬度，number類型。
3. type：分割線的類型。可選類型：'solid'、'dashed'、'dotted'。
4. 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]
  }]
}

tooltip 提示框組件

show 是否顯示提示框組件

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

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

trigger 觸發類型

觸發類型。字符串類型。
可選值：

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

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

axisPointer 坐標軸指示器配置項

坐標軸指示器配置項。是一個對象，里面包含了多個屬性，例如：
type：指示器類型，可選值：

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

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

tooltip 提示框組件配置案例

  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：引導線樣式設置，是一個對象，里面包含多個屬性值，例如：

1. color：引導線顏色。
2. width：線寬，number類型。
3. 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)"  // 標簽文本顏色
    }
  }]
}