echart地图使用一例
来源:互联网 发布:mac rebel试色 编辑:程序博客网 时间:2024/06/06 00:07
公司准备在旅博会来一发,做几张炫酷的报表,打算用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); });
成品来一发:点击城市切换数据,动态生成三张报表
0 0
- echart地图使用一例
- echart 地图
- EChart使用心得(一)
- echart扩展地图
- echart地图隐藏南海诸岛
- echart使用
- Echart使用
- echart 使用
- echart 地图 mapType及其data
- echart中国地图,多地图案例
- echart地图城市无法显示?
- 基于EChart的地图选择器
- echart之全国地图切换省级地图
- echart使用例子
- echart使用经验
- echart的使用记录
- echart 使用jsp展示
- echart基本使用
- 数据库原理 基础知识点
- 把从SQList查询的数据显示到屏幕上
- 调整数组顺序使奇数位于偶数前面
- 安卓开发 第四篇 我的安卓应用架构设计-----Presenter类
- jQuery.validate表单验证
- echart地图使用一例
- 概率分布
- ZOJ 3936Apples and Ideas
- kmp算法入门,同学写的
- Java代码重构第一步
- 一些常用python预处理方法
- 基数排序
- winCE版本
- 训练2 习题2