参考

ecahrts官方文档

自定义测试

探索：关系图的关键

• 起点
• 终点
• 线条

其次

• 标签文字
• 线条标签

配置关键:

 {
        title: {
          text: "2021->2022 我的职业",
          color: "#fff",
          x: "left",
          width: 120,
          height: 80,
          backgroundColor: "#6dd5ed",
          borderColor: "#fff",
          borderWidth: 1,
          padding: 5,
          textStyle: {
            fontFamily: "Arial",
            fontSize: 20,
            fontStyle: "normal",
            fontWeight: "bold",
            color: "#fff",
          },
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            type: "graph",
            layout: "none",
            symbolSize: 0,
            roam: true,
            edgeSymbol: ["circle", "arrow"],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              fontSize: 15,
            },
            label: {
              //
              show: true,
              formatter: function (params) {
                console.log(params, params);
                return params.name;
              },
              width: 80,
              fontSize: 16,
              height: 40,
              color: "#fff",
              backgroundColor: "#6dd5ed",
              borderColor: "#fff",
              borderWidth: 1,
            },
            data: [
              {
                name: "2021",
                x: 100,
                y: 50,
              },
              {
                name: "2022",
                x: 800,
                y: 50,
              },
              {
                name: "数据分析",
                x: 100,
                y: 275,
              },
              {
                name: "sql语言",
                x: 450,
                y: 450,
              },
              {
                name: "javascript",
                x: 450,
                y: 100,
              },
              {
                name: "前端vue",
                x: 800,
                y: 275,
              },
            ],
            // links: [],
            links: [
              {
                source: 0,
                target: 1,
                symbolSize: [10, 20],
                label: {
                  show: true,
                  fontWeight: "bold",
                  color: "#fff",
                  formatter: function () {
                    // console.log(params, params);
                    return "数据分析->前端";
                  },
                },
                lineStyle: {
                  width: 1,
                  color: "#6dd5ed",
                  curveness: 0,
                },
              },
              {
                source: 2,
                target: 3,
                label: {
                  show: true,
                  color: "#fff",
                  formatter: function () {
                    return "mysql pgsql greemplum";
                  },
                },
                lineStyle: {
                  color: "#6dd5ed",
                  curveness: 0,
                },
              },
              {
                source: 2,
                target: 4,
                label: {
                  show: true,
                  color: "#fff",
                  formatter: function () {
                    return "es6";
                  },
                },
                lineStyle: {
                  color: "#6dd5ed",
                  curveness: 0,
                },
              },
              {
                source: 3,
                target: 5,
                label: {
                  show: true,
                  formatter: function () {
                    return "";
                  },
                },
                lineStyle: {
                  color: " #6dd5ed",
                },
              },
              {
                source: 4,
                target: 5,
                label: {
                  show: true,
                  color: "#fff",
                  formatter: function () {
                    return "es6->es12";
                  },
                },
                lineStyle: {
                  color: " #6dd5ed",
                },
              },
            ],
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0,
            },
          },
        ],
      }

仓库

https://github.com/yongma16/emoji-search

浏览

http://yongma16.xyz/emoji/index/