echarts 关系图graph 实现思维导图

最新推荐文章于 2025-04-14 22:26:17 发布

一行注释

最新推荐文章于 2025-04-14 22:26:17 发布

阅读量2k

点赞数

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_37818095/article/details/130941696

版权

echarts 专栏收录该内容

15 篇文章

订阅专栏

这段代码展示了如何利用Echarts库初始化一个图表，处理数据并设置样式来创建一个流程图。数据包括工序、工人自检和班长检等节点，通过分类值确定颜色，通过坐标值设置节点位置。流程图中的边表示不同检查环节之间的关系。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

wid记录页面宽度，均分各节点位置

categories记录category值对应样式

let wid = (this.$refs["echart"].clientWidth || 1200) - 200;
      this.echart = this.$echarts.init(this.$refs["echart"]);
      let dataList = [
        [
          {
            name: "工序1",
            category: 1
          },
          {
            name: "工序2",
            category: 1
          },
          {
            name: "工序3",
            category: 0
          },
          {
            name: "工序4",
            category: 0
          },
          {
            name: "工序5",
            category: 0
          },
          {
            name: "工序6",
            category: 0
          },
          {
            name: "工序7",
            category: 0
          },
          {
            name: "工序8",
            category: 0
          },
          {
            name: "工序9",
            category: 0
          },
          {
            name: "工序10",
            category: 0
          }
        ],
        [
          {
            name: "工人自检1",
            category: 0
          },
          {
            name: "工人自检2",
            category: 0
          },
          {
            name: "工人自检3",
            category: 0
          },
          {
            name: "工人自检4",
            category: 0
          },
          {
            name: "工人自检5",
            category: 0
          },
          {
            name: "工人自检6",
            category: 0
          },
          {
            name: "工人自检7",
            category: 1
          },
          {
            name: "工人自检8",
            category: 1
          },
          {
            name: "工人自检9",
            category: 0
          },
          {
            name: "工人自检10",
            category: 0
          }
        ],
        [
          {
            name: "班长检1",
            category: 0
          },
          {
            name: "班长检2",
            category: 0
          },
          {
            name: "班长检3",
            category: 0
          },
          {
            name: "班长检4",
            category: 1
          },
          {
            name: "班长检5",
            category: 0
          },
          {
            name: "班长检6",
            category: 0
          },
          {
            name: "班长检7",
            category: 0
          },
          {
            name: "班长检8",
            category: 0
          },
          {
            name: "班长检9",
            category: 0
          },
          {
            name: "班长检10",
            category: 0
          }
        ],
        [
          {
            name: "出厂检",
            category: 0
          }
        ],
        [
          {
            name: "入库检",
            category: 0
          }
        ]
      ];
      let dataLink = [];
      let dataInfo = [];
      let len = dataList[0].length;
      dataList.map((item, num) => {
        item.map((temp, index) => {
          let value = [];
          if (temp.name.includes("工序")) {
            value = [0, index * 50];
          } else if (temp.name.includes("工人")) {
            value = [wid / 4 + 50, index * 50];
          } else if (temp.name.includes("班长")) {
            value = [(wid * 2) / 4 + 50, index * 50];
          } else if (temp.name.includes("出厂")) {
            value = [(wid * 3) / 4 + 50, len * 25];
          } else if (temp.name.includes("入库")) {
            value = [(wid * 4) / 4 + 50, len * 25];
          }
          dataInfo.push({
            name: temp.name,
            category: temp.category,
            symbolSize: [num === 0 ? 150 : num === 1 ? 60 : 50, 30],
            value: value
          });
          let target = "";
          switch (num) {
            case 0:
              target = `工人自检${index + 1}`;
              break;
            case 1:
              target = `班长检${index + 1}`;
              break;
            case 2:
              target = `出厂检`;
              break;
            case 3:
              target = `入库检`;
              break;

            default:
              break;
          }
          dataLink.push({
            source: temp.name,
            value: "",
            target: target
          });
        });
      });
      let option = {
        grid: {
          top: 20,
          bottom: 50
        },
        itemStyle: {
          normal: {
            color: "#000"
          },
          shadowBlur: 3
        },
        xAxis: {
          show: false,
          type: "value"
        },
        yAxis: {
          show: false,
          type: "value"
        },
        series: [
          {
            type: "graph",
            coordinateSystem: "cartesian2d",
            edgeSymbol: ["none", "arrow"],
            edgeSymbolSize: [4, 10],
            symbol: "rect",
            symbolOffset: [8, 0],
            edgeLabel: {
              show: false,
              normal: {
                show: true,
                position: "middle",
                textStyle: {
                  fontSize: 12
                },
                formatter: "{c}"
              }
            },
            categories: [
              {
                itemStyle: {
                  normal: {
                    color: "#f4f4f4"
                  }
                }
              },
              {
                itemStyle: {
                  normal: {
                    color: "#47f172"
                  }
                }
              }
            ],
            label: {
              normal: {
                position: "inside",
                show: true,
                textStyle: {
                  color: "#333",
                  fontSize: 12,
                  padding: [0, 55]
                },
                formatter: parmas => {
                  if (parmas.name.includes("工人自检")) {
                    return "工人自检";
                  } else if (parmas.name.includes("班长检")) {
                    return "班长检";
                  }
                  return parmas.name;
                }
              }
            },
            force: {
              repulsion: 10,
              initLayout: "circular"
            },
            lineStyle: {
              normal: {
                opacity: 1,
                width: 1,
                curveness: 0
              }
            },
            data: dataInfo,
            links: dataLink,
            emphasis: {
              blurScope: "coordinateSystem"
            }
          }
        ]
      };
      this.echart.setOption(option);
      this.echart.on("click", param => {
        console.log("param: ", param);
      });