如何標注ECharts折線圖

對于 ECharts 折線圖標注的設置我們可以從這幾個方面入手：首先設置折線圖標注的圖形；然后控制該標注的大小、旋轉角度等；接著就可以設置折線圖標注的樣式、文本了（可以通過 normal 和 emphasis 兩種狀態(tài)進行設置）；最后，您可以設置標注動畫，如動畫的閾值、時長、初始動畫的緩動效果等等。這只是本節(jié)內容的一個概述，詳細的操作過程還得查閱文章內容。

• series[i]-line.markPoint Object

  設置 ECharts 折線圖標注。

• series[i]-line.markPoint.symbol string[ default: 'pin' ]

  折線圖標注的圖形設置。

  ECharts 提供的標記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

  也可以通過 'image://url' 設置為圖片，其中 url 為圖片的鏈接，或者 dataURI。

  可以通過 'path://' 將圖標設置為任意的矢量路徑。這種方式相比于使用圖片的方式，不用擔心因為縮放而產生鋸齒或模糊，而且可以設置為任意顏色。路徑圖形會自適應調整為合適的大小。路徑的格式參見 SVG PathData?？梢詮?Adobe Illustrator 等工具編輯導出。

• series[i]-line.markPoint.symbolSize number, Array, Function[ default: 50 ]

  折線圖標注的大小，可以設置成諸如 10 這樣單一的數(shù)字，也可以用數(shù)組分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。

  如果需要每個數(shù)據(jù)的圖形大小不一樣，可以設置為如下格式的回調函數(shù)：
  

  (value: Array|number, params: Object) => number|Array

  其中第一個參數(shù) value 為 data 中的數(shù)據(jù)值。第二個參數(shù)params 是其它的數(shù)據(jù)項參數(shù)。

• series[i]-line.markPoint.symbolRotate number

  折線圖標注的旋轉角度。

  注意：在 markLine 中當 symbol 為 'arrow' 時會忽略 symbolRotate 強制設置為切線的角度。

• series[i]-line.markPoint.symbolOffset Array[ default: [0, 0] ]

  折線圖標注相對于原本位置的偏移。默認情況下，標記會居中置放在數(shù)據(jù)對應的位置，但是如果 symbol 是自定義的矢量路徑或者圖片，就有可能不希望 symbol 居中。這時候可以使用該配置項配置 symbol 相對于原本居中的偏移，可以是絕對的像素值，也可以是相對的百分比。

  例如 [0, '50%'] 就是把自己向上移動了一半的位置，在 symbol 圖形是氣泡的時候可以讓圖形下端的箭頭對準數(shù)據(jù)點。

• series[i]-line.markPoint.silent boolean[ default: false ]

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

• series[i]-line.markPoint.label Object

  折線圖標注的文本。

• series[i]-line.markPoint.itemStyle Object

  折線圖標注的樣式。

• series[i]-line.markPoint.data[i] Object

  折線圖標注的數(shù)據(jù)數(shù)組。每個數(shù)組項是一個對象，有下面幾種方式指定標注的位置。

  1. 通過 x, y 屬性指定相對容器的屏幕坐標，單位像素，支持百分比。
  2. 用 coord 屬性指定數(shù)據(jù)在相應坐標系上的坐標位置，單個維度支持設置 'min', 'max', 'average'。
  3. 直接用 type 屬性標注系列中的最大值，最小值。這時候可以使用 valueIndex 指定是在哪個維度上的最大值、最小值、平均值。或者可以使用 valueDim 指定在哪個維度上的最大值、最小值、平均值。

  當多個屬性同時存在時，優(yōu)先級按上述的順序。

  示例：

  data: [
      {
          name: '最大值',
          type: 'max'
      }, 
      {
          name: '某個坐標',
          coord: [10, 20]
      }, {
          name: '固定 x 像素位置',
          yAxis: 10,
          x: '90%'
      }, 
      {
          name: '某個屏幕坐標',
          x: 100,
          y: 100
      }
  ]

• series[i]-line.markPoint.animation boolean[ default: true ]

  是否在折線圖標注中開啟動畫。

• series[i]-line.markPoint.animationThreshold number[ default: 2000 ]

  是否開啟折線圖標注動畫的閾值，當單個系列顯示的圖形數(shù)量大于這個閾值時會關閉動畫。

• series[i]-line.markPoint.animationDuration number[ default: 1000 ]

  折線圖標注初始動畫的時長，支持回調函數(shù)，可以通過每個數(shù)據(jù)返回不同的 delay 時間實現(xiàn)更戲劇的初始動畫效果：
  

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

• series[i]-line.markPoint.animationEasing string[ default: cubicOut ]

  折線圖標注初始動畫的緩動效果。不同的緩動效果可以參考 緩動示例。

• series[i]-line.markPoint.animationDelay number, Function[ default: 0 ]

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

  如下示例：

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

  也可以看該示例

• series[i]-line.markPoint.animationDurationUpdate number, Function[ default: 300 ]

  折線圖標注數(shù)據(jù)更新動畫的時長。

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

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

• series[i]-line.markPoint.animationEasingUpdate string[ default: cubicOut ]

  折線圖標注數(shù)據(jù)更新動畫的緩動效果。

• series[i]-line.markPoint.animationDelayUpdate number, Function[ default: 0 ]

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

  如下示例：

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

  也可以看該示例