关于Echarts中formatter实现动态数据的方法
来源:互联网 发布:天翼合伙人软件 编辑:程序博客网 时间:2024/05/17 22:58
由于在近期工作内容中用到echarts,实现产品设计图时遇到一些小问题,比如:
设计图是这样的:
而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+"起"; } }}
果然可行,当然如有优解或有其他更好的方法欢迎提出交流。
阅读全文
0 0
- 关于Echarts中formatter实现动态数据的方法
- ECharts图表中级入门之formatter:夜谈关于ECharts图表内的数据格式化方法
- ECharts图表中级入门之formatter:夜谈关于ECharts图表内的数据格式化方法
- ECharts关于“动态数据+时间坐标轴”的问题
- 关于Echarts的formatter函数的自定义(图像上显示一组数据的图像,当鼠标移上去的时候显示五组数据)
- EchartsTest --- Echarts 的 servlet 实现 动态获取数据 练习
- 关于Echarts的formatter函数的自定义(饼图为例)
- TP框架实现echarts动态获取数据
- Ajax实现Echarts动态数据加载
- Echarts通过Ajax实现动态数据加载
- Echarts实现饼状图数据动态加载
- echarts实现一个页面同时显示多个不同形状的图表/动态往图表中存放数据
- Echarts图表中动态数据显示
- echarts中数据的循环
- easyUI中的datagrid的formatter方法中 使用$.ajax()方法绑定多个不同数据源的数据
- 关于在JSP中实现动态添加表格的方法
- Echarts的使用以及动态加载数据
- ASP.NET+JQuery+.Ashx实现+百度Echarts 实现动态柱状图数据图形报表的统计
- 运行Maven项目时出现invalid LOC header (bad signature)错误,Tomcat不能正常启动
- 2017/12/6
- UGUI实现不规则区域点击响应
- 虚幻4打开游戏开场动画设置相关问题
- 【深度学习】caffe 中的一些参数介绍
- 关于Echarts中formatter实现动态数据的方法
- Virtual DOM 算法
- 你为什么想打产品经理?
- windows下安装redis 以及phpredis的扩展增对php7 (windows redis php&php7)
- ArrayList以价格排序
- Laravel 5.3 学习系列二:路由
- oracle 跨库系列问题
- CentOS6.5系统下RPM包安装MySQL5.6
- 验证文件目录的创建函数CreateDirectory();