
<template>
    <div class="box">
        <div class="top-box">
            <div class="topbox-item">
                <div class="topbox-item-left">
                    <div class="topbox-itemleft-img"></div> <span>不良反应</span>
                </div>
                <div class="topbox-item-content">
                    <div class="topbox-itemleft-color">12121111111111111111</div> <span>例</span>
                </div>
                <div class="topbox-item-right">
                    <div>较去年</div> <span class="spanshang">↑</span> <span class="spanxia">↓</span>
                </div>
            </div>
            <div class="topbox-item">
                <div class="topbox-item-left">
                    <div class="topbox-itemleft-img"></div> <span>严重不良反应</span>
                </div>
                <div class="topbox-item-content">
                    <div class="topbox-itemleft-color">1212</div> <span>例</span>
                </div>
                <div class="topbox-item-right">
                    <div>较去年</div><span class="spanshang">↑</span> <span class="spanxia">↓</span>
                </div>
            </div>
            <div class="topbox-item">
                <div class="topbox-item-left">
                    <div class="topbox-itemleft-img"></div> <span>发生死亡不良反应</span>
                </div>
                <div class="topbox-item-content">
                    <div class="topbox-itemleft-color">1212</div> <span>例</span>
                </div>
                <div class="topbox-item-right">
                    <div>较去年</div> <span class="spanshang">↑</span> <span class="spanxia">↓</span>
                </div>
            </div>

        </div>
        <div class="bottom-box" ref="bottom-box">

        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";

export default {
    name: '',
    components: {},
    data() {
        return {
            option1: {},
            // echarts
            myChart1: {},
            center: ["18%", "50%"],
        }
    },
    created() { },
    mounted() {
        this.$nextTick(() => {
            let chartDom = this.$refs["bottom-box"];
            this.myChart1 = echarts.init(chartDom);
            this.initEcharts();
        });
    },
    methods: {
        initEcharts() {
            this.option1 = {
                grid: {
                    left: '10%',
                    top: 0,
                    bottom: 0,
                    right: '60%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{b} : {c} ({d}%)",
                    position: 'right'
                },
                legend: {
                    type: "scroll",
                    orient: "vartical",
                    top: "center",
                    right: "20",
                    itemWidth: 10,
                    itemHeight: 8,
                    itemGap: 16,
                    icon: "circle",
                    textStyle: {
                        color: '#A3E2F4',
                        fontSize: 12,
                        fontWeight: 0,
                        rich: {
                            name: {
                                fontSize: 12,
                                padding: [25, 0, 5, 0],//图例位置
                            },
                            percent: {
                                fontSize: 12,
                                color: '#ccc',
                                width: 80,  // 设置宽度
                                height: 20, // 设置高度
                                backgroundColor: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 1,
                                    y2: 0,
                                    colorStops: [
                                        { offset: 0, color: 'rgba(36, 64, 97, 1)' }, // 渐变起始色，淡白色
                                        { offset: 1, color: 'rgba(36, 64, 97, 0)' } // 渐变结束色，逐渐透明
                                    ],

                                }


                            }
                        }
                    },

                    data: [{
                        value: 10,
                        name: '一般不良反应'
                    },
                    {
                        value: 5,
                        name: '严重不良反应'
                    },
                    {
                        value: 15,
                        name: '发生死亡不良反应'
                    },

                    ],
                    formatter: function (name) {
                        let data = [{
                            value: 10,
                            name: '一般不良反应'
                        },
                        {
                            value: 5,
                            name: '严重不良反应'
                        },
                        {
                            value: 15,
                            name: '发生死亡不良反应'
                        },

                        ]

                        // 获取该选项在数据数组中的索引
                        var index = data.findIndex(function (item) {
                            return item.name == name;
                        });

                        // 获取该选项的值
                        var value = data[index].value;

                        // 计算该选项的百分比
                        var percent = (value / data.reduce(function (sum, item) {
                            return sum + item.value;
                        }, 0) * 100).toFixed(2) + '%';

                        // 返回自定义的显示内容
                        return '{name|' + name + '}\n{percent|' + percent + '}';
                    },

                },
                polar: { center: this.center, color: "#0B3A72", },
                angleAxis: { center: this.center, color: "#0B3A72", },
                radiusAxis: {
                    color: "#0B3A72",
                    center: this.center,
                    min: 40,
                    max: 120,
                    interval: 20,
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "#0B3E5E",
                            width: 1,
                            type: "solid"
                        },
                    },
                    axisLabel: {
                        formatter: '{value} %',
                        show: false,
                        padding: [0, 0, 20, 0],
                        color: "#0B3E5E",
                        fontSize: 16
                    },
                    splitLine: {
                        lineStyle: {
                            color: "#0B3E5E",
                            width: 2,
                            type: "solid"
                        }
                    }
                },
                calculable: true,
                series: [{
                    color: "#0B3A72",
                    center: this.center,
                    type: 'pie',
                    radius: ["5%", "10%"],
                    hoverAnimation: false,
                    labelLine: {
                        normal: {
                            show: false,
                            length: 30,
                            length2: 55
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    data: [{
                        name: '',
                        value: 0,
                        itemStyle: {
                            normal: {
                                color: "#0B3E5E"
                            }
                        }
                    }]
                }, {
                    center: this.center,
                    type: 'pie',
                    radius: ["100%", "99%"],
                    color: "#0B3A72",
                    hoverAnimation: false,
                    labelLine: {
                        normal: {
                            show: false,
                            length: 30,
                            length2: 55
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    name: "",
                    data: [{
                        name: '',
                        value: 0,
                        itemStyle: {
                            normal: {
                                color: "#0B3A72"
                            }
                        }
                    }]
                }, {
                    center: this.center,
                    stack: 'a',
                    type: 'pie',
                    radius: ['20%', '90%'],
                    roseType: 'area',
                    zlevel: 10,
                    label: {
                        normal: {
                            show: false,
                            formatter: "",
                            textStyle: {
                                fontSize: 12,
                            },
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false,
                            length: 200,
                            length2: 55
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    data: [{
                        value: 10,
                        name: '一般不良反应'
                    },
                    {
                        value: 5,
                        name: '严重不良反应'
                    },
                    {
                        value: 15,
                        name: '发生死亡不良反应'
                    },

                    ]
                }]
            };

            this.myChart1.setOption(this.option1);
        },
    },
    computed: {}
}
</script>
<style scoped lang='scss'>
.box {}

.top-box {
    .topbox-item {
        &:nth-child(1) {
            .topbox-itemleft-img {
                background: url('../../../assets/images/daping/buliang1.png');

            }

            .topbox-itemleft-color {
                background: linear-gradient(0deg, #FFFFFF 0%, #0373E0 100%);
            }
        }

        &:nth-child(2) {
            .topbox-itemleft-img {
                background: url('../../../assets/images/daping/buliang2.png');

            }

            .topbox-itemleft-color {
                background: linear-gradient(0deg, #FFFFFF 0%, #BF6E35 100%);
            }
        }

        &:nth-child(3) {
            .topbox-itemleft-img {
                background: url('../../../assets/images/daping/buliang3.png');

            }

            .topbox-itemleft-color {
                background: linear-gradient(0deg, #FFFFFF 0%, #F04F50 100%);
            }
        }

        display: flex;
        align-items: center;
        height: 40px;
        width: 98%;
        background: url('../../../assets/images/daping/toushi.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: bottom;

        >div {
            display: flex;
            align-items: center;
        }

        .topbox-item-left {
            margin-left: 20px;
            flex: 1.9;

            .topbox-itemleft-img {
                width: 20px;
                height: 20px;
                background-size: contain;
                background-repeat: no-repeat;
                margin-right: 10px;
            }

            span {
                font-size: 14px;
                font-family: Alibaba PuHuiTi;
                font-weight: 400;
                color: #B7D4F5;
                line-height: 50px;
            }
        }

        .topbox-item-content {
            flex: 1.5;


            .topbox-itemleft-color {
                max-width: 110px;
                white-space: nowrap;
                /* 不换行 */
                overflow: hidden;
                /* 溢出内容隐藏 */
                text-overflow: ellipsis;
                /* 显示省略号 */
                font-size: 26px;
                font-family: YouSheBiaoTiHei;
                font-weight: 400;
                color: #FFFFFF;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                margin-right: 5px;
            }

            span {
                font-size: 16px;
                font-family: Alibaba PuHuiTi;
                font-weight: 400;
                color: #B7D4F5;
                line-height: 50px;
                opacity: 0.5;
            }
        }

        .topbox-item-right {
            flex: 1;

            div {
                font-size: 16px;
                font-family: Alibaba PuHuiTi;
                font-weight: 400;
                color: #FFFFFF;
                background: linear-gradient(0deg, #FFFFFF 0%, #26E0C4 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                margin-right: 5px;

            }

            span {
                font-size: 16px;
                font-family: Alibaba PuHuiTi;
                font-weight: 400;
            }

            .spanshang {
                color: #26E0C4
            }

            .spanxia {
                color: #DA1B1B
            }
        }

    }
}

.bottom-box {
    height: 170px;
    width: 100%;
}
</style>
