Echarts 随机色设定(复制粘贴即可在官网运行)

//关系图

  var graph = {  //这是数据项目中一般都是获取到的
                nodes: [
                    { "id": "0", "name": "昆山XX设计有限公司0"},
                    { "id": "1", "name": "上海XX设计有限公司1"},
                    
                    { "id": "2", "name": "赵某某2" },
                    
                    { "id": "3", "name": "主要人员3"},
                    
                    { "id": "4", "name": "苏州XX实业有限公司4" }
                ],
                links: [
                { "id": "0", "source": "0", "target": "2" },
                { "id": "1", "source": "1", "target": "2" },
                { "id": "2", "source": "2", "target": "3" },
                { "id": "3", "source": "3", "target": "1" },
                { "id": "4", "source": "4", "target": "0" },]
            };


            var winWidth = document.body.clientWidth;
            var winHeight = document.body.clientHeight;
            var colorArr = new Array();
            var color=createColorCode('#'+Math.floor(Math.random()*16777215).toString(16),colorArr);
            //生成不同的颜色代码
            function createColorCode(code,colorArr){
                if($.inArray(code, colorArr)==-1 && code.length>6){
                    colorArr[0]=code;
                }else{
                    code='#'+Math.floor(Math.random()*16777215).toString(16);
                    createColorCode(code,colorArr);
                }
                return colorArr;
            }
            var option = {    //这里是option配置
                animationDurationUpdate: 1500,//数据更新动画的时长。
                animationEasingUpdate: 'quinticInOut',//数据更新动画的缓动效果。
                series: [
                    {
                        type: 'graph',
                        layout: 'force',           //因为节点的位置已经有了就不用在这里使用布局了
                        //circular: { rotateLabel: true },
                        //animation: false,
                        data: graph.nodes,
                        links: graph.links,
                        roam: true,   //添加缩放和移动
                        draggable: true,//这里设置为false,不然拖拽鼠标和节点有偏移
                        itemStyle: {//配置节点的颜色已及尺寸
                            normal: {
                                // (1) 直接写一个颜色,这样的结果是所有节点都是同一个颜色
                                //color: '#fff',
                                // (2) 像在全局定义中一样,使用数组声明多个颜色
                                //        但是这样的结果是所有颜色都变成黑色(大概是不允许这样用吧)
                                //color: ['#fc853e','#28cad8','#9564bf','#bd407e','#28cad8','#fc853e','#e5a214'],
                                // (3) 类似柱状图定义多个颜色,利用函数返回不同的颜色值
                                //        结果同上,全变成黑色了
                                //color: function (params) {
                                   // var colorList = ['red', 'orange', 'green', 'blue', 'purple'];
                                   // return colorList[params.dataIndex]
                                //},

                            color:color[0].split(','),//随机颜色设定

                            }
                        },
                        symbolSize: function (value, params) {//改变节点大小
                            var SizeList = [40, 45, 50, 55, 60];
                            return SizeList[params.dataIndex]
                        },

                        label: {
                            normal: {
                                show: true,
                                position: 'bottom',
                                rich: {
                                    bg: {
                                        backgroundColor: '#f5f5f5'
                                    }
                                }
                            }
                        },
                        force: {

                            edgeLength: [10, winWidth / 2]
                        }
                    }
                ]
            };
            myChart.setOption(option);
//柱状图

 var colorArr = new Array();
            var color=createColorCode('#'+Math.floor(Math.random()*16777215).toString(16),colorArr);
            //生成不同的颜色代码
            function createColorCode(code,colorArr){
                if($.inArray(code, colorArr)==-1 && code.length>6){
                    colorArr[0]=code;
                }else{
                    code='#'+Math.floor(Math.random()*16777215).toString(16);
                    createColorCode(code,colorArr);
                }
                return colorArr;
            };
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: 'ECharts 入门示例'
                },
                tooltip: {},
                legend: {
                    data: ['销量']
                },
                xAxis: {
                    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
                },
                yAxis: {},
                series: [{
                    name: '销量',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20],
                    color:color[0].split(','),
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);

 

//核心代码:

 var colorArr = new Array();
            var color=createColorCode('#'+Math.floor(Math.random()*16777215).toString(16),colorArr);
            //生成不同的颜色代码
            function createColorCode(code,colorArr){
                if($.inArray(code, colorArr)==-1 && code.length>6){
                    colorArr[0]=code;
                }else{
                    code='#'+Math.floor(Math.random()*16777215).toString(16);
                    createColorCode(code,colorArr);
                }
                return colorArr;
            };

//series设定随机色:

 series: [{              
                    color:color[0].split(','),
                }]

 

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值