Echarts扩展之ajax异步加载tooltip数据
2017-09-12 11:22
921 查看
最近做大数据可视化视图展现,随着业务的加深,正常的简单的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;
}
相关文章推荐
- ECharts3 实现 AJAX异步加载 数据库数据
- Echarts扩展之ajax异步加载tooltip数据
- 《SoloBug - bug管理系统》-Echarts+Ajax实现图表数据异步加载
- Echarts通过Ajax实现动态数据加载
- Echarts通过Ajax实现动态数据加载
- ECharts图表组件中级入门篇:如何通过Ajax异步获取图表数据赋值于图表并渲染呈现
- echarts在.Net中使用实例(二) 使用ajax动态加载数据
- Ajax异步加载web网页数据
- Echarts 异步数据加载遇到的问题
- echarts中饼图的异步数据加载绘制
- echarts异步数据加载和更新
- Echarts使用心得总结——异步数据加载与更新(二)
- echarts 条形图异步加载数据
- echarts异步数据加载和更新
- Javascript vue.js表格分页,ajax异步加载数据
- ajax异步加载解析复杂json(集合中包含对象,对象中包含对象)数据
- 使用Ajax异步加载请求JSON数据
- echarts异步加载多组数据
- 对easyui datagrid进行扩展,当滚动条拉直最下面就异步加载数据。
- echarts画圆环统计图并加载动态数据 (ajax获取数据)