目录
- 1 字符串模板
- 1.1 x坐标轴、y坐标轴
- 1.2 饼图
- 1.3 折线图、柱状图
- 1.4 多个系列
- 2 函数模板
- 2.1 x坐标轴、y坐标轴
- 2.2 提示框（tooltip）
- 3 回调函数
- 附：Echarts中数据显示实现formatter
- 总结
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,
}
附：Echarts中数据显示实现formatter
对于第一种横纵坐标数据显示的格式问题，如：对于一个纵坐标用来展示占比率0.5要将这个值展示位50%，对于坐标轴的x，y轴的设置分别对应着xAxis和yAxis这两这个属性，我们要将纵轴的值变换成50%，只需要在原始数值的基础上乘以100然后拼接上%就可以了，具体的实现代码如下：
yAxis : [
{
type : 'value',
name : 'y轴名称',
axisLabel : {
formatter : function(val){
return val*100+"%";
}
}
}
]
对于第二个问题坐标轴中柱状图或者折线图的数据，这个主要是用来满足需求：要在坐标轴的每个点上将各自对应的数据显示下来，这块主要用到的是series中的label属性，主要实现的代码如下：
series ： [
{
name : '和legend的某一项对应',
type : 'bar',
label : {
normal : {
show : true,
position : 'top'
}
}
data : data
}
]
series中的name对应的值要是legend中的某一项，type就是你的这个图形是什么类型，可以是bar或者line等，label中的show是用来设置是否显示，position用来设置数据显示在图形的位置，data就是要显示的数据。
对于第三种问题，鼠标滑到指定区域时的数据展示问题，这块用来的属性主要是tooltip，具体的代码实现如下：
tooltip : {
trigger : 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter : '{a0}:{c0}<br />{a1}:{c1}'
}
当trigger为’item’时只会显示该点的数据，为’axis’时显示该列下所有坐标轴所对应的数据，重要的就是这个formatter属性，这个属性是具体用来操作显示的数据格式的，对于官方文档给的这个格式我最初是有点懵逼的，后来我再认真的看了一下关于这个属性的说明才发现这种写法是真的好用，模板变量有 {a}, {b}，{c}，{d}，分别表示系列名，数据名，数据值等。 在 trigger 为 ‘axis’ 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：
- 折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
- 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
- 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
- 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
总的来说这块的abcd分别对应着不同的名称，如果不是很理解在显示的时候可以自己多去尝试几次就发现规律了，当然刚开始不理解的我是用如下方法实现的：
formatter(params){
console.log(params);
}
通过这个写法来输出它的所有属性，然后可以在里面找到所需要的几个属性，可以说这是一种很笨的方法，不推荐去使用这个方式，最好就是采用上面那种{a0}的那种方法来实现，最后加上官网配置项地址，所有的属性都可以在这里找到说明和使用方法。
总结
到此这篇关于ECharts formatter属性设置的3种方法的文章就介绍到这了,更多相关ECharts formatter属性设置内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！