目前手上的工作,老板接了一个活计,能够有一个自由移动的地图,然后在地图上某个地方点一下,出现各种数据展示之类的,我一眨眼就想到了应该用echarts,但是这个玩意我只有培训的时候粗略的用了一下,画了个饼图就结束了,这次要我单独做一个客户的交互地图出来,心里还是没点底,但是好在时间很多,可以慢慢学习,
接下来就讲讲在用echats中的遇到的一些问题
遇到的一个问题就是,老板要求,不能鼠标滑上去就立刻触发tooltip,要点击以后才触发
一开始对echarts了解的很少,就看文档,看到一个emphasis(强调)和normal(普通),emphasis我测试了一下发现只要鼠标移上去,就是emphasis状态了,但是里面的展示的东西我目前没有办法更改,于是又去看文档,找到了一个叫做formatter属性,echarts官网上对formatter的描述是
用来格式化图例文本,支持字符串模板和回调函数两种形式。
这个可以解决很多问题了,但是!由于本人偷懒,只看了字符串模板,回调函数太麻烦直接忽略了,字符串模板用起来虽然简单但是数据是死的,而且不能加html代码。悲惨的我在字符串模板上耽误了大概一天的时间,第二天开始看回调函数,一看,回调函数还可以加!代码! 也就是我可以如上图那样在上面加链接,加按钮!太棒了!
然后就遇到一个坑
要完成的功能是,点击按钮,或者链接,弹出来一个窗口播放视频,那么首先我点击的时候,就要得到这个链接,所以,我就想测试一下,能不能点击按钮,获得对应的连接
formatter代码如下
点击事件是这样
点击测试按钮,按道理来讲没有任何问题,可以得到我想要的name
但是!
报错了
这有点让我意外,幽州is not defined是怎么个意思? 幽州什么时候是个变量了???
迷思苦想,难道传进去的时候格式不对?我想到了JSON格式(毕竟我也只知道JSON格式)然后把代码改成了这样
然后,我成功辣!
echats网上有很多教程,但是没有哪一篇涉及到了这一点,还好自己捣鼓捣鼓弄出来了,很开心
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。