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

<script>
// 引入echarts
import * as echarts from 'echarts'
import img from '@/views/electromechanicalMange/assets/charts.png'
export default {
    name: 'ePieRadar',
    props: {
        // 接收父组件传递过来的信息 
        chartData: {}
    },
    data() {  
        return {
            img: img
        }
    }, 
    methods: {
        drawChart() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(this.echarts))
            let params = this.chartData
            if (params['radar']!==undefined) {
                // 绘制图表
                myChart.setOption({
                    color: [
                        '#5470c6',
                        '#91cc75',
                        '#fac858',
                        '#ee6666',
                        '#73c0de',
                        '#3ba272',
                        '#fc8452',
                        '#9a60b4',
                        '#ea7ccc'
                    ],
                    tooltip: {
                        show: true,
                        trigger: 'axis'
                    },
                    legend: {
                        right: 10,
                        orient: 'horizontal',
                        itemWidth: 12,
                        itemHeight: 6,
                        type: 'scroll',
                        data: ['任务执行情况'],
                        textStyle: {
                            color: '#BDDBF1'
                        },
                        itemStyle: {
                            color: '#5470c6'
                        }
                    },
                    radar: {
                        // shape: 'circle',
                        indicator: params.radar
                    },
                    series: [
                        {
                            name: '任务执行情况',
                            type: 'radar',
                            tooltip: {
                                trigger: 'item'
                            },
                            areaStyle: {},
                            data: [params.series]
                        }
                    ]
                })
            }
        }
    },
    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) {
                this.drawChart()
            }
        }
    }
}
</script>