echarts饼图的图例 formatter函数详解 不能显示具体数值

最新推荐文章于 2024-03-12 10:34:20 发布
最新推荐文章于 2024-03-12 10:34:20 发布
阅读量8.6k 收藏
点赞数
分类专栏： echarts javascript 文章标签： echarts JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/KateCateCake/article/details/80137158
版权

今天在项目中用echarts，设计给了一个图，左边是图例，图标加类别名加具体数值，右边是饼图。改了各种bug之后，发现并不能显示具体的数值，formatter函数竟然只有一个参数，就是data里面的name，真的是令人震惊、令人头秃。

已经解决了这么多bug的我十分不甘心用div、span画一个图例出来，加一些交互动画，灵机一动，就用蠢一点的方法，直接把data中的对应的value找出来，在formatter中拼好return就行了。
完结，撒花~

KateCateCake
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
echarts饼图各个板块之间的空隙如何实现
01-22
本文主要介绍echarts饼图各个板块之间间的空隙怎么实现 关键代码 itemStyle: { normal: { borderWidth: 1, // 间距的宽度 borderColor: '#fff', //背景色 } }, 代码层级 效果图 到此这篇关于echarts饼图各个板块之间的空隙如何实现的文章就介绍到这了,更多相关echarts饼图板块的空隙内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！
echarts饼图自动切换代码
08-28
整个项目自己写的网页，做项目的时候写的，里面包含地图及地区各个区域间的传输，折线图，饼图的自动切换，柱状图及信息的轮播
echarts图例legend自定义formatter，多行显示色块文字对其
最新发布
hap1994的博客
03-12 472
图例多行显示效果，期望图例色块与文字顶部对齐。
【echarts】图表配置tooltip 的formatter，如何获取并显示返回值的其他字段，附示例
芳草萋萋鹦鹉洲哦
01-14 2万+
分别表示系列名，数据名，数据值等。在 trigger 为 ‘axis’ 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。说到底，无论是哪种方式，最终formatter的return值都是字符串，所以我们需要做的就是字符串的拼接，回调函数的方式的优势在于处理字符串更加灵活，调用属性的方式获取想要的值，可读性更高。{b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等去做拼接来展示，只能展示显示的图表看到的数据，
[Echarts] 异步请求和展示 tooltip 中的 formatter
weixin_42902669的博客
02-18 4208
echarts formatter 回调函数请求后端数据
uniapp中echarts移动端formatter不生效问题
weixin_43136967的博客
03-06 1753
解决uniapp中echarts移动端formatter不生效问题
echarts 饼形图{c} 显示 [Obejct,Obejct]
nilm61的专栏
03-31 2239
tooltip: { trigger: 'item', // formatter: '{a} <br/>{b}:{c} ({d}%)' }， 其中 abcd 的值分别含义为 {a}：系列名。{b}：数据名。 {c}：数据值。 {d}：百分比。 出现问题 {c} 不显示数据值 而是显示 [Obejct,Obejct] 解决方式： 使用formater的函数 tooltip: { trigger: 'item', ...
echarts饼图只展示和提示一个数据
yiyiziupupup的博客
02-13 1965
一般使用饼图会有两个数据，且两个数据鼠标指着会有相应的提示，以下的使用场景是展示车辆的出租率，只需要百分比这一个数，且另外个数的。tooltip也需要隐藏。
Echarts图表之formatter用法
smile radiantly
11-08 9494
转载链接：https://blog.csdn.net/qq_39442804/article/details/78202256 一：formatter格式化参数模板 1. 字符串模板 1.1. 模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 1.2. 在 trigger 为’axis’ 的时候，会有多个系列的数据，此时可以通过{a0}, {a1}, {a2...
echarts饼图实例（带注释，超详细）解决formatter无法处理数据的问题 解决图标自适应大小的问题
shalDream的博客
09-13 3767
大家在使用echarts饼图时，经常遇到formatter无法处理精确数据的情况，怎么办呢？建议在外面自定义或处理好数据pieData，然后在formatter里面使用for循环遍历 //首先建议在外面自定义或处理好数据pieData，然后在formatter里面使用for循环遍历 var chartPie = echarts.init(document.getElementById("charPie")); var option = { backgroundColor: "#ffffff"
echarts踩坑：echarts series label formatte 不显示（关于Echarts中formatter实现动态数据的方法）
南北极之间
10-15 4853
找了很久的原因。结果是写的位置不对！ 例子里面是这样的：（直接在label下面直接写的！） 但是我什么方法都试了!网上的回调函数也用了还是不行！ 结果是这个原因！ 位置写的不对！层级顺序 要写在normal里面才行！！！ 成功！ 靠！坑真多 可能这里我用的是嵌套的饼图。所以和其他图表属性不一样 代码：我这里是在vuex里面调用的接口 // 训练类别占比图表所用数据 async getRecordXllbzb({commit}) { console.log('首
echarts饼图扇区添加点击事件的实例
11-26
在echarts最后面添加上这段代码就可以了 function eConsole(param) { 　//alert(option.series[0].data.length); 　//alert(option.series[0].data[i]); 　//param.dataIndex 获取当前点击索引， ...
eacharts 饼图 label formatter 自定义样式和数据拼接
山外小楼
01-02 6706
series 中的labelformatter 无法使用html 模板 ，当官方定义的 {a}：系列名。 {b}：数据名。 {c}：数据值。 {d}：百分比。 {@xxx}：数据中名为'xxx'的维度的值，如{@product}表示名为'product'` 的维度的值。 {@[n]}：数据中维度n的值，如{@[3]}` 表示维度 3 的值，从 0 开始计数。 这些属性无法满足我们对...
echarts 图表配置tooltip 的formatter
热门推荐
acknowledged的博客
09-23 2万+
echarts 的图表配置非常的灵活自由，但是不熟悉的时候容易不知道怎么配置。 最近遇到一处需要自定义tooltip的内容，小小的踩了个坑，特此记录一下解决过程。 tooltip是什么 有的同学可能不清楚tooltip是什么，它实际上就是鼠标移到图表上后展示的类似数据点详情的一个说明，就是我图片上框出来的那个 在options配置项处于第一级目录，与series，xAxis，yAxis同级 fo...
echarts中label.formatter不生效问题
BookstoreSpirit的博客
11-25 7673
在echarts开发过程中，在使用地图时，如果使用geo，并且想设置地图上文本内容以及样式的时候，我们可以使用geo.label.normal.formatter来自定义这些功能，但是有时候会出现formatter不生效的情况，这时候可以通过修改源代码来解决该问题 1、打开echart.js文件 2.搜索 ‘getFormattedLabel’ 3.找到这个位置： 将上图中，源码原有的那行代码给注释，然后添加两行代码，搞定 代码如下 var path = status == 'normal' ? 'la.
关于Echarts图标的tooltip配置中的formatter
weixin_55501516的博客
02-20 1401
模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。在 trigger 为 ‘axis’ 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。使用tooltip的formatter进行格式化，格式化前效果如上图，一个是数字，一个是xxx万，不符合设计，需要统一，期望效果是这样。自定义函数的第一个参数params是formatter需要的数据集。
echarts柱状图X轴坐标文字如何垂直或倾斜显示！
jdk_wangtaida的博客
11-07 2万+
前言： 我们再用echarts做柱形图显示的时候，有时候不想X轴文字横向显示，这篇文章就讲解下如何设置属性使得echarts柱状图X轴坐标文字垂直或倾斜显示！ 正文： 一、我们先看一下普通的柱形图的X轴坐标文字显示 1.示例代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&gt...
echarts series中的data属性添加动态数据后不显示问题，一处儿异步细节问题
weixin_57237676的博客
02-22 813
当从后端获取到数据后，发现饼图并没有顺利加载数据出来，使用console.log()测试先后执行顺序，会发现饼图的方法会比请求先执行。此时就可以把饼图的方法放入到请求执行结束后。一处儿异步的细节问题，注意一下就好了。
vue echarts饼图图例
10-20
Vue Echarts饼图图例是指在Echarts饼图中，用于展示数据分类的标识。在Vue中使用Echarts饼图时，可以通过设置legend属性来控制图例的显示方式。例如，在引用[1]中的代码中，legend属性被设置为垂直方向，位于左侧，并且通过formatter函数来控制每个图例项的显示格式。具体来说，formatter函数会根据每个图例项的名称来获取对应的数据项，并将其rate属性作为百分比显示在图例中。这样，用户就可以通过图例来快速了解每个数据分类所占比例。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值