直接上代码

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. 选择列表控件的使用(PickList)

    需要下载picklist.dll类库配合使用 <%@ Register TagPrefix="cc1" Namespace="PickListControl&quo ...

  2. iOS开发之 Xcode 6 创建一个Empty Application

    参考链接http://jingyan.baidu.com/article/2a138328bd73f2074b134f6d.html Xcode 6 正式版如何创建一个Empty Applicatio ...

  3. graph-tool 练习

    如何使用graph-tool模块,如何导入?如何使用graph,使用其算法? 如何使用Boost Graph库,安装,测试? 1 创建和操纵图 如何创建空图? g = Graph() 如何精准的创建有 ...

  4. 图片左右滚动的js代码

    html代码 <div class="demo" id="demo" style="overflow:hidden; width:660px; ...

  5. solr5.2.1环境搭建教程

    环境:w8.1 + solr5.2.1 + apache7.0+jdk1.7 解压:solr5.2.1 复制E:\solr-5.2.1\server\webapps 下的solr.war包到D:\ap ...

  6. virutalbox虚拟机硬盘扩容

    大小改变为30GB VBoxManage modifyhd d:\newxp.vdi --resize 30000 然后用diskgenius扩从容量

  7. canvas实现绘画

    html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  8. zju 1091

    // Traveling Knight Problem #include "stdafx.h" #include <string> #include <strin ...

  9. js正则标志/g /i /m的用法,以及实例

    js正则标志/g /i /m的用法,以及实例   正则的思想都是一样的,但是具体的写法会有所不同,在这里提到的/g,/i,/m在其他的地方也许就不能用了. 一,js正则标志/g,/i,/m说明 1,/ ...

  10. SharedPreferences详解

    我们在开发软件的时候,常需要向用户提供软件参数设置功能,例如我们常用的微信,用户可以设置是否允许陌生人添加自己为好友. 对于软件配置参数的保存, 如果是在window下通常我们会采用ini文件进行保存 ...