Vue- Echarts -知识图谱- 关系图-1w 节点 2w7 边的NPM 依赖图

1w 节点 2w7 边的NPM 依赖图

 在线地址:Examples - Apache ECharts

本地实现的效果:

代码部分:

1.

 vue package.json 引入 


   yarn add echarts
   yarn add echarts-gl

   我下载的版本号

  "echarts": "^5.4.2",
  "echarts-gl": "^2.0.9",

在main.js中引入
// 引入echart
import echarts from 'echarts'


new Vue({
  el: '#app',
  router,
  echarts, 
  store,
  render: h => h(App)
})

 2.

<template>
  <div id="echarts" class="chart-container" />
</template>

<script>
import data from './data1.json'
import * as echarts from 'echarts'
import 'echarts-gl'

export default {
  name: 'Index',
  data() {
    return {

    }
  },
  mounted() {
    this.draw()
  },
  methods: {

    draw() {
      const dom = echarts.init(document.getElementById('echarts'))
      var nodes = data.nodes.map(function(nodeName, idx) {
        return {
          name: nodeName,
          value: data.dependentsCount[idx]
        }
      })
      var edges = []
      for (var i = 0; i < data.edges.length;) {
        var s = data.edges[i++]
        var t = data.edges[i++]
        edges.push({
          source: s,
          target: t
        })
      }
      nodes.forEach(function(node) {
        // if (node.value > 100) {
        node.emphasis = {
          label: {
            show: true
          }
        }
        // }
        if (node.value > 5000) {
          node.label = {
            show: true
          }
        }
      })
      dom.setOption({
        backgroundColor: '#556677',
        series: [
          {
            color: [
              'rgb(203,239,15)',
              'rgb(73,15,239)',
              'rgb(15,217,239)',
              'rgb(30,15,239)',
              'rgb(15,174,239)',
              'rgb(116,239,15)',
              'rgb(239,15,58)',
              'rgb(15,239,174)',
              'rgb(239,102,15)',
              'rgb(239,15,15)',
              'rgb(15,44,239)',
              'rgb(239,145,15)',
              'rgb(30,239,15)',
              'rgb(239,188,15)',
              'rgb(159,239,15)',
              'rgb(159,15,239)',
              'rgb(15,239,44)',
              'rgb(15,239,87)',
              'rgb(15,239,217)',
              'rgb(203,15,239)',
              'rgb(239,15,188)',
              'rgb(239,15,102)',
              'rgb(239,58,15)',
              'rgb(239,15,145)',
              'rgb(116,15,239)',
              'rgb(15,131,239)',
              'rgb(73,239,15)',
              'rgb(15,239,131)',
              'rgb(15,87,239)',
              'rgb(239,15,231)'
            ],
            type: 'graphGL',
            nodes: nodes,
            edges: edges,
            modularity: {
              resolution: 2,
              sort: true
            },
            lineStyle: {
              // 连接线的颜色
              color: 'rgb(253,251,251)',
              opacity: 0.05
            },
            itemStyle: {
              opacity: 1,
              color: function() {
                return 'rgb(' + [
                  Math.round(Math.random() * 250),
                  Math.round(Math.random() * 250),
                  Math.round(Math.random() * 250)
                ].join(',') + ')'
              },
              borderColor: '#fff'
              // borderWidth: 1
            },
            focusNodeAdjacency: false,
            focusNodeAdjacencyOn: 'click',
            symbolSize: function(value) {
              return Math.sqrt(value / 10)
            },
            label: {
              // 字体颜色
              color: '#01070e'
            },
            emphasis: {
              label: {
                show: false
              },
              lineStyle: {
                opacity: 0.5,
                width: 4
              }
            },
            forceAtlas2: {
              steps: 5,
              stopThreshold: 20,
              jitterTolerence: 10,
              edgeWeight: [0.2, 1],
              gravity: 5,
              edgeWeightInfluence: 0
              // preventOverlap: true
            }
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.chart-container {
  position: relative;
  height: 100rem;
  overflow: hidden;
}
</style>

3.data数据

线上demo数据地址:

https://echarts.apache.org/examples/data-gl/asset/data/npmdep.json

接口返回数据:

4.运行吧