60 lines
1.2 KiB
JavaScript
60 lines
1.2 KiB
JavaScript
import { Pie, mixins } from 'vue-chartjs';
|
|
|
|
export default {
|
|
name: 'pie-chart',
|
|
extends: Pie,
|
|
mixins: [mixins.reactiveProp],
|
|
props: {
|
|
extraOptions: Object,
|
|
gradientColors: {
|
|
type: Array,
|
|
default: () => [
|
|
'rgba(72,72,176,0.2)',
|
|
'rgba(72,72,176,0.1)',
|
|
'rgba(119,52,169,0)'
|
|
],
|
|
validator: val => {
|
|
return val.length > 1;
|
|
}
|
|
},
|
|
gradientStops: {
|
|
type: Array,
|
|
default: () => [1, 0.4, 0],
|
|
validator: val => {
|
|
return val.length > 1;
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
ctx: null
|
|
};
|
|
},
|
|
methods: {
|
|
updateGradients(chartData) {
|
|
if (!chartData) return;
|
|
const ctx =
|
|
this.ctx || document.getElementById(this.chartId).getContext('2d');
|
|
const colors=["0xFF0000","0xFFFF00"]
|
|
|
|
chartData.datasets.forEach(set => {
|
|
if (!set.backgroundColor) {
|
|
set.backgroundColor = "rgba(119,52,169,1)";
|
|
}
|
|
});
|
|
}
|
|
},
|
|
mounted() {
|
|
this.$watch(
|
|
'chartData',
|
|
(newVal, oldVal) => {
|
|
this.updateGradients(newVal);
|
|
if (!oldVal) {
|
|
this.renderChart(this.chartData, this.extraOptions);
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
}
|
|
};
|