echarts関係図の各属性の説明

上司はフロントエンドページにechartsを使用して関係図を作成するように依頼し、次に各属性の具体的な意味と使用法を調査して理解し、図を作成して私が使用したさまざまな属性を記録しました

this.myChart.setOption(
            {
            //表的显示名称
              title: {
                text: '数据来源去向查看'
              },
              animationDurationUpdate: 1500,
              animationEasingUpdate: 'quinticInOut',
              series: [
                {
                  type: 'graph',//表的类型
                  layout: 'none',
                  //节点之间箭头的形状,左边参数是指线左边的形状,
                  //none是指不做处理,arrow是指线的右边为箭头
                  edgeSymbol: ['none', 'arrow'],
                  //节点两端的大小
                  edgeSymbolSize: [20, 20],
                  // progressiveThreshold: 700,
                  //节点的数据及节点的属性设置
                  data: json.nodes.map(function(node) {
                    return {
                    //节点的横纵坐标
                      x: node.x,
                      y: node.y,
                      id: node.id,
                      //节点显示的名字
                      name: node.label,
                      //节点的大小
                      symbolSize: node.size,
                      //节点的熟悉。如颜色,是否显示节点,透明度等等
                      itemStyle: {
                        color: node.color,
                        show: true,
                        opacity: node.opacity
                      },
                      //节点内文本的属性
                      label: {
                        show: node.show
                      }
                    };
                  }),
                  //两个节点之间的连线
                  edges: json.edges.map(function(edge) {
                    return {
                    //线的起始和重点
                      source: edge.sourceID,
                      target: edge.targetID,
                      //线的大小
                      size: 100,
                      //连线之间显示的文字
                      label: {
                        show: edge.isShow
                      },
                        //连线的属性,如透明度,颜色等等
                      lineStyle: {
                        opacity: edge.opacity
                      }
                    };
                  }),
                  emphasis: {
                    label: {
                      position: 'top',
                      show: true
                    }
                  },
                  roam: true,
                  focusNodeAdjacency: true,
                  lineStyle: {
                    width: 1.0,
                    curveness: 0,
                    opacity: 0.7
                  }
                }
              ]
            },
            true
          );

おすすめ

転載: blog.csdn.net/weixin_39040527/article/details/106339465