前言

做大屏、資料視覺化的話，圖表類的必不可少。

這其中使用 Echarts 的很多。

一、引數動態返回值

Echarts 中引數的配置功能很強大。對任何一項的配置都很細緻。

雖然這樣，但是有時候不一定能到達需求。這時候能根據資料動態改變就好了。

在官方配置項中，formatter 是支援函式回撥的。官方的文件：

formatter: function(params) => string
// 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,

}

可以根據當前資料項動態返回。

一般用這個配置的也挺多。

其實其他項也可以這樣配置，如：color、backgroundColor、borderColor 等。

下面是 bar 型別柱狀顏色：

  series: [{
    name: '整改情況排名',
    type: 'bar',
    itemStyle: {
      color: function(params) {
　　　　　// colors  是自定義的顏色陣列
        var num = colors.length
        return colors[params.dataIndex % num]
      }
    },
    data: []
  }]

二、繫結 Options 問題

這個是問題是在實際中遇到的。

具體場景：同一個元件中有兩個 Echarts bar 圖表。所以在定義 options 用同一個，在處理資料時再處理：

let tempOption = JSON.parse(JSON.stringify(czOptions))
// 其他處理
this.options = tempOption

tempOption = JSON.parse(JSON.stringify(czOptions))
// 其他處理
this.optionsR = tempOption

這樣是簡單的深度拷貝，能使兩個相互獨立出來沒有關聯，互不影響。

但是會把 function 型別的屬性忽略掉（所以上面寫的動態引數無用）

這時就只能在拷貝後再對動態引數賦值：

      tempOption.series[0].itemStyle.color = function(params) {
        var num = colors.length
        return colors[params.dataIndex % num]
      }

這樣能正常展示