使用echarts绘制关系图示例代码

ECharts是一个强大的数据可视化库，可以创建各种图表，包括关系图或树状图。下面是一个简单的例子，展示如何使用ECharts绘制一个基本的关系图（树形图），假设我们有一个部门层级结构的数据：

// 引入ECharts库
import echarts from 'echarts';

// 假设我们有部门数据
const data = {
  name: ['根节点', '部门A', '部门B', '部门C', '部门D'],
  children: [
    {name: '部门A-1', pid: '部门A'},
    {name: '部门A-2', pid: '部门A'},
    {name: '部门B-1', pid: '部门B'},
    {name: '部门C-1', pid: '部门C'},
  ]
};

// 创建ECharts实例
const myChart = echarts.init(document.getElementById('chart'));

// 设置图表配置项
const option = {
  type: 'tree',
  data,
  // 样式设置
  label: {
    normal: {
      position: 'top'
    },
    emphasis: {
      shadowBlur: 10,
      shadowOffsetX: 0,
      shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
  },
  roam: true,
  animationDurationUpdate: 750,
};

// 绘制图表
myChart.setOption(option);

在这个例子中，`data`包含了每个节点的名称以及它们的父节点id。ECharts会自动处理层级关系并将其显示为树状结构。