echarts中档数据不确定是想让图形每一个颜色不一样

第一种:

series: [
          {
            data: dataSource.values,
            barWidth:this.getFontSize(30),
            itemStyle: {
               borderColor: '#80A5C8', // 边框颜色
               borderWidth: this.getFontSize(2), // 边框宽度
               borderType: 'solid',
               color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
            }
         }
]

第二种:

 注意在data中创建this.colors

        //随机生成颜色
        handleColors(){
            let color = '';
            let r=Math.floor(Math.random()*256);
            let g=Math.floor(Math.random()*256);
            let b=Math.floor(Math.random()*256);
            color = `rgb(${r},${g},${b})`;
            return color;//所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
        },
        //根据种类数量生成颜色列表
        setEchartColor(data){ 
            this.colors=[]
            for (let i = 0; i < data.length; i++) {
                let color = this.colorHex(this.handleColors());
                //此时的this.colors包含16进制颜色,rgb颜色,如果不想包含其中一种颜色可以自行去除
                this.colors.push(color);
            }
        },
        //rgb颜色转十六进制
        colorHex(string){
            var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
            if(/^(rgb|RGB)/.test(string)){
                var aColor = string.replace(/(?:\(|\)|rgb|RGB)*/g,"").split(",");
                var strHex = "#";
                for(var i=0; i<aColor.length; i++){
                    var hex = Number(aColor[i]).toString(16);
                    if(hex === "0"){
                        hex += hex; 
                    }
                    strHex += hex;
                }
                    if(strHex.length !== 7){
                        strHex = string;  
                    }
                    return strHex;
            }else if(reg.test(string)){
                    var aNum = string.replace(/#/,"").split("");
                    if(aNum.length === 6){
                        return string;    
                    }else if(aNum.length === 3){
                        var numHex = "#";
                        for(var i=0; i<aNum.length; i+=1){
                            numHex += (aNum[i]+aNum[i]);
                        }
                        return numHex;
                    }
            }else{
                    return string;    
    
            }
        }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值