Как изменить направление метки ребра графа в Echarts? - PullRequest
0 голосов
/ 31 октября 2019

У меня проблема с изменением направления метки ребра на графике Echarts. Я хочу, чтобы все метки по краям были горизонтальными. Но с этого момента направление метки автоматически выравнивается относительно самого ребра.

Причина, по которой я хочу сохранить все метки ребер в горизонтальном положении, заключается в том, что когда-нибудь автоматическое направление будет испорчено, если некоторые ребра пересекаются друг с другом.

Проблема, как показано ниже: Пример беспорядка меток ребер

Я пытался добавить rotate:90 в graphdata.edges label код, но это не имеет никакого эффекта.

this.options = {
  animationDurationUpdate: 150,
  animationEasingUpdate: 'quinticInOut',
  series: [{
    type: 'graph',
    layout: 'none',
    data: graphdata.nodes.map(function(node) {
      return {
        x: node['x'],
        y: node['y'],
        id: node['id'],
        name: node['label'],
        symbolSize: [70, 40],
        itemStyle: {
          normal: {
            borderColor: 'steelblue',
            borderWidth: 1.5,
            color: node['color']
          }
        },
        label: {
          textStyle: {
            fontSize: 10,
            color: 'black'
          },
          rotate:90,
          show: true

        }
      };
    }),

    edgeSymbol: ['none', 'arrow'],
    edges: graphdata.edges.map(function(edge) {
      return {
        source: edge['start_node_id'],
        target: edge['end_node_id'],
        name: edge['label'],
        lineStyle: {
          normal: {
            width: edge['width']
          }
        },
        label: {
        rotate:90,
          show: true,
          formatter: function(params) {
            if (params.dataType === 'edge') {
              return params.data.name;
            }
          }
        }
      };
    }),
    label: {
      emphasis: {
        position: 'top',
        show: true,
        textStyle: {
          fontSize: 15,
          color: 'black'
        }
      }
    },
    roam: true,
    focusNodeAdjacency: true,
    lineStyle: {
      normal: {
        color: '#828282',
        curveness: 0.1,
        opacity: 0.7
      }
    }
  }]
};

И я также заметил, что если rotate:90 добавляется в код graphdata.nodes label, метка узла будет вращаться.

Поэтому я хотел бы спросить, как повернуть направление метки края или оставить его всегда горизонтальным?

Спасибо за помощь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...