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);
显示效果
转载于:https://www.cnblogs.com/caoyc/p/5688875.html
Echarts 地图控件tooltip多行显示相关推荐
- Maps模块管理地图控件,用于在web页面中显示地图控件,提供各种接口操作地图控件,如添加标点、路线等。通过plus.maps可获取地图管理对象
方法: openSysMap: 调用系统第三方程序进行导航 create: 创建Map对象 getMapById: 查找已经创建的Map对象 对象: Map: 地图控件对象 MapStyles: 地图 ...
- SAP UI5 应用开发教程之六十 - SAP UI5 地图控件的一些高级用法试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
- 超图js版 iclient 基本开发 - 加载基本图层(以天地图示例)和基本地图控件
以超图的在线示例来学习:运行之后如下: 原网址代码比较长一些:先把多的去掉:看一下基本的加载图层和地图控件的概念: <script type="text/javascript" ...
- SharePoint2010整合Silverlight 4应用——Bing地图控件
本文中我们将展示如何在SharePoint 2010中集成Silverlight应用.例子中会用到Bing Map 控件.完成后的效果图如下: 开发环境 本例中,我们使用到的开发环境包括: 1.Vis ...
- 如何添加地图控件到Windows Phone 8的页面中
原文 如何添加地图控件到Windows Phone 8的页面中 本主题介绍了各种方法来添加一个地图控件到Windows Phone 8的项目.该地图控件在Windows Phone的SDK 8.0的库 ...
- C# 选中 DataGridView 控件中的行时显示不同的颜色
可以利用 DataGridView 控件的 SelectionMode.ReadOnly 和 SelectionBackColor 属性实现当选中DataGridView控件中的行时显示不同的颜色. ...
- 地图控件快速入门——控制地图
当你的网页中包含一个地图,你可以以编程的方式更改地图.您可以更改地图的风格,调整缩放级别,平移地图到新的位置,显示和隐藏默认导航控件,并添加自己的地图控件. 修改地图视图 有几种方法可以以编程方式更改 ...
- Adobe Flash地图控件AnyMap
2019独角兽企业重金招聘Python工程师标准>>> AnyMap是一款灵活的Adobe Flash地图控件,并且完全支持"跨平台"和"跨浏览器&qu ...
- 使用高德JS-API进行基于LBS的开发-地图初始化地图控件
框架代码: <!DOCTYPE html> <html style="width:100%;height:100%;"> <head><m ...
最新文章
- Android利用Looper在子线程中改变UI
- centos6.8安装完成后重启进不去登录界面_如何在Ubuntu18.04上安装Unity桌面环境?
- track文件 什么是git_Git 从入门到放弃命令大全
- 22张令人叹为观止的照片,你所未知的另一面
- 主板有几种尺寸_工控机主板哪个牌子好?2019工控主板十大品牌排行榜
- JS每隔一段时间执行一个方法
- 赛锐信息:SAP系统业务审计介绍
- go路由httprouter中的压缩字典树算法图解及c++实现
- 面向对象程序设计的4个主要特点
- tensorflow python2迁移python3_tensorflow在python2和python3上的安装教程
- 51单片机流水灯方法大全
- 微信公众号禁止分享功能
- 【面试笔试-c/c++】人民搜索2012校园招聘试题
- mc查询服务器状态,MC 服务器 所有指令 急要
- The destination is read-only
- 第三方Charts绘制图表四种形式:饼状图,雷达图,柱状图,直线图
- C语言的数据类型大全,整型数据在内存中的存储方式
- PLC网络流量异常检测的统计模型和神经网络模型的比较研究
- LintCode 练习【C++】
- 1314520用计算机怎么算,表白公式数学公式抖音 抖音1314520怎么计算,快用计算器表白?...
热门文章
- Linux SVN 切换用户
- 汉威科技气体监测报警系列产品守护油气设施安全
- app代码测试软件,软件测试:如何测试一款手机app(示例代码)
- 基于NRF52810的FLASH读写操作
- 免费编辑pdf的方法,想在这里分享一下
- 2018通信工程师考试练习错题记录
- python获取交通线路_Python爬虫_城市公交、地铁站点和线路数据采集实例
- python同花顺交易_THSTrader - 量化交易。最新版通用版同花顺客户端的python API。(Python3)...
- 联网对战游戏开发实例之《斗兽棋》(附源码)
- 应用部署优化方案分享