|
|
@@ -55,7 +55,8 @@ export default {
|
|
|
value: '',
|
|
|
options: [],
|
|
|
numInfo: {},
|
|
|
- priceInfo: {}
|
|
|
+ priceInfo: {},
|
|
|
+ config: null
|
|
|
};
|
|
|
},
|
|
|
mixins: [acc],
|
|
|
@@ -92,7 +93,20 @@ export default {
|
|
|
this.priceInfo = res;
|
|
|
this.$refs.chart.width = this.$refs.container.$el.offsetWidth - this.$refs.box.offsetWidth - 40;
|
|
|
this.$refs.chart.height = this.$refs.container.$el.offsetHeight - 100;
|
|
|
- this.init(this.value);
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.config = {
|
|
|
+ type: 'doughnut',
|
|
|
+ data: {
|
|
|
+ labels: ['官方销售额', '二手市场销售额'],
|
|
|
+ datasets: []
|
|
|
+ },
|
|
|
+ options: {
|
|
|
+ responsive: true
|
|
|
+ }
|
|
|
+ };
|
|
|
+ this.myChart = new Chart(this.$refs.chart.getContext('2d'), this.config);
|
|
|
+ this.init(this.value);
|
|
|
+ });
|
|
|
});
|
|
|
});
|
|
|
},
|
|
|
@@ -102,70 +116,14 @@ export default {
|
|
|
this.transferNum = this.numInfo.transfer ? this.numInfo.transfer[value] || 0 : 0;
|
|
|
this.official = this.priceInfo.official ? this.priceInfo.official[value] || 0 : 0;
|
|
|
this.transfer = this.priceInfo.transfer ? this.priceInfo.transfer[value] || 0 : 0;
|
|
|
- this.$nextTick(() => {
|
|
|
- this.myChart = new Chart(this.$refs.chart.getContext('2d'), {
|
|
|
- type: 'doughnut',
|
|
|
- data: {
|
|
|
- labels: ['官方销售额', '二手市场销售额'],
|
|
|
- datasets: [
|
|
|
- {
|
|
|
- title: '销售额',
|
|
|
- backgroundColor: ['#FEB30E', '#FF7970'],
|
|
|
- data: [this.official, this.transfer]
|
|
|
- }
|
|
|
- ]
|
|
|
- },
|
|
|
- options: {
|
|
|
- responsive: true,
|
|
|
- plugins: {
|
|
|
- legend: {
|
|
|
- labels: {
|
|
|
- generateLabels: function (chart) {
|
|
|
- // Get the default label list
|
|
|
- const original = Chart.overrides.pie.plugins.legend.labels.generateLabels;
|
|
|
- const labelsOriginal = original.call(this, chart);
|
|
|
-
|
|
|
- // Build an array of colors used in the datasets of the chart
|
|
|
- let datasetColors = chart.data.datasets.map(function (e) {
|
|
|
- return e.backgroundColor;
|
|
|
- });
|
|
|
- datasetColors = datasetColors.flat();
|
|
|
-
|
|
|
- // Modify the color and hide state of each label
|
|
|
- labelsOriginal.forEach(label => {
|
|
|
- // There are twice as many labels as there are datasets. This converts the label index into the corresponding dataset index
|
|
|
- label.datasetIndex = (label.index - (label.index % 2)) / 2;
|
|
|
-
|
|
|
- // The hidden state must match the dataset's hidden state
|
|
|
- label.hidden = !chart.isDatasetVisible(label.datasetIndex);
|
|
|
-
|
|
|
- // Change the color to match the dataset
|
|
|
- label.fillStyle = datasetColors[label.index];
|
|
|
- });
|
|
|
-
|
|
|
- return labelsOriginal;
|
|
|
- }
|
|
|
- },
|
|
|
- onClick: function (mouseEvent, legendItem, legend) {
|
|
|
- // toggle the visibility of the dataset from what it currently is
|
|
|
- legend.chart.getDatasetMeta(
|
|
|
- legendItem.datasetIndex
|
|
|
- ).hidden = legend.chart.isDatasetVisible(legendItem.datasetIndex);
|
|
|
- legend.chart.update();
|
|
|
- }
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- callbacks: {
|
|
|
- label: function (context) {
|
|
|
- const labelIndex = context.datasetIndex * 2 + context.dataIndex;
|
|
|
- return context.chart.data.labels[labelIndex] + ': ' + context.formattedValue;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- });
|
|
|
+ this.config.data.datasets = [
|
|
|
+ {
|
|
|
+ title: '销售额',
|
|
|
+ backgroundColor: ['#FEB30E', '#FF7970'],
|
|
|
+ data: [this.official, this.transfer]
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ this.myChart.update();
|
|
|
},
|
|
|
changeSelect() {
|
|
|
this.$nextTick(() => {
|
panhui