<!-- 饼图 -->
<template>
    <div>
        <div style="width: 100%; height: 100%" :id="echarts" class="echarts" ref="echarts"></div>
    </div>
</template>

<script>
// 引入echarts
import {toRaw} from 'vue' 
import * as echarts from 'echarts'
import charts from '@/views/electromechanicalMange/assets/charts.png'
export default {
    name: 'EchartsComponents',
    props: {
        // 接收父组件传递过来的信息 
        chartData: {}
    },
    data() {
        return {
            img: charts,
            myChart:null
        }
    },
    methods: {
        drawChart() {
            // 基于准备好的dom，初始化echarts实例
            if(this.myChart){
                this.myChart.dispose()
            }
            this.myChart = echarts.init(document.getElementById(this.echarts))
            console.log(this.chartData)
            let params = this.chartData

            if (params['sum']!==undefined) {
                // 绘制图表
                this.myChart.setOption({
                    title: {
                        text: `${params.sum}`,
                        subtext: '总数量',
                        left: 65,
                        top: 45,
                        textAlign: 'center',
                        textStyle: {
                            color: '#F0F2F5',
                            fontSize: 22
                        },
                        subtextStyle: {
                            color: '#F0F2F5',
                            fontSize: 12
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    graphic: {
                        elements: [
                            {
                                type: 'image',
                                z: 3,
                                style: {
                                    image: this.img,
                                    width: 140
                                },
                                left: '0',
                                top: '0'
                            }
                        ]
                    },
                    legend: {
                        orient: 'vertical',
                        algin: 'auto',
                        left: 180,
                        top: 10,
                        itemWidth: 12,
                        itemHeight: 6,
                        data: params.legendArr,
                        textStyle: {
                            color: '#BDDBF1'
                        },
                        formatter: function (name) {
                            if(!params){
                                return ''
                            }
                            let v = params.legendData.filter(x => x.text === name)[0].value
                            return `${name} ${v}`
                        }
                    },
                    series: [
                        {
                            name: '机电巡检',
                            type: 'pie',
                            radius: ['65%', '80%'],
                            width: 150,
                            center: ['70px', '70px'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            labelLine: {
                                show: false
                            },
                            data: params.styleData || []
                        }
                    ]
                },true)
                this.myChart.on('click', function (params1) {
                    let url = `http://hope.cmet1965.com:8883/webroot/decision/view/form?viewlet=CMEW/GIS/11sjtj/yhsj/jdxjtz.frm&zzbm=${params.orgCode}`
                    window.open(url, '_blank')
                })
            }
        }
    },
    computed: {
        echarts() {
            return 'echarts' + Math.random() * 100000
        }
    },
    mounted: function () {
        const vm = this
        vm.$nextTick(() => {
            vm.drawChart()
        })
    },
    created: () => {},
    watch: {
        chartData: {
            deep: true,
            immediate: false,
            handler(val) {
                console.log('create')
                this.drawChart()
            }
        }
    }
}
</script>