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']
			this.extend.series['itemStyle'] = {
				normal: {
					color:this.chartSettings.colors
				}
			}
		}
	}
}

猜你喜欢

转载自blog.csdn.net/weixin_43173924/article/details/89374980
今日推荐