Echarts 使用type为tree的树形关系实现图片节点连接实例代码

以下是一个使用 Echarts 中 type 为 tree 的树形关系实现图片节点连接的示例代码：

// HTML
<div id="chart" style="width: 600px; height: 400px;"></div>

// JavaScript
// 假设有以下图片节点的数据
var data = {
  name: 'Root',
  children: [
    {
      name: 'Node 1',
      image: 'node1.png',
      children: [
        {
          name: 'Node 1.1',
          image: 'node1_1.png'
        },
        {
          name: 'Node 1.2',
          image: 'node1_2.png'
        }
      ]
    },
    {
      name: 'Node 2',
      image: 'node2.png',
      children: [
        {
          name: 'Node 2.1',
          image: 'node2_1.png'
        },
        {
          name: 'Node 2.2',
          image: 'node2_2.png'
        }
      ]
    }
  ]
};

// 初始化 Echarts 实例
var chart = echarts.init(document.getElementById('chart'));

// 配置项
var option = {
  series: [
    {
      type: 'tree',
      data: [data],
      top: '10%',
      left: '10%',
      bottom: '10%',
      right: '10%',
      symbol: 'image://', // 图片节点使用 image 符号
      symbolSize: [60, 60], // 图片节点的大小
      layout: 'orthogonal', // 布局方式为正交布局
      emphasis: {
        focus: 'descendant' // 强调样式为当前节点及其后代节点
      },
      label: {
        position: 'inside',
        verticalAlign: 'middle',
        align: 'center',
        fontSize: 14
      },
      leaves: {
        label: {
          position: 'right',
          verticalAlign: 'middle',
          align: 'left',
          fontSize: 14
        }
      },
      expandAndCollapse: true, // 可以展开和折叠节点
      animationDuration: 550,
      animationDurationUpdate: 750
    }
  ]
};

// 使用配置项绘制图表
chart.setOption(option);

以上代码示例中，通过配置项中的 `type: 'tree'`，使用图片作为节点的符号，并设置了图片节点的大小、布局方式、节点样式等属性。可以根据实际需求进行调整和扩展。