vue echarts 人物关系图 展示+筛选

要在 Vue 中实现人物关系图的展示和筛选，可以使用 ECharts 的数据过滤功能。具体步骤如下：

1. 安装 ECharts 和 Vue-ECharts

在项目中安装 ECharts 和 Vue-ECharts，可以使用 npm 安装：

npm install echarts vue-echarts

2. 引入 ECharts 和 Vue-ECharts

在需要使用人物关系图的组件中，引入 ECharts 和 Vue-ECharts：

import echarts from 'echarts'
import VueECharts from 'vue-echarts'

3. 定义数据

定义一个数组来存储人物关系图的数据，每个元素为一个对象，包含节点的名称、类别、标签等信息，以及节点之间的关系：

const data = [
  {
    name: '人物1',
    category: 0,
    itemStyle: {
      color: '#ff0000'
    }
  },
  {
    name: '人物2',
    category: 1,
    itemStyle: {
      color: '#00ff00'
    }
  },
  {
    name: '人物3',
    category: 1,
    itemStyle: {
      color: '#0000ff'
    }
  }
]

const links = [
  {
    source: '人物1',
    target: '人物2'
  },
  {
    source: '人物2',
    target: '人物3'
  },
  {
    source: '人物3',
    target: '人物1'
  }
]

4. 渲染图表

在模板中使用 Vue-ECharts 渲染图表，使用 ECharts 的关系图表类型，传入定义好的数据：

<template>
  <div>
    <div>
      <button @click="filter(0)">筛选类别1</button>
      <button @click="filter(1)">筛选类别2</button>
      <button @click="reset()">重置</button>
    </div>
    <vue-echarts ref="chart" :options="options"></vue-echarts>
  </div>
</template>

<script>
import echarts from 'echarts'
import VueECharts from 'vue-echarts'

export default {
  components: {
    VueECharts
  },
  data () {
    return {
      options: {
        title: {
          text: '人物关系图'
        },
        tooltip: {},
        legend: {
          data: ['类别1', '类别2']
        },
        series: [
          {
            type: 'graph',
            layout: 'force',
            data: data,
            links: links,
            roam: true,
            label: {
              show: true
            },
            force: {
              repulsion: 100
            }
          }
        ]
      }
    }
  },
  methods: {
    filter (category) {
      const chart = this.$refs.chart.echarts
      chart.dispatchAction({
        type: 'dataFilter',
        filterMode: 'weakFilter',
        // 过滤函数，返回 true 表示保留
        filter: (dataIndex) => {
          return data[dataIndex].category === category
        }
      })
    },
    reset () {
      const chart = this.$refs.chart.echarts
      chart.dispatchAction({
        type: 'dataFilter',
        filterMode: 'none'
      })
    }
  }
}
</script>

以上代码中，我们添加了三个按钮来进行筛选和重置操作。在 `filter` 方法中，我们使用 ECharts 的 `dispatchAction` 方法来触发数据过滤行为。在 `reset` 方法中，我们将过滤模式设置为 `none`，即取消所有过滤。

注意，为了使数据过滤生效，需要将 ECharts 实例的引用存储在组件中，这里使用了 Vue 的 `ref` 属性来引用 ECharts 组件，并在 `filter` 和 `reset` 方法中通过 `$refs` 属性获取 ECharts 实例。

以上就是使用 Vue 和 ECharts 实现人物关系图展示和筛选的基本步骤，根据实际需求可以进一步调整和定制图表的样式和交互行为。