yclw/src/views/groupPage/components/ComStatisticPieChart.vue

<template>
  <div class="chart" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'statisticPieChart', //统计饼图
  props: {
    chartData: {}
  },
  watch: {
    chartData: {
      handler(n, o) {
        this.$nextTick(() => {
          this.initialChart()
        })
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    initialChart() {
      const data = this.chartData
      const color = [
        'rgba(17, 156, 255, 1)',
        'rgba(232, 190, 76, 1)',
        'rgba(21, 208, 234, 1)',
        'rgba(6, 174, 97, 1)',
        'rgba(212, 112, 13, 1)',
        'rgba(175, 45, 230, 1)'
      ]
      const color2 = [
        'rgba(17, 156, 255, 0.15)',
        'rgba(232, 190, 76, 0.15)',
        'rgba(21, 208, 234, 0.15)',
        'rgba(6, 174, 97, 0.15)',
        'rgba(212, 112, 13, 0.15)',
        'rgba(175, 45, 230, 0.15)'
      ]
      let total = 0
      data.map((item) => {
        total += item.value
      })
      // 设置数据
      function setChartOption(data) {
        const formatData = []
        data.forEach(function (item, index) {
          formatData.push(
            {
              value: item.value,
              name: item.name,
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              emphasis: {
                disabled: true,
                labelLine: {
                  show: false
                }
              },
              itemStyle: {
                color: color[index],
                shadowBlur: 5,
                shadowColor: color[index]
              }
            },
            {
              value: 0.2,
              name: '',
              itemStyle: {
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
              }
            }
          )
        })

        return formatData
      }
      // 设置阴影数据
      function setShadowOption(data) {
        const formatData = []
        data.forEach(function (item, index) {
          formatData.push(
            {
              value: item.value,
              name: item.name,
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              itemStyle: {
                color: color2[index],
                shadowBlur: 20,
                shadowColor: color2[index]
              }
            },
            {
              value: 0.2,
              name: '',
              itemStyle: {
                color: 'rgba(0, 0, 0, 0)',
                borderColor: 'rgba(0, 0, 0, 0)',
                borderWidth: 0
              }
            }
          )
        })

        return formatData
      }
      let option = {
        backgroundColor: 'transparent',
        title: {
          text: `{a|${total}}` + '{b|个}\n' + '{c|项目总数}',
          top: 'center',
          left: '29%',
          textAlign: 'center',
          textStyle: {
            rich: {
              a: { fontSize: this.$listeners.fontSize(24), color: 'rgba(255, 255, 255, 1)' },
              b: { fontSize: this.$listeners.fontSize(20), color: 'rgba(255, 255, 255, 1)' },
              c: { fontSize: this.$listeners.fontSize(14), color: 'rgba(0,141,236,0.9)' }
            }
          }
        },
        tooltip: {
          trigger: 'item',
          textStyle: {
            color: '#fff'
          },
          borderWidth: 0,
          backgroundColor: 'rgba(50,50,50,0.7)'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          itemWidth: 8,
          itemHeight: 8,
          itemGap: 30,
          icon: 'react',
          left: '60%',
          top: 'center',
          textStyle: {
            rich: {
              a: {
                fontSize: this.$listeners.fontSize(14),
                color: '#fff'
              },
              b: {
                fontSize: this.$listeners.fontSize(16),
                fontWeight: 'bold',
                color: '#fff'
              }
            }
          },
          formatter: function (name) {
            //图例后添加数值
            let data = option.series[0].data
            let tarValue
            for (let i = 0; i < data.length; i++) {
              if (data[i].name === name) {
                tarValue = data[i].value
              }
            }
            return '{a|' + name + '}' + '     ' + '{b|' + tarValue + '个}'
          },
          data: data
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['60%', '70%'],
            center: ['30%', '50%'],
            data: setChartOption(data)
          },
          {
            name: '',
            type: 'pie',
            radius: ['50%', '60%'],
            center: ['30%', '50%'],
            hoverAnimation: false,
            silent: true,
            data: setShadowOption(data)
          }
        ]
      }
      this.creatChart(option, this.$refs.chart)
    },
    creatChart(option, ref) {
      let chart = echarts.init(ref) //this.$refs.chart
      chart.resize()
      chart.setOption(option, {
        notMerge: true
      })
      //图表大小自适应
      window.addEventListener('resize', () => {
        chart.resize()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.chart {
  height: 100%;
  width: 100%;
}
</style>