当前位置:首页 » 《随便一记》 » 正文

ECharts绘制网络关系图(弦图)可调节节点大小以及线条粗细_gjgfjgy的博客

16 人参与  2022年04月15日 13:25  分类 : 《随便一记》  评论

点击全文阅读


ECharts绘制网络关系图(弦图)可调节节点大小以及线条粗细

效果图:
在这里插入图片描述
代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="echarts.min.js"></script>
</head>

<body>
    <div id="main" style="width: 1000px;height:1000px;"></div>
</body>

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    myChart.showLoading();
    myChart.hideLoading();
    var option = {
        title: {
            // text:'弦图',
            left: '25%'
        },
        toolbox: {
            show: true,
            feature: {
                saveAsImage: {
                    pixelRatio: 3  // 数值越高下载图片内存越大越清晰,建议范围(3-10)
                }
            }
        },
        series: [{
            type: 'graph',
            layout: 'circular',
            roam: true,
            focusNodeAdjacency: true,
            circular: {
                rotateLabel: true
            },
            label: {
                normal: {
                    position: 'inside',
                    fontWeight: 'bold',
                    formatter: '{b}',
                    fontSize: 13,
                    normal: {
                        textStyle: {
                            fontFamily: '宋体'
                        }
                    }
                }
            },
            edgeSymbol: ['circle'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
                normal: {
                    textStyle: {
                        fontSize: 17,
                        fontWeight: 'bold',
                        fontFamily: '宋体'
                    }
                }
            },
            itemStyle: {
                normal: {
                    label: {
                        rotate: true,
                        show: true,
                        textStyle: {
                            color: '#333',
                            fontWeight: '400'
                        }
                    },
                },
                emphasis: {
                    label: {
                        show: true,
                        textStyle: null
                    }
                }
            },

            // 节点数据格式
            data: [
                {
                    name: '节点1',
                    symbolSize: 30, // 设置节点大小
                    itemStyle: {
                        normal: {
                            color: '#F07C82'
                        }
                    }
                }, {
                    name: '节点2',
                    symbolSize: 34,
                    itemStyle: {
                        normal: {
                            color: '#F07C82'
                        }
                    }
                },
                // ......
            ],
            
            // 线条数据格式
            links: [
                {
                    source: "节点1",
                    target: "节点2",
                    name: "",
                    tooltip: {
                        trigger: "item",
                        formatter: function (params, ticket, callback) {
                            return params.data.name;
                        }
                    },
                    symbolSize: [5, 20],
                    label: {
                        normal: {
                            formatter: function (params, ticket, callback) {
                                params.name = params.data.name;
                                return params.name;
                            },
                            show: true
                        }
                    },
                    lineStyle: {
                        normal: {
                            width: 0.6666666666666666,
                            curveness: 0.2,
                            color: "#F07C82"
                        }
                    }
                },
                
                // ......
            ]
        }]
    };
    myChart.setOption(option);
</script>

</html>


点击全文阅读


本文链接:http://zhangshiyu.com/post/38110.html

节点  宋体  线条  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 她的记忆停留在了最爱初恋的那年许欣柔楚临川完本_她的记忆停留在了最爱初恋的那年(许欣柔楚临川)
  • 全书浏览假千金的实习生男友霸占我办公室,我反手让他们倾家荡产(顾家明)_假千金的实习生男友霸占我办公室,我反手让他们倾家荡产(顾家明)全书结局
  • 童养夫让我给他的新欢出修复费(林嘉芝林思雅)_童养夫让我给他的新欢出修复费林嘉芝林思雅
  • 全文资助生女婿让我给他白月光付三千万月子中心钱(宋清玉宋雅)列表_全文资助生女婿让我给他白月光付三千万月子中心钱
  • 碎在时光里的谎言喻景宴秦明月完本_碎在时光里的谎言(喻景宴秦明月)
  • 旧爱剜心吻成灰席鄢之岑秋全书免费旧爱剜心吻成灰席鄢之岑秋全书免费
  • 结婚六年丈夫不碰我谁知儿子亲爹是寡头(纪清言傅司砚),结婚六年丈夫不碰我谁知儿子亲爹是寡头
  • 老公想换掉我的男胎,我笑他自不量力(宋薇于继业)_老公想换掉我的男胎,我笑他自不量力宋薇于继业
  • 给太子下了噬心蛊后,皇后找上门(小夭赵劼)全书浏览_给太子下了噬心蛊后,皇后找上门全书浏览
  • 豪门绝嗣!带球跑的夫人回来了!(谢长宴慕清杳)_豪门绝嗣!带球跑的夫人回来了!谢长宴慕清杳
  • 完美身材(李朵林之晴)_完美身材李朵林之晴
  • 离婚后,我和快穿系统绑定(白意秋陈荣周立慧)_离婚后,我和快穿系统绑定(白意秋陈荣周立慧)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1