Echarts學習筆記

阿新 • • 發佈：2021-01-23

技術標籤：echarts 前端

Echarts學習筆記

一、使用Echarts

a、在官方網站中挑選合適的版本進行下載

完全版（echarts.js）：體積最大，包含所有的圖表和元件；
常用版（echarts.common.js）：體積適中，包含常見的圖表和元件；
精簡版（echarts.simple.js）：體積較小，僅包含最常用的圖表和元件；

b、使用 npm install echarts -S安裝echarts庫。

二、echarts的元件

Title元件：標題元件，包含了主標題和副標題
Tooltip元件：提示框元件，滑鼠互動時的資訊提示
Toolbox元件：工具箱元件，每個圖表最多有一個工具箱

Legend元件：圖例元件，每個圖表最多有一個圖例，混搭圖表共享
xAxis元件：直角座標系中的橫軸陣列，陣列的每一項代表一條橫軸座標軸，標準(1.0)中規定最多同時存在2條橫軸
yAxis元件：直角座標系中的縱軸陣列，陣列的每一項代表一條縱軸座標軸，標準(1.0)中規定最多同時存在2條縱軸
series元件：驅動表生成的資料內容，陣列中的每一項代表一個系列的特殊選項及資料

Echarts工具的6個公共元件包括title標題、tooltip提示框、toolbox工具欄、legend圖例、dataZoom縮放控制、visualMap視覺對映。下面介紹第一個公共元件title標題。

1、title元件詳解

屬性	屬性值
id	元件id。預設不指定。指定則可用於option或者API中引用元件
show	是否顯示標題元件
text	主標題文字
subtext	副標題文字
link	主題文字超連結
sublink	副標題文字超連結
target	主標題：‘blank’:(預設)新視窗開啟 ‘self’：當前視窗開啟
subtarget	副標題：‘blank’:(預設)新視窗開啟 ‘self’：當前視窗開啟
textStyle	內含主標題樣式的相關設定
textStyle.color	主標題文字的顏色
textStyle.fontStyle	主標題文字的字型的風格
textStyle.fontWeight	主標題文字字型的粗細
textStyle. fontFamily= ‘sans-serif’	主標題文字的字體系列
textStyle. fontSize	主標題文字的文字大小
textStyle. lineHeight	主標題文字的行高
textStyle. textBorderColor	主標題文字本身的描邊顏色
textStyle. textBorderWidth	主標題文字本身的描邊寬度
textStyle. textShadowColor = ‘transparent’	主標題文字本身的陰影顏色（預設透明）
textStyle. textShadowBlur	主標題文字本身的陰影寬度
textStyle. textShadowOffsetX	主標題文字本身的陰影X偏移
textStyle. textShadowOffsetY	主標題文字本身的陰影Y偏移
subtextStyle	內含副標題樣式的相關設定，設定方法與主標題方法基本相同，只需要將相關配置項的`textStyle`改為`subtextStyle`
itemGap = 10	主標題與副標題的距離
left = ’20’	title元件距離容器左側的距離
top = ‘auto’	title元件距離容器上側的距離
right = ‘auto’	title元件距離容器右側的距離
bottom = ‘auto’	title元件距離容器下側的距離
backgroundColor = ‘transparent’	標題背景色（預設透明）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>標題</title>
  </head>
  <body>
    <div id="d1" style="width: 400px; height: 400px"></div>
    <script
      type="text/javascript"
      src=" https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js"
    ></script>
    <script type="text/javascript">
      var myChart = echarts.init(document.getElementById("d1")); //初始化畫布

      option = {
        title: {
          // show:false,    //是否顯示標題元件
          text: "echarts例項", //主標題文字內容
          subtext: "numberOne ", //副標題文字
          link: "./交通樞紐/index.html", //主題文字的超連結
          //內含主標題的相關設定
          textStyle:{
            color:"red",
            fontSize:20,
            // fontStyle:'italic',
            fontWeight:'bolder',
            lineHeight:30,
            textBorderColor:'blue',
            textBorderWidth:5,
            textShadowColor:'yellow',
            textShadowBlur:5,
            textShadowOffsetX:5,
            textShadowOffsetY:5
          },
          //內含副標題的樣式設定
          subtextStyle:{
            color:"red",
          },
          itemGap:30,
          left:30,
          top:30,
          right:30,
          bottom:30,
          backgroundColor:'pink'
        },


        
        grid: { show: "true", borderWidth: "1" },
        calculable: false,
        tooltip: {
          trigger: "axis",
          formatter: "Total : <br/>{b} : {c}萬人次",
        },

        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "value",
          min: 5,
          max: 14,
          axisLabel: {
            formatter: "{value}萬",
            show: true,
            textStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            data: [8.2, 9.3, 9.1, 9.4, 9.5, 10, 9.5],
            type: "line",
          },
        ],
      };
      myChart.setOption(option);
    </script>
  </body>
</html>

2、tooltip(提示框)詳解

概述
- 提示框可以設定在多種地方
  - 可以設定在全域性，即tooltip
  - 可以設定在座標系中，即grid.tooltip、popar.tooltip、single.tooltip
  - 可以設定在系列中，即series.tooltip
  - 可以設定在每一個數據項中，即series.data.tooltip
- 下面是tooltip的部分引數的取值及含義
  [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-CcncYPaa-1611279501133)(https://www.shulanxt.com/wp-content/uploads/2020/08/image-332.png#align=left&display=inline&height=844&margin=%5Bobject%20Object%5D&originHeight=844&originWidth=602&status=done&style=none&width=602)]
解析常用的tooltip屬性
- 提示內容對齊方式：`textStyle````javascript
  textStyle:{
  align:‘left’
  }
  //tooltip的align的值可以有“center”、left、right，分別代表“居中對
  //齊“、“左對齊”、“右對齊”。


   - 提示框的觸發方式：`trigger````
tooltip的trigger的值可以有’item’、’axis’。

‘item’:資料項圖形觸發，主要在散點圖，餅圖等無類目軸的圖表中使用。
‘axis’:座標軸觸發，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用

提示框的觸發條件：tooltip.triggerOn| mousemove | 滑鼠移動時觸發 |
| :—: | :—: |
| click | 滑鼠點選時觸發 |
| mousemove|click | 同時滑鼠移動和點選時觸發 |
| none | 不在 ‘mousemove’ 或 ‘click’ 時觸發，使用者可以通過 action.tooltip.showTip 和 action.tooltip.hideTip 來手動觸發和隱藏。也可以通過 axisPointer.handle 來觸發或隱藏。 |
提示框的格式：formatter（主要有字串模板和自定義模板）
- 字串模板```
  模板變數有 {a}, {b}，{c}，{d}，{e}，分別表示系列名，資料名，資料值等。在 trigger 為 ‘axis’ 的時候，會有多個系列的資料，此時可以通過 {a0}, {a1}, {a2} 這種後面加索引的方式表示系列的索引。不同圖表型別下的 {a}，{b}，{c}，{d} 含義不一樣。其中變數{a}, {b}, {c}, {d}在不同圖表型別下代表資料含義為：

折線（區域）圖、柱狀（條形）圖、K線圖 : {a}（系列名稱），{b}（類目值），{c}（數值）, {d}（無）
散點圖（氣泡）圖 : {a}（系列名稱），{b}（資料名稱），{c}（數值陣列）, {d}（無）
地圖 : {a}（系列名稱），{b}（區域名稱），{c}（合併數值）, {d}（無）
餅圖、儀表盤、漏斗圖: {a}（系列名稱），{b}（資料項名稱），{c}（數值）, {d}（百分比）


      - 自定義函式```
回撥函式格式：

(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string

第一個引數 params 是 formatter 需要的資料集。

格式如下：

{
     componentType: 'series',
     // 系列型別
     seriesType: string,
     // 系列在傳入的 option.series 中的 index
     seriesIndex: number,
     // 系列名稱
     seriesName: string,
     // 資料名，類目名
     name: string,
     // 資料在傳入的 data 陣列中的 index
     dataIndex: number,
     // 傳入的原始資料項
     data: Object,
     // 傳入的資料值
     value: number|Array,
     // 資料圖形的顏色
     color: string,

     // 餅圖的百分比
     percent: number,

 }
在 trigger 為 ‘axis’ 的時候，或者 tooltip 被 axisPointer 觸發的時候，params 是多個系列的資料陣列。其中每項內容格式同上，並且，

{
    componentType: 'series',
    // 系列型別
    seriesType: string,
    // 系列在傳入的 option.series 中的 index
    seriesIndex: number,
    // 系列名稱
    seriesName: string,
    // 資料名，類目名
    name: string,
    // 資料在傳入的 data 陣列中的 index
    dataIndex: number,
    // 傳入的原始資料項
    data: Object,
    // 傳入的資料值。在多數系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）
    value: number|Array|Object,
    // 座標軸 encode 對映資訊，
    // key 為座標軸（如 'x' 'y' 'radius' 'angle' 等）
    // value 必然為陣列，不會為 null/undefied，表示 dimension index 。
    // 其內容如：
    // {
    //     x: [2] // dimension index 為 2 的資料對映到 x 軸
    //     y: [0] // dimension index 為 0 的資料對映到 y 軸
    // }
    encode: Object,
    // 維度名列表
    dimensionNames: Array<String>,
    // 資料的維度 index，如 0 或 1 或 2 ...
    // 僅在雷達圖中使用。
    dimensionIndex: number,
    // 資料圖形的顏色
    color: string,

}
第二個引數 ticket 是非同步回撥標識，配合第三個引數 callback 使用。

第三個引數 callback 是非同步回撥.

在提示框浮層內容是非同步獲取的時候，可以通過 callback 傳入上述的 ticket 和 html 更新提示框浮層內容。

3、lengend詳解

1、可做模板顯示

legend={

    show:true,  //是否顯示

    zlevel:0,  //所屬圖形的Canvas分層，zlevel大的Canvas會放在zlevel小的Canvas的上面

    z:2,  //所屬元件的z分層，z值小的圖形會被z值大的圖形覆蓋

    left:"center",  //元件離容器左側的距離,'left','center','right','20%'

    top:"top",  //元件離容器上側的距離,'top','middle','bottom','20%'

    right:"auto",  //元件離容器右側的距離,'20%'

    bottom:"auto",  //元件離容器下側的距離,'20%'

    width:"auto",  //圖例寬度

    height:"auto",  //圖例高度

    orient:"horizontal",  //圖例排列方向

    align:"auto",  //圖例標記和文字的對齊,left,right

    padding:5,  //圖例內邊距，單位px 5 [5, 10] [5,10,5,10]

    itemGap:10,  //圖例每項之間的間隔

    itemWidth:25,  //圖例標記的圖形寬度

    itemHeight:14,  //圖例標記的圖形高度

    formatter:function (name) {  //用來格式化圖例文字，支援字串模板和回撥函式兩種形式。模板變數為圖例名稱 {name}
        return 'Legend ' + name;
    },

    selectedMode:"single",  //圖例選擇的模式,true開啟,false關閉,single單選,multiple多選

    inactiveColor:"#ccc",  //圖例關閉時的顏色

    textStyle:mytextStyle,  //文字樣式

    data:['類別1', '類別2', '類別3'],  //series中根據名稱區分

    backgroundColor:"transparent",  //標題背景色

    borderColor:"#ccc",  //邊框顏色

    borderWidth:0,  //邊框線寬

    shadowColor:"red",  //陰影顏色

    shadowOffsetX:0,  //陰影水平方向上的偏移距離

    shadowOffsetY:0,  //陰影垂直方向上的偏移距離

    shadowBlur:10,  //陰影的模糊大小

};

2、常用屬性及解析

部分引數的取值和含義
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-Z3PefPqR-1611279501135)(https://www.shulanxt.com/wp-content/uploads/2020/08/image-340.png#align=left&display=inline&height=654&margin=%5Bobject%20Object%5D&originHeight=654&originWidth=636&status=done&style=none&width=636)]
下面我們來解析部分legend的一些常用屬性：

legend. type

圖例的型別。
可選值：
- ‘plain’：普通圖例。預設就是普通圖例。
- ‘scroll’：可滾動翻頁的圖例。當圖例數量較多時可以使用。

legend.id

元件 ID。
預設不指定。指定則可用於在 option 或者 API 中引用元件。

legend. left = ‘auto’

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

legend. right = ‘auto’

圖例元件離容器右側的距離。
預設自適應。

legend. bottom = ‘auto’

圖例元件離容器下側的距離。
預設自適應。

legend. width = ‘auto’

圖例元件的寬度。預設自適應。

legend. height = ‘auto’

圖例元件的高度。預設自適應。

legend. orient = ‘horizontal’

圖例列表的佈局朝向。
可選：
- ‘horizontal’
- ‘vertical’

legend. align = ‘auto’

圖例標記和文字的對齊。預設自動，根據元件的位置和 orient 決定，當元件的 left 值為 ‘right’ 以及縱向佈局（orient 為 ‘vertical’）的時候為右對齊，即為 ‘right’。
可選：
- ‘auto’
- ‘left’
- ‘right’

legend. padding

圖例內邊距，單位px，預設各方向內邊距為5，接受陣列分別設定上右下左邊距。
使用示例：

// 設定內邊距為 5
padding: 5
// 設定上下的內邊距為 5，左右的內邊距為 10
padding: [5, 10]
// 分別設定四個方向的內邊距
padding: [
    5,  // 上
    10, // 右
    5,  // 下
    10, // 左
]

legend. formatterstringFunction

用來格式化圖例文字，支援字串模板和回撥函式兩種形式。
使用示例：

// 使用字串模板，模板變數為圖例名稱 {name}
formatter: 'Legend {name}'
// 使用回撥函式
formatter: function (name) {
    return 'Legend ' + name;
}

legend. selectedObject

圖例選中狀態表。
使用示例：

selected: {
    // 選中'系列1'
    '系列1': true,
    // 不選中'系列2'
    '系列2': false
}

legend. textStyleObject

圖例的公用文字樣式。

legend.textStyle. color = #333

文字的顏色。

legend.textStyle. fontStyle = ‘normal’

文字字型的風格。
可選：
- ‘normal’
- ‘italic’
- ‘oblique’

legend.textStyle. fontWeight = normal

文字字型的粗細。
可選：
- ‘normal’
- ‘bold’
- ‘bolder’
- ‘lighter’
- 100 | 200 | 300 | 400…

legend.textStyle. fontSize = 12

文字的字型大小。

legend.textStyle. backgroundColor = ‘transparent’

文字塊背景色。
可以使用顏色值，例如：’#123234′, ‘red’, ‘rgba(0,23,11,0.3)’。
也可以直接使用圖片，例如：

backgroundColor: {
    image: 'xxx/xxx.png'
    // 這裡可以是圖片的 URL，
    // 或者圖片的 dataURI，
    // 或者 HTMLImageElement 物件，
    // 或者 HTMLCanvasElement 物件。
}

當使用圖片的時候，可以使用 width 或 height 指定高寬，也可以不指定自適應。

legend.textStyle. padding

文字塊的內邊距。例如：
- padding: [3, 4, 5, 6]：表示 [上, 右, 下, 左] 的邊距。
- padding: 4：表示 padding: [4, 4, 4, 4]。
- padding: [3, 4]：表示 padding: [3, 4, 3, 4]。
- 注意，文字塊的 width 和 height 指定的是內容高寬，不包含 padding。

legend.textStyle. shadowColor = ‘transparent’

文字塊的背景陰影顏色。

legend.textStyle. shadowBlur

文字塊的背景陰影長度。

legend.textStyle. shadowOffsetX

文字塊的背景陰影 X 偏移。

legend.textStyle. shadowOffsetY

文字塊的背景陰影 Y 偏移。

legend.textStyle. widthnumberstring

文字塊的寬度。一般不用指定，不指定則自動是文字的寬度。在想做表格項或者使用圖片時，可能會使用它。

注意，文字塊的 width 和 height 指定的是內容高寬，不包含 padding。

width 也可以是百分比字串，如 ‘100%’。表示的是所在文字塊的 contentWidth（即不包含文字塊的 padding）的百分之多少。之所以以 contentWidth 做基數，因為每個文字片段只能基於 content box 佈局。如果以 outerWidth 做基數，則百分比的計算在實用中不具有意義，可能會超出。

注意，如果不定義 rich 屬性，則不能指定 width 和 height。

legend.textStyle. heightnumberstring

文字塊的高度。一般不用指定，不指定則自動是文字的高度。在使用圖片（參見 backgroundColor）時，可能會使用它。

注意，文字塊的 width 和 height 指定的是內容高寬，不包含 padding。
注意，如果不定義 rich 屬性，則不能指定 width 和 height。

legend.textStyle. textBorderColor = ‘transparent’

文字本身的描邊顏色。

legend. tooltipObject

圖例的 tooltip 配置，配置項同 tooltip。預設不顯示，可以在 legend 文字很多的時候對文字做裁剪並且開啟 tooltip。

legend. icon

圖例項的 icon。
ECharts 提供的標記型別包括’circle’,’rect’,’roundRect’,’triangle’,’diamond’,’pin’,’arrow’,’none’
可以通過 ‘image://url’ 設定為圖片，其中 URL 為圖片的連結，或者 dataURI。
URL 為圖片連結例如：

'image://http://xxx.xxx.xxx/a/b.png'

URL 為 dataURI 例如：

'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'

可以通過 ‘path://’ 將圖示設定為任意的向量路徑。這種方式相比於使用圖片的方式，不用擔心因為縮放而產生鋸齒或模糊，而且可以設定為任意顏色。路徑圖形會自適應調整為合適的大小。路徑的格式參見 SVG PathData。可以從 Adobe Illustrator 等工具編輯匯出。

legend. dataArray

圖例的資料陣列。陣列項通常為一個字串，每一項代表一個系列的 name（如果是餅圖，也可以是餅圖單個數據的 name）。圖例元件會自動根據對應系列的圖形標記（symbol）來繪製自己的顏色和標記，特殊字串 ”（空字串）或者 ‘\n’（換行字串）用於圖例的換行。
如果 data 沒有被指定，會自動從當前系列中獲取。多數系列會取自 series.name 或者 series.encode 的 seriesName 所指定的維度。如餅圖 and 漏斗圖等會取自 series.data 中的 name。
如果要設定單獨一項的樣式，也可以把該項寫成配置項物件。此時必須使用 name 屬性對應表示系列的 name。
示例

data: [{
    name: '系列1',
    // 強制設定圖形為圓。
    icon: 'circle',
    // 設定文字為紅色
    textStyle: {
        color: 'red'
    }
}]

legend.data. namestring

圖例項的名稱，應等於某系列的name值（如果是餅圖，也可以是餅圖單個數據的 name）。

legend.data. iconstring

圖例項的 icon。
ECharts 提供的標記型別包括 ‘circle’, ‘rect’, ’roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’
可以通過 ‘image://url’ 設定為圖片，其中 URL 為圖片的連結，或者 dataURI。

legend.data. textStyleObject

圖例項的文字樣式。

legend. backgroundColor = ‘transparent’

圖例背景色，預設透明。
顏色可以使用 RGB 表示，比如 ‘rgb(128, 128, 128)’ ，如果想要加上 alpha 通道，可以使用 RGBA，比如 ‘rgba(128, 128, 128, 0.5)’，也可以使用十六進位制格式，比如 ‘#ccc’

legend. shadowColor

陰影顏色。支援的格式同color。

注意：此配置項生效的前提是，設定了 show: true。

legend. pageIconsObject

legend.type 為 ‘scroll’ 時有效。
圖例控制塊的圖示。

legend. pageTextStyleObject

legend.type 為 ‘scroll’ 時有效。
圖例頁資訊的文字樣式。

legend. selectorbooleanArray

從 v4.4.0 開始支援
圖例元件中的選擇器按鈕，目前包括全選和反選兩種功能。預設不顯示，使用者可手動開啟，也可以手動配置每個按鈕的標題。
使用方式如下：

selector: [
    {
        type: 'all or inverse',
        // 可以是任意你喜歡的 title
        title: '全選'
    },
    {
        type: 'inverse',
        title: '反選'
    }
]

// 或
selector: true

// 或
selector: ['all', 'inverse']

3、legend圖示圖例的形狀

![](https://img-blog.csdnimg.cn/img_convert/e06dfa9951bb902bf63cb8ae7750d869.png#align=left&display=inline&height=403&margin=[object Object]&originHeight=403&originWidth=890&status=done&style=none&width=890)

legend:{
  show:true,
    // borderWidth:10,  //邊框線寬
    top:'60',
      inactiveColor:"red",  //圖例關閉時的顏色
        // data:['類別1', '類別2'],
        data:[{
          name:'類別1',
          icon:'rect'
        },{
          name:'類別2',
          icon:'triangle'
        }],
          backgroundColor:"pink",  //標題背景色
},

4、toolbox詳解

1、toolbox概述及其主要屬性

toolbox：ECharts中的工具欄。內建有匯出圖片、資料檢視、動態型別切換、資料區域縮放、重置五個工具。
toolbox中的屬性，不包含五個工具。最主要的是feature這個屬性，這是toolbox的配置項，五個工具的配置就是在這個裡面實現的。
部分屬性及其說明如下圖：
![](https://img-blog.csdnimg.cn/img_convert/085577d731c8c62f10464a6e44416a21.png#align=left&display=inline&height=374&margin=[object Object]&originHeight=374&originWidth=939&status=done&style=none&width=939)

2、toolbox內的五個自帶的工具

1.saveAsImage

這個工具可以把圖表儲存為圖片。
常用的引數：
- type->儲存圖片的格式，
- name->儲存檔案的名字，
- backgroundColor->儲存圖片的背景色，
- show->是否顯示該工具，

2.restore

配置項還原。
主要屬性
- show->是否顯示該工具

3.dataView

資料檢視工具，可以展現當前圖表所用的資料，編輯後可以動態更新。
dataView 展現函式，用以取代預設的 textarea 使用更豐富的資料編輯。可以返回 dom 物件或者 html 字串，
主要屬性：
- show->是否顯示該工具，
- readOnly->是否不可編輯，
- optionToContent->自定義
- backgroundColor->資料檢視浮層背景色。

4.dataZoom

資料區域縮放。目前只支援直角座標系的縮放（這裡的含義就是柱狀體，折線圖可以縮放，但是像餅狀圖就不能縮放）。
主要屬性：
- show->是否顯示該工具。

5.magicType：

動態型別切換。
主要屬性：
- show->是否顯示該工具，
- type->陣列，啟用的動態型別，包括’line’（切換為折線圖）, ‘bar’（切換為柱狀圖）, ‘stack’（切換為堆疊模式）, ’tiled’（切換為平鋪模式）。

6、新增工具

dataZoom工具:資料區域縮放工具，目前只支援直角座標系的縮放

**xAxisIndex，yAxisIndex：指定哪些 xAxis或yAxis被控制。**如果預設則控制所有的x軸或y軸。如果設定為 false 則不控制任何x軸（y軸）。如果設定成 3 則控制 axisIndex 為 3 的x軸（y軸）。如果設定為 [0, 3] 則控制 axisIndex 為 0 和 3 的x軸（y軸）

toolbox: {
          show: true,
          feature: {
            mark: {
              show: true,
            },
            dataView: {
              //資料檢視
              show: true,
              readOnly: false, //是否只讀
            },
            magicType: {
              //切換圖表
              show: true,
              type: ["line", "bar", "stack", "tiled"], //圖表  折線圖/柱狀圖/堆疊圖/平鋪圖
            },
            restore: {
              //還原原始圖表
              show: true,
            },
            saveAsImage: {
              //儲存圖片
              show: true,
            },
            dataZoom: {
              show: true,
              xAxisIndex: 0,
              yAxisIndex: false,
            },
          },
        },

3、自定義擴充套件方法

除了各個內建的工具按鈕外，我們還可以自定義工具按鈕
在實際開發過程中，我們有時需要根據需求需要自定義圖示及功能。
**注意：**自定義的工具名字，只能以 my 開頭，例如myTool1，myTool2

toolbox: {
          show: true,
          feature: {
            mark: {
              show: true,
            },
            dataView: {
              //資料檢視
              show: true,
              readOnly: false, //是否只讀
            },
            magicType: {
              //切換圖表
              show: true,
              type: ["line", "bar", "stack", "tiled"], //圖表  折線圖/柱狀圖/堆疊圖/平鋪圖
            },
            restore: {
              //還原原始圖表
              show: true,
            },
            saveAsImage: {
              //儲存圖片
              show: true,
            },
            dataZoom: {
              show: true,
              xAxisIndex: 0,
              yAxisIndex: false,
            },
            myTool2: {
                show: true,
                title: '自定義擴充套件方法',
                icon: 'image://vip.png',
                onclick: function (){
                    alert('myToolHandler2')
                }
            }
          },
        },

5、dataZoom

dataZoom屬性示例註釋

dataZoom=[//區域縮放

    {

        id: 'dataZoomX',

        show:true,//是否顯示元件。如果設定為false，不會顯示，但是資料過濾的功能還存在。

        backgroundColor:"rgba(47,69,84,0)",//元件的背景顏色

        type: 'slider',//slider表示有滑動塊的，inside表示內建的

        dataBackground:{//資料陰影的樣式。

            lineStyle:mylineStyle,//陰影的線條樣式

            areaStyle:myareaStyle,//陰影的填充樣式

        },

        fillerColor:"rgba(167,183,204,0.4)",//選中範圍的填充顏色。

        borderColor:"#ddd",//邊框顏色。

        filterMode: 'filter',
//'filter'：當前資料視窗外的資料，被 過濾掉。即 會 影響其他軸的資料範圍。每個資料項，只要有一個維度在資料視窗外，整個資料項就會被過濾掉。

//'weakFilter'：當前資料視窗外的資料，被 過濾掉。即 會 影響其他軸的資料範圍。每個資料項，只有當全部維度都在資料視窗同側外部，整個資料項才會被過濾掉。

//'empty'：當前資料視窗外的資料，被 設定為空。即 不會 影響其他軸的資料範圍。

//'none': 不過濾資料，只改變數軸範圍。

        xAxisIndex:0,//設定 dataZoom-inside 元件控制的 x軸,可以用陣列表示多個軸

        yAxisIndex:[0,2],//設定 dataZoom-inside 元件控制的 y軸,可以用陣列表示多個軸

        radiusAxisIndex:3,//設定 dataZoom-inside 元件控制的 radius 軸,可以用陣列表示多個軸

        angleAxisIndex:[0,2],//設定 dataZoom-inside 元件控制的 angle 軸,可以用陣列表示多個軸

        start: 30,//資料視窗範圍的起始百分比,表示30%

        end: 70,//資料視窗範圍的結束百分比,表示70%

        startValue:10,//資料視窗範圍的起始數值

        endValue:100,//資料視窗範圍的結束數值。

        orient:"horizontal",//佈局方式是橫還是豎。不僅是佈局方式，對於直角座標系而言，也決定了，預設情況控制橫向數軸還是縱向數軸。'horizontal'：水平。'vertical'：豎直。

        zoomLock:false,//是否鎖定選擇區域（或叫做資料視窗）的大小。如果設定為 true 則鎖定選擇區域的大小，也就是說，只能平移，不能縮放。

        throttle:100,//設定觸發檢視重新整理的頻率。單位為毫秒（ms）。

        zoomOnMouseWheel:true,//如何觸發縮放。可選值為：true：表示不按任何功能鍵，滑鼠滾輪能觸發縮放。false：表示滑鼠滾輪不能觸發縮放。'shift'：表示按住 shift 和滑鼠滾輪能觸發縮放。'ctrl'：表示按住 ctrl 和滑鼠滾輪能觸發縮放。'alt'：表示按住 alt 和滑鼠滾輪能觸發縮放。

        moveOnMouseMove:true,//如何觸發資料視窗平移。true：表示不按任何功能鍵，滑鼠移動能觸發資料視窗平移。false：表示滑鼠滾輪不能觸發縮放。'shift'：表示按住 shift 和滑鼠移動能觸發資料視窗平移。'ctrl'：表示按住 ctrl 和滑鼠移動能觸發資料視窗平移。'alt'：表示按住 alt 和滑鼠移動能觸發資料視窗平移。

        left:"center",//元件離容器左側的距離,'left', 'center', 'right','20%'

        top:"top",//元件離容器上側的距離,'top', 'middle', 'bottom','20%'

        right:"auto",//元件離容器右側的距離,'20%'

        bottom:"auto",//元件離容器下側的距離,'20%'

    },

    {

        id: 'dataZoomY',

        type: 'inside',

        filterMode: 'empty',

        disabled:false,//是否停止元件的功能。

        xAxisIndex:0,//設定 dataZoom-inside 元件控制的 x軸,可以用陣列表示多個軸

        yAxisIndex:[0,2],//設定 dataZoom-inside 元件控制的 y軸,可以用陣列表示多個軸

        radiusAxisIndex:3,//設定 dataZoom-inside 元件控制的 radius 軸,可以用陣列表示多個軸

        angleAxisIndex:[0,2],//設定 dataZoom-inside 元件控制的 angle 軸,可以用陣列表示多個軸

        start: 30,//資料視窗範圍的起始百分比,表示30%

        end: 70,//資料視窗範圍的結束百分比,表示70%

        startValue:10,//資料視窗範圍的起始數值

        endValue:100,//資料視窗範圍的結束數值。

        orient:"horizontal",//佈局方式是橫還是豎。不僅是佈局方式，對於直角座標系而言，也決定了，預設情況控制橫向數軸還是縱向數軸。'horizontal'：水平。'vertical'：豎直。

        zoomLock:false,//是否鎖定選擇區域（或叫做資料視窗）的大小。如果設定為 true 則鎖定選擇區域的大小，也就是說，只能平移，不能縮放。

        throttle:100,//設定觸發檢視重新整理的頻率。單位為毫秒（ms）。

        zoomOnMouseWheel:true,//如何觸發縮放。可選值為：true：表示不按任何功能鍵，滑鼠滾輪能觸發縮放。false：表示滑鼠滾輪不能觸發縮放。'shift'：表示按住 shift 和滑鼠滾輪能觸發縮放。'ctrl'：表示按住 ctrl 和滑鼠滾輪能觸發縮放。'alt'：表示按住 alt 和滑鼠滾輪能觸發縮放。

        moveOnMouseMove:true,//如何觸發資料視窗平移。true：表示不按任何功能鍵，滑鼠移動能觸發資料視窗平移。false：表示滑鼠滾輪不能觸發縮放。'shift'：表示按住 shift 和滑鼠移動能觸發資料視窗平移。'ctrl'：表示按住 ctrl 和滑鼠移動能觸發資料視窗平移。'alt'：表示按住 alt 和滑鼠移動能觸發資料視窗平移。
    }
];

例項講解

var data1 = [];
var data2 = [];
var data3 = [];

var random = function (max) {
    return (Math.random() * max).toFixed(3);
};

for (var i = 0; i < 500; i++) {
    data1.push([random(15), random(10), random(1)]);
    data2.push([random(10), random(10), random(2)]);
    data3.push([random(15), random(10), random(3)]);
}

option = {
    animation: false,
    legend: {
        data: ['scatter', 'scatter2', 'scatter3']
    },
    tooltip: {
    },
    xAxis: {
        type: 'value',
        min: 'dataMin',
        max: 'dataMax',
        splitLine: {
            show: true
        }
    },
    yAxis: {
        type: 'value',
        min: 'dataMin',
        max: 'dataMax',
        splitLine: {
            show: true
        }
    },
    dataZoom: [
    //控制X、Y軸顯示滑動條
        {
            type: 'slider',
            show: true,
            xAxisIndex: [0],
            start: 1,
            end: 35
        },
        {
            type: 'slider',
            show: true,
            yAxisIndex: [0],
            left: '93%',
            start: 29,
            end: 36
        },
        //設定滑鼠滾輪控制X、Y軸的縮放（可以不寫）
        {
            type: 'inside',
            xAxisIndex: [0],
            start: 1,
            end: 35
        },
        {
            type: 'inside',
            yAxisIndex: [0],
            start: 29,
            end: 36
        }
    ],
    series: [
        {
            name: 'scatter',
            type: 'scatter',
            itemStyle: {
                normal: {
                    opacity: 0.8
                }
            },
            symbolSize: function (val) {
                return val[2] * 40;
            },
            data: data1
        },
        {
            name: 'scatter2',
            type: 'scatter',
            itemStyle: {
                normal: {
                    opacity: 0.8
                }
            },
            symbolSize: function (val) {
                return val[2] * 40;
            },
            data: data2
        },
        {
            name: 'scatter3',
            type: 'scatter',
            itemStyle: {
                normal: {
                    opacity: 0.8,
                }
            },
            symbolSize: function (val) {
                return val[2] * 40;
            },
            data: data3
        }
    ]
}

6、visualMap詳解

1、visualMap概述

visualMap 是視覺對映元件，用於進行『視覺編碼』，也就是將資料對映到視覺元素（視覺通道）。
視覺元素可以是：
- symbol: 圖元的圖形類別。
- symbolSize: 圖元的大小。
- color: 圖元的顏色。
- colorAlpha: 圖元的顏色的透明度。
- opacity: 圖元以及其附屬物（如文字標籤）的透明度。
- colorLightness: 顏色的明暗度。
- colorSaturation: 顏色的飽和度。
- colorHue: 顏色的色調。

visualMap 元件可以定義多個，從而可以同時對資料中的多個維度進行視覺對映。

2、visualMap 元件的型別

visualMap 元件可以定義為分段型（visualMapPiecewise）或連續型（visualMapContinuous），通過 type 來區分。例如：

option = {
    visualMap: [
        { // 第一個 visualMap 元件
            type: 'continuous', // 定義為連續型 visualMap
            ...
        },
        { // 第二個 visualMap 元件
            type: 'piecewise', // 定義為分段型 visualMap
            ...
        }
    ],
    ...
};

3、視覺對映方式的配置

既然是『資料』到『視覺元素』的對映，visualMap 中可以指定資料的『哪個維度』（參見visualMap.dimension）對映到哪些『視覺元素』中。
在 visualMap 元件所控制的 series 中，如果 series 中某個資料項需要避開 visualMap 對映，可以這麼配置：

series: {
    type: '...',
    data: [
        {name: 'Shanghai', value: 251},
        {name: 'Haikou', value: 21},
        // 設定 `visualMap: false` 則 visualMap 不對此項進行控制，此時系列
        // 可使用自身的視覺引數（color/symbol/ ...控制此項的顯示。
        {name: 'Beijing', value: 821, visualMap: false},
        ...
    ]
}

4、visuaMap程式碼例項及對應註釋

visualMap=[  //視覺對映元件，用於進行『視覺編碼』，也就是將資料對映到視覺元素。視覺元素可以是：symbol: 圖元的圖形類別。symbolSize: 圖元的大小。color: 圖元的顏色。

// colorAlpha: 圖元的顏色的透明度。opacity: 圖元以及其附屬物（如文字標籤）的透明度。colorLightness: 顏色的明暗度。colorSaturation: 顏色的飽和度。colorHue: 顏色的色調。

    {

        show:true,  //是否顯示 visualMap-continuous 元件。如果設定為 false，不會顯示，但是資料對映的功能還存在

        type: 'continuous',  // 定義為連續型 viusalMap

        min:10,  //指定 visualMapContinuous 元件的允許的最小值

        max:100,  //指定 visualMapContinuous 元件的允許的最大值

        range:[15, 40],  //指定手柄對應數值的位置。range 應在 min max 範圍內

        calculable:true,  //是否顯示拖拽用的手柄（手柄能拖拽調整選中範圍）

        realtime:true,  //拖拽時，是否實時更新

        inverse:false,  //是否反轉 visualMap 元件

        precision:0,  //資料展示的小數精度，預設為0，無小數點

        itemWidth:20,  //圖形的寬度，即長條的寬度。

        itemHeight:140,  //圖形的高度，即長條的高度。

        align:"auto",  //指定元件中手柄和文字的擺放位置.可選值為：'auto' 自動決定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。

        text:['High', 'Low'],  //兩端的文字

        textGap:10,  //兩端文字主體之間的距離，單位為px

        dimension:2,  //指定用資料的『哪個維度』，對映到視覺元素上。『資料』即 series.data。 可以把 series.data 理解成一個二維陣列,其中每個列是一個維度,預設取 data 中最後一個維度

        seriesIndex:1,  //指定取哪個系列的資料，即哪個系列的 series.data,預設取所有系列

        hoverLink:true,  //滑鼠懸浮到 visualMap 元件上時，滑鼠位置對應的數值 在 圖表中對應的圖形元素，會高亮

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

            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],

            symbolSize: [30, 100]

        },

        outOfRange:{  //定義 在選中範圍外 的視覺元素。

            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],

            symbolSize: [30, 100]

        },

        zlevel:0,  //所屬圖形的Canvas分層，zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面

        z:2,  //所屬元件的z分層，z值小的圖形會被z值大的圖形覆蓋

        left:"center",  //元件離容器左側的距離,'left', 'center', 'right','20%'

        top:"top",  //元件離容器上側的距離,'top', 'middle', 'bottom','20%'

        right:"auto",  //元件離容器右側的距離,'20%'

        bottom:"auto",  //元件離容器下側的距離,'20%'

        orient:"vertical",  //圖例排列方向

        padding:5,  //圖例內邊距，單位px  5  [5, 10]  [5,10,5,10]

        backgroundColor:"transparent",  //標題背景色

        borderColor:"#ccc",  //邊框顏色

        borderWidth:0,  //邊框線寬

        textStyle:mytextStyle,  //文字樣式

        formatter: function (value) {  //標籤的格式化工具。

            return 'aaaa' + value;  // 範圍標籤顯示內容。

        }

    },

    {
        show:true,  //是否顯示 visualMap-continuous 元件。如果設定為 false，不會顯示，但是資料對映的功能還存在

        type: 'piecewise',  // 定義為分段型 visualMap

        splitNumber:5,  //對於連續型資料，自動平均切分成幾段。預設為5段

        pieces: [  //自定義『分段式視覺對映元件（visualMapPiecewise）』的每一段的範圍，以及每一段的文字，以及每一段的特別的樣式

            {min: 1500},  // 不指定 max，表示 max 為無限大（Infinity）。

            {min: 900, max: 1500},

            {min: 310, max: 1000},

            {min: 200, max: 300},

            {min: 10, max: 200, label: '10 到 200（自定義label）'},

            {value: 123, label: '123（自定義特殊顏色）', color: 'grey'}, // 表示 value 等於 123 的情況。

            {max: 5}  // 不指定 min，表示 min 為無限大（-Infinity）。

        ],

        categories:['嚴重汙染', '重度汙染', '中度汙染', '輕度汙染', '良', '優'],  //用於表示離散型資料（或可以稱為類別型資料、列舉型資料）的全集

        min:10,  //指定 visualMapContinuous 元件的允許的最小值

        max:100,  //指定 visualMapContinuous 元件的允許的最大值

        minOpen:true,  //介面上會額外多出一個『< min』的選塊

        maxOpen:true,  //介面上會額外多出一個『> max』的選塊。

        selectedMode:"multiple",  //選擇模式，可以是：'multiple'（多選）。'single'（單選）。

        inverse:false,  //是否反轉 visualMap 元件

        precision:0,  //資料展示的小數精度，預設為0，無小數點

        itemWidth:20,  //圖形的寬度，即長條的寬度。

        itemHeight:140,  //圖形的高度，即長條的高度。

        align:"auto",  //指定元件中手柄和文字的擺放位置.可選值為：'auto' 自動決定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。

        text:['High', 'Low'],  //兩端的文字

        textGap:10,  //兩端文字主體之間的距離，單位為px

        showLabel:true,  //是否顯示每項的文字標籤

        itemGap:10,  //每兩個圖元之間的間隔距離，單位為px

        itemSymbol:"roundRect",  //預設的圖形。可選值為： 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

        dimension:2,  //指定用資料的『哪個維度』，對映到視覺元素上。『資料』即 series.data。 可以把 series.data 理解成一個二維陣列,其中每個列是一個維度,預設取 data 中最後一個維度

        seriesIndex:1,  //指定取哪個系列的資料，即哪個系列的 series.data,預設取所有系列

        hoverLink:true,  //滑鼠懸浮到 visualMap 元件上時，滑鼠位置對應的數值 在 圖表中對應的圖形元素，會高亮

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

            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],

            symbolSize: [30, 100]

        },

        outOfRange:{  //定義 在選中範圍外 的視覺元素。

            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],

            symbolSize: [30, 100]

        },

        zlevel:0,  //所屬圖形的Canvas分層，zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面

        z:2,  //所屬元件的z分層，z值小的圖形會被z值大的圖形覆蓋

        left:"center",  //元件離容器左側的距離,'left', 'center', 'right','20%'

        top:"top",  //元件離容器上側的距離,'top', 'middle', 'bottom','20%'

        right:"auto",  //元件離容器右側的距離,'20%'

        bottom:"auto",  //元件離容器下側的距離,'20%'

        orient:"vertical",  //圖例排列方向

        padding:5,  //圖例內邊距，單位px  5  [5, 10]  [5,10,5,10]

        backgroundColor:"transparent",  //標題背景色

        borderColor:"#ccc",  //邊框顏色

        borderWidth:0,  //邊框線寬

        textStyle:mytextStyle,  //文字樣式

        formatter: function (value) {  //標籤的格式化工具。

            return 'aaaa' + value;  // 範圍標籤顯示內容。

        }
    }
];

三、各種圖表的講解和注意事項

請自行去看文件

四、echarts的相關主題

除了預設主題外，內建了兩套主題，分別為 light 和 dark

使用預設主題：var chart = echarts.init(dom);
使用主題light：var chart = echarts.init(dom, ‘light’);
使用主題dark： var chart = echarts.init(dom, ‘dark’);

五、調色盤

概述

調色盤可以在 option 中設定。
調色盤給定了一組顏色，圖形、系列會自動從其中選擇顏色。
可以設定全域性的調色盤，也可以設定系列自己專屬的調色盤。

option = {
    // 全域性調色盤。
    color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],

    series: [{
        type: 'bar',
        // 此係列自己的調色盤。
        color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
        ...
    }, {
        type: 'pie',
        // 此係列自己的調色盤。
        color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],
        ...
    }]
}

系列調色盤與全域性調色盤同時出現

當系列調色盤與全域性調色盤同時出現時，圖表使用系列調色盤中配置的顏色(就近原則)

六、echarts的loading效果

非同步載入的時候避免出現白屏時間過長，可以新增loading效果

<script type="text/javascript">
        // 基於準備好的dom，初始化echarts例項
        var myChart = echarts.init(document.getElementById('main'));
  myChart.showLoading();  // 開啟 loading 效果

        $.get('data.json', function (data) {
   myChart.hideLoading();  // 隱藏 loading 效果
   myChart.setOption({
                series : [
                    {
                        name: '訪問來源',
                        type: 'pie',    // 設定圖表型別為餅圖
                        radius: '55%',  // 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的 55% 長度。
                        data:data.data_pie
                    }
                ] ,
   title:{
    text:"demo資料分析",
    subtext:'資料純屬虛構',
    }
            })
        }, 'json');
    </script>

七、資料的動態更新

概述

ECharts 由資料驅動，而資料的改變會驅動圖表展現的改變，因此動態資料的實現也變得異常簡單。
所有資料的更新都通過 setOption 實現，我們只需要定時獲取資料，setOption 填入資料，而不用考慮資料到底產生了那些變化，ECharts 會找到兩組資料之間的差異然後通過合適的動畫去表現資料的變化。
ECharts 3 中移除了 ECharts 2 中的 addData 方法。如果只需要加入單個數據，在ECharts3中可以先 data.push(value) 後 setOption

<script type="text/javascript">
        var base = +new Date(2014, 9, 3);
  var oneDay = 24 * 3600 * 1000;
  var date = [];
  var data = [Math.random() * 150];
  var now = new Date(base);

  function addData(shift) {
      now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
      date.push(now);
      data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);
      if (shift) {
          date.shift();
          data.shift();
      }
      now = new Date(+new Date(now) + oneDay);
  }
  for (var i = 1; i < 100; i++) {
      addData();
  }
  option = {
      xAxis: {
          type: 'category',
          boundaryGap: false,
          data: date
      },
      yAxis: {
          boundaryGap: [0, '50%'],
          type: 'value'
      },
      series: [
          {
              name:'成交',
              type:'line',
              smooth:true,
              symbol: 'none',
              stack: 'a',
              areaStyle: {
                  normal: {}
              },
              data: data
          }
      ]
  };
  setInterval(function () {
      addData(true);
      myChart.setOption({
          xAxis: {
              data: date
          },
          series: [{
              name:'成交',
              data: data
          }]
      });
  }, 500);

        // 基於準備好的dom，初始化echarts例項
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option)
    </script>

解析

資料更新通過setInterval（）方法實現

setInterval（）方法

setInterval() 方法可按照指定的週期（以毫秒計）來呼叫函式或計算表示式。
setInterval() 方法會不停地呼叫函式，直到 clearInterval() 被呼叫或視窗被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的引數。
提示： 500 毫秒= 0.5 秒。

被setInterval（）呼叫的方法

myChart.setOption(）方法
- myChart.setOption()方法會更新圖表，
- 而資料會在ddData被呼叫時更新
- 資料的改變會驅動圖表展現的改變
addData（）方法
- addData（）方法每被呼叫一次就會更新一次data
- data的更新包括data和date
  - data對應表中具體的資料
  - date對應x軸的橫座標

故我們的圖表每500毫秒會更新一次資料和圖表

八、資料集

1、demo簡單案例

<script type="text/javascript">
        // 基於準備好的dom，初始化echarts例項
        var myChart = echarts.init(document.getElementById('main'));

        // 指定圖表的配置項和資料
        var option = {
            legend: {},
            tooltip: {},
            dataset: {
                // 提供一份資料。
                source: [
                    ['product', '2015', '2016', '2017'],
                    ['Matcha Latte', 43.3, 85.8, 93.7],
                    ['Milk Tea', 83.1, 73.4, 55.1],
                    ['Cheese Cocoa', 86.4, 65.2, 82.5],
                    ['Walnut Brownie', 72.4, 53.9, 39.1]
                ]
            },
            // 宣告一個 X 軸，類目軸（category）。預設情況下，類目軸對應到 dataset 第一列。
            xAxis: {type: 'category'},
            // 宣告一個 Y 軸，數值軸。
            yAxis: {},
            // 宣告多個 bar 系列，預設情況下，每個系列會自動對應到 dataset 的每一列。
            series: [
                {type: 'bar'},
                {type: 'bar'},
                {type: 'bar'}
            ],
   title:{
   text:"超市銷量圖",
   subtext:"資料純屬虛構",
   }
        };

        // 使用剛指定的配置項和資料顯示圖表。
        myChart.setOption(option);
    </script>

2、物件陣列的格式的案例

var option = {
                legend: {},
                tooltip: {},
                dataset: {
                    // 這裡指定了維度名的順序，從而可以利用預設的維度到座標軸的對映。
                    // 如果不指定 dimensions，也可以通過指定 series.encode 完成對映，參見後文。
                    dimensions: ['product', '2015', '2016', '2017'],
                    source: [
                        {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
                        {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
                        {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
                        {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
                    ]
                },
                xAxis: {type: 'category',axisLabel: {
                    interval: 0,
                    rotate:30
                }},
                yAxis: {},
                series: [
                    {type: 'bar'},
                    {type: 'bar'},
                    {type: 'bar'}
                ],
   title:{
   text:"超市銷量圖",
   subtext:"資料純屬虛構",
   }
            };

Echarts學習筆記

Echarts學習筆記

一、使用Echarts

二、echarts的元件

1、title元件詳解

2、tooltip(提示框)詳解

3、lengend詳解

1、可做模板顯示

2、常用屬性及解析

legend. type

legend.id

legend. left = ‘auto’

legend. right = ‘auto’

legend. bottom = ‘auto’

legend. width = ‘auto’

legend. height = ‘auto’

legend. orient = ‘horizontal’

legend. align = ‘auto’

legend. padding

legend. formatterstringFunction

legend. selectedObject

legend. textStyleObject

legend.textStyle. color = #333

legend.textStyle. fontStyle = ‘normal’

legend.textStyle. fontWeight = normal

legend.textStyle. fontSize = 12

legend.textStyle. backgroundColor = ‘transparent’

legend.textStyle. padding

legend.textStyle. shadowColor = ‘transparent’

legend.textStyle. shadowBlur

legend.textStyle. shadowOffsetX

legend.textStyle. shadowOffsetY

legend.textStyle. widthnumberstring

legend.textStyle. heightnumberstring

legend.textStyle. textBorderColor = ‘transparent’

legend. tooltipObject

legend. icon

legend. dataArray

legend.data. namestring

legend.data. iconstring

legend.data. textStyleObject

legend. backgroundColor = ‘transparent’

legend. shadowColor

legend. pageIconsObject

legend. pageTextStyleObject

legend. selectorbooleanArray

3、legend圖示圖例的形狀

4、toolbox詳解

1、toolbox概述及其主要屬性

2、toolbox內的五個自帶的工具

1.saveAsImage

2.restore

3.dataView

4.dataZoom

5.magicType：

6、新增工具

3、自定義擴充套件方法

5、dataZoom

dataZoom屬性示例註釋

6、visualMap詳解

1、visualMap概述

2、visualMap 元件的型別

3、視覺對映方式的配置

4、visuaMap程式碼例項及對應註釋

三、各種圖表的講解和注意事項

四、echarts的相關主題

五、調色盤

系列調色盤與全域性調色盤同時出現

六、echarts的loading效果

七、資料的動態更新

概述

解析

資料更新通過setInterval（）方法實現

被setInterval（）呼叫的方法

八、資料集

1、demo簡單案例

2、物件陣列的格式的案例

相關推薦