vue echarts-tree部门架构树图实现

最新推荐文章于 2024-09-03 07:24:03 发布

nzstjhk

最新推荐文章于 2024-09-03 07:24:03 发布

阅读量5.2k

点赞数 6

本文链接：https://blog.csdn.net/weixin_42598901/article/details/97794838

版权

本文介绍如何在Vue项目中结合Echarts库，利用tree图表类型创建部门架构展示。通过在main.js全局注册Echarts，并在组件内通过this.$echarts调用，实现了使用网络图片作为节点图标的树形结构。代码示例展示了具体的实现细节。

摘要由CSDN通过智能技术生成

<template>
    <div>
        <div id="tree"></div>
    </div>
</template>
<script>
export default {
    data(){
        return{

        }
    },
    mounted(){
        this.tree();
    },
    methods:{
        tree(){
            let tr = this.$echarts.init(document.getElementById("tree"));
            tr.setOption({
                title : {
                    show:false
                },
                calculable : false,
                series : [{
                    name:'树图',
                    type:'tree',
                    //排列方式，横向、纵向
                    orient: 'vertical', 
                    left: '2%',
                    right: '2%',
                    top: '12%',
                    bottom: '12%',
                    //连接线长度
                    layerPadding: 30,
                    //结点间距
                    nodePadding: 20,
                    //图形形状
                    symbol: 'circle',
                    //尺寸大小
                    symbolSize: 40,
                    label:{
                        normal:{
                            show:true,
                            formatter:function(param){
                                if(param.name=="销售部"){
                                    return ''
                                }else{
                                    return param.name
                                }
                            },
                        },
                        emphasis:{
                            show:false,
                        }
                    },
                    leaves: {//最底部文字样式
                        label: {
                            normal: {
                                position: 'bottom',
                                rotate: -90,
                                verticalAlign: 'middle',
                                align: 'left',
                                show:false
                            },