1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<template>
  <basic-container style="width: 100%">
    <v-chart :options="chartOptions" :auto-resize="true" id="chart"></v-chart>
  </basic-container>
</template>
 
<script>
import 'echarts'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
export default {
  name: "pieChart",
  props:{
    pieData:{
      type:Array,
      default:[]
    },
    chartName:{
      type:String,
      default: ""
    }
  },
  watch:{
    pieData:{
      immediate:true,
      handler(newval,oldval){
        if (newval) {
          // console.log(newval)
          const series=[
            {
              name: '',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap:false,
              label: {
                formatter: '{b}\n{d}%',
                fontSize:14
              },
              itemStyle: {
                color: function(params) {
                  // 根据具体需求设置颜色
                  const colorList = ['#5470C6', '#91CC75', '#fac858', '#EE6666', '#3BA272', '#FC8452', '#9A60B4', '#e34d4d', '#b3e9b9', '#eaaaed', '#1bc6e4', '#c6b3e9'];
                  return colorList[params.dataIndex % colorList.length];
                }
              },
              data:newval[0].map((value, index) => {
                return {
                  value: value,
                  name: this.getMonthName(index),
                  newValue: newval[1][index]
                };
              }),
            }
          ]
          this.chartOptions.series = series;
        }
      }
    },
    chartName:{
      handler(newval,oldval){
        if(newval){
          this.chartOptions.title.text = newval + "数据统计"
        }
      },
      immediate:true,
      deep:true
    }
  },
  data() {
    return {
      chartOptions: {
        title: {
          text: '供应商主数据统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            let result = '';
            if (params.componentType === 'series') {
              result += params.name + '<br/>';
              result += '新增：' + params.data.newValue + '<br/>';
              result += '总量：' + params.data.value + '<br/>';
              result += '百分比：' + params.percent + '%';
            }
            return result;
          }
        },
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'middle',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        },
        series: []
      },
    }
  },
  methods:{
    getMonthName(index){
      const monthNames = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
      return monthNames[index];
    }
  }
}
</script>
 
<style scoped lang="scss">
#chart {
  width: 90%;
  height: 530px;
}
 
</style>