deviceManageDaPing/src/views/pages/components/morepieChart.vue

<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts';
import chartMixin from '@/mixins/ChartMixin';
export default {
  mixins: [chartMixin],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '200px'
    },
	chartData: {
	  type: Object,
	  required: true
	}
  },
  data() {
    return {
      chart: null,
	  time:null,
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
	var that=this;
	this.$nextTick(() => {
	  this.initChart()
	  that.setOptions(that.chartData) 
	  // this.time=setInterval(()=>{
		 //  that.chart.clear()
		 //  that.setOptions(that.chartData) 
	  // },30000)
	})
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
	
	if (this.time) {
	  clearInterval(this.time);
	  this.time = null;
	}
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
		this.setOptions(this.chartData) 
    },
	setOptions({ data,name,num,color} = {}) {
	  this.chart.setOption({
			color:color,
			tooltip: {
		      trigger: 'item'
		    },
		    legend: {
		      show:false,
		    },
			graphic: [{
			        type: 'text',
			        left: 'center',
			        top: 'center',
			        z: 10,
			        style: {
			            fill: color[0],
			            text: num+'%',
			            fontSize: 16,
						fontWeight: '500'
			        }
			    }],
		    series: [
		      {
		        name: name,
		        type: 'pie',
		        radius: ['75%', '85%'],
		        avoidLabelOverlap: false,
		        label: {
		          show: false,
		          position: 'center'
		        },
		        emphasis: {
		          label: {
		            show: false,
		            fontSize: 40,
		            fontWeight: 'bold'
		          }
		        },
		        labelLine: {
		          show: false
		        },
		        data: [   
		              //itemSyle是单项的背景颜色设置。
		                { value: 50, itemStyle: { color: color[0] } },
		                { value: 50, itemStyle: { color: '#001428' } },
		        ],
		      },
		    ]
	  },true)
	}
  }
}
</script>
<style lang="less" scoped>

</style>