<template>
    <div class="event-number">
        <Model title="作物面积">
            <div ref="number" class="number"></div>
        </Model>
    </div>
</template>

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

export default {
    name: "area",
    components: { Model },
    mounted() {
        this.initRT()
    },
    methods: {
        initRT() {
            const getname = ['水稻', '玉米', '薯类', '其他']
            const getbl = [2560, 2560, 2560, 2560]
            const getbl1 = [60, 20, 10, 10]
            let Chart = this.$refs.number;
            let myChart = this.$echarts.init(Chart)
            const option = {
                "tooltip": {
                    "show": true,
                    "textStyle": {
                        "color": "#fff",
                        "fontSize": 15,
                        "fontFamily": "微软雅黑"
                    },
                    formatter: '{b} :  {d}%'
                },
                title: {
                    text: '46.2%',
                    subtext: '      总数',
                    left: 'center',
                    top: '33%',
                    left: '15%',
                    padding: [24, 0],
                    textStyle: {
                        color: '#02FEFF',
                        fontSize: 22,
                        align: 'center'
                    },
                    subtextStyle: {
                        color: '#fff',
                        fontSize: 12
                    },
                },
                legend: {
                    orient: 'vertical',
                    right: '0%',
                    icon: "circle",
                    top: 'center',
                    textStyle: {
                        color: '#02FEFF',
                        fontSize: 12,
                        rich: {
                            a: {
                                color: '#FFFFFF',
                                width: 48,
                                fontSize: 12,
                            },
                            b: {
                                width: 20,
                                fontSize: 12,
                                color: '#FFFFFF',
                            }
                        },
                    },
                    formatter: function (name) {
                        for (var i = 0; i < getname.length; i++) {
                            if (name == getname[i]) {
                                return `{a|${name}}{b|占比:}  ${getbl1[i].toFixed(0)}%`
                            }
                        }
                    },
                    data: getname
                },
                "series": [{
                    "type": "pie",
                    "data": [{
                        "name": "水稻",
                        "value": 60,
                        "itemStyle": {
                            "color": {
                                "x": 0,
                                "y": 0.2113248654051872,
                                "x2": 1,
                                "y2": 0.7886751345948129,
                                "type": "linear",
                                "global": false,
                                "colorStops": [{
                                    "offset": 0,
                                    "color": "rgba(54, 54, 54, .6)"
                                },  {
                                    "offset": 1,
                                    "color": "rgba(2, 254, 255, 1)"
                                }]
                            }
                        },
                        label: {
                        normal: {
                            show: false,
                            position: 'center'
                        }
                    },
                        "_startArc": 0,
                        "_endArc": 1.0471975511965976,
                        "_color": "#02FEFF",
                        "_percent": 0.16666666666666666
                    },
                       
                        {
                        "name": "玉米",
                            "value": 20,
                            label: {
                        normal: {
                            show: false,
                            position: 'center'
                        }
                    },
                        "itemStyle": {
                            "color": {
                                "x": 1,
                                "y": 0.8836634939894799,
                                "x2": 0,
                                "y2": 0.1163365060105202,
                                "type": "linear",
                                "global": false,
                                "colorStops": [{
                                    "offset": 0,
                                    "color": "rgba(54, 54, 54, .6)"
                                },
                                    {
                                    // 注意：该亮色部分仅为说明渐变方向实际应用中请勿如此。
                                    offset: 0.5,
                                    color: '#1D7CE8',
                                }, {
                                    "offset": 1,
                                    "color": "rgba(29, 124, 232, 1)"
                                }]
                            }
                        },
                        "_startArc": 3.665191429188092,
                        "_endArc": 3.9269908169872414,
                        "_color": "#26c1f2",
                        "_percent": 0.041666666666666664
                    }, {
                        "name": '薯类',
                        "value": 10,
                        "itemStyle": {
                            "color": {
                                "x": 0.43417375120630197,
                                "y": 1,
                                "x2": 0.565826248793698,
                                "y2": 0,
                                "type": "linear",
                                "global": false,
                                "colorStops": [{
                                    "offset": 0,
                                    "color": "rgba(54, 54, 54, .6)"
                                }, {
                                    // 注意：该亮色部分仅为说明渐变方向实际应用中请勿如此。
                                    offset: 0.5,
                                    color: '#E4B566',
                                }, {
                                    "offset": 1,
                                    "color": "rgba(228, 181, 102, 1)"
                                }]
                            }
                            },
                            label: {
                        normal: {
                            show: false,
                            position: 'center'
                        }
                    },
                        "_startArc": 3.9269908169872414,
                        "_endArc": 5.759586531581288,
                        "_color": "#a166ff",
                        "_percent": 0.2916666666666667
                        },
                        {
                        "name": "其他",
                        "value": 10,
                        "itemStyle": {
                            "color": {
                                "x": 0,
                                "y": 0.6339745962155616,
                                "x2": 1,
                                "y2": 0.36602540378443843,
                                "type": "linear",
                                "global": false,
                                "colorStops": [{
                                    "offset": 0,
                                    "color": "rgba(54, 54, 54, .6)"
                                }, {
                                    // 注意：该亮色部分仅为说明渐变方向实际应用中请勿如此。
                                    offset: 0.5,
                                    color: '#69C969',
                                }, {
                                    "offset": 1,
                                    "color": "rgba(105, 201, 105, 1)"
                                }]
                            }
                            },
                            label: {
                        normal: {
                            show: false,
                            position: 'center'
                        }
                    },
                        "_startArc": 5.759586531581288,
                        "_endArc": 6.283185307179585,
                        "_color": "#1271cc",
                        "_percent": 0.08333333333333333
                        },
                    ],
                    "animation": false,
                    "radius": ["40%", "60%"],
                    "center": ["22%", "50%"],
                    "labelLine": {
                        show: false
                    },
                    "itemStyle": {
                        "linearGradient": true
                    },
                    "hoverAnimation": false
                }]
            }
            myChart.setOption(option)
        }
    }
}
</script>

<style lang="less" scoped>
.event-number {
    margin-top: 10px;

    .number {
        width: 100%;
        height: 220px;
    }

}
</style>