<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
}
}
}
}
}
<el-switch
class="randomColor"
v-model="chartSett
阅读背景：
vue+v-charts+elementui根据拾色器颜色改变柱状图颜色或者柱状图随机色
来源：互联网
分享到：
