<template>
    <div class="crop-percent">
        <Model title="作物占比">
            <div ref="percents" class="percents"></div>
        </Model>
    </div>
</template>

<script>
import Model from '../model.vue'

export default {
    name: "percent",
    components: { Model },
    mounted() {
        this.initRT()
    },
    methods: {
        initRT() {
            const getname = ['水稻', '玉米', '薯类', '其他']
            const getbl = [36, 14, 25, 15]
            let Chart = this.$refs.percents;
            let myChart = this.$echarts.init(Chart)
            const option = {
                animation: false,
                legend: {
                    orient: 'vertical',
                    right: '0%',
                    icon: "circle",
                    top: 'center',
                    textStyle: {
                        color: '#02FEFF',
                        fontSize: 12,
                        rich: {
                            a: {
                                color: '#FFFFFF',
                                width: 50,
                                fontSize: 12,
                               
                            },
                            b: {
                                width: 40,
                                fontSize: 12,
                               
                                color: '#FFFFFF',
                            }
                        },
                    },
                    formatter: function (name) {
                        console.log(name)
                        for (var i = 0; i < getname.length; i++) {
                            if (name == getname[i]) {
                                console.log(1)
                                return `{a|${name}}{b|占比:}${getbl[i].toFixed(0)}%`
                            }
                        }
                    },
                    data: getname
                },
                series: [{
                    type: "pie",
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        }
                    },
                    data: [{
                        value: 36,
                        name: "水稻",
                        itemStyle: {
                            color: '#82F3C5'
                        }
                    }, {
                        value: 14,
                        name: "玉米",
                        itemStyle: {
                            color: '#405DF9'
                        },

                    },
                    {
                        value: 25,
                        name: "薯类",
                        itemStyle: {
                            color: '#EFC740'
                        },

                    },
                    {
                        value: 15,
                        name: "其他",
                        itemStyle: {
                            color: '#A8A3FD'
                        },

                    }
                    ],
                    radius: ["40%", "75%"],
                    center: ['25%', '50%'],
                    roseType: 'radius',
                    itemStyle: {
                        normal: {
                            color: 'transparent',
                            label: {
                                padding: [-30, 0, 0, 0],
                            },
                            labelLine: {
                                showAbove: true,
                                length: 30,
                                length2: 0,
                                show: true,
                                lineStyle: {
                                    color: 'rgba(102, 121, 157, 1)'
                                }
                            }
                        }
                    }
                },
             
                ]
            }
            myChart.setOption(option)
        }
    }
}
</script>

<style lang="less" scoped>
.crop-percent {
    margin-top: 10px;
    .percents {
        width: 100%;
        height: 220px;
    }

}</style>