原文地址

我之前遇到过这问题,单独设置 tooltip 没效果,geo 下面也有 tooltip 属性,但是也不管用,网上查了一下说 geo 不支持 tooltip 提示框显示,就自己根据 echarts 配置项试了试,弄出两种方法

第一种就是 tooltip 全局设置一个,geo 下面 tooltip 在设置一个,两个都设置才管用,单独设置没效果,

代码附上

  1. const option = {
  2. title: {
  3. text: ""
  4. },
  5. tooltip: {
  6. trigger: "item",
  7. show: true,
  8. formatter: function(params) {
  9. let city = params.name + "市";
  10. let res = "";
  11. sswlist.map(item => {
  12. if (item.properties.name == city) {
  13. res = item.properties.info;
  14. }
  15. });
  16. return res;
  17. },
  18. padding: 2,
  19. textStyle: {
  20. fontSize: 8,
  21. lineHeight: 10,
  22. align: "left"
  23. }
  24. },
  25. geo: {
  26. map: "yns",
  27. zlevel: 10,
  28. show: true,
  29. layoutCenter: ["50%", "48%"],
  30. roam: false,
  31. layoutSize: "150%",
  32. zoom: 1,
  33. label: {
  34. normal: {
  35. show: true,
  36. textStyle: {
  37. fontSize: 12,
  38. color: "#43D0D6"
  39. }
  40. }
  41. },
  42. itemStyle: {
  43. normal: {
  44. color: "#062031",
  45. borderWidth: 1.1,
  46. borderColor: "#43D0D6"
  47. }
  48. },
  49. emphasis: {
  50. areaColor: "#FFB800",
  51. label: {
  52. show: false
  53. }
  54. },
  55. tooltip: {
  56. trigger: "item",
  57. show: true,
  58. formatter: function(params) {
  59. let city = params.name + "市";
  60. let res = "";
  61. sswlist.map(item => {
  62. if (item.properties.name == city) {
  63. res = item.properties.info;
  64. }
  65. });
  66. return res;
  67. },
  68. padding: 2,
  69. textStyle: {
  70. fontSize: 8,
  71. lineHeight: 10,
  72. align: "left"
  73. }
  74. 第二种就是 label 通过更改 label 下的 formatter 属性来实现,formatter tooltip 下的 formatterz 作用一样,如果想让鼠标点击或划过显示的话通过 emphasis 下的 label 实现例如:
折叠

emphasis:{
label:
{formatter:{}
}

关于 echarts 使用 geo 制作地图 tooltip 不显示问题(转)的更多相关文章

  1. Echarts数据可视化series-map地图,开发全解+完美注释

    全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...

  2. echarts 某省下钻某市地图

    因为最近工作需要,接触到了highcharts 与echarts ,对比了一下,目前公司系统用的是highcharts的图表插件,就不想再去用echarts的图标插件了,奈何highcharts地图对 ...

  3. 【Map】Echarts之iphone销量地图的使用以及详细配置

    1.引入echarts库文件 <script charset="utf-8" type="text/javascript" language=" ...

  4. 【百度地图API】如何利用PhoneGap制作地图APP

    原文:[百度地图API]如何利用PhoneGap制作地图APP 摘要:百度地图API是一套由javascript编写的地图程序接口,按说它应该运行在浏览器上.现在,只要利用PhoneGap,我们就能开 ...

  5. 【百度地图API】如何利用自己的数据制作社交地图?只显示可视区域内的标注

    原文:[百度地图API]如何利用自己的数据制作社交地图?只显示可视区域内的标注 摘要:如果你自己的数据已经超过1万个,如何进行合理的显示?除了聚合marker外,还有一个办法.那就是,只显示可视区域内 ...

  6. ArcGIS for Desktop入门教程_第六章_用ArcMap制作地图 - ArcGIS知乎-新一代ArcGIS问答社区

    原文:ArcGIS for Desktop入门教程_第六章_用ArcMap制作地图 - ArcGIS知乎-新一代ArcGIS问答社区 1 用ArcMap制作地图 作为ArcGIS for Deskto ...

  7. 【前端图表】echarts散点图鼠标划过散点显示信息

    在做项目的过程中,总会遇到这样或者那样的bug,这个时候就要看自己的动手能力有多强了,着手解决了一个bug之后,整个人都感觉很开心,端午下班之前遇到了一个小问题,echarts散点图鼠标划过散点的时候 ...

  8. FusionCharts:tooltip分行显示

    FusionCharts:tooltip分行显示 tooltip分行显示:如果tooltip过长,可分行显示,在tooltip中增加{br} <chart> <set label=' ...

  9. 百度地图API定位+显示位置

    1. 先在需要嵌入地图的页面引入map.js <script src="http://api.map.baidu.com/api?v=2.0&ak=你的秘钥"> ...

  10. echarts x轴标签文字过多导致显示不全

    原文电梯:https://blog.csdn.net/kebi007/article/details/68488694 echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.a ...

随机推荐

  1. mysql转DM的日期函数转换

    背景: 项目要从mysql转换为DM数据库,发现很多日期函数在DM是不能用的. 所以大概总结下有哪些,以及转换思路. 正文: INTERVAL 表示日期间隔. 看做拼接符. DATE_ADD 表示日期 ...

  2. HP DC7800 升级CPU出现:Missing or Invalid Processor Microcode Update —— 解决方案:更新主板BIOS

    1.所需文件在这个网盘里面:链接:https://pan.baidu.com/s/140DI2SyRmPf0Q-ikXcJMcQ 提取码:yjth 2.这个问题的解决参考了:https://h3043 ...

  3. Deer_GF之【AssetsHotfix】和【AssetsNative】文件夹的区别

    Hi,今天介绍一下Deer_Gf里的[AssetsHotfix]和[AssetsNative]文件夹的区别:       框架介绍请移步[Deer_GF之框架介绍] 一.[AssetsHotfix] ...

  4. 码云或github的"免费服务器"

    目录 一. 码云及工具介绍 二. 操作步骤 (1) 创建vue-cli项目 (2) 码云创建仓库 (3) 修改并提交项目到码云仓库 (4) 运行项目 (5) 注意点 三. 尾声 对于学生党来说,买个服 ...

  5. SAP 后台任务定时job

    定时任务的事务码 sm36:创建定时任务 sm37:查看定时任务 JDBG:后台任务debug,在对应的sm37中对应的job页面 t-code输入 创建定时任务SM36 名称可以随便起 一般都是按自 ...

  6. 对NAN的认识

    NaN是个特殊的数值,它与任何值都不相等,包括它自己,NaN==NaN和NaN===NaN都是false,如果想测试某个数字是否为NaN,可以使用内置的函数isNaN(),如果是NaN则返回true, ...

  7. Lua中创建新的文件夹

    如下: os.execute('mkdir 文件夹名称')

  8. scp 和 rsync

    scp 和 rsync指令的区别 相同点两者都可以被用来进行数据同步 不同点 : 对于scp来讲 是全量复制 以当前主机为准 将相同的文件拷贝到另一台机器上 rsync 可以识别增量的内容,可以仅仅对 ...

  9. 【当年笔记】集合之Map

    Map 常用的实现类如下: Hashtable :Java 早期hash类,线程安全,不支持 null 键和值,因为它的性能不如 ConcurrentHashMap,所以基本不用. HashMap : ...

  10. keycloak 找出特定客户端权限的user 配置OTP

    背景:项目组中有用到keycloak给两个应用进行登录认证使用.其中有一个应用放在公网,安全部门同事说 不能直接账号密码登录,容易破解,需要进行二次验证. 刚好查到keycloak支持OTP(one ...