Vue3中echarts力导向图的使用和简单配置

# Vue3中echarts力导向图的简单使用和配置

最近有Vue项目中使用到Echarts,做一个简单记录。

项目实现了一个显示全部节点和部分节点(根据节点长度进行过滤)的功能

做的时候写的一些思考也写在了注释里面

data.json 跟 https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/les-miserables.json 一样,就不专门贴出来了

```

```

实现效果


显示全部

过滤效果


显示部分

通过设置节点的category属性来表示不同节点与点击处节点的距离,具体看代码啦。

体验一下就知道效果了~

你可能感兴趣的:(Vue3中echarts力导向图的使用和简单配置)