Echarts formatter

提示框浮层内容格式器，支持字符串模板和回调函数两种形式。

回调函数

(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]

第一个参数 params 是 formatter 需要的数据集。格式如下： copy至官方文档

{
    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,


    // 饼图的百分比
    percent: number,


}

第二个参数 ticket 是异步回调标识，配合第三个参数 callback 使用。 第三个参数 callback 是异步回调，在提示框浮层内容是异步获取的时候，可以通过 callback 传入上述的 ticket 和 html 更新提示框浮层内容。

示例：

写法一： 

 tooltip: {
    formatter: function (params, ticket, callback) {
      return '<a style="color: red">red</a>';
    }
  },

注意：该写法仅限于 echarts 5.2.0 以上版本试用

 写法二： 

 tooltip: {
    formatter: function (params, ticket, callback) {
      const content = '<a style="color: red">red</a>';
      callback(ticket,content)
    }
  },

注意：该写法仅限于 echarts 5.2.0 以下版本试用 

WARNＩＮＧ　关于各种label 的formatter 是不支持 ticket, callback 写法

写法三： rich 富文本写法 （label 支持这种写法）

    label: {
        show: true,
        formatter: [
          '{a|这段文本采用样式a}',
          '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
        ].join('\n'),
        rich: {
          a: {
            color: 'red',
            lineHeight: 10
          },
          b: {
            backgroundColor: '#f0f',
            height: 40
          },
          x: {
            fontSize: 18,
            fontFamily: 'Microsoft YaHei',
            borderColor: '#449933',
            borderRadius: 4
          }
        }
      }