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',
    itemStyle: {
      color: '#ff0000'
    }
  },
  {
    name: '人物2',
    itemStyle: {
      color: '#00ff00'
    }
  },
  {
    name: '人物3',
    itemStyle: {
      color: '#0000ff'
    }
  }
]

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

4. 渲染图表

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

<template>
  <div>
    <vue-echarts :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: {},
        series: [
          {
            type: 'graph',
            layout: 'force',
            data: data,
            links: links,
            roam: true,
            label: {
              show: true
            },
            force: {
              repulsion: 100
            }
          }
        ]
      }
    }
  }
}
</script>

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