vue+v-charts+elementui根据拾色器颜色改变柱状图颜色或者柱状图随机色

<el-switch
		        class="randomColor"
		        v-model="chartSettings.randomColor"
		        active-text="随机"
		        inactive-text="否"
		        @change="randomMethod"
></el-switch>
<el-color-picker v-model="chartSettings.curentColor" @change="colorChange">
</el-color-picker>
<ve-bar v-if="chartType === 'bar'"
                  :data="chartData"
                  :settings="chartSettings"
                  :extend="extend"
                  ref="v-chart"
				  :style="styles"
></ve-bar>

chartSettings:{
          colors:[],
          curentColor: '',
          randomColor:true
}

randomMethod(val) {
        this.setColor(null, val);
        this.chartSettings.curentColor = '';
},
colorChange(val) {
        this.setColor(val, false);
},
      /**
       * isRandomColor true:随机色  false:纯色
       * oneColor 单颜色
       */
setColor(oneColor, isRandomColor) {
        if (!isRandomColor && oneColor != null) {
          this.chartSettings.colors = [oneColor];
        } else {
          this.chartSettings.colors = null;
        }
        this.chartSettings.randomColor = isRandomColor;
        this.$emit("change", this.chartSettings, this.extend);
},
this.chartSettings = JSON.parse(JSON.stringify(this.tmpChartSettings))
this.extend = JSON.parse(JSON.stringify(this.tmpExtend))
//必须把判断条件放到这里,放到changeSetting()方法里不行,color拿不到
	if (Object.keys(this.chartSettings).length !== 0) {
		if (Object.keys(this.extend).length !== 0) {
			if (this.chartSettings.randomColor) {
				this.extend.series['itemStyle'] = {
		normal: {
			color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
			}
		}
	} else {
		delete this.extend.series['itemStyle']
        let colors = this.chartSettings.colors;
        if (colors && colors.length!==0 && colors!==null && colors!==undefined) {
          colors = this.chartSettings.colors;
        } else {
           colors = null; //这里要置为null,否则图表颜色不是默认的
        }
			this.extend.series['itemStyle'] = {
				normal: {
					color:this.chartSettings.colors
				}
			}
		}
	}
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值