Echarts 地图控件tooltip多行显示
直接上代码
var o = {
"tooltip":
{
trigger: 'item',
"formatter": function (params) {
var obj = JSON.parse(JSON.stringify(params));
var itemName = obj.name;
var dataIndex = obj.dataIndex;
var str = "<ur style='text-align:left'><li style='color: #da70d6;font:bolder;'>" + itemName + "</li>";
for (var i = 0; i < o.series.length;i++) {
str = str + "<li>" + o.series[i].name + ":" + o.series[i].data[dataIndex].value + "</li>";
}
str = str + "</ul>";
return str;
}
},
"series": [{ "mapType": "成都", "name": "登录人数", "type": "map", "itemStyle": { "normal": { "label": { "show": true } }, "emphasis": { "label": { "show": true } } }, "data": [{ "name": "高新区", "value": 0 }, { "name": "武侯区", "value": 77 }, { "name": "双流区", "value": 0 }] }, { "mapType": "成都", "name": "登录次数", "type": "map", "itemStyle": { "normal": { "label": { "show": true } }, "emphasis": { "label": { "show": true } } }, "data": [{ "name": "高新区", "value": 0 }, { "name": "武侯区", "value": 32378 }, { "name": "双流区", "value": 0 }] }, { "mapType": "成都", "name": "登录率", "type": "map", "itemStyle": { "normal": { "label": { "show": true } }, "emphasis": { "label": { "show": true } } }, "data": [{ "name": "高新区", "value": "0.00%" }, { "name": "武侯区", "value": "62.10%" }, { "name": "双流区", "value": "0.00%" }] }, { "mapType": "成都", "name": "总学时", "type": "map", "itemStyle": { "normal": { "label": { "show": true } }, "emphasis": { "label": { "show": true } } }, "data": [{ "name": "高新区", "value": 0 }, { "name": "武侯区", "value": 40 }, { "name": "双流区", "value": 0 }] }, { "mapType": "成都", "name": "学习次数", "type": "map", "itemStyle": { "normal": { "label": { "show": true } }, "emphasis": { "label": { "show": true } } }, "data": [{ "name": "高新区", "value": 0 }, { "name": "武侯区", "value": 186 }, { "name": "双流区", "value": 0 }] }, { "mapType": "成都", "name": "学习率", "type": "map", "itemStyle": { "normal": { "label": { "show": true } }, "emphasis": { "label": { "show": true } } }, "data": [{ "name": "高新区", "value": "0.00%" }, { "name": "武侯区", "value": "16.95%" }, { "name": "双流区", "value": "0.00%" }] }, { "mapType": "成都", "name": "学习转换率", "type": "map", "itemStyle": { "normal": { "label": { "show": true } }, "emphasis": { "label": { "show": true } } }, "data": [{ "name": "高新区", "value": "0.00%" }, { "name": "武侯区", "value": "0.57%" }, { "name": "双流区", "value": "0.00%" }] }, { "mapType": "成都", "name": "学员人数", "type": "map", "itemStyle": { "normal": { "label": { "show": true } }, "emphasis": { "label": { "show": true } } }, "data": [{ "name": "高新区", "value": 0 }, { "name": "武侯区", "value": 124 }, { "name": "双流区", "value": 0 }] }, { "mapType": "成都", "name": "已制作课件数", "type": "map", "itemStyle": { "normal": { "label": { "show": true } }, "emphasis": { "label": { "show": true } } }, "data": [{ "name": "高新区", "value": 0 }, { "name": "武侯区", "value": 644 }, { "name": "双流区", "value": 0 }] }, { "mapType": "成都", "name": "已制作课件数", "type": "map", "itemStyle": { "normal": { "label": { "show": true } }, "emphasis": { "label": { "show": true } } }, "data": [{ "name": "高新区", "value": 0 }, { "name": "武侯区", "value": 236 }, { "name": "双流区", "value": 0 }] }, { "mapType": "成都", "name": "课件评分", "type": "map", "itemStyle": { "normal": { "label": { "show": true } }, "emphasis": { "label": { "show": true } } }, "data": [{ "name": "高新区", "value": 0.00 }, { "name": "武侯区", "value": 3.41 }, { "name": "双流区", "value": 0.00 }] }]
}
setOption(o);
显示效果

Echarts 地图控件tooltip多行显示的更多相关文章
- Echarts图表控件使用总结2(Line,Bar)—问题篇
Echarts图表控件使用总结1(Line,Bar):http://www.cnblogs.com/hanyinglong/p/Echarts.html 1.前言 a.前两天简单写了一篇在MVC中如何 ...
- 【高德地图API】从零开始学高德JS API(二)地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨
原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...
- Google地图接口API之地图控件集(五)
1.默认控件集 当使用一个标准的google地图,它的控件默认设置如下: (1). Zoom-显示一个滑动条来控制map的Zoom级别,如下所示:
- 如何添加地图控件到Windows Phone 8的页面中
原文 如何添加地图控件到Windows Phone 8的页面中 本主题介绍了各种方法来添加一个地图控件到Windows Phone 8的项目.该地图控件在Windows Phone的SDK 8.0的库 ...
- 重新想象 Windows 8 Store Apps (3) - 控件之内容控件: ToolTip, Frame, AppBar, ContentControl, ContentPresenter; 容器控件: Border, Viewbox, Popup
原文:重新想象 Windows 8 Store Apps (3) - 控件之内容控件: ToolTip, Frame, AppBar, ContentControl, ContentPresenter ...
- 深入理解最强桌面地图控件GMAP.NET ---离线地图
enjoyeclipse 深入理解最强桌面地图控件GMAP.NET ---离线地图 这章会介绍GMAP.NET的核心功能之一:离线地图.这个功能可以满足很多政府项目.保密项目.或者由于种种原因不能上网 ...
- 如何屏蔽SkylineGlobe提供的三维地图控件上的快捷键
SkyllineGlobe提供的 <OBJECT ID=" TerraExplorer3DWindow" CLASSID="CLSID:3a4f9192-65a8- ...
- OpenLayers 3 之 地图控件(control)
OpenLayers 3 之 地图控件(control) 地图控件(control)是指地图上比例尺,缩略图,拉近拉远的按钮,滚动控制条等控件,默认控件有三个,可以禁用. OpenLayers 3 之 ...
- 深入理解最强桌面地图控件GMAP.NET ---[更新]百度地图
之前写了篇博文,深入理解最强桌面地图控件GMAP.NET --- 百度地图 但是很多回复说百度地图更新了,不能显示百度的离线地图.之前承诺说是国庆节更新,最近才更新.代码已经提交到: https:// ...
随机推荐
- poj1266Cover an Arc(三角形外接圆)
链接 求出三角形的外接圆,通过圆心和半径可以知道这个圆的上下左右最远点,分别判断这个四个点跟弧的两端点A,B的关系,假如判断P点,弧内给出点为C,判断PC是否与AB相交即可判断出P是否在弧上. 精度问 ...
- js object(对象)
http://www.cnblogs.com/pingchuanxin/p/5773326.html Object(对象)是在所有的编程语言中都十分重要的一个概念,对于事物我们可以把他们看作是一个对象 ...
- ssh批量登录并执行命令(python实现)
局域网内有一百多台电脑,全部都是linux操作系统,所有电脑配置相同,系统完全相同(包括用户名和密码),ip地址是自动分配的.现在有个任务是在这些电脑上执行某些命令,者说进行某些操作,比如安装某些软件 ...
- [转]Oracle中INITRANS和MAXTRANS参数
每个块都有一个块首部.这个块首部中有一个事务表.事务表中会建立一些条目来描述哪些事务将块上的哪些行/元素锁定.这个事务表的初始大小由对象的INITRANS 设置指定.对于表,这个值默认为2(索引的IN ...
- JavaScript 同名方法的处理
在JS中,如果存在同名同参的方法,它会先调用哪一个?先看两个例子: 例1: <html> <head> <title></title> <scri ...
- Java跟Javac,package与import
今天讨论一下2个指令与2个关键字. 这次的没有IDE环境,直接在txt文本里编程,在cmd里编译运行,搞清楚java的文件结构,还有怎么设置编译器查找类的路径.首先是javac,有一个可带参数java ...
- [转]Android 5.0——Material Design详解(动画篇)
Material Design:Google推出的一个全新的设计语言,它的特点就是拟物扁平化. Material Design包含了很多内容,今天跟大家分享一下Material新增的动画: 在Andr ...
- robotframework笔记26
测试数据文档工具(Testdoc) Testdoc是机器人框架内置的工具生成高水平 根据测试用例文档. 创建的文档是在HTML中 格式和它包括名称.文档和其他元数据 测试套件和测试用例,以及和他们的顶 ...
- TCP与UDP
TCP(Transmission Control Protocol,传输控制协议)是面向连接的协议:可靠.保证正确性:顺序到达:流量控制.拥塞控制:重传机制.窗口机制:对系统资源.时间要求多:流模式S ...
- thinkphp @代表什么
import('@.ORG.Util.RBAC'); @表示在同一目录下.看一下Lib目录下除了Action外,还有ORG目录.如果使用@.ORG.Util.RBAC,则表示RBAC是放在Lib/OR ...