Vue2使用echarts树图（tree）

Vue3使用echarts树图（tree）

本文使用echarts版本：v5.3.3  项目相关依赖版本信息

参考文档：Documentation - Apache ECharts

自定义传入初始化数据treeData

效果如下图：

①安装echarts：yarn add echarts 

②创建树图组件TreeChart.vue：

③在要使用的页面引入：

import TreeChart from '@/components/TreeChart'
components: {TreeChart
},
treeData: {name: 'tree',children: [{name: '比较',value: 29,children: [{name: '折线图',value: 1},{name: '面积图',value: 2},{name: '柱状图',value: 3}]},{name: '趋势趋势趋势趋势趋势趋势趋势趋势趋势趋势',value: 9,children: [{name: '折线图',value: 1},{name: '阶梯图',value: 2},{name: '面积图',value: 3},{name: '堆叠面积图',value: 4}]},{name: '组成'}]
},
getNodeData (data) {console.log('data:', data)
}