Echarts 关系网图

echarts yekong 589℃

Echarts 关系网效果图

Echarts 关系网图

运行实例

代码

<template>
  <div class="echarts1" ref="echarts">

  </div>
</template>

<script>

import {ArrayMax, FontChart} from "@/utils/utils";
import types from '../../../data/type.json'

export default {
  name: 'echarts1',
  components: {},
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      ...types
    }
  },
  computed: {},
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine() {
      var that = this;
      window.addEventListener("resize", this.drawLine);
      let myChart = this.$echarts.init(this.$refs.echarts);
      var option = {
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        color: ['#83e0ff', '#45f5ce', '#b158ff'],
        series: [
          {
            type: 'graph',
            layout: 'force',
            force: {
              repulsion: 1000,
              edgeLength: 50
            },
            roam: true,
            label: {
              normal: {
                show: true
              }
            },
            data: [
              {
                name: '新冠病毒',
                symbolSize: 120,
                draggable: true,
                category: 0,
                itemStyle: {
                  normal: {
                    "borderColor": {
                      "x": 0,
                      "y": 0,
                      "x2": 0,
                      "y2": 1,
                      "type": "linear",
                      "colorStops": [{
                        "offset": 0,
                        "color": "rgba(40, 157, 184, 1)"
                      }, {
                        "offset": 1,
                        "color": "rgba(33, 209, 169, 1)"
                      }]
                    },
                    borderWidth: 25,
                    shadowBlur: 20,
                    shadowColor: 'rgba(7, 74, 66, 1.00)',
                    color: 'rgba(7, 24, 26, 1)',
                  }
                }
              },
              {
                name: '王某',
                symbolSize: 100,
                draggable: true,
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(17, 221, 200, 1.00)',
                    borderWidth: 4,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: 'rgba(8, 128, 95, 1.00)'
                  }
                },
                category: 1,

              },
              {
                name: '王某2',
                symbolSize: 46,
                category: 1,
                draggable: true,
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(14, 248, 227, 1.00)',
                    borderWidth: 3,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: 'rgba(53, 88, 93, 1.00)',
                  }
                },
              },
              {
                name: '王某3',
                symbolSize: 46,
                category: 1,
                draggable: true,
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(14, 248, 227, 1.00)',
                    borderWidth: 3,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: 'rgba(53, 88, 93, 1.00)',
                  }
                },
              },
              {
                name: '王某1',
                symbolSize: 46,
                category: 1,
                draggable: true,
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(14, 248, 227, 1.00)',
                    borderWidth: 3,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: 'rgba(53, 88, 93, 1.00)',
                  }
                },
              },
              {
                name: '王某4',
                symbolSize: 46,
                draggable: true,
                category: 1,
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(14, 248, 227, 1.00)',
                    borderWidth: 3,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: 'rgba(53, 88, 93, 1.00)',
                  }
                },
              },
              {
                name: '刘某',
                symbolSize: 100,
                draggable: true,
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(17, 221, 200, 1.00)',
                    borderWidth: 4,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: 'rgba(8, 128, 95, 1.00)'
                  }
                },
                category: 1,

              },
              {
                name: '刘某2',
                symbolSize: 46,
                draggable: true,
                category: 1,
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(14, 248, 227, 1.00)',
                    borderWidth: 3,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: 'rgba(53, 88, 93, 1.00)',
                  }
                },
              },
              {
                name: '刘某3',
                draggable: true,
                symbolSize: 46,
                category: 1,
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(14, 248, 227, 1.00)',
                    borderWidth: 3,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: 'rgba(53, 88, 93, 1.00)',
                  }
                },
              },
              {
                name: '刘某1',
                draggable: true,
                symbolSize: 46,
                category: 1,
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(14, 248, 227, 1.00)',
                    borderWidth: 3,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: 'rgba(53, 88, 93, 1.00)',
                  }
                },
              },
              {
                name: '刘某4',
                symbolSize: 46,
                draggable: true,
                category: 1,
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(14, 248, 227, 1.00)',
                    borderWidth: 3,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: 'rgba(53, 88, 93, 1.00)',
                  }
                },
              },
              {
                name: '赵某',
                symbolSize: 100,
                category: 2,
                draggable: true,
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(17, 221, 200, 1.00)',
                    borderWidth: 4,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: 'rgba(8, 128, 95, 1.00)'
                  }
                },

              },
              {
                name: '赵某1',
                symbolSize: 46,
                draggable: true,
                category: 1,
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(14, 248, 227, 1.00)',
                    borderWidth: 3,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: 'rgba(53, 88, 93, 1.00)',
                  }
                },
              },
              {
                name: '赵某4',
                draggable: true,
                symbolSize: 46,
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(14, 248, 227, 1.00)',
                    borderWidth: 3,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: 'rgba(53, 88, 93, 1.00)',
                  }
                },
                category: 2,

              },
              {
                name: '赵某2',
                symbolSize: 46,
                draggable: true,
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(14, 248, 227, 1.00)',
                    borderWidth: 3,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: 'rgba(53, 88, 93, 1.00)',
                  }
                },
                category: 2,

              },
              {
                name: '赵某3',
                symbolSize: 46,
                category: 2,
                draggable: true,
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(14, 248, 227, 1.00)',
                    borderWidth: 3,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: 'rgba(53, 88, 93, 1.00)',
                  }
                },
              },
              {
                name: '钱某',
                symbolSize: 100,
                category: 2,
                draggable: true,
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(17, 221, 200, 1.00)',
                    borderWidth: 4,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: 'rgba(8, 128, 95, 1.00)'
                  }
                },

              },
              {
                name: '钱某1',
                symbolSize: 46,
                draggable: true,
                category: 1,
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(14, 248, 227, 1.00)',
                    borderWidth: 3,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: 'rgba(53, 88, 93, 1.00)',
                  }
                },
              },
              {
                name: '钱某4',
                symbolSize: 46,
                draggable: true,
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(14, 248, 227, 1.00)',
                    borderWidth: 3,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: 'rgba(53, 88, 93, 1.00)',
                  }
                },
                category: 2,

              },
              {
                name: '钱某2',
                symbolSize: 46,
                draggable: true,
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(14, 248, 227, 1.00)',
                    borderWidth: 3,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: 'rgba(53, 88, 93, 1.00)',
                  }
                },
                category: 2,

              },
              {
                name: '钱某3',
                symbolSize: 46,
                draggable: true,
                category: 2,
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(14, 248, 227, 1.00)',
                    borderWidth: 3,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: 'rgba(53, 88, 93, 1.00)',
                  }
                },
              },
              {
                name: '李某',
                symbolSize: 100,
                draggable: true,
                category: 2,
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(17, 221, 200, 1.00)',
                    borderWidth: 4,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: 'rgba(8, 128, 95, 1.00)',
                  }
                },

              },
              {
                name: '李某1',
                symbolSize: 46,
                category: 1,
                draggable: true,
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(14, 248, 227, 1.00)',
                    borderWidth: 3,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: 'rgba(53, 88, 93, 1.00)',
                  }
                },
              },
              {
                name: '李某4',
                symbolSize: 46,
                draggable: true,
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(14, 248, 227, 1.00)',
                    borderWidth: 3,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: 'rgba(53, 88, 93, 1.00)',
                  }
                },
                category: 2,

              },
              {
                name: '李某2',
                draggable: true,
                symbolSize: 46,
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(14, 248, 227, 1.00)',
                    borderWidth: 3,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: 'rgba(53, 88, 93, 1.00)',
                  }
                },
                category: 2,

              },
              {
                name: '李某3',
                symbolSize: 46,
                draggable: true,
                category: 2,
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(14, 248, 227, 1.00)',
                    borderWidth: 3,
                    shadowBlur: 10,
                    shadowColor: '#04f2a7',
                    color: 'rgba(53, 88, 93, 1.00)',
                  }
                },
              }],
            links: [
              {
                source: '新冠病毒',
                target: '刘某'
              }, {
                source: '新冠病毒',
                target: '王某'
              },
              {
                source: '新冠病毒',
                target: '李某',
              },

              {
                source: '新冠病毒',
                target: '赵某',
              }, {
                source: '新冠病毒',
                target: '钱某',
              },
              {
                source: '钱某',
                target: '钱某1',
              },
              {
                source: '钱某',
                target: '钱某2',
              },
              {
                source: '钱某',
                target: '钱某3',
              },
              {
                source: '钱某',
                target: '钱某4',
              },
              {
                source: '赵某',
                target: '赵某1',
              },
              {
                source: '赵某',
                target: '赵某2',
              },
              {
                source: '赵某',
                target: '赵某3',
              },
              {
                source: '赵某',
                target: '赵某4',
              },

              {
                source: '王某',
                target: '王某1',
              },
              {
                source: '王某',
                target: '王某2',
              },
              {
                source: '王某',
                target: '王某3',
              },
              {
                source: '王某',
                target: '王某4',
              },
              {
                source: '刘某',
                target: '刘某1',
              },
              {
                source: '刘某',
                target: '刘某2',
              },
              {
                source: '刘某',
                target: '刘某3',
              },
              {
                source: '刘某',
                target: '刘某4',
              },
              {
                source: '新冠病毒',
                target: '李某',
              },
              {
                source: '李某',
                target: '李某3',
              },
              {
                source: '李某',
                target: '李某1',
              },
              {
                source: '李某',
                target: '李某4',
                value: 'DNA',
              }, {
                source: '李某',
                target: '李某2'

              }
            ],
            lineStyle: {
              normal: {
                opacity: 0.9,
                width: 3,
                curveness: 0,
                color: {
                  "x": 0,
                  "y": 0,
                  "x2": 0,
                  "y2": 1,
                  "type": "linear",
                  "colorStops": [{
                    "offset": 0,
                    "color": "rgba(0, 185, 191, 1)"
                  }, {
                    "offset": 1,
                    "color": "rgba(31, 204, 135, 1)"
                  }]
                }

              }
            },
            categories: [
              {name: '0'},
              {name: '1'},
              {name: '2'}
            ]
          }
        ]
      }
      myChart.clear();
      myChart.resize();
      myChart.setOption(option);
    },
  }
}
</script>

<style lang="scss" scoped>
.echarts1 {
  position: relative;
  width: 100%;
  height: calc(100% - 10px);
}
</style>

喜欢 (0)