ECharts formatter属性设置3种方式（字符串模板，函数模板，回调函数）

淡淡的烟草味﹌ 2023-10-05 11:26 4阅读 0赞

### 1 字符串模板 ###

#### 1.1 x坐标轴、y坐标轴 ####

示例：

// 使用字符串模板，模板变量为刻度默认标签 {value}
    formatter: '{value} kg'

#### 1.2 饼图 ####

模板变量：

（1）\{a\}：系列名，series.name。

（2）\{b\}：数据名，series.data.name。

（3）\{c\}：数据值，series.data.value。

（4）\{d\}：百分比。

（5）\{@xxx\}：`数据中名为`'xxx'`的维度的值，如`\{@product\}`表示名为`'product'\` 的维度的值。

（6）\{@\[n\]\}：`数据中维度`n`的值，如`\{@\[3\]\}\` 表示维度 3 的值，从 0 开始计数。

示例：

formatter:"{b}：{c}({d}%)"

#### 1.3 折线图、柱状图 ####

模板变量：

（1）\{a\}：系列名，series.name。

（2）\{b\}：数据名，xAxis.data。

（3）\{c\}：数据值，yAxis.data。

（5）\{@xxx\}：`数据中名为`'xxx'`的维度的值，如`\{@product\}`表示名为`'product'\` 的维度的值。

（6）\{@\[n\]\}：`数据中维度`n`的值，如`\{@\[3\]\}\` 表示维度 3 的值，从 0 开始计数。

示例：

formatter:"{a}<br/>{b}：{c}"

#### 1.4 多个系列 ####

示例：

formatter: '{b0}: {c0}<br />{b1}: {c1}'

### 2 函数模板 ###

#### 2.1 x坐标轴、y坐标轴 ####

示例：

// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
    formatter:function (value, index) {
        return value;
    }

#### 2.2 提示框（tooltip） ####

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

示例：

formatter: function (params, ticket, callback) {
        $.get('detail?name=' + params.name, function (content) {
            callback(ticket, toHTML(content));
        });
        return 'Loading';
    }

### 3 回调函数 ###

语法：(params: Object|Array) => string

参数 params：

{
        componentType: 'series',
        // 系列类型
        seriesType: string,
        // 系列在传入的 option.series 中的 index
        seriesIndex: number,
        // 系列名称
        seriesName: string,//series.name
        // 数据名，类目名
        name: string,
        // 数据在传入的 data 数组中的 index
        dataIndex: number,
        // 传入的原始数据项
        data: Object,
        // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）
        value: number|Array|Object,//series.data
        // 坐标轴 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,
    
    }

示例：

未完待续

[旭东怪的个人空间\_哔哩哔哩\_Bilibili旭东怪，人生低谷不可怕，可怕的是坚持不到人生转折点的那一天;旭东怪的主页、动态、视频、专栏、频道、收藏、订阅等。哔哩哔哩Bilibili，你感兴趣的视频都在B站。![1d5330f89298af44e002d6b2230b47659e28c05a.jpg][]https://space.bilibili.com/484264966?spm\_id\_from=333.1007.0.0][Bilibili_Bilibili_B_1d5330f89298af44e002d6b2230b47659e28c05a.jpg_https_space.bilibili.com_484264966_spm_id_from_333.1007.0.0]

[1d5330f89298af44e002d6b2230b47659e28c05a.jpg]: https://i1.hdslb.com/bfs/face/1d5330f89298af44e002d6b2230b47659e28c05a.jpg
[Bilibili_Bilibili_B_1d5330f89298af44e002d6b2230b47659e28c05a.jpg_https_space.bilibili.com_484264966_spm_id_from_333.1007.0.0]: https://space.bilibili.com/484264966?spm_id_from=333.1007.0.0