<template>
  <el-row class="wrapper layout-grid-line">
    <el-col :span="span">
      <pre>
{{
  `
  import TreeChart from '@/components/base/TreeChart/index.vue'
  <div class="chart-box">
    <TreeChart :treeData="treeData" />
  </div>
  `
}}
      </pre>
      <div class="chart-box">
        <TreeChart :treeData="treeData" />
      </div>

    </el-col>

  </el-row>
</template>

<script setup>
import { ref } from 'vue'
import '@/styles/common.scss'
import TreeChart from '@/components/base/TreeChart/index.vue'
import CompanyImg from "@/assets/icons/symbol.png";
const span = 12

const treeData = ref([
  {
    id: 1,
    name: 'a1',
    symbolSize: 30,
    value: 5,
    symbol: `image://${CompanyImg}`,
    children: [
      {
        id: 11,
        name: 'b1',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
      {
        id: 12,
        name: 'b2',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
      {
        id: 13,
        name: 'b3',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
      {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      },
         {
        id: 14,
        name: 'b4',
        symbolSize: 30,
        value: 5,
        symbol: `image://${CompanyImg}`,
      }

    ]
  }
])
</script>

<style lang="scss" scoped>
.chart-box {
  width: 700px;
  height: 400px;
  border: 1px solid var(--bg-black-5);
}
</style>