可视化层级关系：小程序中绘制树状图的简单方法

什么是树状图？

树状图是一种可以很好表达层级关系的可视化方法，它的表现形式如下：

           _A_
         /   \
        /     \
       /       \
      B         C
     / \       / \
    D   E     F   G

如上图所示，树状图由根节点不断派生，形成一个树状结构。根节点是树状图的起点，它没有父节点。其他节点都是根节点的子节点，它们可以进一步派生出自己的子节点。

如何使用小程序绘制树状图？

要使用小程序绘制树状图，我们需要借助第三方组件。目前，小程序上有多种可以绘制树状图的组件，您可以根据自己的需求选择合适的组件。

这里，我们以「echarts」组件为例，为大家演示如何使用小程序绘制树状图。

1. 安装「echarts」组件

npm install --save echarts

2. 在小程序中引入「echarts」组件

import * as echarts from 'echarts'

const app = getApp()

app.globalData.echarts = echarts

3. 创建树状图实例

const myChart = echarts.init(this, null, {
  renderer: 'svg'
})

4. 设置树状图数据

const data = {
  name: 'flare',
  children: [
    {
      name: 'analytics',
      children: [
        {
          name: 'cluster',
          children: [
            { name: 'AgglomerativeCluster', value: 3938 },
            { name: 'CommunityStructure', value: 3812 },
            { name: 'HierarchicalCluster', value: 6714 },
            { name: 'MergeEdge', value: 743 }
          ]
        },
        {
          name: 'graph',
          children: [
            { name: 'BetweennessCentrality', value: 3534 },
            { name: 'LinkDistance', value: 5731 },
            { name: 'MaxFlowMinCut', value: 7840 },
            { name: 'ShortestPaths', value: 5914 },
            { name: 'SpanningTree', value: 3416 }
          ]
        },
        {
          name: 'optimization',
          children: [
            { name: 'AspectRatioBanker', value: 7074 }
          ]
        }
      ]
    },
    {
      name: 'animate',
      children: [
        { name: 'Easing', value: 17010 },
        { name: 'FunctionSequence', value: 5890 },
        { name: 'interpolate', value: 9724 },
        { name: 'ISchedulable', value: 1041 },
        { name: 'Parallel', value: 5176 },
        { name: 'Pause', value: 4495 },
        { name: 'Scheduler', value: 5593 },
        { name: 'Sequence', value: 5534 },
        { name: 'Transition', value: 9201 },
        { name: 'Transitioner', value: 19975 },
        { name: 'TransitionEvent', value: 1116 }
      ]
    },
    {
      name: 'data',
      children: [
        { name: 'converters', value: 721 },
        { name: 'DataField', value: 1759 },
        { name: 'DataSchema', value: 2165 },
        { name: 'DataSource', value: 3363 },
        { name: 'DataTable', value: 702 },
        { name: 'DataUtil', value: 3322 }
      ]
    },
    {
      name: 'display',
      children: [
        { name: 'DirtySprite', value: 8833 },
        { name: 'Graphics', value: 1815 },
        { name: 'HandlerRegistry', value: 1116 }
      ]
    },
    {
      name: 'flex',
      children: [
        { name: 'AlignController', value: 4893 },
        { name: 'Binder', value: 2559 },
        { name: 'Box', value: 9943 },
        { name: 'FlexItem', value: 10417 },
        { name: 'FlexSpec', value: 11214 },
        { name: 'MeasureOutput', value: 4034 },
        { name: 'Size', value: 2947 },
        { name: 'SpaceCalculator', value: 1322 }
      ]
    },
    {
      name: 'physics',
      children: [
        { name: 'DragForce', value: 1082 },
        { name: 'GravityForce', value: 1336 },
        { name: 'IForce', value: 319 },
        { name: 'NBodyForce', value: 10498 },
        { name: 'Particle', value: 2822 },
        { name: 'Simulation', value: 9464 }
      ]
    },
    {
      name: 'query',
      children: [
        { name: 'AggregateExpression', value: 1616 },
        { name: 'And', value: 1027 },
        { name: 'Arithmetic', value: 3891 },
        { name: 'Average', value: 893 },
        { name: 'BinaryExpression', value: 2893 },
        { name: 'Comparison', value: 5103 },
        { name: 'CompositeExpression', value: 5781 },
        { name: 'Count', value: 781 },
        { name: 'DateUtil', value: 4141 },
        { name: 'Distinct', value: 933 },
        { name: 'Expression', value: 5130 },
        { name: 'ExpressionIterator', value: 3617 },
        { name: 'Fn', value: 3240 },
        { name: 'If', value: 2732 },
        { name: 'IsA', value: 2039 },
        { name: 'Literal', value: 1280 },
        { name: 'Match', value: 3748 },
        { name: 'Maximum', value: 843 },
        { name: 'Minimum', value: 843 },
        { name: 'Not', value: 1554 },
        { name: 'Or', value: 970 },
        { name: 'Query', value: 13796 },
        { name: 'Range', value: 7723 },
        { name: 'StringUtil', value: 4130 },
        { name: 'Sum', value: 796 },
        { name: 'Variable', value: 11241 },
        { name: 'Variance', value: 189 },
        { name: 'Xor', value: 1101 }
      ]
    },
    {
      name: 'scale',
      children: [
        { name: 'BandScale', value: 711 },
        { name: 'DiscreteScale', value: 2196 },
        { name: 'LogScale', value: 3162 },
        { name: 'MagnitudeScale', value: 1403 },
        { name: 'MultiScale', value: 1379 },
        { name: 'OrdinalScale', value: 3492 },
        { name: 'QuantileScale', value: 2493 },
        { name: 'QuantitativeScale', value: 2496 },
        { name: 'RootScale', value: 3301 },
        { name: 'Scale', value: 4268 },
        { name: 'ScaleType', value: 1