如何用ECharts动态在地图上标识点

如何用ECharts动态在地图上标识点,第1张

#define PRICE 30

main()

{

int num,total

num=10

total=num* PRICE

printf(逗total=%d地,total)

}

?用标识符代表一个常量,称为符号常量。

?符号常量与变量不同,它的值在其作用域内不能改变,也不能再被赋值。

?使用符号常量的好处是:

?含义清楚;

?能做到逗一改全改地。

在某些需求下需要用到树形图来表达数据结构,我使用的是 echarts ,关于 echart 树形图的基础配置和使用这里就不展开。

直接上图,这是一个基础的树形图demo:

点击非最末节点的时候,echart的默认行为为收缩该节点的子节点,这个行为会与下面实现的效果有关系,效果:

下面进入实现,一开始思考这个需求的时候,以为跟经常做的柱状图点击更换柱子颜色一样,都是去替换配置,当然某种情况下也是可以实现的,先简单说一下树形图的 data 结构,是使用 children 属性层层嵌套的结构:

按上面的思路,只要监听节点的点击事件,然后获取对应链路相关的节点,更改他们的 lineStyle ,然后 echart 实例重新 setOption 就可以,下面看一下大概实现:

看一下点击节点, echart 带的参数

到这里这种点击更换相关节点 linestyle 的方式就实现,但是这种方式有两个问题:

1.上面我们是假设 value 是唯一的,如果实际开发中 value 有实际用途不能让我们生成唯一的值,这种方法就无法实现。但这个还不是致命的。

2.上面说到,非最末节点点击时,会收缩与展开它的子节点,而我们上面实现高亮的时候是重新 setOption ,会将已 *** 作的交互覆盖掉,点击前效果:

实现高亮的核心还是更换节点属性的 linestyle ,但是不能通过重新 setOption 来实现,在翻遍 echart 配置项的时候,最后看到了一个属性和一个方法:

实现:

先在 echart 配置项中添加 emphasis 时的效果:

因为 emphasis 属性默认是鼠标移入节点时的效果,所以我们手动触发高亮会和默认行为冲突,需要一个数组保存点击高亮的节点 dataIndex

点击时手动触发相关节点的高亮:

还需要覆盖 emphasis 的默认行为,也就是鼠标移入事件:

实现效果:

点击前:

点击后:

实现了。

我是鸭子,祝你幸福。


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11905956.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-19
下一篇2023-05-19

发表评论

登录后才能评论

评论列表(0条)

    保存