zhgdyun/src/views/projectAdmin/jlw/jChart/pie/JNestedRingChart.vue

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

<script>
import echarts from 'echarts4'
export default {
  props: {
    title: {
      type: Object,
      default: () => ({
        text: '11',
        subTitle: '22',
        x: '48%',
        y: '36%'
      })
    },
    legend: {
      type: Object,
      default: () => ({})
    },
    showLegend: {
      type: Boolean,
      default: true
    },
    series: {
      required: true,
      type: Array,
      default: () => []
    }
  },
  mounted() {
    this.jNestedRingChart = echarts.init(this.$refs.jNestedRingChart)
    this.drawChart()
    this.createChart()
    this.timer = setInterval(() => {
      this.doing()
    }, 200)
  },
  destroyed() {
    clearInterval(this.timer)
    this.timer = ''
  },
  data() {
    return {
      jNestedRingChart: null
    }
  },
  methods: {
    createChart() {
      const { title, legend, series, showLegend } = this
      const setSeries = ((series) => {
        return series.map((item) => ({
          type: 'pie',
          label: false,
          center: item.center || ['30%', '50%'],
          radius: item.radius || ['65%', '80%'],
          roseType: item.roseType,
          color: item.color,
          data: item.data
        }))
      })(series)
      this.jNestedRingChart = echarts.init(this.$refs.jNestedRingChart)

      const option = {
        title: {
          text: title.text,
          subtext: title.subTitle,
          x: title.x || '29%',
          y: title.y || '35%',
          show: true,
          textAlign: 'center',
          textStyle: {
            fontSize: 20,
            fontWeight: 'normal',
            color: '#fff'
          },
          subtextStyle: {
            fontSize: 16,
            fontWeight: 'normal',
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 50,
          top: 'center',
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 25,
          selectedMode: false,
          icon: 'circle',
          textStyle: {
            color: '#ffffff',
            fontSize: 14
          },
          formatter: legend.formatter
        },
        series: setSeries
      }
      if (!showLegend) {
        delete option.legend
      }
      this.jNestedRingChart.setOption(option)
    },
    drawChart() {
      this.myChart = echarts.init(this.$refs.jNestedRingChart)
      this.option = {
        series: this.series
      }
    },
    doing() {
      //转动饼图内圈
      this.series[0].startAngle = this.series[0].startAngle - 5
      this.myChart.setOption(this.option)
    }
  },
  watch: {
    series() {
      this.createChart()
    },
    title() {
      this.createChart()
    }
  }
}
</script>

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