JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/echarts/dist/echarts.min.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.min.js"></script>

<div id="app">
  <ve-tree :data="chartData" :settings="chartSettings"></ve-tree>
</div>tree

JavaScript

const SIMPLE_DATA = {
  name: 'cloudbuild',
  value: '10.125.5.99',
  link: 'https://ele.me',
  children: [
    {
      name: 'X1',
      value: 1,
      link: 'https://ele.me'
    },
    {
      name: '10.125.5.99',
      value: 1,
      link: 'https://ele.me'
    },
    {
      name: 'c',
      value: 3,
      link: 'https://ele.me'
    },
    {
      name: 'd',
      value: 3,
      link: 'https://ele.me'
    }
  ]
}

new Vue({
  el: '#app',
  created: function () {
    this.chartData = {
      columns: ['name', 'value'],
      rows: [
        {
          name: 'tree1',
          value: [SIMPLE_DATA]
        }
      ]
    }
    this.chartSettings = {
    	seriesMap: {
        tree1: {
          orient: 'vertical',
          label: {
            position: 'bottom'
          }
        }
      }, 
    }
  }
})