Echarts图表之formatter用法

前言：formatter格式化方法。格式化之所以存在，主要是因为我们想把一些不够人性化的内容通过处理让其变成我们想要的样子，便于用户更好地理解内容。

首先ECharts官网API提供了一些formatter格式化参数模板：

1. 字符串模板

模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。在 trigger 为'axis' 的时候，会有多个系列的数据，此时可以通过{a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。不同图表类型下的{a}，{b}，{c}，{d}含义不一样。其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：

u 折线（区域）图、柱状（条形）图、K线图: {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）

u 散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）

u 地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）

u 饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）

2. 回调函数

回调函数格式：(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string

ECharts图表组件内的格式化常用的地方：

1. tooltip

图表内数据点的悬浮框提示框信息展现的时候我们可以加以数据格式化，以便于更好地观察数据和分析数据。

比如：在数值后加一个单位字符串

tooltip: {
            trigger:'item',
            padding:[20,10,20,10],
            formatter:'{a} </br>{b}:{c}%'
        },

2. axisLabel

坐标轴刻度上面的刻度格式化，比如Y表示长度，我们往往需要在每一个刻度值后面带上“m”的单位，Y轴意义不同，加不同的单位。

格式化Y轴刻度的示例代码如下：

yAxis: [
            {
                type: 'value',
                axisLabel: {
                    show:true,
                    formatter:'{value} m'
                },
                boundaryGap: ['0','20%']
            }
        ],

3. series内的label

series: [
            {
                name:'常驻城市人数比例',
                type:'bar',
                barWidth:'45',
               data:[10,15,20,25,30],
//                data:citiesRate,
                itemStyle: {
                    normal: {
                        color:new echarts.graphic.LinearGradient(
                            0,0,0,1,
                            [
                                {offset:0,color:'#7EDBFD'},
                                {offset:1,color:'#3169c7'}
                            ]
                        ),
                        label: {
                            show:true,
                            position:'top',
                            formatter:'{c}%'
                        }
                    },
                    emphasis: {
                        barBorderWidth:1,
                        shadowBlur:10,
                        shadowOffsetX:0,
                        shadowOffsetY:0,
                        shadowColor:'rgba(0,0,0,0.7)'
                    }
                }
            }
        ]

注意点：formatter格式化不但可以用echarts提供的模板，还可使用function。例如：

label:{
   normal:{
      formatter:function(v){
         vartext=v.name;
         returntext.length>10?text.substr(0,10)+"...":text;
      }
   }
}

Echarts图表之formatter用法相关推荐

转：ECharts图表组件之简单关系图：如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转...
站点地图不外乎就是罗列一个网站的层次结构,提炼地讲就是一个关系结构图.那么我们如何巧用ECharts图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针 ...
***ECharts图表入门和最佳实践
ECharts数据图表系统? 5分钟上手! [ECharts简介] ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动, ...
HTML设置字体大小自适应屏幕与echarts图表颜色根据数据大小实时刷新图表颜色
设置html文字大小根据页面大小自适应,在使用rem之前是使用的px和百分比,后来发现页面缩放或在小屏幕的电脑显示不尽人意,后改用rem,写法如:font-size: .21rem;或font-siz ...
Vue动态渲染echarts图表
最近做项目遇到这样一个场景,有一个标签选择界面,选择不同的标签需要展示不同的图表有可能折线图,有可能柱状图,也可能饼图,图表的类型由后端返回,标签可以多选.这个时候就需要动态来渲染不定数量和类型的ec ...
Echarts 图表一些细节设置 lenged 双Y轴等
echarts 示例 Echarts图表效果图(Make A Pie替代) Make A Pie 是由社区贡献者维护的用于 Apache ECharts 作品分享的第三方非官方社区.平时做Echart ...
Vue 之 echarts 图表数据可视化的基础使用（简单绘制各种图表、地图）
Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 目录 Vue 之 echarts 图表数据可视化的基础使用(简单绘制各种图表.地图) 一.简单介绍二.环境搭建三.使 ...
SpringBoot+LayUI+MybatisPlus+Echarts图表前后端分离实现数据统计功能
前言: 小伙伴们,大家好,我是狂奔の蜗牛rz,当然你们可以叫我蜗牛君,我是一个学习Java快一年时间的小菜鸟,同时还有一个伟大的梦想,那就是有朝一日,成为一个优秀的Java架构师. 首先给各位粉丝朋友 ...
vue+docxtemplater实现读取word文档，根据后端数据生成echarts图表插入word，并下载为docx格式文件
一.需求 word自带的图表不能满足需求,并且编写过程繁琐,需要写一个页面,主要功能是能读取服务器的word模板,根据后台给的数据,自动生成echarts图表并插入到word指定位置,然后点击能下载插 ...
java后台生成echarts图表
java后台生成echarts图表最近博主在做一个项目,需要后台出图和前端echarts一样的图,比如折线图和柱状图. 经过一番整理,顺利实现了该功能,特此分享,需要白嫖的,拿走不谢. 直接上效果图 ...

Echarts图表之formatter用法

Echarts图表之formatter用法相关推荐

最新文章

热门文章