vue 中 echart关系图

---

首先安装 echart

  setDVG(id, ethis) {

      this.charts = echarts.init(document.getElementById(id));  获取图的点

      this.charts.resize();

      let categories = [];  里边的是关系的种类

      let option = {

        // 图的标题

        title: {

          text: "DVG 关系图",

        },

        // 提示框的配置

        tooltip: {

          formatter: function (x) {

                x  这个参数可以获取节点的信息

         return `

`；  提示框可以在这里设置样式，一般内联样式

          },

        },

        // 工具箱

        toolbox: {

          // 显示工具箱

          show: true,

          feature: {

            mark: {

              show: false,

            },

            // 还原

            restore: {

              show: false,

            },

            // 保存为图片

            saveAsImage: {

              show: false,

            },

          },

        },

        legend: [

          {

             设置关系的种类

            data: categories.map(function (a) {

              return a.name;

            }),

          },

        ],

        series: [

          {

            type: "graph", // 类型:关系图

            layout: "force", //图的布局，类型为力导图

            symbolSize: 20, // 调整节点的大小

            roam: false, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移,可以设置成 'scale' 或者 'move'。设置成 true 为都开启

            edgeSymbol: ["circle", "arrow"],

            edgeSymbolSize: [2, 10],

            edgeLabel: {

              normal: {

                textStyle: {

                  fontSize: 20,

                },

              },

            },

            symbol: "rect",

            draggable: false,

            force: {

              repulsion: 1000,

              edgeLength: [50, 50],

            },

            lineStyle: {

              normal: {

                width: 2,

                color: "#4b565b",

              },

            },

            edgeLabel: {

              normal: {

                show: true,

                formatter: function (x) {

                  return x.data.name;

                },

              },

            },

            label: {

              normal: {

                show: true,

                textStyle: {},

              },

            },

            // 数据

            data: [  单个节点的设置

{

          name: item,

          symbolSize: 60,

          category: 0,

        }

],

            links: [   边的关系

{

          source: item.from,

          target: item.to,

          name: "",

          des: item.mode,

        }

],

            categories: categories,

          },

        ],

      };

      this.charts.setOption(option);

    },