ECharts Tree Diagram

by kelvinau

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.8.5/echarts.min.js"></script>
<div id="main" style="width: 600px;height:600px;"></div>

JavaScript

var WINDOWS_ICON = 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Windows_logo_-_2012.svg/600px-Windows_logo_-_2012.svg.png';
var APPLE_ICON = 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/1024px-Apple_logo_black.svg.png';
var LINUX_ICON = 'https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/1000px-Tux.svg.png';
var AVATAR_ICON = 'https://www.shareicon.net/data/256x256/2015/09/22/644753_man_512x512.png';
var myChart = echarts.init(document.getElementById('main'));

var data = {
  "name": "FortiAnalyzer-3000E",
  "symbol": "image://http://www.opensecurityarchitecture.org/cms/images/OSA_images/icon_library/osa_firewall.png",
  "symbolSize": 60,
  "children": [{
      "name": "FGT30C0000000001",
      "symbol": "image://" + AVATAR_ICON,
      "symbolSize": 40,
      "children": [{
          "name": "FortiClient-1",
          "symbol": "image://" + WINDOWS_ICON,
          "symbolSize": 20,
          "value": 1302
        },
        {
          "name": "FortiClient-2",
          "symbol": "image://" + WINDOWS_ICON,
          "symbolSize": 20,
          "value": 24593
        },
        {
          "name": "FortiClient-3",
          "symbol": "image://" + WINDOWS_ICON,
          "symbolSize": 20,
          "value": 652
        },
        {
          "name": "FortiClient-4",
          "symbol": "image://" + WINDOWS_ICON,
          "symbolSize": 20,
          "value": 636
        },
        {
          "name": "FortiClient-5",
          "symbol": "image://" + WINDOWS_ICON,
          "symbolSize": 20,
          "value": 6703
        }
      ]
    },
    {
      "name": "FGT-2ND-FW",
      "symbol": "image://" + AVATAR_ICON,
      "symbolSize": 40,
      "children": [{
          "name": "FortiClient-1",
          "symbol": "image://" + WINDOWS_ICON,
          "symbolSize": 20,
          "value": 2138
        },
        {
          "name": "FortiClient-2",
          "symbol": "image://" + WINDOWS_ICON,
         ...