
<template>
    <div class="box">
        <div class="top-box">
            <div class="topbox-item">
                <div class="topBOxitem">
                    <div class="topBOxitem-top"> <span>12</span> <span>次</span></div>
                    <div class="topBOxitem-bottom">国家检测次数</div>
                </div>
            </div>
            <div class="topbox-item">
                <div class="topBOxitem">
                    <el-tooltip class="item" effect="dark" content="1221111121212121" placement="top-start">
                        <div class="topBOxitem-top"> <span>1221111121212121</span> <span>次</span></div>
                    </el-tooltip>
                   

                    <div class="topBOxitem-bottom">国家检测次数</div>
                </div>
            </div>
            <div class="topbox-item">
                <div class="topBOxitem">
                    <div class="topBOxitem-top"> <span>12%</span> </div>

                    <div class="topBOxitem-bottom">国家检测次数</div>
                </div>
            </div>
        </div>
        <div class="bottom-content">
            <div class="left-echart" ref="left-echart"></div>
            <div class="right-echart" ref="right-echart"></div>
        </div>
    </div>
</template>

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

export default {
    name: 'informationBox',
    components: {},
    data() {
        return {
            topList: [
                {
                    order: "12",
                    jcaddress: "国家检测次数"
                },
                {
                    order: "31",
                    jcaddress: "省级检测次数"
                },
                {
                    order: "14",
                    jcaddress: "抽检合格率"
                },
            ],

            option1: {},
            // echarts
            myChart1: {},

            option2: {},
            // echarts
            myChart2: {},
        }
    },
    created() { },
    mounted() {
        this.$nextTick(() => {
            let chartDom = this.$refs["left-echart"];
            this.myChart1 = echarts.init(chartDom);
            this.initEcharts();

            let chartDom2 = this.$refs["right-echart"];
            this.myChart2 = echarts.init(chartDom2);
            this.initEcharts2();

        });
    },
    methods: {
        initEcharts() {
            this.option1 = {

                tooltip: {
                    trigger: 'item',
                    // formatter: "{a} <br/>{b}: {c} ({d}%)", // 鼠标悬浮在各分区时的提示内容
                    formatter: function (params) {
                        return '<div style="line-height: 1;">' + params.marker + params.name + ': ' + params.value + ' (' + params.percent + '%)</div>';
                    },
                    extraCssText: 'padding: 10px; background-color: rgba(0, 0, 0, 0.7); color: #fff;' // 设置提示框的样式
                },
                legend: {
                    bottom: 0,
                    left: 'center',
                    data: ['生产抽样环节', '流通环节抽样',],
                    textStyle: {
                        color: 'auto',
                        fontSize: 14
                    }
                },
                series: [{
                    name: '',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    center: ['50%', '40%'],  // 调整 y 值为 '40%'，使饼图向上位移
                    labelLine: {
                        normal: {
                            length: 15,     // 指示线宽度
                            position: 'outer', // 将标签线放在扇区外部转折点
                            lineStyle: function (params) {  // 根据数据项的颜色动态设置文字颜色
                                return {
                                    color: params.color,
                                    fontSize: 14
                                }
                            }
                        },

                    },
                    label: {
                        normal: {
                            // 各分区的提示内容
                            // params: 即下面传入的data数组,通过自定义函数，展示你想要的内容和格式
                            formatter: function (params) {
                                return params.percent + "%"
                            },
                            textStyle: {
                                color: 'auto',
                                fontSize: 14
                            }
                        }
                    },
                    data: [
                        // 各分区样式: value值，name表示各分区的标识、itemStyle模块样式
                        // 注意: name与上面的legend-data中必须保持一致，才可展示按钮组
                        { value: 39, name: '生产抽样环节', percent: '39', itemStyle: { color: '#007EFF' } },
                        { value: 21, name: '流通环节抽样', percent: '21', itemStyle: { color: '#2CD8EC' } },

                    ]
                }]
            };

            this.myChart1.setOption(this.option1);
        },
        initEcharts2() {
            this.option2 = {
                backgroundColor: "rgba(0,0,0,0)", // 设置为透明背景
                tooltip: {},
                grid: {
                    top: '8%',
                    left: '10%',
                    right: '10%',
                    bottom: '8%',
                    containLabel: true,
                },
                xAxis: [{
                    type: 'category',
                    boundaryGap: true,

                    axisLine: {
                        show: false, // 隐藏 x 轴线
                        lineStyle: {
                            color: '#233e64'
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: "#B7D4F5",
                            fontSize: 12,
                            margin: 0,
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    data: ['辽宁', '黑龙江', '北京', '上海', '深圳', '苏州'],
                }],
                yAxis: [{
                    show: true,
                    type: 'value',
                    name: '123',
                    splitLine: {
                        show: true, // 显示背后的横线
                        lineStyle: {
                            color: '#233e64',
                            type: 'dashed' // 可以设置为实线或虚线
                        }
                    },
                    axisLine: {
                        show: false, // 隐藏 y 轴线
                    },
                    axisLabel: {
                        margin: 20,
                        textStyle: {
                            color: '#6a9cd5',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                }],
                series: [{
                    type: 'bar',
                    barWidth: '10',
                    itemStyle: {
                        normal: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0,
                                    color: 'rgba(33,181,225,1)' // 起始颜色
                                }, {
                                    offset: 1,
                                    color: 'rgba(0,0,0,0.1)' // 结束颜色
                                }]
                            },
                            // label: {
                            //     show: true,
                            //     position: 'top'
                            // }
                        }
                    },
                    data: [12, 15, 17, 20, 25, 26]
                }]
            };
            this.myChart2.setOption(this.option2);
        },
    },
    computed: {}
}
</script>
<style scoped lang='scss'>
.box {}

.top-box {
    margin: 10px 0;
    height: 85px;
    width: 100%F;
    display: flex;
    justify-content: space-around;

    .topbox-item {
        width: 240px;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        padding-right: 30px;

        &:nth-of-type(1) {
            background: url('../../../assets/images/daping/jiance1.png');
            background-size: contain;
            background-repeat: no-repeat;

            .topBOxitem-top {
                :nth-of-type(1) {

                    background: linear-gradient(0deg, #BF6E35 0%, #FFFFFF 100%);

                }
            }

        }

        &:nth-of-type(2) {
            background: url('../../../assets/images/daping/jiance2.png');
            background-size: contain;
            background-repeat: no-repeat;

            .topBOxitem-top {
                :nth-of-type(1) {

                    background: linear-gradient(0deg, #FFFFFF 0%, #0373E0 100%);

                }
            }

        }

        &:nth-of-type(3) {
            background: url('../../../assets/images/daping/jiance3.png');
            background-size: contain;
            background-repeat: no-repeat;

            .topBOxitem-top {
                :nth-of-type(1) {

                    background: linear-gradient(0deg, #FFFFFF 0%, #37BEA6 100%);

                }
            }
        }

        .topBOxitem {
            margin-top: -40px;


            .topBOxitem-top {

                display: flex;
                align-items: center;

                :nth-of-type(1) {
                    display: block;
                    max-width: 90px;
                    white-space: nowrap;
                    /* 不换行 */
                    overflow: hidden;
                    /* 溢出内容隐藏 */
                    text-overflow: ellipsis;
                    /* 显示省略号 */
                    font-size: 34px;
                    font-family: YouSheBiaoTiHei;
                    font-weight: 400;
                    color: #FFFFFF;
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    margin: 0;
                }

                :nth-of-type(2) {
                    font-size: 14px;
                    font-family: Alibaba PuHuiTi;
                    font-weight: 400;
                    color: #FFFFFF;
                    opacity: 0.5;
                }
            }

            .topBOxitem-bottom {
                font-size: 16px;
                font-family: Alibaba PuHuiTi;
                font-weight: 400;
                color: #FFFFFF;
            }

        }

    }

}

.bottom-content {
    height: 210px;
    display: flex;

    .left-echart {
        flex: 0.7;
    }

    .right-echart {
        flex: 1.3;
    }


}
</style>
