Echarts扩展之ajax异步加载tooltip数据
来源:互联网 发布:民可使由之 不可使知之 编辑:程序博客网 时间:2024/05/18 05:19
最近做大数据可视化视图展现,随着业务的加深,正常的简单的echars里面的实例已经满足不了现有的需求;所以就需要对echarts进行更深一步的了解;
因为接触echars比较早,所以现在使用的是echarts的2.*版本;最新的echarts3添加了非常多的人性化的设计;非常好,但是还没来得及深入研究;
废话不多说;直角系视图包括折线图、柱状图 加载完页面之后点击数据的点会弹出相应的数据信息;在tooltip中设置可以实现基本的展现;
现在遇到的问题是需要判断当前周数,并且在tooltip中显示对应的周的起止时间;之前尝试过通过前台js函数来实现这一操作;但是最后发现这个耗时耗力,网上实例良莠不齐;最后还不如自己写,但是自己又不想写。
最后只能使用异步加载数据库的方式来实现这一需求;(数据库中存有日期和对应的周数的字段,查询周数可以得到对应的日期的集合0.0)
上代码:
option里面tooltip的设置:$("#custom_input")是一个隐藏的input;
- tooltip : {
- trigger: 'axis',
- formatter:function(params,ticket,callback){
- var data_week = params[0][1];
- getdata_range(data_week);
- setTimeout(function (){
- // 仅为了模拟异步回调
- callback(ticket, '第'+data_week+'周 ' +$("#custom_input").val()+'<br/>'+params[0][0]+':'+params[0].data);
- }, 800)
- return "Loading";
- }
- },
- function getdata_range(week){
- if(typeof(week)=="string"){
- var ss= $.ajax({
- type:"get",
- url:"getdata_range_custom",
- data:{week:week},
- success:function(data){
- console.log("返回的日期区间是"+data);
- $("#custom_input").val(data);
- return data;
- },
- });
- }
- return ss;
- }
阅读全文
0 0
- Echarts扩展之ajax异步加载tooltip数据
- Echarts扩展之ajax异步加载tooltip数据
- echarts之tooltip
- echarts之tooltip-trigger
- echarts之tooltip-showContent
- echarts之tooltip-position
- echarts之tooltip-trigger
- echarts异步数据加载和更新
- echarts 条形图异步加载数据
- echarts异步数据加载和更新
- echarts异步数据加载和更新
- echarts关系图异步加载数据
- echarts中饼图的异步数据加载绘制
- echarts模拟从数据库异步加载数据
- echarts异步加载多组数据
- echarts异步加载柱状图数据叠加
- echarts异步数据加载使用总结
- echarts异步数据加载和更新
- FileItem类的常用方法
- C++11关键字
- Android资源文件夹下面values/style.xml、values-v19/style.xml、values-v21/style.xml主题调用规则
- STS3.5 启动时卡在loading org.springsource.ide.eclipse.dashboard.ui
- Position-aware Attention and Supervised Data Improve Slot Filling
- Echarts扩展之ajax异步加载tooltip数据
- EasyAR 初学者入门指南(5)---录屏功能
- 线程和进程的深入理解(通俗易懂版)
- 第十七章——Size Classes
- PTA 线性结构2 一元多项式的乘法与加法运算
- Eclipse配置文件导出问题
- C++笔记
- iOS UIWebView 通过 cookie 完成自动登录验证
- 2017-09-12 LeetCode_053 Maximum Subarray