好看的玄幻小说,穿越小说完本 ,手机推荐排行榜

新聞中心

這里有您想知道的互聯(lián)網營銷解決方案

創(chuàng)新互聯(lián)ECharts教程：ECharts自定義系列屬性

ECharts自定義系列屬性

在上一節(jié)的內容中，我們初步認識了ECharts自定義系列，而本節(jié)的內容是介紹ECharts自定義系列屬性。

岳麓網站建設公司創(chuàng)新互聯(lián)公司,岳麓網站設計制作，有大型網站制作公司豐富經驗。已為岳麓上千多家提供企業(yè)網站建設服務。企業(yè)網站搭建\外貿網站建設要多少錢，請找那個售后服務好的岳麓做網站的公司定做！

type

在ECharts自定義系列中 type 屬性的取值為 'custom'

name

系列名稱，用于tooltip的顯示，legend 的圖例篩選，在 setOption 更新數據和配置項時用于指定對應的系列。

legendHoverLink

是否啟用圖例 hover 時的聯(lián)動高亮，默認為 true。

coordinateSystem

該系列使用的坐標系，可選：

null 或者 'none'：無坐標系。

'cartesian2d'（默認）：使用二維的直角坐標系（也稱笛卡爾坐標系），通過 xAxisIndex, yAxisIndex指定相應的坐標軸組件。

'polar'：使用極坐標系，通過 polarIndex 指定相應的極坐標組件

'geo'：使用地理坐標系，通過 geoIndex 指定相應的地理坐標系組件。

'none'：不使用坐標系。

xAxisIndex

使用的 x 軸的 index，在單個圖表實例中存在多個 x 軸的時候有用。

yAxisIndex

使用的 y 軸的 index，在單個圖表實例中存在多個 y軸的時候有用。

polarIndex

使用的極坐標系的 index，在單個圖表實例中存在多個極坐標系的時候有用。

geoIndex

使用的地理坐標系的 index，在單個圖表實例中存在多個地理坐標系的時候有用。

calendarIndex

使用的日歷坐標系的 index，在單個圖表實例中存在多個日歷坐標系的時候有用。

itemStyle

圖形樣式，有 normal 和 emphasis 兩個狀態(tài)。normal 是圖形在默認狀態(tài)下的樣式；emphasis 是圖形在高亮狀態(tài)下的樣式，比如在鼠標懸浮或者圖例聯(lián)動高亮時。

dimensions

使用 dimensions 定義 data 每個維度的信息。例如：

series: {
    type: 'xxx',
    // 定義了每個維度的名稱。這個名稱會被顯示到默認的 tooltip 中。
    dimensions: ['date', 'open', 'close', 'highest', 'lowest']
    data: [
        // 有了上面 dimensions 定義后，下面這五個維度的名稱分別為：
        // 'date', 'open', 'close', 'highest', 'lowest'
        [12, 44, 55, 66, 2],
        [23, 6, 16, 23, 1],
        ...
    ]
}

series: {
    type: 'xxx',
    dimensions: [
        null,                // 如果此維度不想給出定義，則使用 null 即可
        {type: 'ordinal'},   // 只定義此維度的類型。
                             // 'ordinal' 表示離散型，一般文本使用這種類型。
                             // 如果類型沒有被定義，會自動猜測類型。
        {name: 'good', type: 'number'},
        'bad'                // 等同于 {name: 'bad'}
    ]
}

dimensions 數組中的每一項可以是：

string，如 'someName'，等同于 {name: 'someName'}
Object，屬性可以有：
- name: string。
- type: string，支持

值得一提的是，當定義了 dimensions 后，默認 tooltip 中對個維度的顯示，會變?yōu)椤贺Q排』，從而方便顯示每個維度的名稱。如果沒有定義 dimensions，則默認 tooltip 會橫排顯示，且只顯示數值沒有維度名稱可顯示。

encode

可以定義 data 的哪個維度被編碼成什么。比如：

series: {
    type: 'xxx',
    encode: {
        x: [3, 1, 5],      // 表示維度 3、1、5 映射到 x 軸。
        y: 2,              // 表示維度 2 映射到 y 軸。
        tooltip: [3, 2, 4] // 表示維度 3、2、4 會在 tooltip 中顯示。
        label: 3           // 表示 label 使用維度 3。
    },
    data: [
        // 每一列稱為一個『維度』。
        // 這里分別是維度 0、1、2、3、4。
        [12, 44, 55, 66, 2],
        [23, 6, 16, 23, 1],
        ...
    ]
}

encode 支持的屬性，根據坐標系不同而不同。對于直角坐標系（cartesian2d），支持 x、y。對于極坐標系（polar），支持 radius、angle。對于地理坐標系（geo），支持 lng，lat。此外，均支持 tooltip 和 label 和 itemName（用于指定 tooltip 中數據項名稱）。

當使用 dimensions 給維度定義名稱后，encode 中可直接引用名稱，例如：

series: {
    type: 'xxx',
    dimensions: ['date', 'open', 'close', 'highest', 'lowest'],
    encode: {
        x: 'date',
        y: ['open', 'close', 'highest', 'lowest']
    },
    data: [ ... ]
}

data[i]

系列中的數據內容數組。數組項通常為具體的數據項。

通常來說，數據用一個二維數組表示。如下，每一列被稱為一個『維度』。

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

在直角坐標系 (grid) 中『維度X』和『維度Y』會默認對應于 xAxis 和 yAxis。
在極坐標系 (polar) 中『維度X』和『維度Y』會默認對應于 radiusAxis 和 angleAxis。
后面的其他維度是可選的，可以在別處被使用，例如：
- 在 visualMap 中可以將一個或多個維度映射到顏色，大小等多個圖形屬性上。
- 在 series.symbolSize 中可以使用回調函數，基于某個維度得到 symbolSize 值。
- 使用 tooltip.formatter 或 series.label.normal.formatter 可以把其他維度的值展示出來。

特別地，當只有一個軸為類目軸（axis.type 為 'category'）的時候，數據可以簡化用一個一維數組表示。例如：

xAxis: {
    data: ['a', 'b', 'm', 'n']
},
series: [{
    // 與 xAxis.data 一一對應。
    data: [23,  44,  55,  19]
    // 它其實是下面這種形式的簡化：
    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]
}]

『值』與軸類型的關系：

當某維度對應于數值軸（axis.type 為 'value' 或者 'log'）的時候：
其值可以為 number（例如 12）。（也可以兼容 string 形式的 number，例如 '12'）

當某維度對應于類目軸（axis.type 為 'category'）的時候：
其值須為類目的『序數』（從 0 開始）或者類目的『字符串值』。例如：

xAxis: {
      type: 'category',
      data: ['星期一', '星期二', '星期三', '星期四']
  },
  yAxis: {
      type: 'category',
      data: ['a', 'b', 'm', 'n', 'p', 'q']
  },
  series: [{
      data: [
          // xAxis    yAxis
          [  0,        0,    2  ], // 意思是此點位于 xAxis: '星期一', yAxis: 'a'。
          [  '星期四',  2,    1  ], // 意思是此點位于 xAxis: '星期四', yAxis: 'm'。
          [  2,       'p',   2  ], // 意思是此點位于 xAxis: '星期三', yAxis: 'p'。
          [  3,        3,    5  ]
      ] }]

雙類目軸的示例可以參考 Github Punchcard 示例。

當某維度對應于時間軸（type 為 'time'）的時候，值可以為：
- 一個時間戳，如 1484141700832，表示 UTC 時間。
- 或者字符串形式的時間描述：
  - ISO 8601 的子集，只包含這些形式（這幾種格式，除非指明時區(qū)，否則均表示本地時間，與 moment 一致）：
    - 部分年月日時間: '2012-03', '2012-03-01', '2012-03-01 05', '2012-03-01 05:06'.
    - 使用 'T' 或空格分割: '2012-03-01T12:22:33.123', '2012-03-01 12:22:33.123'.
    - 時區(qū)設定: '2012-03-01T12:22:33Z', '2012-03-01T12:22:33+8000', '2012-03-01T12:22:33-05:00'.
  - 其他的時間字符串，包括（均表示本地時間）: '2012', '2012-3-1', '2012/3/1', '2012/03/01', '2009/6/12 2:00', '2009/6/12 2:05:08', '2009/6/12 2:05:08.123'
- 或者用戶自行初始化的 Date 實例：
  - 注意，用戶自行初始化 Date 實例的時候，瀏覽器的行為有差異，不同字符串的表示也不同。
  - 例如：在 chrome 中，new Date('2012-01-01') 表示 UTC 時間的 2012 年 1 月 1 日，而 new Date('2012-1-1') 和 new Date('2012/01/01') 表示本地時間的 2012 年 1 月 1 日。在 safari 中，不支持 new Date('2012-1-1')這種表示方法。
  - 所以，使用 new Date(dataString) 時，可使用第三方庫解析（如 moment），或者使用 echarts.number.parseDate，或者參見這里。

當需要對個別數據進行個性化定義時：

數組項可用對象，其中的 value 像表示具體的數值，如：

[
    12,
    34,
    {
        value : 56,
        //自定義標簽樣式，僅對該數據項有效
        label: {},
        //自定義特殊 itemStyle，僅對該數據項有效
        itemStyle:{}
    },
    10
]
// 或
[
    [12, 33],
    [34, 313],
    {
        value: [56, 44],
        label: {},
        itemStyle:{}
    },
    [10, 33]
]

空值：

當某數據不存在時（ps：不存在不代表值為 0），可以用 '-' 或者 null 或者 undefined 或者 NaN 表示。

例如，無數據在折線圖中可表現(xiàn)為該點是斷開的，在其它圖中可表示為圖形不存在。

zlevel

自定義圖所有圖形的 zlevel 值。

zlevel用于 Canvas 分層，不同zlevel值的圖形會放置在不同的 Canvas 中，Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動畫）的組件設置成一個單獨的zlevel。需要注意的是過多的 Canvas 會引起內存開銷的增大，在手機端上需要謹慎使用以防崩潰。

zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面。

自定義圖組件的所有圖形的z值，默認值為 2?？刂茍D形的前后順序。z值小的圖形會被z值大的圖形覆蓋。

z相比zlevel優(yōu)先級更低，而且不會創(chuàng)建新的 Canvas。

silent

圖形是否不響應和觸發(fā)鼠標事件，默認為 false，即響應和觸發(fā)鼠標事件。

animation

是否開啟動畫，默認為true。

animationThreshold

是否開啟動畫的閾值，默認值為 2000，當單個系列顯示的圖形數量大于這個閾值時會關閉動畫。

animationDuration

初始動畫的時長，默認為 1000，支持回調函數，可以通過每個數據返回不同的 delay 時間實現(xiàn)更戲劇的初始動畫效果：

animationDuration: function (idx) {
    // 越往后的數據延遲越大
    return idx * 100;
}

animationEasing

初始動畫的緩動效果，默認為 cubicOut。

animationDelay

初始動畫的延遲，支持回調函數，可以通過每個數據返回不同的 delay 時間實現(xiàn)更戲劇的初始動畫效果。

如下示例：

animationDelay: function (idx) {
    // 越往后的數據延遲越大
    return idx * 100;
}

animationDurationUpdate

數據更新動畫的時長，默認時長為 300。

支持回調函數，可以通過每個數據返回不同的 delay 時間實現(xiàn)更戲劇的更新動畫效果：

animationDurationUpdate: function (idx) {
    // 越往后的數據延遲越大
    return idx * 100;
}

animationEasingUpdate

數據更新動畫的緩動效果，默認效果為 cubicOut。

animationDelayUpdate

數據更新動畫的延遲，支持回調函數，可以通過每個數據返回不同的 delay 時間實現(xiàn)更戲劇的更新動畫效果。

如下示例：

animationDelayUpdate: function (idx) {
    // 越往后的數據延遲越大
    return idx * 100;
}

網站名稱：創(chuàng)新互聯(lián)ECharts教程：ECharts自定義系列屬性
文章出自：http://fisionsoft.com.cn/article/dhhdeji.html

新聞中心

ECharts自定義系列屬性

其他資訊