Echarts在线免费图表

 
            
const nodes= ([{
  name: '指挥部',
  category: 0,
}, {
  name: '指挥部副总指挥',
  category: 1
},
  {
    name: '副区长',
    category: 2
  },
  {
    name: '区长',
    category: 2
  },
  {
    name: '指挥部成员单主要领导或主管领导',

    category: 2
  },
  {
    name: '指挥部总指挥',

    category: 2
  },{
    name: '指挥部成员',

    category: 1
  }])

const links=( [{
      source: '指挥部',
      target: '指挥部副总指挥',
      name: '包含'
    }, {
      source: '副区长',
      target: '指挥部副总指挥',
      name: '担任'
    }, {
      source: '指挥部',
      target: '指挥部副总指挥',
      name: '包含'
    }, {
      source: '指挥部成员单主要领导或主管领导',
      target: '指挥部副总指挥',
      name: '担任'
    }, {
      source: '指挥部',
      target: '指挥部总指挥',
      name: '包含'
    }, {
      source: '区长',
      target: '指挥部总指挥',
      name: '担任'
    }, {
      source: '指挥部',
      target: '指挥部成员',
      name: '包含'
    }, {
      source: '指挥部成员单主要领导或主管领导',
      target: '指挥部成员',
      name: '担任'
    }]
)


const  colorList = [ '#fbcc9d', '#ffcdcc', '#9acdff', '#545654',]
  nodes.forEach(node => {
    node.symbol = 'circle';
      node.symbolSize =  [120, 60];
      node.itemStyle = {
        color: colorList[node.category]
      };

  });
 
  links.forEach(link => {
    link.label = {
      align: 'center',
      fontSize: 10
    };
    link.lineStyle = {
      color: 'black'
    }
  });
option = {
    animationDurationUpdate: 2000,
    animationEasingUpdate: 'quinticInOut',
    tooltip:{
      formatter:params => {
        return params.data.name
      }
    },
    series: [{
      type: 'graph',
      layout: 'circular',
      // symbol: 'rect',
      // roam: true,
      symbolSize: 30,
      focusNodeAdjacency: false,

      label: {
        normal: {
          show: true,
          textStyle: {
            fontSize: 10,
            color: 'black'
          },
          formatter: function (params) {
            // 如果节点名称长度超过5个字符，则只显示前3个字符，后面用省略号代替
            if (params.name.length > 10) {
              return params.name.substring(0, 8) + '...';
            } else {
              return params.name;
            }
          },
        }
      },

      edgeSymbol: ['', 'arrow'],
      edgeSymbolSize: [4, 10],
      edgeLabel: {
        fontSize: 12,
        show:true,
        color: '#545654FF',
        formatter: (params) => {
          return params.data.name || ''
        }
      },
      lineStyle: {
        normal: {
          opacity: 1,
          width: 1,
          curveness: 0
        }
      },

      data: nodes,
      links: links,

    }]
};