jcci-result.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>JCCI Result</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js" integrity="sha512-VdqgeoWrVJcsDXFlQEKqE5MyhaIgB9yXUVaiUa8DR2J4Lr1uWcFm+ZH/YnzV5WqgKf4GPyHQ64vVLgzqGIchyw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  </head>
  <body>
    <div>Choose CCI Result File
      <input type="file" id="datafile">
<!--      展示方式-->
<!--      <select id="select">-->
<!--        <option value="tree">树形图</option>-->
<!--        <option value="graph">关系图</option>-->
<!--      </select>-->
    </div>
    <div id="main" style="width: 100%;height: 800px;"></div>
    <script type="text/javascript">
      var cciFile = document.getElementById('datafile');
      var myChart = echarts.init(document.getElementById('main'));
      var graphData = []
      var graphLinks = []
      var graphCategories = []

      var optionGraph = {
        tooltip: {},
        legend: [
          {
            data: [],
            type: 'scroll',
            orient: 'horizontal'
          }
        ],
        series: [
        {
          type: 'graph',
          layout: 'none',
          data: [],
          links: [],
          categories: [],
          edgeSymbol: ['circle', 'arrow'],
          edgeSymbolSize: [4, 10],
          edgeLabel: {
            fontSize: 20
          },
          roam: true,
          labelLayout: {
            hideOverlap: true
          },
          lineStyle: {
            color: 'source',
            curveness: 0.3
          }
        }]
      }

      function readInputFile(event) {
        let file = event.target.files[0];
        if (!file) {
          return;
        }
        let reader = new FileReader();

        reader.addEventListener('load', event => {
          let content = event.target.result;
          let covertData = JSON.parse(content)
          optionGraph.series[0].data = covertData.nodes
          optionGraph.series[0].links = covertData.links
          graphCategories = covertData.categories
          optionGraph.series[0].categories = graphCategories
          let graphLegend = graphCategories.map(function (a) {
            return a.name;
          })
          optionGraph.legend[0].data = graphLegend
          myChart.setOption(optionGraph);
        })
        reader.readAsText(file);
      }

      cciFile.addEventListener('change', readInputFile, false);
    </script>
  </body>
</html>