Echarts图标 关系图的不同节点显示不同的颜色

  要做出如上图所示的效果,图例的颜色和节点额颜色相对应,并且关系复杂的节点越大,关系简单的节点越小,需要在配置中修改:

var option = {
                title: {
                  text: '',
                },
                tooltip:{//提示框配置
                    formatter:function(x){
                        return x.name
                    }
                },
                // toolbox:{//工具箱配置
                //     show:true,
                //     feature:{
                //         magicType:['line','bar'],
                //         restore:true,
                //         saveImage:true,
                //     },
                // },
                legend:[{
                    height:10,
                    left:'center',
                    itemGap:15,
                    // padding:'10px',
                    textStyle:{
                        // color:'#fff',
                        color:(params)=>(params),
                        fontSize:13,
                    },
                    // data:echartsData.map(function(a){
                    //     return a
                    // }),
                }], 
                color:['#fc853e','#28cad8','#9564bf','#bd407e','#28cad8','#e5a214',],
                series: [
                    {
                        type: 'graph',
                        layout: 'force',
                        symbolSize: 60,
                        roam: true,//是否开启鼠标缩放和平移漫游。默认不开启,如果只想要开启锁档或者平移,设置成'scale’,或'move'。设置true为都开启
                        label: {//图形上的文本标签,可用于说明图形的一些数据信息
                            normal: {
                                show: true,
                                textStyle: {
                                    fontSize: 13,
                                },
                                // position:'right',//相对于节点标签的位置
                                // formatter:function(params){//回调函数,期望节点标签上显示什么
                                //     return params.data.value
                                // },
                            }
                        },
                        draggable: true, // 节点是否可拖拽,只在使用力引导布局的时候有用。
                        focusNodeAdjacency: true, // 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
                        categories:echartsData,
                        force: {
                            // 力引导图基本配置
                            // initLayout: , // 力引导的初始化布局,默认使用xy轴的标点
                            repulsion: 200, // 节点之间的斥力因子。支持数组表达斥力范围,值越大斥力越大。
                            gravity: 0.02, // 节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
                            edgeLength: 200, // 边的两个节点之间的距离,这个距离也会受 repulsion影响 。值越大则长度越长
                            layoutAnimation: true // 因为力引导布局会在多次迭代后才会稳定,这个参数决定是否显示布局的迭代动画
                            // 在浏览器端节点数据较多(>100)的时候不建议关闭,布局过程会造成浏览器假死。                        
                        },
                        edgeSymbol: ['circle', 'arrow'],//边两端的标记类型
                        edgeSymbolSize:[4,8],//边两端的标记大小
                        edgeLabel: {
                            normal: {
                                show: true,
                                textStyle: {
                                    fontSize: 12,
                                    color:"white"
                                },
                        
                                formatter: "{c}"
                            }
                        },
                        data: echartsData, 
                        // data: function(datas){

                        // }, 
                        links: echartsLink,
                        // categories:categories,//节点种类
                        // itemStyle:{//配置节点的颜色
                            // normal:{
                                // color:function(param){
                                    // let colorList = ['#fc853e','#28cad8','#9564bf','#bd407e','#28cad8','#e5a214',];
                                    // return colorList[param.dataIndex]
                                // },
                                // label:{
                                //     show:true,
                                //     position:'top',
                                //     formatter:'{b}\n{c}'
                                // },
                                // opacity:0.9,//设置透明度,为0时不绘制
                            // }
                        // },
                        symbolSize:function(val,param){//配置节点的尺寸
                            let sizeList = [75,70,65,60,55,50,45,40,];
                            return sizeList[param.dataIndex];
                        },
                        lineStyle:{//关系边的公用线条样式
                            normal:{
                                show:true,
                                color:'target',//决定边的颜色是与起点相同还是终点相同
                                // curveness:0.3//变得曲度,支持从0到1的值,值越大曲度越大
                            }

                        },
                        // cursor:"pointer",
                    }
                ],           
            };

  • 5
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值