前端echarts实现配电室展示

原创于 2025-06-18 11:00:26 发布 · 565 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

写的还有很多要修改的地方，大家有什么更好的展示方式欢迎留言

1.最终实现效果：

配电室效果录屏0618

2.运用技术：

echarts中的tree图，设置label的图片，通过formatter进行拼接节点的图片(断路器？应该可以这么称它)和文字。

实现拖动和缩放：

roam: true, // 实现拖动和缩放

文字展示：

rich: {
  box: {
    color: "#fff",
    align: "center",
  },
  img1: {
    backgroundColor: {
      image: srcOne, // 图片链接我放js开头了，随便放个位置就行let srcOne = require("图片地址");
    },
    width: 20,
    height: 35,
  },
},
formatter: function (value) {
  // 下面这个if判断是为了最顶层不进行拼接图片
  if (value.data.name.indexOf("座") != -1) {
    return value.data.name;
  } else {
    if (value.data.name.length > 6) {
      value.data.name =
        value.data.name.substring(0, 6) + "..."; //如果超出6个字符，显示5个+..
    }
    return "{img1|}" + "\n" + value.data.name;
  }
},

文字换行是因为如果不换行的话，每个设备名称长短不一致，会造成图片偏移不一致，无法对齐，给文字进行substring(0, 1)又有些太短了不好看。

设置每个节点连接为直线：

// 决定直线的关键因素!!! edgeShape: "polyline"
edgeShape: "polyline", // 树图在正交布局下，边的形状。分别有曲线和直线两种，对应的取值是 curve 和 polyline.

对！还有一个关键点，如果要添加点击出现弹框，一定要记得关闭点击事件，这样就不会触发echarts自带的点击事件

不写也行，默认就是false

silent: false, //  为 true，则开启点击事件，为false，则关闭点击事件

点击出现弹框：

// 监听点击事件
myChart.on("click", (params) => {
  //  传点击节点的参数 这个是为了设置我弹框的标题，看个人需求哈
  this.dialogTitle = params.value || params.name;
  //  点击显示对话框
  this.showTooltip = true;
});
myChart.resize();
myChart.setOption(option);
// 对echart进行缩放，字体大小自适应
myChart.getZr().off("mousewheel");
myChart.getZr().on("mousewheel", (param) => {
  console.log("在执行getZr");
  let currentOption = myChart.getOption();
  if (currentOption.series[0]) {
    let zoom = currentOption.series[0].zoom;
    currentOption.textStyle.fontSize = 10 * zoom;
    currentOption.series[0].label.width = 60 * zoom;
    currentOption.series[0].label.rich.img1.width = 40 * zoom;
    currentOption.series[0].label.rich.img1.height = 70 * zoom;
    currentOption.series[0].leaves.label.width = 80 * zoom;
    currentOption.series[0].leaves.label.rich.img1.width = 40 * zoom;
    currentOption.series[0].leaves.label.rich.img1.height = 70 * zoom;
    myChart.setOption(currentOption);
  }
});

3.全部代码

let option = {
  tooltip: {
    trigger: "item",
    label: {
      color: "#0dffff",
    },
    backgroundColor: "rgba(57, 146, 180, 0.3)",
    borderColor: "rgba(57, 146, 180, 1)",
    textStyle: {
      color: "#fff",
      fontSize: 12,
    },
  },
  legend: {
    show: false,
  },
  series: [
    {
      type: "tree",
      width: "100%", //修改树形图的宽度
      height: "100%", //修改树形图的宽度
      orient: "vertical",
      roam: true, // 实现拖动和缩放
      data: data6,// 个人的json数据
      top: "5%",
      bottom: "0%",
      left: "0%",
      right: "0%",
      x: "center",
      symbolSize: 1, // 节点大小
      itemStyle: {
        // 节点颜色
        normal: {
          color: "#fff",
          borderColor: "#fff",
        },
      },
      expandOnClick: false,
      expandAndCollapse: false, //是否开启折叠功能 设置为false可以关闭默认的展开折叠交互
      initialTreeDepth: 15, //树图初始展开的层级（深度）。根节点是第0层，然后是第1层、第2层，
      itemStyle: {
        color: "#ff0000",
        borderColor: "#ff0000",
      },
      lineStyle: {
        normal: {
          color: "#ff0000",
          curveness: 1, // 边框的弯曲度
        },
      },
      label: {
        normal: {
          distance: 0, // 标签与节点的距离
          color: "#fff",
          padding: 2,
          rich: {
            box: {
              color: "#fff", // 字段颜色
              align: "center",
            },
            img1: {
              backgroundColor: {
                image: srcOne,
              },
              width: 20,
              height: 35,
            },
          },
          formatter: function (value) {
            if (value.data.name.indexOf("座") != -1) {
              return value.data.name;
            } else {
              if (value.data.name.length > 6) {
                value.data.name = value.data.name.substring(0, 6) + "..."; //如果超出6个字符，显示5个+..
              }
              return "{img1|}" + "\n" + value.data.name;
            }
          },
          textStyle: {
            color: "#FFFFFF", //文字颜色
            align: "center", //文字的位置
          },
        },
      },
      leaves: {
        label: {
          normal: {
            align: "center",
            rich: {
              box: {
                color: "#fff", // 字段颜色
                align: "center",
              },
              img1: {
                backgroundColor: {
                  image: srcOne,
                },
                width: 20,
                height: 35,
              },
            },
            formatter: function (value) {
              if (value.data.name.indexOf("座") != -1) {
                return value.data.name;
              } else {
                if (value.data.name.length > 6) {
                  value.data.name =
                    value.data.name.substring(0, 6) + "..."; //如果超出6个字符，显示5个+..
                }
                return "{img1|}" + "\n" + value.data.name;
              }
            },
          },
        },
      },
      animationDuration: 550,
      animationDurationUpdate: 750,
      symbol: "rect",
      symbolKeepAspect: true,
      // 决定直线的关键因素!!! edgeShape: "polyline"
      edgeShape: "polyline", // 树图在正交布局下，边的形状。分别有曲线和直线两种，对应的取值是 curve 和 polyline.
      // silent: false, //  为 true，则开启点击事件，为false，则关闭点击事件
    },
  ],
};
// 监听点击事件
myChart.on("click", (params) => {
  console.log(params, "点击事件");
  //  传点击节点的参数
  this.dialogTitle = params.value || params.name;
  //  改为点击显示对话框
  this.showTooltip = true;
});
myChart.resize();
myChart.setOption(option);
// 对echart进行缩放，字体大小自适应
myChart.getZr().off("mousewheel");
myChart.getZr().on("mousewheel", (param) => {
  console.log("在执行getZr");
  let currentOption = myChart.getOption();
  if (currentOption.series[0]) {
    let zoom = currentOption.series[0].zoom;
    currentOption.textStyle.fontSize = 10 * zoom;
    currentOption.series[0].label.width = 60 * zoom;
    currentOption.series[0].label.rich.img1.width = 40 * zoom;
    currentOption.series[0].label.rich.img1.height = 70 * zoom;
    currentOption.series[0].leaves.label.width = 80 * zoom;
    currentOption.series[0].leaves.label.rich.img1.width = 40 * zoom;
    currentOption.series[0].leaves.label.rich.img1.height = 70 * zoom;
    myChart.setOption(currentOption);
  }
});

其他

之前在别的平台看到有大佬说【通过ui画出结构图，导入到inkscape中，然后在inkscape中手动添加数据点，导出后在页面就可以实现实时数据了，同时安装panzoom可以进行拖拽和缩放。】

因为我的技术不好，公司没有ui，目前做图也是我这，相较于做图还是更擅长写js一点，并且因为这个模块已经耽误很多时间了来不及再去一点点学inkscape和panzoom了，其实也学了，只不过自己没找对方法，所以就找了echarts的tree进行实现，代码其实很简单，只是自己一直思路不对，导致踩了很多坑，耽误了一些时间，发出来我的也是为了提醒自己和如果有和我一样问题的同学。

欢迎大家评论指导！谢谢！