公司准备在旅博会来一发,做几张炫酷的报表,打算用echart,demo里有一张迁徙图比较符合需求
改造开始:在地图上标注一些地点,鼠标经过展示一张报表
1、修改浮层提示为图片
tooltip就是鼠标放在地图上显示的浮层提示
自定义提示需要修改formatter
option = {
tooltip : {
trigger: 'item',
formatter: '{b}'
}
},
定义图片列表
var $imgs = [{area: '北京', url:'1.jpg'}]
修改tooltip项
tooltip : {
trigger: 'item',
formatter: function (params,ticket,callback){
var $pna = params.name;
var res = '';
for(var i = 0;i<$imgs.length;i++){
if($imgs[i].area == $pna){
res = '<img src="'+ $imgs[i].url +'" />';//设置自定义数据的模板,这里的模板是图片
//console.log(res);
break;
}
}
setTimeout(function (){
// 仅为了模拟异步回调
callback(ticket, res);//回调函数,这里可以做异步请求加载的一些代码
}, 1000)
return 'loading';
}
}
效果如下:
浮层图片是静态的,考虑还是动态生成图表的好。
2、设置点击事件
//设置点击事件
myChart.on('click', function (params) {
var city = params.name;
alert(city);
});
成品来一发:点击城市切换数据,动态生成三张报表
---------------------
作者:v104052010024
来源:CSDN
原文:https://blog.csdn.net/v104052010024/article/details/51228965
版权声明:本文为博主原创文章,转载请附上博文链接!