直接上代码

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);

显示效果

转载于:https://www.cnblogs.com/caoyc/p/5688875.html

Echarts 地图控件tooltip多行显示相关推荐

  1. Maps模块管理地图控件,用于在web页面中显示地图控件,提供各种接口操作地图控件,如添加标点、路线等。通过plus.maps可获取地图管理对象

    方法: openSysMap: 调用系统第三方程序进行导航 create: 创建Map对象 getMapById: 查找已经创建的Map对象 对象: Map: 地图控件对象 MapStyles: 地图 ...

  2. SAP UI5 应用开发教程之六十 - SAP UI5 地图控件的一些高级用法试读版

    一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...

  3. 超图js版 iclient 基本开发 - 加载基本图层(以天地图示例)和基本地图控件

    以超图的在线示例来学习:运行之后如下: 原网址代码比较长一些:先把多的去掉:看一下基本的加载图层和地图控件的概念: <script type="text/javascript" ...

  4. SharePoint2010整合Silverlight 4应用——Bing地图控件

    本文中我们将展示如何在SharePoint 2010中集成Silverlight应用.例子中会用到Bing Map 控件.完成后的效果图如下: 开发环境 本例中,我们使用到的开发环境包括: 1.Vis ...

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

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

  6. C# 选中 DataGridView 控件中的行时显示不同的颜色

    可以利用 DataGridView 控件的 SelectionMode.ReadOnly 和 SelectionBackColor 属性实现当选中DataGridView控件中的行时显示不同的颜色. ...

  7. 地图控件快速入门——控制地图

    当你的网页中包含一个地图,你可以以编程的方式更改地图.您可以更改地图的风格,调整缩放级别,平移地图到新的位置,显示和隐藏默认导航控件,并添加自己的地图控件. 修改地图视图 有几种方法可以以编程方式更改 ...

  8. Adobe Flash地图控件AnyMap

    2019独角兽企业重金招聘Python工程师标准>>> AnyMap是一款灵活的Adobe Flash地图控件,并且完全支持"跨平台"和"跨浏览器&qu ...

  9. 使用高德JS-API进行基于LBS的开发-地图初始化地图控件

    框架代码: <!DOCTYPE html> <html style="width:100%;height:100%;"> <head><m ...

最新文章

  1. Android利用Looper在子线程中改变UI
  2. centos6.8安装完成后重启进不去登录界面_如何在Ubuntu18.04上安装Unity桌面环境?
  3. track文件 什么是git_Git 从入门到放弃命令大全
  4. 22张令人叹为观止的照片,你所未知的另一面
  5. 主板有几种尺寸_工控机主板哪个牌子好?2019工控主板十大品牌排行榜
  6. JS每隔一段时间执行一个方法
  7. 赛锐信息:SAP系统业务审计介绍
  8. go路由httprouter中的压缩字典树算法图解及c++实现
  9. 面向对象程序设计的4个主要特点
  10. tensorflow python2迁移python3_tensorflow在python2和python3上的安装教程
  11. 51单片机流水灯方法大全
  12. 微信公众号禁止分享功能
  13. 【面试笔试-c/c++】人民搜索2012校园招聘试题
  14. mc查询服务器状态,MC 服务器 所有指令 急要
  15. The destination is read-only
  16. 第三方Charts绘制图表四种形式:饼状图,雷达图,柱状图,直线图
  17. C语言的数据类型大全,整型数据在内存中的存储方式
  18. PLC网络流量异常检测的统计模型和神经网络模型的比较研究
  19. LintCode 练习【C++】
  20. 1314520用计算机怎么算,表白公式数学公式抖音 抖音1314520怎么计算,快用计算器表白?...

热门文章

  1. Linux SVN 切换用户
  2. 汉威科技气体监测报警系列产品守护油气设施安全
  3. app代码测试软件,软件测试:如何测试一款手机app(示例代码)
  4. 基于NRF52810的FLASH读写操作
  5. 免费编辑pdf的方法,想在这里分享一下
  6. 2018通信工程师考试练习错题记录
  7. python获取交通线路_Python爬虫_城市公交、地铁站点和线路数据采集实例
  8. python同花顺交易_THSTrader - 量化交易。最新版通用版同花顺客户端的python API。(Python3)...
  9. 联网对战游戏开发实例之《斗兽棋》(附源码)
  10. 应用部署优化方案分享