vue项目,用echarts写关系图。category为3的节点默认隐藏,点击category为2的节点控制category为3的节点的显隐。nodes用graphData表示,links用graphLink表示。
时间: 2023-12-10 16:42:22 浏览: 77
vue+element中echarts图表,下面明细表格动态生成表格的行与列,表头实现斜线/斜杠,监听左侧菜单栏实现图表自适应
5星 · 资源好评率100%
你可以通过以下代码实现这个功能:
1. 在 mounted 钩子函数中引入 echarts,并初始化图表:
```javascript
import echarts from 'echarts';
mounted() {
this.chart = echarts.init(this.$refs.chart);
// 初始化 option
const option = {...};
this.chart.setOption(option);
}
```
2. 在 option 中设置 category 为 3 的节点默认隐藏:
```javascript
option: {
...
series: [
{
type: 'graph',
layout: 'force',
...
data: graphData.map(node => ({
...node,
symbolSize: node.category === 3 ? 0 : 20, // 设置 symbolSize 为 0
itemStyle: {
opacity: node.category === 3 ? 0 : 1 // 设置透明度为 0
}
})),
...
}
]
}
```
3. 在点击 category 为 2 的节点时,控制 category 为 3 的节点的显隐:
```javascript
this.chart.on('click', params => {
if (params.data.category === 2) {
const dataIndex = params.dataIndex;
const graph = this.chart.getOption().series[0];
const data = graph.data[dataIndex];
const opacity = data.itemStyle.opacity === 0 ? 1 : 0; // 根据当前透明度判断是否显示
graph.data.forEach((node, index) => {
if (node.category === 3 && graphLink.some(link => link.target === index && link.source === dataIndex)) {
// 判断是否连接到 category 为 2 的节点
this.chart.dispatchAction({
type: 'downplay', // 取消原有的高亮状态
seriesIndex: 0,
dataIndex: index
});
this.chart.dispatchAction({
type: 'highlight', // 设置新的高亮状态
seriesIndex: 0,
dataIndex: index
});
this.chart.setOption({
series: [
{
...graph,
data: [
...graph.data.slice(0, index),
{
...node,
symbolSize: opacity === 0 ? 0 : 20, // 根据透明度设置 symbolSize
itemStyle: {
opacity // 设置透明度
}
},
...graph.data.slice(index + 1)
]
}
]
});
}
});
}
});
```
其中,`graphData` 是节点数据,`graphLink` 是节点之间的连线数据。这段代码实现的逻辑是,当点击 category 为 2 的节点时,遍历所有与它连接的 category 为 3 的节点,将它们的透明度和大小设置为 0 或 20,同时高亮它们。
阅读全文