graphChart.vue

<template>
    <div :id="idstr"></div>
</template>

<script>
export default {
  data () {
    return {
      dataObj: {},
      option: {},
      chart: null,
      clickNum: [1, 1, 1, 1, 1]
    }
  },
  props: ['message', 'idstr'],
  mounted () {
    this.drawLine()
  },
  methods: {
    drawLine () {
      const vm = this
      const _list = vm.message
      _list.nodes.forEach(item => {
        item.itemStyle = {
          color: item.color
        }
        item.emphasis = {
          focus: 'adjacency',
          label: {
            position: 'right',
            show: true
          }
        }
      })
      // const _list = {
      //   nodes: [
      //     {
      //       id: '0',
      //       name: '群智合',
      //       symbolSize: 30,
      //       value: 128.685715,
      //       category: 2,
      //       itemStyle: {
      //         color: '#30DDF4'
      //       }
      //     },
      //     {
      //       id: '1',
      //       name: '中行',
      //       symbolSize: 20,
      //       value: 4,
      //       category: 0,
      //       itemStyle: {
      //         color: '#4f19c7'
      //       }
      //     },
      //     {
      //       id: '2',
      //       name: '新航城',
      //       symbolSize: 20,
      //       value: 9.485714,
      //       category: 0,
      //       itemStyle: {
      //         color: '#c71969'
      //       }
      //     },
      //     {
      //       id: '3',
      //       name: '科技局',
      //       symbolSize: 20,
      //       value: 9.485714,
      //       category: 1,
      //       itemStyle: {
      //         color: '#1984c7'
      //       }
      //     },
      //     {
      //       id: '4',
      //       name: '报表项目',
      //       symbolSize: 20,
      //       value: 4,
      //       category: 0,
      //       itemStyle: {
      //         color: '#8419c7'
      //       }
      //     },
      //     {
      //       id: '5',
      //       name: '知识图谱项目',
      //       symbolSize: 20,
      //       value: 4,
      //       category: 0,
      //       itemStyle: {
      //         color: '#9f19c7'
      //       }
      //     },
      //     {
      //       id: '6',
      //       name: '可视化项目',
      //       symbolSize: 20,
      //       value: 4,
      //       category: 0,
      //       itemStyle: {
      //         color: '#199fc7'
      //       }
      //     },
      //     {
      //       id: '7',
      //       name: '可视化报表',
      //       symbolSize: 10,
      //       value: 4,
      //       category: 0,
      //       itemStyle: {
      //         color: '#19c719'
      //       }
      //     },
      //     {
      //       id: '8',
      //       name: '王珊珊',
      //       symbolSize: 6,
      //       value: 4,
      //       category: 0,
      //       itemStyle: {
      //         color: '#69c719'
      //       }
      //     },
      //     {
      //       id: '9',
      //       name: '崔雪征',
      //       symbolSize: 6,
      //       value: 4,
      //       category: 0,
      //       itemStyle: {
      //         color: '#b9c719'
      //       }
      //     },
      //     {
      //       id: '10',
      //       name: '土地开发项目',
      //       symbolSize: 20,
      //       value: 4,
      //       category: 0,
      //       itemStyle: {
      //         color: '#8419c7'
      //       }
      //     },
      //     {
      //       id: '11',
      //       name: '科技局大数据分析项目',
      //       symbolSize: 20,
      //       value: 4,
      //       category: 0,
      //       itemStyle: {
      //         color: '#8419c7'
      //       }
      //     },
      //     {
      //       id: '12',
      //       name: '可视化大屏',
      //       symbolSize: 10,
      //       value: 4,
      //       category: 0,
      //       itemStyle: {
      //         color: '#19c719'
      //       }
      //     },
      //     {
      //       id: '13',
      //       name: '傅宝乐',
      //       symbolSize: 6,
      //       value: 4,
      //       category: 0,
      //       itemStyle: {
      //         color: '#69c719'
      //       }
      //     }, {
      //       id: '14',
      //       name: '奚鑫',
      //       symbolSize: 6,
      //       value: 4,
      //       category: 0,
      //       itemStyle: {
      //         color: '#69c719'
      //       }
      //     }, {
      //       id: '15',
      //       name: '郭静',
      //       symbolSize: 6,
      //       value: 4,
      //       category: 0,
      //       itemStyle: {
      //         color: '#69c719'
      //       }
      //     }, {
      //       id: '16',
      //       name: 'PC端系统',
      //       symbolSize: 10,
      //       value: 4,
      //       category: 0,
      //       itemStyle: {
      //         color: '#19c719'
      //       }
      //     }, {
      //       id: '17',
      //       name: '余大超',
      //       symbolSize: 6,
      //       value: 4,
      //       category: 0,
      //       itemStyle: {
      //         color: '#b9c719'
      //       }
      //     }, {
      //       id: '18',
      //       name: '郭襄',
      //       symbolSize: 6,
      //       value: 4,
      //       category: 0,
      //       itemStyle: {
      //         color: '#b9c719'
      //       }
      //     }
      //   ],
      //   links: [
      //     {
      //       source: '1',
      //       target: '0'
      //     },
      //     {
      //       source: '2',
      //       target: '0'
      //     },
      //     {
      //       source: '3',
      //       target: '0'
      //     },
      //     {
      //       source: '4',
      //       target: '1'
      //     },
      //     {
      //       source: '5',
      //       target: '1'
      //     },
      //     {
      //       source: '6',
      //       target: '1'
      //     },
      //     {
      //       source: '10',
      //       target: '2'
      //     },
      //     {
      //       source: '7',
      //       target: '4'
      //     },
      //     {
      //       source: '8',
      //       target: '7'
      //     },
      //     {
      //       source: '9',
      //       target: '7'
      //     },
      //     {
      //       source: '11',
      //       target: '3'
      //     },
      //     {
      //       source: '12',
      //       target: '10'
      //     }, {
      //       source: '16',
      //       target: '10'
      //     }, {
      //       source: '13',
      //       target: '12'
      //     }, {
      //       source: '14',
      //       target: '12'
      //     }, {
      //       source: '15',
      //       target: '12'
      //     }, {
      //       source: '17',
      //       target: '16'
      //     }, {
      //       source: '18',
      //       target: '16'
      //     }
      //   ],
      //   category: [{ name: '类目0' }]
      // }
      // 基于准备好的dom，初始化echarts实例
      vm.chart = this.$echarts.init(document.getElementById(vm.idstr))
      // 清空图表
      vm.chart.clear()
      vm.option = {
        series: [
          {
            type: 'graph',
            // layout: 'none', // 力引导布局
            layout: 'force', // 力引导布局
            legendHoverLink: true, // 是否启用图例 hover(悬停) 时的联动高亮。
            hoverAnimation: false, // 是否开启鼠标悬停节点的显示动画
            edgeLabel: {
              show: false
            },
            force: {
              edgeLength: 50,
              repulsion: 100
            },
            edgeSymbol: ['none', 'none'],
            roam: true,
            draggable: true, // 每个节点的拖拉
            emphasis: {
              scale: true,
              focus: 'series',
              blurScope: 'coordinateSystem'
            },
            itemStyle: {
              normal: {
                color: '#30DDF4',
                cursor: 'pointer',
                shadowColor: 'rgba(0,0,0,0.10)',
                shadowBlur: 4,
                shadowOffsetX: 1,
                shadowOffsetY: 1,
                label: {
                  show: true,
                  position: [-10, -20],
                  textStyle: { // 标签的字体样式
                    color: '#fff', // 字体颜色
                    fontStyle: 'normal', // 文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
                    fontWeight: '500', // 'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...
                    fontFamily: 'PingFangSC-Regular', // 文字的字体系列
                    fontSize: 14, // 字体大小
                    align: 'center'
                  }
                }
              }
            },
            lineStyle: {
              width: 1,
              color: '#fff'
            },
            symbolSize: 26, // 节点大小
            links: _list.links,
            data: _list.nodes,
            cursor: 'pointer'
          }
        ]
      }

      vm.drawBar()
      // window.addEventListener("resize",()=>{
      //     chart.resize();
      // });
    },
    drawBar () {
      // 绘制图表
      const vm = this
      vm.chart.setOption(vm.option)
      vm.eventList()
    },
    eventList () {
      const vm = this
      vm.chart.on('click', function (params) {
      })
    }
  },
  watch: {
    message: {
      handler () {
        const vm = this
        setTimeout(function () {
          vm.drawLine()
        }, 0)
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>

</style>