Echarts关系图

最新推荐文章于 2024-06-28 08:46:07 发布
小胡仙
最新推荐文章于 2024-06-28 08:46:07 发布
阅读量963
点赞数 2
分类专栏： vue 文章标签： vue echarts
本文链接：https://blog.csdn.net/weixin_44436078/article/details/119005949
版权
ECharts 图形可视化家族树华为子公司
关键词由CSDN通过智能技术生成
vue 专栏收录该内容
27 篇文章 0 订阅
订阅专栏
效果图
代码：
<template>
  <div>
     <div id="echart" style="width:100%;height:600px;"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  data () {
    return {
    }
  },
  mounted () {
    this.echartlist()
  },
  methods: {
    echartlist() {
      var option =  {
            title: { text: '家族树' },
            tooltip: {
                formatter: function (x) {
                    return x.data.des;
                }
            },
            series: [
                {
                    type: 'graph',
                    layout: 'force',
                    symbolSize: 30,
                    roam: true,
                    edgeSymbol: ['circle', 'arrow'],
                    edgeSymbolSize: [1, 10],
                    edgeLabel: {
                        normal: {
                            textStyle: {
                                fontSize: 20
                            }
                        }
                    },
                    force: {
                        repulsion: 1000,
                        edgeLength: [10, 40],
                        layoutAnimation: false
                    },
                    draggable: true,
                    itemStyle: {
                        normal: {
                            color: '#4b565b'
                        }
                    },
                    lineStyle: {
                        normal: {
                            width: 2,
                            color: '#4b565b'

                        }
                    },
                    edgeLabel: {
                        normal: {
                            show: true,
                            formatter: function (x) {
                                return x.data.name;
                            }
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            textStyle: {
                            }
                        }
                    },
                    data: [
                      {
                          name: '华为技术有限公司',
                          // des: '华为技术有限公司',
                          symbolSize: 90,
                          itemStyle: {
                              normal: {
                                  color: '#F81D22'
                              }
                          }
                      },
                      { name: '华为投资控股有限公司', symbolSize: 60 },
                      { name: '杭州华为企业通信技术有限公司' },
                      { name: '上海海思技术有限公司' },
                      { name: '华为软件技术有限公司' },
                      { name: '深圳市海思半导体有限公司' },
                      { name: '海思光电子有限公司' },
                      { name: '杭州华为数字技术有限公司' },
                      { name: '深圳市华为技术服务有限公司' },
                      { name: '华为技术服务有限公司' },
                      { name: '成都华为技术有限公司' },
                      { name: '浙江华为通信技术有限公司' },
                      { name: '北京华为数字技术有限公司' },
                      { name: '上海华为技术有限公司' },
                      { name: '西安华为技术有限公司' },
                      { name: '华为机器有限公司' },
                      { name: '华为机器有限公司2', itemStyle: { normal: { color: '#C79AF1' } } },
                      { name: '华为机器有限公司3', itemStyle: { normal: { color: '#2B7FF1' } } },
                      { name: '杭州华为企业通信技术有限公司2', itemStyle: { normal: { color: '#C79AF1' } } },
                      { name: '杭州华为企业通信技术有限公司3', itemStyle: { normal: { color: '#2B7FF1' } } },
                      { name: '上海海思技术有限公司2', itemStyle: { normal: { color: '#C79AF1' } } },
                      { name: '上海海思技术有限公司3', itemStyle: { normal: { color: '#2B7FF1' } } },
                      { name: '华为软件技术有限公司2', itemStyle: { normal: { color: '#C79AF1' } } },
                      { name: '华为软件技术有限公司3', itemStyle: { normal: { color: '#2B7FF1' } } },
                      { name: '深圳市海思半导体有限公司2', itemStyle: { normal: { color: '#C79AF1' } } },
                      { name: '深圳市海思半导体有限公司3', itemStyle: { normal: { color: '#2B7FF1' } } },
                      { name: '海思光电子有限公司2', itemStyle: { normal: { color: '#C79AF1' } } },
                      { name: '海思光电子有限公司3', itemStyle: { normal: { color: '#2B7FF1' } } },
                      { name: '杭州华为数字技术有限公司2', itemStyle: { normal: { color: '#C79AF1' } } },
                      { name: '杭州华为数字技术有限公司3', itemStyle: { normal: { color: '#2B7FF1' } } },
                      { name: '深圳市华为技术服务有限公司2', itemStyle: { normal: { color: '#C79AF1' } } },
                      { name: '深圳市华为技术服务有限公司3', itemStyle: { normal: { color: '#2B7FF1' } } },
                      { name: '华为技术服务有限公司2', itemStyle: { normal: { color: '#C79AF1' } } },
                      { name: '华为技术服务有限公司3', itemStyle: { normal: { color: '#2B7FF1' } } },
                      { name: '成都华为技术有限公司2', itemStyle: { normal: { color: '#C79AF1' } } },
                      { name: '成都华为技术有限公司3', itemStyle: { normal: { color: '#2B7FF1' } } },
                      { name: '浙江华为通信技术有限公司2', itemStyle: { normal: { color: '#C79AF1' } } },
                      { name: '浙江华为通信技术有限公司3', itemStyle: { normal: { color: '#2B7FF1' } } },
                      { name: '北京华为数字技术有限公司2', itemStyle: { normal: { color: '#C79AF1' } } },
                      { name: '北京华为数字技术有限公司3', itemStyle: { normal: { color: '#2B7FF1' } } },
                    ],
                    links: [
                      { source: '华为投资控股有限公司', target: '华为技术有限公司', name: '子公司', des: '华为投资控股有限公司是华为技术有限公司的父公司' },
                      { source: '华为技术有限公司', target: '杭州华为企业通信技术有限公司', name: '子公司' },
                      { source: '华为技术有限公司', target: '上海海思技术有限公司', name: '子公司' },
                      { source: '华为技术有限公司', target: '华为软件技术有限公司', name: '子公司' },
                      { source: '华为技术有限公司', target: '深圳市海思半导体有限公司', name: '子公司' },
                      { source: '华为技术有限公司', target: '海思光电子有限公司', name: '子公司' },
                      { source: '华为技术有限公司', target: '杭州华为数字技术有限公司', name: '子公司' },
                      { source: '华为技术有限公司', target: '深圳市华为技术服务有限公司', name: '子公司' },
                      { source: '华为技术有限公司', target: '华为技术服务有限公司', name: '子公司' },
                      { source: '华为技术有限公司', target: '成都华为技术有限公司', name: '子公司' },
                      { source: '华为技术有限公司', target: '浙江华为通信技术有限公司', name: '子公司' },
                      { source: '华为技术有限公司', target: '北京华为数字技术有限公司', name: '子公司' },
                      { source: '华为技术有限公司', target: '上海华为技术有限公司', name: '子公司' },
                      { source: '华为技术有限公司', target: '西安华为技术有限公司', name: '子公司' },
                      { source: '华为技术有限公司', target: '华为机器有限公司', name: '子公司' },
                      { source: '华为机器有限公司', target: '华为机器有限公司2', name: '子公司' },
                      { source: '华为机器有限公司2', target: '华为机器有限公司3', name: '子公司' },
                      { source: '杭州华为企业通信技术有限公司', target: '杭州华为企业通信技术有限公司2', name: '子公司' },
                      { source: '杭州华为企业通信技术有限公司2', target: '杭州华为企业通信技术有限公司3', name: '子公司' },
                      { source: '上海海思技术有限公司', target: '上海海思技术有限公司2', name: '子公司' },
                      { source: '上海海思技术有限公司2', target: '上海海思技术有限公司3', name: '子公司' },
                      { source: '华为软件技术有限公司', target: '华为软件技术有限公司2', name: '子公司' },
                      { source: '华为软件技术有限公司2', target: '华为软件技术有限公司3', name: '子公司' },
                      { source: '深圳市海思半导体有限公司', target: '深圳市海思半导体有限公司2', name: '子公司' },
                      { source: '深圳市海思半导体有限公司2', target: '深圳市海思半导体有限公司3', name: '子公司' },
                      { source: '海思光电子有限公司', target: '海思光电子有限公司2', name: '子公司' },
                      { source: '海思光电子有限公司2', target: '海思光电子有限公司3', name: '子公司' },
                      { source: '杭州华为数字技术有限公司', target: '杭州华为数字技术有限公司2', name: '子公司' },
                      { source: '杭州华为数字技术有限公司2', target: '杭州华为数字技术有限公司3', name: '子公司' },
                      { source: '深圳市华为技术服务有限公司', target: '深圳市华为技术服务有限公司2', name: '子公司' },
                      { source: '深圳市华为技术服务有限公司2', target: '深圳市华为技术服务有限公司3', name: '子公司' },
                      { source: '华为技术服务有限公司', target: '华为技术服务有限公司2', name: '子公司' },
                      { source: '华为技术服务有限公司2', target: '华为技术服务有限公司3', name: '子公司' },
                      { source: '成都华为技术有限公司', target: '成都华为技术有限公司2', name: '子公司' },
                      { source: '成都华为技术有限公司2', target: '成都华为技术有限公司3', name: '子公司' },
                      { source: '浙江华为通信技术有限公司', target: '浙江华为通信技术有限公司2', name: '子公司' },
                      { source: '浙江华为通信技术有限公司2', target: '浙江华为通信技术有限公司3', name: '子公司' },
                      { source: '北京华为数字技术有限公司', target: '北京华为数字技术有限公司2', name: '子公司' },
                      { source: '北京华为数字技术有限公司2', target: '北京华为数字技术有限公司3', name: '子公司' },
                    ]
                }
            ]
        }
      var dom = document.getElementById('echart')
      var myChart = echarts.init(dom)
      myChart.setOption(option)
    }
  }
}
</script>
小胡仙
关注
2
点赞
踩
19

收藏

觉得还不错? 一键收藏
3
评论
Echarts关系图

效果图代码：<template> <div> <div id="echart" style="width:100%;height:600px;"></div> </div></template><script>import * as echarts from 'echarts';export default { data () { return { } },.
复制链接

扫一扫
专栏目录