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)
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！