Apache Echarts 无法工作。错误-图例数据应与系列名称或数据名称相同

Question

Apache Echarts 无法工作。错误 - 图例数据应与系列名称或数据名称相同。 即使我的系列名称和图例数据中的名称匹配，它也会给出上述错误。图表未打印。我哪里做错了？

附上错误的屏幕截图。

API数据

{
    "AppData": {
        "data": [
            {
                "name": "CNF",
                "id": "CNF",
                "category": 1,
                "value": 0
            },
            {
                "name": "SCPC",
                "id": "SCPC",
                "category": 2,
                "value": 0
            },
            {
                "name": "NRF",
                "id": "NRF",
                "category": 3,
                "value": 0
            },
            {
                "name": "SCPI",
                "id": "SCPI",
                "category": 4,
                "value": 0
            },
            {
                "name": "SCPE",
                "id": "SCPE",
                "category": 5,
                "value": 0
            },
            {
                "name": "NMS",
                "id": "NMS",
                "category": 6,
                "value": 0
            }
        ],
        "link": [
            {
                "source": "CNF",
                "target": "SCPC"
            },
            {
                "source": "SCPC",
                "target": "NRF"
            },
            {
                "source": "SCPC",
                "target": "SCPI"
            },
            {
                "source": "SCPC",
                "target": "SCPE"
            },
            {
                "source": "SCPC",
                "target": "NMS"
            }
        ],
        "categories": [
            {
                "name": "SCPC"
            },
            {
                "name": "CNF"
            },
            {
                "name": "SCPE"
            },
            {
                "name": "SCPI"
            },
            {
                "name": "NRF"
            },
            {
                "name": "NMS"
            }
        ]
    }
}

组件.html

<div class="networkGraphDiv">
  <div id="networkGraph" style="width: 100%;  overflow: auto; height: 100%"></div>
</div>

组件.ts

  graphData:any=[];
  graphLinks:any=[];
  graphCategories:any=[];

  constructor(
    private httpclient: HttpClient,
    private httpService: HttpService
  ){}

  ngOnInit(): void {
    this.fetchData();
    this.createNetworkChart();
  }

  fetchData() {
    this.httpService.getData(request).subscribe((response: any) => {
    const appData = response['AppData'];
    this.graphData = appData['data'];
    this.graphLinks = appData['link'];
    this.graphCategories = appData['categories'];
    });
  }

  createNetworkChart() {
    var chartDom = document.getElementById('networkGraph');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: '',
        subtext: '',
        top: 'top',
        left: 'left',
      },
      tooltip: {},
      legend: [
        {
          data: ['SCPC', 'CNF', 'SCPE', 'SCPI', 'NRF', 'NMS'],
          position: 'right',
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
        },
      ],
      series: [
        {
          name: 'Node Name',
          type: 'graph',
          layout: 'force',
          data: this.graphData,
          links: this.graphLinks,
          categories: this.graphCategories,
          zoom: 2,
          symbolSize: 30,
          label: {
            // position: 'top',
            show: true, // node name to be shown in circle
          },
          edgeSymbol: ['circle', 'arrow'], // for arrow from one to another
          edgeSymbolSize: [4, 15],
  
          emphasis: {
            focus: 'adjacency',
            label: {
              show: false,
            },
          },
          roam: true,
          force: {
            repulsion: 100,
          }
        },
      ],
    };
    option && myChart.setOption(option);
  }

Answer 1

data[i].category属性中的

categories

需要等于类别名称。

示例：

const data = {
  nodes: [
    {name: 'CNF', category: 'CNF'},
    {name: 'SCPC', category: 'SCPC'},
    {name: 'NRF', category: 'NRF'},
    {name: 'SCPI', category: 'SCPI'},
    {name: 'SCPE', category: 'SCPE'},
    {name: 'NMS', category: 'NMS'}
  ],
  links: [
    {source: 'CNF', target: 'SCPC'},
    {source: 'SCPC', target: 'NRF'},
    {source: 'SCPC', target: 'SCPI'},
    {source: 'SCPC', target: 'SCPE'},
    {source: 'SCPC', target: 'NMS'}
  ],
  categories: [
    {name: 'SCPC'},
    {name: 'CNF'},
    {name: 'SCPE'},
    {name: 'SCPI'},
    {name: 'NRF'},
    {name: 'NMS'}
  ]
};

option = {
  legend: {},
  series: [
    {
      type: 'graph',
      layout: 'force',
      zoom: 7,
      label: {show: true},
      data: data.nodes,
      links: data.links,
      categories: data.categories,
    }
  ]
};

Answer 2

这里的问题是，甚至在从 API 调用完全获取数据之前我就调用了 createNetworkChart()。其他都还好。

ngOnInit(): void {
    this.fetchData();

    // this.createNetworkChart(); this was getting called even before complete data fetched from API call.
  }

  fetchData() {
    this.httpService.getData(request).subscribe((response: any) => {
    const appData = response['AppData'];
    this.graphData = appData['data'];
    this.graphLinks = appData['link'];
    this.graphCategories = appData['categories'];

    this.createNetworkChart()
    });
  }