Vue.js Vue-Tree-Chartを利用してデータをツリーチャートで表示する

npx vue create vueapp1

<出力結果>
Vue CLI v4.1.1
? Please pick a preset: default (babel, eslint)


Vue CLI v4.1.1
✨  Creating project in /home/testuser/vueapp1.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...

npm i vue-tree-chart --save

<template>
  <div id="app">       
    <TreeChart :json="treeData" />
  </div>
</template>

<script>
import Vue from 'vue'
import TreeChart from "vue-tree-chart";
Vue.component('tree-chart',TreeChart);

export default {
  name: 'app',
  components: {    
    TreeChart
  },
  data() {
    return {
      landscape: [],
      treeData: {
        name: 'root',
        image_url: "https://static.refined-x.com/static/avatar.jpg",
        children: [
          {
            name: 'children1',
            image_url: "https://static.refined-x.com/static/avatar.jpg"
          },
          {
            name: 'children2',
            image_url: "https://static.refined-x.com/static/avatar.jpg",
            mate: {
              name: 'mate',
              image_url: "https://static.refined-x.com/static/avatar.jpg"
            },
            children: [
              {
                name: 'grandchild',
                image_url: "https://static.refined-x.com/static/avatar.jpg"
              },
              {
                name: 'grandchild2',
                image_url: "https://static.refined-x.com/static/avatar.jpg"
              },
              {
                name: 'grandchild3',
                image_url: "https://static.refined-x.com/static/avatar.jpg"
              }
            ]
          }
        ]
      }
    }
  },
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>