Echarts 使用（一）：动态参数

前言

做大屏、数据可视化的话，图表类的必不可少。

这其中使用 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,

}

可以根据当前数据项动态返回。

一般用这个配置的也挺多。

其实其他项也可以这样配置，到现在验证了 bar 的 itemStyle 的 color 这样可行其他不可行。

下面是 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]
      }

这样能正常展示

推荐：

Echarts 配置项说明