ibms/src/components/echarts/reportDoughnut.vue

<template>
  <div style="width:100%;height:100%;text-align:center;" :id="id">
  </div>
</template>
<script>
import echarts from "echarts"
export default {
  name: "doughnut",
  props: {
    id: {
      type: String,
      default: function createRandomId() {
        return (Math.random() * 10000000).toString(16).substr(0, 4) + '-' + (new Date()).getTime() + '-' + Math.random().toString().substr(2, 5);
      }
    },
    renderData: {
      type: Array,
      default: function () {
        return []
      }
    },
    text: {
      type: String,
    },
    type: {},
    name: "",
    sum: ""
  },
  data() {
    return {
      myCharts: null
    }
  },
  created() { },
  mounted() {
    this.drawDoughnut()
  },
  methods: {
    drawDoughnut() {
      let options = {
        tooltip: {
          trigger: 'item',
          formatter: "{b}"
        },
        legend: {
          show: false,
          orient: 'vertical',
          right: 10,
          top: 30,
          bottom: 20,
          data: this.renderData.map(item => {
            return item.name
          })
        },
        series: [{
          name: '',
          type: 'pie',
          radius: ['40%', '60%'],
          itemStyle: {
            normal: {
              label: {
                show: this.type != 'left' ? false : true,
                textStyle: {
                  color: '#3c4858',
                  fontSize: "12"
                },
                formatter: function (val) { //让series 中的文字进行换行
                  return val.name.split("-")[0];
                }
              },
              title: {
                text: 'aaaa'
              },
              labelLine: {
                show: this.type != 'left' ? false : true,
                lineStyle: {
                }
              }
            },
            emphasis: {
              shadowBlur: 5,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',
              textColor: '#000'
            }
          },
          data: this.renderData
        }],
        color: ['#67C23A', 'rgb(225, 243, 216)', 'rgb(244, 244, 245)']
      }
      options.graphic = {
        type: 'text',
        left: 'center',
        top: 'center',
        style: {
          text: `${this.text|| ''}`,
          textAlign: 'center',
          fill: '#000',
          width: 30,
          height: 30
        }
      }
      this.myCharts = echarts.init(document.getElementById(this.id))
      this.myCharts.setOption(options)
    }
  },
  watch: {
    'renderData': {
      deep: true,
      handler(n,o) {
        this.drawDoughnut()
      }
    }
  }
}
</script>
<style>
</style>