zhgdyun/src/views/projectAdmin/common/jChart/pie/JRingChart.vue

<template>
  <div class="j-ring-chart" ref="jRingChart"></div>
</template>

<script>
import echarts from 'echarts4'
export default {
  props: {
    data: {
      type: Array,
      default: () => [{ value: 1, name: '' }]
    },
    color: {
      type: Array,
      default: () => ['#5181F6', '#61D2B9', '#F67F51', '#7851F6']
    },
    title: {
      type: Object,
      default: () => ({
        text: '',
        subTitle: '',
        x: '48%',
        y: '36%',
        fontSize: 20
      })
    },
    radius: {
      type: Array,
      default: () => ['65%', '80%']
    }
  },
  mounted() {
    this.createRingChart()
  },
  watch: {
    data: {
      handler(newVal, oldVal) {
        if (newVal != oldVal) {
          this.createRingChart()
        }
      },
      deep: true,
      immediate: true
    },
    title: {
      handler(newVal, oldVal) {
        if (newVal != oldVal) {
          this.createRingChart()
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    createRingChart() {
      const jRingChart = echarts.init(this.$refs.jRingChart)
      const { title } = this
      const option = {
        color: this.color,
        title: {
          show: true,
          text: title.text,
          x: title.x || '48%',
          y: title.y || '36%',
          z: 5,
          textAlign: 'center',
          textStyle: {
            color: 'rgba(255, 255, 255, 1)',
            fontSize: title.fontSize || 20
          },
          subtext: title.subTitle,
          subtextStyle: {
            color: 'rgba(255, 255, 255, 0.8)',
            fontSize: 13
          }
        },
        grid: {
          right: 0
        },
        legend: {
          show: false
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: this.radius,
            avoidLabelOverlap: false,
            hoverAnimation: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: this.data
          }
        ]
      }

      console.log(option, '草')
      jRingChart.setOption(option)
    }
  }
}
</script>

<style>
.j-ring-chart {
  width: 100%;
  height: 100%;
}
</style>