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

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

7 人参与  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://m.zhangshiyu.com/post/38110.html

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

  • 评论(0)
  • 赞助本站

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

最新文章

  • 萧逸尘,楚璃,叶紫嫣爱恨决绝,此生不见番外(爱恨决绝,此生不见)TXT+后续+结局在线阅读
  • 假千金要交换人生?我抱着空间做首富爽文_苏木青赵景城虐心反转_小说后续在线阅读_无删减免费完结_
  • 温时雨谢远之续集(清风难渡无缘人)全本完整免费版_起点章节+后续(温时雨谢远之)
  • 订婚两个月后,未婚夫要摆脱包办婚姻精心打造_肖明宝宝宾客故事会_小说后续在线阅读_无删减免费完结_
  • 霍景琛,苏晚,林深昔年请深如海,终不敌薄凉附加(霍景琛,苏晚,林深)(昔年请深如海,终不敌薄凉)全本浏览阅读连载中
  • 新章速递汤安甯,白子奕,汤贝贝是什么小说(结婚十年,回归家庭的老婆在外有二胎了)完本阅读无广告(结婚十年,回归家庭的老婆在外有二胎了)
  • 娇牛马导师偷我论文99篇成功升博导,我让他牢底坐穿精校文本_周老师师姐师兄爽文_小说后续在线阅读_无删减免费完结_
  • 独家顾宇,罗薇:结局+番外精编之作(资助生装阔气,我可不参加)电子书畅享阅读
  • 宗门全员重生,小师妹摆烂不干了(君拂君芙蓉)_宗门全员重生,小师妹摆烂不干了
  • 成了高考状元后,我倒欠两百万完结txt_阿姨叶青江安TOP10_小说后续在线阅读_无删减免费完结_
  • 嫁绝嗣长官,好孕作精在七零躺赢小说(顾嘉宁)序章+全章阅读(嫁绝嗣长官,好孕作精在七零躺赢)最新章节
  • 秦安,温千雪:+后续现已上架(大宋:开局错把皇帝当亲爹):结局+番外评价五颗星

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

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