当前位置: 首页 > news >正文

echarts花样作死的坑

目前手上的工作,老板接了一个活计,能够有一个自由移动的地图,然后在地图上某个地方点一下,出现各种数据展示之类的,我一眨眼就想到了应该用echarts,但是这个玩意我只有培训的时候粗略的用了一下,画了个饼图就结束了,这次要我单独做一个客户的交互地图出来,心里还是没点底,但是好在时间很多,可以慢慢学习,

接下来就讲讲在用echats中的遇到的一些问题


遇到的一个问题就是,老板要求,不能鼠标滑上去就立刻触发tooltip,要点击以后才触发

clipboard.png

一开始对echarts了解的很少,就看文档,看到一个emphasis(强调)和normal(普通),emphasis我测试了一下发现只要鼠标移上去,就是emphasis状态了,但是里面的展示的东西我目前没有办法更改,于是又去看文档,找到了一个叫做formatter属性,echarts官网上对formatter的描述是

用来格式化图例文本,支持字符串模板和回调函数两种形式。

这个可以解决很多问题了,但是!由于本人偷懒,只看了字符串模板,回调函数太麻烦直接忽略了,字符串模板用起来虽然简单但是数据是死的,而且不能加html代码。悲惨的我在字符串模板上耽误了大概一天的时间,第二天开始看回调函数,一看,回调函数还可以加!代码! 也就是我可以如上图那样在上面加链接,加按钮!太棒了!

然后就遇到一个坑

要完成的功能是,点击按钮,或者链接,弹出来一个窗口播放视频,那么首先我点击的时候,就要得到这个链接,所以,我就想测试一下,能不能点击按钮,获得对应的连接

formatter代码如下
图片描述

点击事件是这样
图片描述

点击测试按钮,按道理来讲没有任何问题,可以得到我想要的name
图片描述

但是!
报错了

这有点让我意外,幽州is not defined是怎么个意思? 幽州什么时候是个变量了???
图片描述

迷思苦想,难道传进去的时候格式不对?我想到了JSON格式(毕竟我也只知道JSON格式)然后把代码改成了这样
图片描述

然后,我成功辣!
图片描述

echats网上有很多教程,但是没有哪一篇涉及到了这一点,还好自己捣鼓捣鼓弄出来了,很开心

相关文章:

  • 那些年让你迷惑的阻塞、非阻塞、异步、同步
  • Cloudopt-logger — Kotlin 实现的日志框架扩展
  • Linux日记本_04:阿里云ECS服务器(CentOS7)端口设置以及 MySQL数据库搭建
  • [js]- 两个对象的合并(Object.assign)
  • 火币交易细则
  • 阿里云服务器配置过程
  • redirectTo、navigateTo与switchTap区别
  • python3 猜数字小游戏2.0
  • python函数式编程一
  • .NET性能优化(文摘)
  • CentOS 7.5 运维之路之网络配置
  • Linux日志分析详解
  • 高德地图大批量数据(上万)画历史轨迹实现方案
  • java并发包
  • 爬取伯乐在线文章(二)通过xpath提取源文件中需要的内容
  • [微信小程序] 使用ES6特性Class后出现编译异常
  • 【Linux系统编程】快速查找errno错误码信息
  • 【跃迁之路】【585天】程序员高效学习方法论探索系列(实验阶段342-2018.09.13)...
  • Computed property XXX was assigned to but it has no setter
  • in typeof instanceof ===这些运算符有什么作用
  • Java IO学习笔记一
  • Laravel核心解读--Facades
  • SpringCloud(第 039 篇)链接Mysql数据库,通过JpaRepository编写数据库访问
  • tweak 支持第三方库
  • Twitter赢在开放,三年创造奇迹
  • 简析gRPC client 连接管理
  • 聊聊spring cloud的LoadBalancerAutoConfiguration
  • 聊聊springcloud的EurekaClientAutoConfiguration
  • 入口文件开始,分析Vue源码实现
  • 使用Gradle第一次构建Java程序
  • 微信小程序实战练习(仿五洲到家微信版)
  • 问题之ssh中Host key verification failed的解决
  • 原生Ajax
  • Redis4.x新特性 -- 萌萌的MEMORY DOCTOR
  • Spring Batch JSON 支持
  • 数据库巡检项
  • 正则表达式-基础知识Review
  • ​【原创】基于SSM的酒店预约管理系统(酒店管理系统毕业设计)
  • ​iOS实时查看App运行日志
  • ​七周四次课(5月9日)iptables filter表案例、iptables nat表应用
  • #Z0458. 树的中心2
  • #每日一题合集#牛客JZ23-JZ33
  • $.ajax,axios,fetch三种ajax请求的区别
  • (01)ORB-SLAM2源码无死角解析-(66) BA优化(g2o)→闭环线程:Optimizer::GlobalBundleAdjustemnt→全局优化
  • (3)选择元素——(14)接触DOM元素(Accessing DOM elements)
  • (arch)linux 转换文件编码格式
  • (Java)【深基9.例1】选举学生会
  • (NO.00004)iOS实现打砖块游戏(十二):伸缩自如,我是如意金箍棒(上)!
  • (webRTC、RecordRTC):navigator.mediaDevices undefined
  • (WSI分类)WSI分类文献小综述 2024
  • (二)fiber的基本认识
  • (论文阅读40-45)图像描述1
  • (三)c52学习之旅-点亮LED灯
  • (数位dp) 算法竞赛入门到进阶 书本题集
  • (四)TensorRT | 基于 GPU 端的 Python 推理