medical/conponents/Echar/ring.vue

<template>
	<div class="main-chart" ref="main" id="main" style="width: 100%;height:230px;background-color: #fff; margin: 0 auto;"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    props: {
        Chart: {
			type: Array,
		},
    },
    watch: {
		Chart(){
			this.init()
		},
        dataList(newVal, oldVal) {
            console.log(newVal);
			if(newVal.length==0){
				return
			}
            if (newVal && newVal.xAxis.length != 0) {
                let xTime = []
                newVal.xAxis.forEach(ele=>{
                xTime.push(...ele.split(' ',1))
                })
                if (xTime.length>0){
                newVal.xAxis = xTime
                }
                this.init()
            } else {
                // this.dataList = {
                //     xAxis: ['3/25', '3/26', '3/27', '3/28', '3/29', '3/30', '3/31'],
                //     classData: [],
                //     studentData: []
                // }
            }
        },
        'dataList.xAxis'(newVal, oldVal) {
            console.log('abc', newVal.length);
            if (newVal.length == 1 || !newVal) {
                this.echartsType = 'bar'
                this.init()
            } else {
                this.echartsType = 'line'
            }
        },
        // start(newVal){
        //     if (newVal) {
        //         this.init()
        //     }
        // }
    },
    data() {
        return {
            index: 0,
            timer: null,
            echartsType: 'line'
        }
    },
    mounted() {
        this.init();
		// window.addEventListener('click',()=>{
		// 	console.log(333);
		// })
        // this.set()
    },
    destroyed() {
        clearInterval(this.timer)
        this.timer = null
    },
    methods: {
        filter() {
            if (this.dataList.classData?.length == 0 && this.dataList.studentData?.length == 0) {
                return 200
            }
            if (this.dataList &&  this.dataList.classData  && this.dataList?.classData.length > 0) {
                this.index = this.dataList.xAxis.length - 1
                return Math.max(...this.dataList?.classData, ...this.dataList?.studentData).toFixed(1)
            }
        },
        init() {
            var chartDom = this.$refs.main;
            var myChart = echarts.init(chartDom);
            var option;
            let that = this
            option = {
				title: {
					text: '',
					left: 'center',
					top: 'center'
				  },
				color: ['rgba(0,199,119,0.38)', '#FAE380', '#F1A2A0', '#ef6567', '#f9c956', '#75bedc'],
				  series: [
					{
					  type: 'pie',
					  startAngle: 180, //起始角度
					  data: this.Chart,
					  itemStyle: {
						  normal: {
							  borderWidth: 2,
							  borderColor: '#ffffff',
							  },
						},
						label: {
							normal: {
								formatter: "{c|{c}人}\n\n{b|{b}}", //百分比之后换行显示文字
								rich: {
									per: {  
									   color: "#333",  //百分比文字颜色
									   align: "center",
									   fontSize: 12
									}
								}
							}
						},
					  radius: ['40%', '60%']
					}
				  ]
				};
            option && myChart.setOption(option);
            // 实现自动播放tooltip的方法
            // var index = 0; //播放所在下标
            // clearInterval(this.timer)
            // this.timer = setInterval(function () {
                myChart.dispatchAction({
                    type: 'showTip',
                    seriesIndex: 0,
                    dataIndex: 0
					
                });
            //     that.index = index
            //     myChart.setOption(option);
            //     index++;
            //     if (index > 7) {
            //         index = 0;
            //     }
            // }, 2000);
            // myChart.getZr().off('click');
            // myChart.getZr().on('click', function(params) {
            // 	let pointInPixel= [params.offsetX, params.offsetY];
            // 	if (myChart.containPixel('grid',pointInPixel)) {
            // 	      let indexFlg= myChart.convertFromPixel({seriesIndex:0},[params.offsetX, params.offsetY])[0]; //获取所点击的点的索引
            // 		  console.log(indexFlg);
            // 	   //可根据索引来开发相对应业务逻辑
            // 	}
            // 	console.log(params);
            // 	that.index = params.dataIndex
            // 	// option[]
            // 	myChart.setOption(option);
            // 	// console.log(option)
            // });
            console.log(echarts)
            // that.echarts.dispatchAction({
            // 	type:'showTip',
            // 	seriesIndex:0,
            // 	dataIndex:that.index
            // })
        },
    },
}
</script>

<style scoped>
	.main-chart div{
		z-index: 0 !important;
	}
</style>