关于Echarts中formatter实现动态数据的方法
2017-12-06 16:46
1001 查看
由于在近期工作内容中用到echarts,实现产品设计图时遇到一些小问题,比如:
设计图是这样的:
而Echarts的legend图例大概是这样的(注:以下demo都是随手写的):
看到echarts动态数据想到的当然是formatter了, 然后想到的当然是tooltip中的formatter啦,tooltip就是鼠标悬浮图表item的那个半透明的小框,大概长这样:
code长这样(既然能来这里,相相比大家也都知道):
想着就是a,b,c,d四个参数都是echarts准备好的直接使用,结果变成这样:
【尼克杨问号脸】 WTF?
把tooltip中的formatter贴在legend中这条路行不通,查了一下文档没看到相关方法,网上看到好像说是用什么函数可以。诸如:
又以为这个params是个对象什么的,里面存有各项的属性,是否可以直接使用, 但是这个params打印出来是个legend图例中的各项,对其进行操作并无什么有价值作用,于是就想到把要显示的数值赋值给formatter然后使用,首先想到的是读取series中的data数组中的对象属性,然后遍历赋值给params即可。
如下:
code :
果然可行,当然如有优解或有其他更好的方法欢迎提出交流。
设计图是这样的:
而Echarts的legend图例大概是这样的(注:以下demo都是随手写的):
看到echarts动态数据想到的当然是formatter了, 然后想到的当然是tooltip中的formatter啦,tooltip就是鼠标悬浮图表item的那个半透明的小框,大概长这样:
code长这样(既然能来这里,相相比大家也都知道):
tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" },
想着就是a,b,c,d四个参数都是echarts准备好的直接使用,结果变成这样:
【尼克杨问号脸】 WTF?
把tooltip中的formatter贴在legend中这条路行不通,查了一下文档没看到相关方法,网上看到好像说是用什么函数可以。诸如:
formatter: function (params) { // do some thing }
又以为这个params是个对象什么的,里面存有各项的属性,是否可以直接使用, 但是这个params打印出来是个legend图例中的各项,对其进行操作并无什么有价值作用,于是就想到把要显示的数值赋值给formatter然后使用,首先想到的是读取series中的data数组中的对象属性,然后遍历赋值给params即可。
如下:
code :
formatter: function (params) { // console.log(params); for (var i = 0; i < option.series[0].data.length; i++) { if (option.series[0].data[i].name == params) { return params +":"+ option.series[0].data[i].value+"起"; } } }
果然可行,当然如有优解或有其他更好的方法欢迎提出交流。
相关文章推荐
- 关于dorado框架datatable处的右键菜单无法根据具体数据实现动态分别显示不同菜单的解决方法
- ECharts图表中级入门之formatter:夜谈关于ECharts图表内的数据格式化方法
- ECharts图表中级入门之formatter:夜谈关于ECharts图表内的数据格式化方法
- ECharts图表中级入门之formatter:夜谈关于ECharts图表内的数据格式化方法
- ASP.NET+JQuery+.Ashx实现+百度Echarts 实现动态柱状图数据图形报表的统计
- MVC4中AJAX Html页面打开调用后台方法实现动态加载数据库中的数据
- ThinkPHP 关于用create方法实现数据更新的问题
- 关于数据动态绑定问题的解决方法
- 关于将类对象数据存入到数据库中的实现方法
- 关于Java调用C写的动态链接库的具体实现方法,自己捉摸了好久,现在算是来造福大众了 T _T
- MVC4中AJAX Html页面打开调用后台方法实现动态载入数据库中的数据
- jquery mobile关于使用iscroll动态加载数据实现下拉刷新和上拉的效果
- 关于动态加载的数据实现单选可取消的效果 并且附带 ScrollView滑动到指定位置
- javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
- 关于jquery实现动态创建表格和动态显示数据的问题?
- 关于在Mac上挂载移动硬盘实现数据备份的方法
- APEX的IR下大量数据检索的提速方法---兼谈动态SQL在IR的实现
- javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
- 动态获取后台最新数据的一个实现方法
- asp.net Mvc中实现在View页面中嵌入公用动态数据,实现方法为:include(包含动态页面数据)