echarts 树图使用心得

最新推荐文章于 2025-09-22 00:00:00 发布

原创最新推荐文章于 2025-09-22 00:00:00 发布 · 992 阅读

8 ·

CC 4.0 BY-SA版权

工作同时被 2 个专栏收录

24 篇文章

订阅专栏

学习

13 篇文章

订阅专栏

本文介绍如何利用Vue结合ECharts 5.0.1版本绘制用户界面的树状图，通过实例展示了如何处理多级用户数据，并提供了交互功能如节点的展开与折叠。但当子节点数量过多时，布局可能会超出浏览器窗口。

由于客户的数据库结构是树结构，所以需求想用echarts 树来写一个用户界面，分级为三层，即第一层，上一级用户，第二层，当前用户，第三层，它的子用户。写完发现，如果子用户过多（超过20），那个用户会挤在一起，或者超过游览器界面，不好看，所以这个需求放弃了，但是，还是记录下如何写，使用vue+echarts.(echarts 请使用5.0.1版本或以上。不然会出现问题)

npm install  --save echarts@5.0.1

第一步：引入echarts 到vue 中（很简单，自行百度）
第二步：使用下面的示例
在这里插入图片描述
代码：点击图片收缩展开，点击蓝色区域label实现操作

<template>
  <div class="app-container">
    <div id="main" class="tree"></div>
  </div>
</template>

<script type="javascript">
  import * as echarts from 'echarts'

  export default {
    name: 'hello',
    data(){
      return{
        list: [],
        listLoading: true,
        total: 0,
        listQuery: {
          page: 1,
          limit: 10
        },
        rules: {
        },

        dialogFormVisible: false,
        dialogStatus: '',

      }
    },

    created() {

    },
    mounted(){
      this.drawLine();
    },
    methods: {
      drawLine(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var datas = [{
          userId:1,
          nickName: "张三",
          symbol:"image://"+"https://t1.hxzdhn.com/uploads/tu/202005/9999/436e4d4881.jpg",
          collapsed:false,
          children: [{
            userId:2,
            nickName: "李四",
            symbol:"image://"+"https://t1.hxzdhn.com/uploads/tu/202005/9999/436e4d4881.jpg",
            collapsed:false,
            children: [
              {
                userId:3,
                nickName: "李1",
                symbol:"image://"+"https://t1.hxzdhn.com/uploads/tu/202005/9999/436e4d4881.jpg",
                collapsed:false,
              },
              {
                userId:4,
                nickName: "李2",
                symbol:"image://"+"https://t1.hxzdhn.com/uploads/tu/202005/9999/436e4d4881.jpg",
                collapsed:false,
              },
              {
                userId:5,
                nickName: "李3",
                symbol:"image://"+"https://t1.hxzdhn.com/uploads/tu/202005/9999/436e4d4881.jpg",
                collapsed:false,
              }
            ]
          }]
        }];
        var option = {
          tooltip: {
            show:true,
            data:datas,
            trigger: 'item',
            triggerOn: 'mousemove',
            formatter: function (param) {
              return `昵称: `+param.data.nickName+`ID号:`+param.data.phone
            }

          },
          series: [{
            type: 'tree', // 设置树图
            name: 'xxxx',
            orient: 'TB', // 树图发散的方向，（只有在 layout = 'orthogonal' 的时候，该配置项才生效）对应有 水平 方向的 从左到右，从右到左；以及垂直方向的 从上到下，从下到上。取值分别为 'LR' , 'RL', 'TB', 'BT'。注意，之前的配置项值 'horizontal' 等同于 'LR'， 'vertical' 等同于 'TB'。
            data: datas, // 树图所需要的的数据
            left: '0%',
            right: '0%',
            layout: 'orthogonal', // 正交布局（水平布局）
            symbolSize: [80, 80], // 标记大小
            initialTreeDepth: 1, // 树图层级
            expandAndCollapse:true,  //展开收缩功能，设为false则不能展开收缩
            lineStyle: {
              curveness: 0, // 树图边的曲度
            },
            label: {
              offset:[0,35,0,0],//调整位置
              formatter: function (param) {
                return `{div|`+param.data.nickName+`}\n{div|`+param.data.phone+`}\n{a|按钮}`

              },
              rich:{
                div:{
                  width: 70,
                  color: "#333",
                  fontSize: 8,
                  backgroundColor:" #4986F7",
                  color:" #fff",
                  padding: [4, 5, 4, 5],
                  wordBreak: "break-all",
                  align:"center"
                },
                a:{
                  with:30,
                  height:8,
                  backgroundColor:" #4986F7",
                  borderRadius: 20,
                  padding: [4, 7, 4, 7],
                  color:" #fff",
                  fontSize: 8,
                  align:"center"
                },
                img:{
                  with:30,
                  height:30,
                },
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
          }]
        }
        myChart.clear();
        myChart.setOption(option);
        let conation = document.getElementById("main");
        let allNodes = 0;
        let nodes = myChart._chartsViews[0]._data._graphicEls
        for(var i =0;i<nodes.length;i++){
          let node = nodes[i]
          if(node == undefined){
            continue
          }else{
            allNodes++
          }
        }

        conation.style.width=100*allNodes +'px'   //自行调节

        conation.style.height=100*allNodes +'px'   //自行调节
        myChart.resize()

        myChart.on('mousedown', (params)=>{ //特别重要，不能用click，
          if (params.event.target.culling === true){
   /*         const userId = params.data.userId;
            const curNode = myChart._chartsViews[0]._data.tree._nodes.find(item => {
              return item.userId === userId;
            });
            const depth = curNode.depth;
            const curIsExpand = curNode.isExpand;
            myChart._chartsViews[0]._data.tree._nodes.forEach((item, index) => {
              if (item.depth === depth && item.userId !== userId && !curIsExpand) {
                item.isExpand = false;
              }
            });*/
            console.log("节点");
          }else if(params.event.target.culling === false){
            alert("菜单")
            console.log("点击了label");
          }
        });

      },

    }
  }


</script>
<style>
  .tree{

  }
</style>