当前位置: 首页 > Web前端 > CSS

echarts的坑招要死

时间:2023-03-30 16:22:47 CSS

目前手头的工作,老板接手一份工作,可以有一张自由移动的地图,然后点击地图某处,出现各种数据显示之类的,我总是一转眼想到应该用echarts,但是训练的时候也只是粗略的用了一下这个东西,画个饼图就完事了。这次想单独做一个客户的互动地图,但还是没有头绪。不过好在时间多,可以慢慢学。接下来说说使用echats遇到的一些问题。遇到的问题之一是老大要求tooltip不能在鼠标向上滑动时立即触发,需要点击后才触发。一开始对echarts知之甚少,看文档看到一个强调(emphasis)和一个普通(normal)。我测试了强调,发现只要鼠标上移就是强调状态,但是里面显示的东西是当前状态。没办法改,于是又去翻文档,找到了一个属性叫formatter。echarts官网对formatter的描述用于格式化图例文本,支持字符串模板和回调函数两种形式。这样可以解决很多问题,但是!因为懒,所以只看了字符串模板。回调函数太麻烦,我忽略了。字符串模板虽然简单,但是数据是死的,不能加html代码。惨了,大概在字符串模板上浪费了一天,第二天才开始看回调函数。乍一看,回调函数还是可以加的!代码!也就是我可以在上面添加链接和按钮,如上图所示!奇妙!然后就遇到坑了。要完成的功能是点击一个按钮或一个链接,会弹出一个窗口来播放视频。那么首先,当我点击的时候,我会得到这个链接,所以我想测试一下我是否可以点击这个按钮,得到对应的connectionformatter代码如下点击事件是这样的点击测试按钮,按道理来说是没有问题的,我可以拿到我想要的名字但是!有点意外报错。幽州未定是什么意思?幽州什么时候变成了变数???仔细想想,是不是传入的时候格式不对?想到了JSON格式(毕竟我只知道JSON格式),把代码改成这样。然后,我成功了!网上关于echats的教程很多,但是都没有涉及到这一点。幸运的是,我自己想通了。我很高兴。