ECharts formatter属性设置的3种方法(字符串模板,函数模板,回调函数)

 更新时间:2023年02月14日 12:31:55   作者:旭东怪  
formatter有两种写法,一种字符串模板,另一种是回调函数,下面这篇文章主要给大家介绍了关于ECharts formatter属性设置的3种方法,分别是字符串模板,函数模板,回调函数,需要的朋友可以参考下

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属性设置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 简单使用webpack打包文件的实现

    简单使用webpack打包文件的实现

    这篇文章主要介绍了简单使用webpack打包文件的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • javaScript对文字按照拼音排序实现代码

    javaScript对文字按照拼音排序实现代码

    这篇文章主要介绍了javaScript对文字按照拼音排序实现代码,有需要的朋友可以参考一下
    2013-12-12
  • JS实现代码雨特效

    JS实现代码雨特效

    这篇文章主要为大家详细介绍了JS实现代码雨特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • JS如何对Iframe内外页面进行操作总结

    JS如何对Iframe内外页面进行操作总结

    iframe标签是一个内联框架,即用来在当前HTML页面中嵌入另一个文档的,且所有主流浏览器都支持iframe标签,这篇文章主要给大家介绍了关于JS如何对Iframe内外页面进行操作的相关资料,需要的朋友可以参考下
    2021-10-10
  • js LZ77算法的实现代码

    js LZ77算法的实现代码

    JS操作二进制很麻烦,而且一直没有一个好的无损压缩工具来实现纯文本的压缩。
    2010-04-04
  • 微信小程序实现底部弹出框封装

    微信小程序实现底部弹出框封装

    这篇文章主要为大家详细介绍了微信小程序底部弹出框封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • javascript将非数值转换为数值

    javascript将非数值转换为数值

    parseInt()不能转换浮点型数值,我们用parseFloat()来解决。这篇文章主要介绍了javascript将非数值转换为数值,需要的朋友可以参考下
    2018-09-09
  • JavaScript 事件代理需要注意的地方

    JavaScript 事件代理需要注意的地方

    这篇文章主要介绍了JavaScript 事件代理需要注意的地方,帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下
    2020-09-09
  • JavaScript缺少insertAfter解决方案

    JavaScript缺少insertAfter解决方案

    这篇文章主要介绍了JavaScript缺少insertAfter解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • JS实现的哈夫曼编码示例【原始版与修改版】

    JS实现的哈夫曼编码示例【原始版与修改版】

    这篇文章主要介绍了JS实现的哈夫曼编码,结合实例形式分析了基于JavaScript定义、使用哈夫曼树进行编码、解码等相关操作技巧,需要的朋友可以参考下
    2018-04-04

最新评论