树图

树图主要用来可视化树形数据结构，是一种特殊的层次类型，具有唯一的根节点，左子树，和右子树

import * as echarts from 'echarts'
export default {
  install: (app: any) => {
    app.config.globalProperties.$leida = (id: any) => {
      var chartDom = document.getElementById(id)!
      if (chartDom == null) {
        return
      }
      echarts.dispose(chartDom)
      var myChart = echarts.init(chartDom, '', { width: 800, height: 500 })
      $.get('https://echarts.apache.org/examples/data/asset/data/flare.json', (data: any) => {
        console.log(data)
        data.children.forEach(function (datum: any, index: any) {
          index % 2 === 0 && (datum.collapsed = true)
        })
        console.log(data)
        var option = {
          tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove',
          },
          series: [
            {
              type: 'tree',
              data: [data],
              symbolSize: 7,
              label: {
                position: 'left',
                verticalAlign: 'middle',
                align: 'right',
                fontSize: 9,
              },
              leaves: {
                // 叶子节点的配置
                label: {
                  position: 'right',
                  verticalAlign: 'middle',
                  align: 'left',
                },
              },
              emphasis: {
                // 图形和标签的高亮样式
                focus: 'descendant', // 聚焦自己和子节点
              },
              expandAndCollapse: true, // 允许展开和收起
            },
          ],
        }
        myChart.setOption(option)
      })
    }
  },
}

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。