Echarts總結(jié)

簡介：js圖標庫，可以兼容在pc和移動端。Echarts底層使用canvas實現(xiàn)，支持多圖表、組件的聯(lián)動和混搭展現(xiàn)。

常用圖表類型：折線圖（區(qū)域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、餅圖（環(huán)形圖）、雷達圖（填充雷達圖）等圖表。

常用配置子組件：標題，詳情氣泡、圖例、值域、數(shù)據(jù)區(qū)域、軸、工具箱等。

注： 本篇總結(jié)僅針對項目中使用的功能點整理總結(jié)，并不能涵蓋Echart全部內(nèi)容，更多需求請參考Echarts官方文檔。

1.tooltip（詳情氣泡）

配置實例：

tooltip: {

        trigger: 'axis',

        confine: true,

        backgroundColor: pointColor,

        textStyle: {

          color: '#fff',

        },

        formatter: function(params) {

// 區(qū)別定制每個tooltip浮動層中的文案

          return params[0].data.hasVal ? `${params[0].value} ${params[0].data.tipText}` : `${params[0].data.noValueText}`

        },

        axisPointer: {

          lineStyle: {

            color: 'rgba(139,185,255, 0.2)',

          },

        },

        // pos 鼠標當前位置， dom tooltip的dom對象， Echart容器當前尺寸

        position: function (pos, params, dom, rect, size) {

          let yPos = '0%' // 垂直方向固定在畫布頂部

          let xPos = 0

          // 左側(cè)的一部分數(shù)據(jù)

          if (pos[0] < size.viewSize[0] / 2) {

            xPos = pos[0] + 0  // 鼠標點位置，tootip在右

          } else { // 右側(cè)的一部分數(shù)據(jù)

            xPos = pos[0] - dom.offsetWidth - 0 // 鼠標點位置減去tooltip的寬度，tooltip在左

          }

          return [xPos, yPos]

        },

      } 

各項說明如下：

-trigger： tooltip浮動層的觸發(fā)方式, 'axis': 鼠標在整個畫布上任意位置（整個坐標軸范圍）均能觸發(fā)，觸發(fā)時會在鼠標最近圖形上疊加顯示軸線,主要在柱狀圖，折線圖使用；'item'：鼠標只能在數(shù)據(jù)項圖形上面觸發(fā)，例如折現(xiàn)圖時，點擊折點才能觸發(fā)。注意: trigger的配置方式會影響其他tooltip配置項的配置。

-confine: 是否將 tooltip 框限制在圖表的區(qū)域內(nèi)。當圖表外層的 dom 被設(shè)置為 'overflow: hidden'，或者移動端窄屏，導(dǎo)致 tooltip 超出外界被截斷時，此配置比較有用。

-backgroundColor/borderColor: tooltip浮層的背景顏色及邊框顏色。注意: 此兩種樣式所有的tooltip均保持統(tǒng)一，不能根據(jù)數(shù)據(jù)進行對于某一個數(shù)據(jù)的tooltip特殊設(shè)置。

-textStyle： tooltip符層中字體的統(tǒng)一樣式設(shè)置。

-axisPointer： 僅當tooltip的trigger配置為'axis'時有效

，設(shè)置疊加軸線的樣式。

-formatter： formatter是tooltip中非常有用的一項配置。此項配置可以根據(jù)數(shù)據(jù)定制生成tooltip中的文本內(nèi)容。如果沒有改項配置，默認文本內(nèi)容是橫軸和縱軸的值。

  // formatter的配置

  // 1.字符串模版 

  // 模板變量有 {a}, ，{c}，u0z1t8os，{e}，分別表示系列名，數(shù)據(jù)名，數(shù)據(jù)值等。 詳細內(nèi)容請查詢官網(wǎng)



  formatter: '{b0}: {c0}
{b1}: {c1}'



  // 2.回調(diào)函數(shù)

  // 回調(diào)函數(shù)參數(shù) 

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

  // 在 trigger 為 'axis' 的時候，params 是多個系列的數(shù)據(jù)數(shù)組。每一項的格式如下

  {

    componentType: 'series', // 系列類型



    seriesType: string, // 系列在傳入的 option.series 中的 index



    seriesIndex: number, // 系列名稱



    seriesName: string, // 數(shù)據(jù)名，類目名

    name: string, // 數(shù)據(jù)在傳入的 data 數(shù)組中的 index



    dataIndex: number, // 傳入的原始數(shù)據(jù)項



    data: Object, // 傳入的數(shù)據(jù)值



    value: number|Array, // 數(shù)據(jù)圖形的顏色

    color: string,

}

  其中的data項可以用來區(qū)別每一項數(shù)據(jù)的文案，data的格式與series中的data項配置相關(guān)聯(lián)，詳細可見上例代碼。

-position： tooltip的顯示位置。指可以是數(shù)組，也可以是回調(diào)函數(shù)。

// 回調(diào)函數(shù)參數(shù) (point, params, dom, rect, size)，需要return出一個數(shù)組表示tooltip的位置。

point: 鼠標位置，如 [20, 40]。

params: 同 formatter 的參數(shù)相同。

dom: tooltip 的 dom 對象。

rect: 只有鼠標在圖形上時有效，是一個用x, y, width, height四個屬性表達的圖形包圍盒。

size: 包括 dom 的尺寸和 echarts 容器的當前尺寸

<font size=3 color=#D2691E>其中僅有point參數(shù)是與用戶操作相關(guān)的位置變量，代表了用戶觸摸鼠標在畫布上的位置。因此我們僅能跟據(jù)此項計算tooltip的位置，暫無方法知道距離鼠標點最近的數(shù)據(jù)點的位置，并讓tooltip根據(jù)折點定位。</font>

tooltip未能實現(xiàn)的功能點：

tooltip根據(jù)距離鼠標點最近的數(shù)據(jù)點進行定位；軸線的高度與數(shù)據(jù)的高度一致，而不是縱向貫穿畫布；折點覆蓋軸線，層級在上

2. xAxis 及yAxis (橫縱坐標軸)

  xAxis: {

      type: 'category',

      boundaryGap: false,

      data: xAxisData,

      axisLine: {

        show: false,

      },

      axisTick: {

        show: false,

      },

      axisLabel: {

        interval: 0,

        color: '#666',

      },

      formatter: function(params) {

return `${params}\\nn2017` // \\nn 換行符

      },

  },

  yAxis: {show: false},

-type: 'value',連續(xù)數(shù)據(jù)；'category',離散數(shù)據(jù)，最常用，必須通過data項來設(shè)置數(shù)據(jù)；'time'，時間軸；'log': 對數(shù)軸

-boundaryGap： 坐標軸兩邊是否留白。

-data： 軸刻度點的數(shù)據(jù)。如果需要定制軸標簽文字內(nèi)容，需搭配使用formatter配置。

-axisLine：坐標軸線相關(guān)樣式

-axisTick： 軸線上的刻度的相關(guān)樣式。其中interval項控制刻度顯示，有的時候需要間隔幾個刻度顯示一個，可以用此項來控制。或者手動將data中不顯示的刻度值設(shè)置為空字符串。

-axisLabel： 軸標簽的相關(guān)樣式。

-formatter： 此項配置在官網(wǎng)xAxis配置文檔中并不能查詢到，但是可以使用?？梢杂脕矶ㄖ戚S標簽的顯示內(nèi)容，接收的params參數(shù)即為刻度點的data值。

<font size=3 color=#D2691E>注： 軸的formatter配置的換行效果與tooltip的formatter配置沖突，暫不明原因。</font>

3.grid（網(wǎng)格）

grid主要用來配置網(wǎng)格組件的顯示及樣式等

最常用的四個配置是<font size=3 color=#D2691E>left,top,right, bottom。這四項用來控制圖形區(qū)域到畫布邊緣的留白。</font>取值可以是數(shù)字也可以是百分比。

4.series（圖表類型及配置）

series是Echarts最必要也是最重要的配置。series是有單個圖表配置對象組成的數(shù)組，當其length > 1時，表示了有多個分別設(shè)置的圖表在畫布上進行了疊加。由于圖表類型過多，本篇僅選擇折線圖舉例說明。

series: [{

          data: seriesData,

          // data: [820, 932, 901, 934, 1290, 1330, 1320],

          type: 'line',

          areaStyle: {color: areacolor},

          symbol: 'circle',

          symbolSize: 6,

          itemStyle: {

            normal: {

                color: pointColor,

                lineStyle: {

                    color: lineColor

                }

          }

        },

      }],

-data: 圖表的數(shù)據(jù)。舉例如下：

const datalist = [

{y: '1', color: 'red', tipText: '重度污染',hasVal: true},

{y: '1', color: 'blue', tipText: '空氣良好',hasVal: true},

{y: '1', color: 'yellow', tipText: '中度污染',hasVal: true},

{y: '0', color: '', tipText: '',hasVal:false},

]

const seriesData = datalist.map((item,index) => {

    return {

        value: item.y, // Echart自帶配置

        tipText: `${item.y} ${item.tipText}`, 

        hasVal: item.hasVal,

        noValueText: '空數(shù)據(jù)',

        emphasis: {

          itemStyle: {

              color:item. color

          }

        },

        themeColor,

        symbolSize: item.hasVal ? 8 : 0, // 有值的點展示，沒有值的點不展示

      }

  })

其中，value， emphasis， symbolSize 是Echarts自帶的配置，除此之外可任意添加配置項，注意不要與自帶配置的key重讀。

<font size=3 color=#D2691E>data中配置的每個字段都可以在tooltip中的formatter的通過其參數(shù)params[0].data來獲取，可以用來幫助我們實現(xiàn)tooltip文案自定義。</font>具體請參閱上文tooltip中代碼。

emphasis用來設(shè)置當某個折點被高亮時候的樣式；symbolSize用來設(shè)置折點被高亮時候的大小。此兩項是可以針對單個數(shù)據(jù)點進行設(shè)置的。

-type: 圖表的類型。

-areaStyle: 圖表的區(qū)域顏色，可以設(shè)置為漸變色。

-symbol： 折點的圖形。ECharts 提供的標記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'?？梢酝ㄟ^ 'image://url' 設(shè)置為圖片，其中 URL 為圖片的鏈接，或者 dataURI。

-symbolSize： 折點沒有高亮時大小，統(tǒng)一設(shè)置。

-itemStyle： 折線拐點的樣式。

5.在React Native 項目中的使用

簡單的圖表，當要給Echart組件設(shè)置一個固定的寬高，組件會自動計算每個刻度的值，并在畫布上畫出。

而在RN項目中，當data的數(shù)據(jù)長度并不固定時，我們需要每個刻度的長度固定，則需要根據(jù)data的長度來計算Echart的長度值，對width屬性進行設(shè)置。這樣圖表會更加美觀，不會因為data數(shù)據(jù)變化時，刻度的長短變化出現(xiàn)跳動感。

也可以在Echart組件外面使用scrollView組件，以實現(xiàn)Echart的滾動。如下代碼所示：

const {

  width: windowWidth,

  height: windowHeight,

} = Dimensions.get('window');

 // data是圖表數(shù)據(jù)

  getChartWidth() {

    const {data} = this.props;

    return (windowWidth / 6) * data.length;

  } 



<ScrollView

    ref={(r) => { this.chartScroll = r; }}

    horizontal

    showsHorizontalScrollIndicator={false}

    onContentSizeChange={this.onContentSizeChange}

  >

    {

      seriesData.length > 0 ? 

      : null

    }