直接上代码

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多行显示的更多相关文章

  1. Echarts图表控件使用总结2(Line,Bar)—问题篇

    Echarts图表控件使用总结1(Line,Bar):http://www.cnblogs.com/hanyinglong/p/Echarts.html 1.前言 a.前两天简单写了一篇在MVC中如何 ...

  2. 【高德地图API】从零开始学高德JS API(二)地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

    原文:[高德地图API]从零开始学高德JS API(二)地图控件与插件——测距.圆形编辑器.鼠标工具.地图类型切换.鹰眼鱼骨 摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装 ...

  3. Google地图接口API之地图控件集(五)

    1.默认控件集 当使用一个标准的google地图,它的控件默认设置如下: (1). Zoom-显示一个滑动条来控制map的Zoom级别,如下所示:

  4. 如何添加地图控件到Windows Phone 8的页面中

    原文 如何添加地图控件到Windows Phone 8的页面中 本主题介绍了各种方法来添加一个地图控件到Windows Phone 8的项目.该地图控件在Windows Phone的SDK 8.0的库 ...

  5. 重新想象 Windows 8 Store Apps (3) - 控件之内容控件: ToolTip, Frame, AppBar, ContentControl, ContentPresenter; 容器控件: Border, Viewbox, Popup

    原文:重新想象 Windows 8 Store Apps (3) - 控件之内容控件: ToolTip, Frame, AppBar, ContentControl, ContentPresenter ...

  6. 深入理解最强桌面地图控件GMAP.NET ---离线地图

    enjoyeclipse 深入理解最强桌面地图控件GMAP.NET ---离线地图 这章会介绍GMAP.NET的核心功能之一:离线地图.这个功能可以满足很多政府项目.保密项目.或者由于种种原因不能上网 ...

  7. 如何屏蔽SkylineGlobe提供的三维地图控件上的快捷键

    SkyllineGlobe提供的 <OBJECT ID=" TerraExplorer3DWindow" CLASSID="CLSID:3a4f9192-65a8- ...

  8. OpenLayers 3 之 地图控件(control)

    OpenLayers 3 之 地图控件(control) 地图控件(control)是指地图上比例尺,缩略图,拉近拉远的按钮,滚动控制条等控件,默认控件有三个,可以禁用. OpenLayers 3 之 ...

  9. 深入理解最强桌面地图控件GMAP.NET ---[更新]百度地图

    之前写了篇博文,深入理解最强桌面地图控件GMAP.NET --- 百度地图 但是很多回复说百度地图更新了,不能显示百度的离线地图.之前承诺说是国庆节更新,最近才更新.代码已经提交到: https:// ...

随机推荐

  1. Oracle 10g实现存储过程异步调用

    DBMS_JOB是什么?DBMS_JOB是Oracle数据库提供的专家程序包的一个.主要用来在后台运行程序,是数据库中一个极好的工具. 可用于自动调整调度例程任务,例如分析数据表,执行一些归档操作,清 ...

  2. Android 热修复Nuwa的原理及Gradle插件源码解析

    现在,热修复的具体实现方案开源的也有很多,原理也大同小异,本篇文章以Nuwa为例,深入剖析.  Nuwa的github地址 https://github.com/jasonross/Nuwa 以及用于 ...

  3. ttttttttttt

    http://www.2cto.com/kf/201606/519504.html http://a67474506.iteye.com/blog/2079590 spring boot: http: ...

  4. c++ char * const p问题

    事实上这个概念谁都有,只是三种声明方式非常相似很容易记混. Bjarne在他的The C++ Programming Language里面给出过一个助记的方法: 把一个声明从右向左读. char * ...

  5. 转!大端模式&小端模式

    大端模式&小端模式   在C语言中除了8位的char型之外,还有16位的short型,32位的long型(要看具体的编译器),对于位数大于8位的处理器,例如16位或者32位的处理器,由于寄存器 ...

  6. phalcon:非空字段不能在beforeCreate赋值,可以改用beforeValidationOnCreate

    phalcon非空字段不能在beforeCreate赋值 碰到了这个问题,不知道什么原因记录一下. 表users: action_act 字段 varchar 10  not null,非空字段, 在 ...

  7. mismatch位置(MD tag)- sam/bam格式解读进阶

    这算是第二讲了,前面一讲是:Edit Distance编辑距离(NM tag)- sam/bam格式解读进阶 MD是mismatch位置的字符串的表示形式,貌似在call SNP和indel的时候会用 ...

  8. u盘安装ubuntu server 14.04 以及No CD-ROM drive was detected 错误

    u盘安装ubuntu server 14.04 1:下载ubuntu server14的 iso镜像文件 2:下载 UltraISO U盘镜像制作工具 : 3:使用Ultra iOS 将下载好的 is ...

  9. Windows代码页、区域

    目录 第1章代码页    1 1 代码页    1 1.1 单字节字符集    1 1.2 双字节字符集    1 1.3 多字节字符集    1 1.4 ANSI代码页    2 2 枚举代码页   ...

  10. webpages框架中使用Html.TextArea()在前台显示多行信息时,如何进行大小、样式的设置

    环境:vs2015 webpages框架+razor语法: 目的:服务器进行数据更新操作后,在前台显示更新的相关信息: 后台代码:将更新条数等相关信息存储在一个变量中: @{ var serverIn ...