ECharts关系图、流程图、导向图(详细示例——满满的注释)

 

 具体代码如下：

    init() {
      var myChart = this.$echarts.init(document.getElementById("main"));
      var option = {
        title: {
          // text: "流程",
        },
        series: [
          {
            type: "graph", //关系图
            layout: "none", // 图的布局 'none' 不采用任何布局，使用节点中提供的 x， y 作为节点的位置。
	         // 'circular' 采用环形布局;'force' 采用力引导布局.
            symbolSize: 100,
            roam: true, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
            color: "#6A5ACD",
            label: {  // 关系对象上的标签
              show: true, // 是否显示标签
              fontSize: 16,  // 文本样式
              color: "#FFF",
              //backgroundColor:'white'
            },
            symbol: "roundRect", //形状
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10], // 关系图节点标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [4, 10] 表示标记宽为4，高为10。
            edgeLabel: { // 连接两个关系对象的线上的标签
              fontSize: 25,
            },
            // 图
            data: [
              {
                name: "A",
                x: 100,
                y: 100,
              },
              {
                name: "B",
                x: 450,
                y: 100,
                tooltip: { //鼠标悬停在节点上时显示的内容
                  show: true,
                  position: "right", //标签位置
                  textStyle: {
                    width: 20,
                  },
                  formatter: function (params) {  //formatter这个参数是用来设置鼠标悬停时显示的内容的。
                    return params.dataType == "node"
                      ? "鼠标悬停的显示的内容"
                      : "";
                  },
                },
              },
              {
                name: "C",
                x: 800,
                y: 100,
              },
              {
                name: "D",
                x: 450,
                y: 450,
              },
              {
                name: "E",
                x: 100,
                y: 800,
              },
              {
                name: "F",
                x: 450,
                y: 800,
              },
              {
                name: "G",
                x: 800,
                y: 800,
              },
            ],
            // 线
            links: [
              {
                source: "A",
                target: "D",
                lineStyle: {
                  color: "#473C8B",
                  width: 3,
                },
              },
              {
                source: "B",
                target: "D",
                lineStyle: {
                  color: "#473C8B",
                  width: 3,
                },
                label: { //线上面显示内容
                  show: true,
                  position: "middle",
                  formatter: "有疑问",
                  fontSize: 15,
                },
              },
              {
                source: "C",
                target: "D",
                lineStyle: {
                  color: "#473C8B",
                  width: 3,
                },
                label: {
                  show: true,
                  position: "middle",
                  formatter: "完成",
                  fontSize: 15,
                },
              },
              {
                source: "F",
                target: "D",
                lineStyle: {
                  color: "#473C8B",
                  width: 3,
                },
              },
              {
                source: "G",
                target: "D",
                lineStyle: {
                  color: "#473C8B",
                  width: 3,
                },
              },
              {
                source: "E",
                target: "D",
                lineStyle: {
                  color: "#473C8B",
                  width: 3,
                },
              },
              {
                source: "E",
                target: "D",
                lineStyle: {
                  color: "#473C8B",
                  width: 3,
                },
              },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },

 想要使用该图表,只需要  复制以上代码  ,再下载    echarts.js  在页面文件中引入即可. 

注意：看我myChart变量，我是this.$echarts引入的，你如果是链接引入的直接写echarts就行，看你是怎么引入的做修改就可以

最后 

如果对您有帮助，希望能给个👍评论收藏三连！

博主为人老实，无偿解答问题哦❤

想跟博主交朋友的可以查找，公_号👇：前端老实人，领取更多前后端源码及资料~