<style>
    .range-pick-echart .ant-calendar-range-part {
        background: rgb(26, 52, 104) !important;
        color: #fff;
    }

    .range-pick-echart .ant-calendar-range .ant-calendar-input {
        background: rgb(26, 52, 104) !important;
        color: #fff;
    }

    .range-pick-echart .ant-calendar-year-select {
        color: #fff;
    }

    .range-pick-echart .ant-calendar-month-select {
        color: #fff;
    }

    .range-pick-echart .ant-calendar-date {
        color: #B0C4DE;
    }
    .range-pick-echart .ant-calendar-disabled-cell .ant-calendar-date:hover{
        background: none !important;
    }
    .range-pick-echart .ant-calendar-disabled-cell .ant-calendar-date{
        background: none !important;
        color: #a1a1a1 !important;
    }
</style>
<style lang="scss" scoped>
    .body-css {
        min-width: 100%;
        min-height: 100%;
        position: absolute;
        box-sizing: border-box;
        background-image: url('../../assets/img/wangge2.png');
        background-repeat: repeat;
        background-position: center;
        background-size: 100% 100%;
        background-color: #030324;
    }


    .body-heada {
        min-width: 100%;
        height: 45px;
        background-image: url('../../assets/img/head_bg.png');
        background-size: 100% 100%;
    }

    ::v-deep .ant-progress-circle .ant-progress-text {
        color: #fff;
    }

    ::v-deep .ant-input {
        background-color: rgba(2, 28, 69, 1) !important;
        border: 1px solid #00BFFF;
        color: #ccc;
    }

    ::v-deep .ant-radio-button-wrapper {
        background-color: rgba(2, 28, 69, 1) !important;
        border: 1px solid #6633FF;
        color:  #6633FF;
    }
    .ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
        color: #fff;
        border-color: #00BFFF;

    }
    ::v-deep .ant-calendar-picker-clear {
        background: none !important;
        color: #ccc !important;
    }
    
    ::v-deep .ant-table-thead>tr>th {
        color: white;
        /* background: rgba(2, 28, 69, 1) !important; */
        border-bottom: 1px solid rgba(2, 28, 69, 1);
        padding: 10px;
        background-color: rgb(26, 52, 104);
    }

    ::v-deep .ant-table-placeholder {
        background: rgba(2, 28, 69, 1);
        border-bottom: none;
        border-top: none;
        color: #fff;
    }

    ::v-deep .ant-table-tbody>tr>td {
        color: white;
        background: rgba(2, 28, 69, 1) !important;
        border: none;
        padding-top: 0;
        padding-bottom: 0;
    }

    ::v-deep .ant-progress-circle-trail {
        stroke: rgb(39, 53, 102) !important;
    }

    ::v-deep .ant-empty-description {
        color: #fff;
    }


    .threeList {
        width: 20px;
        height: 20px;
        background: rgba(113, 69, 204, 1);
        border-radius: 50%;
        display: block;
        text-align: center;
        line-height: 20px;
    }

    .listsort {
        width: 20px;
        height: 20px;
        background: rgb(39, 53, 102);
        border-radius: 50%;
        display: block;
        text-align: center;
        line-height: 20px;
    }

    .fullScreen {
        margin-top: 5%;
    }

    .fullScreenRow {
        margin-top: 1%;
    }

    .fullCol {

        margin-bottom: 4%;
    }

    .fullScreenCol {

        margin-bottom: 2%;
    }

    .fullList {
        margin-bottom: 6%;
    }

    .chart-container {
        position: relative;
        width: 100%;
        height: 100%;

        .chart {
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .bg {
            width: 100%;
            height: 100%;
        }

        .bg {
            position: absolute;
            bottom: 56px;
            left: 50%;
            z-index: 0;
            width: 92%;
            height: 75%;
            background: no-repeat center;
            background-image: url('../../assets/img/u4.svg');
            background-size: 100% 100%;
            transform: translateX(-50%);

        }

        .bgtwo {
            position: absolute;
            bottom: 97px;
            left: 50%;
            z-index: 0;
            width: 74%;
            height: 62%;
            background: no-repeat center;
            background-image: url('../../assets/img/u3.svg');
            background-size: 100% 100%;
            transform: translateX(-50%);

        }

        .bgthree {
            position: absolute;
            bottom: 130px;
            left: 50%;
            z-index: 0;
            width: 61%;
            height: 51%;
            background: no-repeat center;
            background-image: url('../../assets/img/u2.svg');
            background-size: 100% 100%;
            transform: translateX(-50%);

        }
    }
</style>


<template>
    <div>
        <div class="body-css">

            <div class="body-heada">
                <p
                    style="letter-spacing:10px;color:#00BFFF;line-height: 50px;font-size: 1.5vw; text-align: center;padding-left: 110px;font-weight: bold;">
                    分公司投放数据监控中心
                    <a-button @click="fullScreen" v-if="fullText"
                        style="float: right;background: rgb(58, 77, 87);height: 18px;margin-top: 2px;margin-right: 2px;font-size: 12px;"
                        type="primary" size="small">全屏查看</a-button>
                    <a-button @click="signOutfullScreen" v-else
                        style="float: right;background: rgb(58, 77, 87);height: 18px;margin-top: 2px;margin-right: 2px;font-size: 12px;"
                        type="primary" size="small">退出全屏</a-button>
                </p>

            </div>



            <a-row :class="fullscreenShow ? 'fullScreen' : 'fullScreenRow'">
                <a-col :span="6" style="margin-left:1%;">
                    <!-- 饼图 -->
                    <div style="width:100%;height:250px; background-color:  rgba(2, 28, 69, 1);"
                        :class="fullscreenShow ? 'fullCol' : 'fullScreenCol'">
                        <br>
                        <div style="width:5px;height: 14px;background:#0099FF;display: inline-block;margin-left: 10px;">
                        </div>
                        <span style="color: #0099FF;font-size: 0.8vw;padding: 10px;;">素材产出占比</span>
                        <div v-if="emptyShowOne">
                            <div id="accountIndexEchartOnePie" ref="accountIndexEchartOnePie"
                                style="width: 90%;height: 300px;margin-right: 20px;">
                            </div>
                        </div>
                        <a-list v-else :data-source="[]" />
                        <!-- <a-empty :image="emptyImg"  /> -->

                    </div>

                    <!-- 3D柱状图 -->
                    <div style="height:320px;background-color:  rgba(2, 28, 69, 1);"
                        :class="fullscreenShow ? 'fullCol' : 'fullScreenCol'">
                        <br>
                        <div style="width:5px;height: 14px;background:#0099FF;display: inline-block;margin-left: 10px;">
                        </div>
                        <span style="color: #0099FF;font-size: 0.8vw;padding: 10px;;">分公司消耗素材</span>
                        <div v-if="emptyShowTwo">
                            <div id="consume" ref="consume" style="width: 98%;height: 290px;"></div>
                        </div>
                        <a-list v-else :data-source="[]" v-else />
                        <!-- <a-empty style="margin-top: 20px;"  /> -->
                    </div>

                    <!-- 环形图 -->
                    <div style="height:243px;background-color:  rgba(2, 28, 69, 1);"
                        :class="fullscreenShow ? 'fullCol' : 'fullScreenCol'">
                        <br>
                        <div style="width:5px;height: 14px;background:#0099FF;display: inline-block;margin-left: 10px;">
                        </div>
                        <span style="color: #0099FF;font-size: 0.8vw;padding: 10px;;">素材相关数据</span>
                        <div style="line-height: 180px;">

                            <div style="float: left;margin-left: 2%;width: 25%;height: 20%;text-align: center;">
                                <a-progress type="circle" strokeColor="#FF00FF" :percent="useRateData" :strokeWidth=10
                                    :width="88" :format="percent => `${percent}%`" />
                                <p style="line-height: 20%;text-align: center;color: #fff;">素材使用率</p>
                            </div>



                            <div style="float: left;margin-left: 7%;width: 25%;height: 20%;text-align: center;">
                                <a-progress type="circle" strokeColor="#00FFFF" :percent="faddishRateData" :width="88"
                                    :strokeWidth=10 :format="percent => `${percent}%`" />
                                <p style="line-height: 20%;text-align: center;color: #fff;">素材爆款率</p>
                            </div>




                            <div style="float: left;margin-left: 7%;width: 25%;height: 20%;text-align: center;">
                                <a-progress type="circle" :percent="innovateRateData" :strokeWidth=10 :width="88"
                                    :format="percent => `${percent}%`" />
                                <p style="line-height: 20%;text-align: center;color: #fff;">素材创新率</p>
                            </div>


                        </div>


                    </div>
                </a-col>




                <a-col :span="11" style="margin-left:1%;">
                    <!-- 3D饼图 -->
                    <div style="height: 572px;" :class="fullscreenShow ? 'fullCol' : 'fullScreenCol'">
                        <a-radio-group v-model="value" button-style="solid" @change="radioChange">
                            <a-radio-button value="2">
                                快手
                            </a-radio-button>
                            <a-radio-button value="1">
                                头条
                            </a-radio-button>
                        </a-radio-group>
                        <a-range-picker format="YYYY-MM-DD" style="float: right;" v-model="priceRangeDate"
                            :disabled-date="disabledDate"  :allowClear="false" dropdownClassName="range-pick-echart"
                             @change="changePriceRangeDate" @openChange="onOpenChange"
                             @calendarChange="onCalendarChange" />

                        <div class="chart-container">
                            <div class="chart" ref="chart" v-if="chartPie"></div>
                            <!-- 底座背景 -->
                            <div class="bg"></div>
                            <div class="bgtwo"></div>
                            <div class="bgthree"></div>
                        </div>
                        <!-- <branch ref="child" :radiovalue="radiovalue" :pricerangetime="pricerangetime">
                        </branch> -->
                    </div>
                    <!-- 横向柱状图 -->
                    <div style="height:243px;background-color:  rgba(2, 28, 69, 1);">
                        <br>
                        <div style="width:5px;height: 14px;background:#0099FF;display: inline-block;margin-left: 10px;">
                        </div>
                        <span style="color: #0099FF;font-size: 0.8vw;padding: 10px;;">本月分媒体消耗数据</span>
                        <div style="height:213px;overflow: hidden;overflow-y: scroll;">
                            <div id="shadow" ref="shadow" :style="{width:'98%'}"></div>
                        </div>






                    </div>
                </a-col>





                <a-col :span="6" style="margin-left:1%;">
                    <div style="height: 300px;background-color:  rgba(2, 28, 69, 1);"
                        :class="fullscreenShow ? 'fullList' : 'fullScreenCol'">
                        <br>
                        <div style="width:5px;height: 14px;background:#0099FF;display: inline-block;margin-left: 10px;">
                        </div>
                        <span style="color: #0099FF;font-size: 0.8vw;padding: 10px;;">{{launchDate}}</span>
                        <div v-if="emptyShowThree">
                            <div id="lineChart" ref="lineChart" style="width: 100%;height: 260px;margin-top: 5px;">
                            </div>
                        </div>
                        <a-list v-else :data-source="[]" v-else />
                        <!-- <a-empty v-else /> -->

                    </div>
                    <div style="height:523px;background-color:  rgba(2, 28, 69, 1);">
                        <br>
                        <div style="width:5px;height: 14px;background:#0099FF;display: inline-block;margin-left: 10px;">
                        </div>
                        <span style="color: #0099FF;font-size: 0.8vw;padding: 10px;;">项目消耗排行榜</span>

                        <a-table :columns="columns" :data-source="data" :pagination="false" style="margin-top: 5px;">
                            <span slot="ranking" slot-scope="text,record">
                                <span
                                    :class="text == '1' || text == '2' || text == '3' ?'threeList' :'listsort'">{{text}}</span>
                            </span>
                            <span slot="totalCost" slot-scope="text,record">
                                <span>{{text > 10000?(text/10000).toFixed(2)+'万':text}}</span>
                            </span>
                        </a-table>

                    </div>
                </a-col>
            </a-row>
        </div>
    </div>
</template>


<script>
    import { mapGetters, mapMutations, mapActions } from 'vuex'
    import { getPie3D, getParametricEquation } from './chart.js'
    import moment from 'moment'
    var echarts = require('echarts');
    // 引入折线图组件
    require('echarts/lib/chart/line');
    require('echarts/lib/chart/pie');
    // 引入提示框和title组件
    require('echarts/lib/component/tooltip');
    require('echarts/lib/component/title');
    require('echarts/lib/component/graphic');
    require('echarts/lib/component/toolbox');
    require('echarts/lib/component/legend');
    import { Empty } from 'ant-design-vue';
    import { getAction, postAction, putAction } from '@/api/manage';
    const color = ['#8A2BE2', '#FFA500', '#00FFFF', '#4169E1', '#FF00FF', '#48D1CC']
    import 'echarts-gl';
    export default {
        data() {
            return {
                optionData: [],

                container: true,
                chartPie: true,
                emptyShowOne: true,
                emptyShowTwo: true,
                emptyShowThree: true,
                statusChart: null,
                option: {},
                fullscreenShow: false,
                branchShow: true,
                value: '2',
                priceRangeDate: [moment().startOf('day').subtract(7, 'days'), moment().endOf('day')],
                launchDate: '',
                selectPriceDate: '',
                offsetDays: 86400000 * 31,
                fullText: true,
                useRateData: '',
                faddishRateData: '',
                innovateRateData: '',
                pieData: [],
                timeMadeType: [],
                autoHeight: '',
                columns: [
                    {
                        dataIndex: 'ranking',
                        key: 'ranking',
                        title: '排名',
                        scopedSlots: { customRender: 'ranking' },
                        width: 60
                    },
                    {
                        title: '项目',
                        dataIndex: 'projectName',
                        key: 'projectName',
                        ellipsis: true,

                    },
                    {
                        title: '基建数',
                        dataIndex: 'baseNum',
                        key: 'baseNum',
                        ellipsis: true,
                    }, {
                        title: '消耗',
                        dataIndex: 'totalCost',
                        key: 'totalCost',
                        ellipsis: true,
                        scopedSlots: { customRender: 'totalCost' },
                    },

                ],
                data: [],
                pieTotal: '',
                emptyImg: '',
            }
        },
        created() {
        //  let userInfo=localStorage.getItem('pro__Login_Userinfo')
        //  if (!userInfo) {
        //  this.$router.push({ path: '/user/login'})
        //  }
            if(!this.userInfo()){
                this.$router.push({ path: '/user/login'})
            }

        },
        // updated(){

        
        // },
        beforeRouteLeave (to, from) {
            if(!this.userInfo()){
                this.$confirm({
                    title: '提示',
                    content: '当前登录已失效，请重新登陆',
                    onOk() {
                       
                        window.location.href="/";
                       
                    },
                    onCancel() {
                    },
                });
            }
        },
        mounted() {

            this.getData();
            this.getQueryNewlyData();
            const that = this
            window.onresize = function () {
                that.changeSize()
            }
            this.launchDate = this.priceRangeDate[0].format('YYYY-MM-DD') + '到' + this.priceRangeDate[1].format('YYYY-MM-DD') + '投放数据'
        },
        methods: {

            ...mapGetters(['userInfo']),
            // 开启全屏
            fullScreen() {
                let elem = document.documentElement;
                if (elem.requestFullscreen) {
                    elem.requestFullscreen()
                } else if (elem.mozRequestFullScreen) {
                    elem.mozRequestFullScreen()
                } else if (elem.webkitRequestFullScreen) {
                    elem.webkitRequestFullScreen()
                } else if (elem.msRequestFullscreen) {
                    document.body.msRequestFullscreen()
                }
                this.fullText = false;
                this.fullscreenShow = true;
                this.fullShow = false;
            },
            // 退出全屏
            signOutfullScreen() {
                let doc = document
                if (doc.exitFullscreen) {
                    doc.exitFullscreen()
                } else if (doc.mozCancelFullScreen) {
                    doc.mozCancelFullScreen()
                } else if (doc.webkitCancelFullScreen) {
                    doc.webkitCancelFullScreen()
                } else if (doc.msExitFullscreen) {
                    document.msExitFullscreen()
                }
                this.fullText = true;
                this.fullscreenShow = false;
                this.fullShow = true;
            },
            radioChange() {
                this.chartPie = false
                this.getData();
                this.getQueryNewlyData();
            },
            changePriceRangeDate(event) {

                if (this.priceRangeDate[0].format('YYYY-MM-DD') != this.priceRangeDate[1].format('YYYY-MM-DD')) {
                    this.launchDate = this.priceRangeDate[0].format('YYYY-MM-DD') + '到' + this.priceRangeDate[1].format('YYYY-MM-DD') + '投放数据'
                } else {
                    this.launchDate = this.priceRangeDate[0].format('YYYY-MM-DD') + '投放数据'
                }
                this.selectPriceDate = '';
                this.chartPie = false
                this.getData();
                this.getQueryNewlyData();
            },
            //选择开始时间/结束时间
            calendarPriceRangeChange(date) {
                this.selectPriceDate = date[0]
            },
            onOpenChange (status) {
      // 清空禁用时间段的设置
      this.selectPriceDate = null
    },
    onCalendarChange (dates) {
      // 获取手动选择的时间段起始值
      this.selectPriceDate = dates[0]
    },
            //根据选择的开始时间/结束时间，动态渲染要禁用的日期
            disabledDate(current) {
                if (!this.selectPriceDate) return current && current > moment().endOf('day')
                     return (current && current < moment(this.selectPriceDate).subtract(1, 'M').startOf('day')) || current > moment(this.selectPriceDate).add(1, 'M').endOf('day') || current && current > moment().endOf('day')
                // if (this.selectPriceDate) {
                //     let selectV = moment(this.selectPriceDate, 'YYYY-MM-DD').valueOf()
                //     return  current > moment(new Date(selectV + this.offsetDays), 'YYYY-MM-DD') ||
                //         current < moment(new Date(selectV - this.offsetDays), 'YYYY-MM-DD')  
                // } else {
                    
                //     return   current && current > moment().endOf('day')
                // }

            },


            getQueryNewlyData() {
                // 环形图
                let params = {
                    startTime: this.priceRangeDate[0].format('YYYY-MM-DD'),
                    endTime: this.priceRangeDate[1].format('YYYY-MM-DD'),
                    mediaType: this.value
                }
                this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getMeterialProduceRate', params).then(res => {
                    if (res.code == 0) {
                        var servicedata = res.result
                        if (servicedata.length > 0) {
                            this.emptyShowOne = true;
                            this.pieData = [];
                            let num = 0;
                            for (var i = 0; i < servicedata.length; i++) {
                                var obj = new Object();
                                obj.name = servicedata[i].area;
                                obj.value = servicedata[i].meterialNum;
                                num += servicedata[i].meterialNum;
                                this.pieData[i] = obj;
                            }
                            this.pieTotal = num
                            this.$nextTick(() => {
                                this.initEchart('accountIndexEchartOnePie', this.initPieOneData(this.pieData, this.pieTotal));
                            })

                        } else {
                            this.emptyShowOne = false;
                        }

                    }
                })
                // 3D柱状图
                let paramsTwo = {
                    startTime: this.priceRangeDate[0].format('YYYY-MM-DD'),
                    endTime: this.priceRangeDate[1].format('YYYY-MM-DD'),
                    mediaType: this.value
                }
                let resultArray = [];
                let areaArray = [];
                let payNumArray = [];
                this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getCompanyMeterialConsume', paramsTwo).then(res => {
                    if (res.code == 0) {
                        resultArray = res.result;
                        // resultArray.push({area:'聚义',cost:2050422.25},{area:'华南',cost:5050422.25})
                        // console.log(resultArray);
                        if (resultArray.length > 0) {
                            this.emptyShowTwo = true;
                            resultArray.forEach(element => {
                                areaArray.push(element.area);
                                payNumArray.push(element.cost)
                            });
                            this.$nextTick(() => {
                                this.initEchart('consume', this.getConsumeData(areaArray, payNumArray));
                            })

                        } else {
                            this.emptyShowTwo = false;
                        }

                    }
                })

                // 圆形进度条
                let paramsThree = {
                    startTime: this.priceRangeDate[0].format('YYYY-MM-DD'),
                    endTime: this.priceRangeDate[1].format('YYYY-MM-DD'),
                    mediaType: this.value
                }
                this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getMeterialRelevantInfo', paramsThree).then(res => {
                    if (res.code == 0) {
                        if (res.result.useRate) {

                            this.useRateData = res.result.useRate;
                        } else {
                            this.useRateData = 0;
                        }
                        if (res.result.faddishRate) {
                            this.faddishRateData = res.result.faddishRate;
                        } else {
                            this.faddishRateData = 0;
                        }
                        if (res.result.innovateRate) {
                            this.innovateRateData = res.result.innovateRate;
                        } else {
                            this.innovateRateData = 0;
                        }

                    }
                })

                // 3d饼图
                // this.$refs.child.getData();

                // 横向柱状体

                this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getAccountDataByMediaType').then(res => {
                    if (res.code == 0) {
                        let bytedance = res.result.bytedance;
                        let kuaishou = res.result.kuaishou;
                        let time = res.result.time
                        this.timeMadeType = time;
                        this.initEchart('shadow', this.getShadowData(bytedance, kuaishou, time));

                    }

                })
                // 折线图
                let paramsFour = {
                    startTime: this.priceRangeDate[0].format('YYYY-MM-DD'),
                    endTime: this.priceRangeDate[1].format('YYYY-MM-DD'),
                    mediaType: this.value
                }
                this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getAccountTrendByMediaType', paramsFour).then(res => {
                    if (res.code == 0) {
                        this.emptyShowThree = true;
                        let huaBei = res.result.huaBei;
                        let huaDong = res.result.huaDong;
                        let huaNan = res.result.huaNan;
                        let jiaoYang = res.result.jiaoYang;
                        let time = res.result.time
                        this.$nextTick(() => {
                            this.initEchart('lineChart', this.getLineChartData(huaBei, huaDong, huaNan, jiaoYang, time));
                        })

                    } else {
                        this.emptyShowThree = false;
                    }
                })


                //    排行榜
                let paramsFave = {
                    startTime: this.priceRangeDate[0].format('YYYY-MM-DD'),
                    endTime: this.priceRangeDate[1].format('YYYY-MM-DD'),
                    mediaType: this.value
                }
                this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getProjectCostTopTenByMediaType', paramsFour).then(res => {
                    if (res.code == 0) {
                        this.data = res.result;
                        this.data.forEach((item, index) => {
                            item.ranking = index + 1
                        })
                    }
                })
            },
            //获取echart的值
            initEchart(idName, optionName) {
                let that = this;
                const chart = this.$refs[idName]
                if (chart) {
                    if (idName == 'shadow') {
                        const myCharts = echarts.init(document.getElementById(idName))
                        this.autoHeight = this.timeMadeType.length * 40 + 20;
                        
                        myCharts.clear()
                        myCharts.setOption(optionName);
                        myCharts.resize({ height: this.autoHeight })
                        window.addEventListener('resize', function () {
                            // that.clientWidth = document.documentElement.clientWidth - 224
                           
                        })
                    } else {
                        const myChart = echarts.init(document.getElementById(idName))
                        myChart.clear()
                        myChart.setOption(optionName);

                        window.addEventListener('resize', function () {
                            // that.clientWidth = document.documentElement.clientWidth - 224
                            myChart.resize()
                        })
                    }

                }
            },
            // 第一个饼图
            initPieOneData(pieData, pieTotal) {

                const list = pieData;
                let option = {
                    tooltip: {
                        trigger: 'item',
                        formatter: function (obj) {
                            return obj.name + ':' + obj.value + '(' + Math.round(obj.value / pieTotal * 100) + '%)'
                        }
                    },
                    legend: {
                        top: '20%',
                        orient: 'vertical',
                        right: '0%',
                        textStyle: { //图例文字的样式
                            color: '#fff',
                            fontSize: 12
                        },
                        itemGap: 20,
                        itemWidth: 15,
                        itemHeight: 10,
                        padding: [-45, 0, 0, 80],
                        bottom: '55%',
                        formatter: function (name) {  //该函数用于设置图例显示后的百分比
                            var data = list
                            var total = 0;
                            var value;
                            list.forEach((item) => {
                                total += item.value;
                                if (item.name == name) {
                                    value = item.value;
                                }
                            })
                            var p = Math.round(((value / total) * 100)); //求出百分比
                            return p >= 10 ? p== 11 ? `${name}    ${'|'}  ${p}%     ${value}` : `${name}    ${'|'}  ${p}%    ${value}` : `${name}    ${'|'}  ${p}%      ${value}` //返回出图例所显示的内容是名称+百分比


                        },
                    },
                    color: ['#45C2E0', '#C1EBDD', '#FFC851', '#8A2BE2', '#C71585', '#FF9393'],
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: ['50%', '75%'],
                            avoidLabelOverlap: false,
                            hoverAnimation: true,
                            silent: false,
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: 'rgba(2, 28, 69, 1)',
                                borderWidth: 2
                            },
                            label: {
                                show: true,
                                position: 'center',
                                fontSize: 10,
                                formatter: function (param) {

                                    return '素材总数\r\n' + pieTotal
                                },
                                textStyle: {
                                    fontSize: 13,
                                    color: '#fff'
                                }
                            },
                            left: 0,
                            right: '50%',
                            top: 0,
                            bottom: '20%',

                            labelLine: {
                                show: false
                            },
                            data: list
                        }
                    ]
                };
                return option
            },

            // 柱状图
            getConsumeData(areaArray, payNumArray) {
                // var buyTop = echarts.init(document.getElementById('buyTop'));  //图表容器
                var areaData = areaArray;   //横坐标值
                var payPersonNum = payNumArray;  //柱状图的值

                let VALUE1 = [{    //每个柱子的颜色（可自行改变颜色）
                    value: payPersonNum[0],
                    itemStyle: {
                        color: 'rgba(0,137,255,1.0)'
                    }
                },
                {
                    value: payPersonNum[1],
                    itemStyle: {
                        color: 'rgba(0,25,255,1.0)'
                    }
                },
                {
                    value: payPersonNum[2],
                    itemStyle: {
                        color: 'rgba(115,5,255,1.0)'
                    }
                },
                {
                    value: payPersonNum[3],
                    itemStyle: {
                        color: 'rgba(215,1,255,1.0)'
                    }
                },
                {
                    value: payPersonNum[4],
                    itemStyle: {
                        color: 'rgba(182,105,86,1.0)'
                    }
                }, {
                    value: payPersonNum[5],
                    itemStyle: {
                        color: 'rgba(0,255,127,1.0)'
                    }
                },{
                    value: payPersonNum[6],
                    itemStyle: {
                        color: 'rgba(255,192,203,1.0)'
                    }
                },
                ]

                VALUE1 = VALUE1.filter(item => {
                    return item.value != undefined
                })
                console.log(VALUE1);
                let VALUE2 = [{  //最高值的柱子颜色  就是你所看到的透明那部分
                    value: Math.max.apply(null, payPersonNum),    //这个value是柱状图的值里的最大值
                    itemStyle: {
                        color: 'rgba(0,137,255,.1)'
                    }
                },
                {
                    value: Math.max.apply(null, payPersonNum),
                    itemStyle: {
                        color: 'rgba(0,25,255,.1)'
                    }
                },
                {
                    value: Math.max.apply(null, payPersonNum),
                    itemStyle: {
                        color: 'rgba(115,5,255,.1)'
                    }
                },
                {
                    value: Math.max.apply(null, payPersonNum),
                    itemStyle: {
                        color: 'rgba(215,1,255,.1)'
                    }
                },
                {
                    value: Math.max.apply(null, payPersonNum),
                    itemStyle: {
                        color: 'rgba(182,105,86,.1)'
                    }
                },{
                    value: Math.max.apply(null, payPersonNum),
                    itemStyle: {
                        color: 'rgba(0,255,127,.1)'
                    }
                },{
                    value: Math.max.apply(null, payPersonNum),
                    itemStyle: {
                        color: 'rgba(255,192,203,.1)'
                    }
                }
                ]
                if (VALUE1.length != VALUE2.length) {

                    VALUE2.splice(VALUE1.length, VALUE2.length - VALUE1.length)
                }
                console.log(VALUE2);
                // 绘制左侧面
                const CubeLeft = echarts.graphic.extendShape({
                    shape: {
                        x: 0,
                        y: 0
                    },
                    buildPath: function (ctx, shape) {
                        // shape是从custom传入的
                        const xAxisPoint = shape.xAxisPoint
                        const c0 = [shape.x, shape.y]
                        const c1 = [shape.x - 13, shape.y - 13]
                        const c2 = [xAxisPoint[0] - 13, xAxisPoint[1] - 13]
                        const c3 = [xAxisPoint[0], xAxisPoint[1]]
                        ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
                    }
                })
                // 绘制右侧面
                const CubeRight = echarts.graphic.extendShape({
                    shape: {
                        x: 0,
                        y: 0
                    },
                    buildPath: function (ctx, shape) {
                        const xAxisPoint = shape.xAxisPoint
                        const c1 = [shape.x, shape.y]
                        const c2 = [xAxisPoint[0], xAxisPoint[1]]
                        const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
                        const c4 = [shape.x + 18, shape.y - 9]
                        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
                    }
                })
                // 绘制顶面
                const CubeTop = echarts.graphic.extendShape({
                    shape: {
                        x: 0,
                        y: 0
                    },
                    buildPath: function (ctx, shape) {
                        const c1 = [shape.x, shape.y]
                        const c2 = [shape.x + 18, shape.y - 9]
                        const c3 = [shape.x + 5, shape.y - 22]
                        const c4 = [shape.x - 13, shape.y - 13]
                        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
                    }
                })
                // 注册三个面图形
                echarts.graphic.registerShape('CubeLeft', CubeLeft)
                echarts.graphic.registerShape('CubeRight', CubeRight)
                echarts.graphic.registerShape('CubeTop', CubeTop)
                const MAX = [300, 300, 300, 300, 300, 300,300]
                const VALUE = payPersonNum
                let option = {
                    backgroundColor: "transparent",

                    grid: {  //图表的上下左右的距离
                        left: '-80',
                        right: '10%',
                        bottom: '15%',
                        top: '20%',
                        padding: [50, 0, 0, 0],
                        containLabel: true,
                    },
                    xAxis: {  //x轴的样式设置
                        type: 'category',
                        data: areaData,
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: 'rgba(255, 168, 1,1.0)'
                            }
                        },
                        offset: 20,
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            interval: 0,
                            margin: 0,
                            textStyle: {
                                color: '#B0C4DE',
                                fontStyle: 'normal',
                                fontFamily: '微软雅黑',
                                fontSize: 12,
                            }
                        }
                    },
                    yAxis: {
                        show: false, //y轴的样式设置
                        type: '',
                        name: "",
                        nameTextStyle: {
                            color: '#7B4D9F',
                            fontSize: 15,
                            offset: [2, -25]
                        },
                        axisLine: {
                            show: false,
                            lineStyle: {
                                color: '#7B4D9F'
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            fontSize: 16
                        },
                        boundaryGap: false
                    },
                    series: [{    //下面就是柱状图的每个柱的颜色设置
                        type: 'custom',
                        renderItem: (params, api) => {
                            const location = api.coord([api.value(0), api.value(1)])

                            return {
                                type: 'group',
                                children: [{
                                    type: 'CubeLeft',
                                    shape: {
                                        api,
                                        xValue: api.value(0),
                                        yValue: api.value(1),
                                        x: location[0],
                                        y: location[1],
                                        xAxisPoint: api.coord([api.value(0), 0])
                                    },
                                    style: {
                                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: api.style().fill
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(210, 218, 226,1.0)'
                                        }
                                        ])
                                    }
                                },
                                {
                                    type: 'CubeRight',
                                    shape: {
                                        api,
                                        xValue: api.value(0),
                                        yValue: api.value(1),
                                        x: location[0],
                                        y: location[1],
                                        xAxisPoint: api.coord([api.value(0), 0])
                                    },
                                    style: {
                                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: api.style().fill
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(210, 218, 226,1.0)'
                                        }
                                        ])
                                    }
                                },
                                {
                                    type: 'CubeTop',
                                    shape: {
                                        api,
                                        xValue: api.value(0),
                                        yValue: api.value(1),
                                        x: location[0],
                                        y: location[1],
                                        xAxisPoint: api.coord([api.value(0), 0])
                                    },
                                    style: {
                                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: api.style().fill
                                        },
                                        {
                                            offset: 1,
                                            color: api.style().fill
                                        }
                                        ])
                                    }
                                }
                                ]
                            }
                        },
                        data: VALUE2,

                    }, {
                        type: 'custom',
                        renderItem: (params, api) => {
                            const location = api.coord([api.value(0), api.value(1)])
                            return {
                                type: 'group',
                                children: [{
                                    type: 'CubeLeft',
                                    shape: {
                                        api,
                                        xValue: api.value(0),
                                        yValue: api.value(1),
                                        x: location[0],
                                        y: location[1],
                                        xAxisPoint: api.coord([api.value(0), 0])
                                    },
                                    style: {
                                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: api.style().fill
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(210, 218, 226,1.0)'
                                        }
                                        ])
                                    }
                                },
                                {
                                    type: 'CubeRight',
                                    shape: {
                                        api,
                                        xValue: api.value(0),
                                        yValue: api.value(1),
                                        x: location[0],
                                        y: location[1],
                                        xAxisPoint: api.coord([api.value(0), 0])
                                    },
                                    style: {
                                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: api.style().fill
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(210, 218, 226,1.0)'
                                        }
                                        ])
                                    }
                                },
                                {
                                    type: 'CubeTop',
                                    shape: {
                                        api,
                                        xValue: api.value(0),
                                        yValue: api.value(1),
                                        x: location[0],
                                        y: location[1],
                                        xAxisPoint: api.coord([api.value(0), 0])
                                    },
                                    style: {
                                        fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                            offset: 0,
                                            color: api.style().fill
                                        },
                                        {
                                            offset: 1,
                                            color: api.style().fill
                                        }
                                        ])
                                    }
                                }
                                ]
                            }
                        },
                        data: VALUE1
                    }, {
                        type: 'bar',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                fontSize: 14,
                                color: '#fff',
                                offset: [2, -25],
                                formatter: function (value) {
                                    var val = value.data;
                                    if (val >= 10000 && val < 1000000000000) {
                                        val = (val / 10000).toFixed(2) + "万";
                                    }
                                    return val;
                                }
                            }
                        },
                        itemStyle: {
                            color: 'transparent'
                        },

                        data: VALUE
                    }]
                }


                return option
            },


            // 横向柱状体
            getShadowData(bytedance, kuaishou, time) {
                // var rkkchart = echarts.init(document.getElementById('rkkDiv'));
                var ageArea = time;
                var FbarData = kuaishou; //快手
                var MbarData = bytedance; //头条
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        },
                        formatter: function (params, ticket, callback) {
                            var res = params[0].name;
                            for (var i = 0, l = params.length; i < l; i++) {
                                res += '<br/>' + params[i].seriesName + ' : ' + Math.abs(params[i].value);
                            }
                            setTimeout(function () {
                                // 仅为了模拟异步回调
                                callback(ticket, res);
                            }, 500)
                            return 'loading...';
                        }
                    },
                    // dataZoom: [
                    //     {
                    //         type: "slider", //滑动条
                    //         show: true, //开启
                    //         yAxisIndex: [0],
                    //         left: "96%", //滑动条位置
                    //         start: 0, //初始化时，滑动条宽度开始标度
                    //         end: 20, //初始化时，滑动条宽度结束标度<br>  
                    //         filterMode:"none"                 
                    //     },
                    //     {
                    //         type: "inside", //内置滑动，随鼠标滚轮展示
                    //         yAxisIndex: [0],
                    //         start: 20, //初始化时，滑动条宽度开始标度
                    //         filterMode:"none"     
                    //     },
                    // ],
                    legend: {
                        data: ['快手', '头条'],
                        x: 'right',
                        textStyle: {
                            fontSize: 15,
                            color: '#fff'
                        }
                    },
                    grid: {
                        left: '10%',
                        right: '10%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            show: false,
                            axisLabel: {
                                formatter: function (value) {
                                    return Math.abs(value);//显示的数值都取绝对值
                                }
                            },
                            splitLine: { show: false },
                            type: 'value',
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'category',
                            boundaryGap: ['20%', '20%'],
                            axisTick: { show: false },
                            // data : ['0~5岁','5~10岁','10-30岁','30-50岁','50-70岁','70-100','100以上']
                            data: ageArea,
                            axisLabel: {
                                show: true,
                                margin: 80,
                                textStyle: {
                                    color: '#fff'
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '快手',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'right',
                                    formatter: function (value) {
                                        var val = value.data;
                                        if (val >= 10000 && val < 10000000) {
                                            val = (val / 10000).toFixed(2) + "万";
                                        }
                                        return val;
                                    }
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: 'rgba(255, 153, 0, 1)',
                                }
                            },
                            // data:[320, 302, 341, 374, 390, 450, 420]
                            data: FbarData
                        },
                        {
                            name: '头条',
                            type: 'bar',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'left',
                                    formatter: function (value) {
                                        var val = Math.abs(value.data);
                                        if (val >= 10000 && val < 10000000) {
                                            val = (val / 10000).toFixed(2) + "万";
                                        }
                                        return val;
                                    }
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: 'rgba(102, 51, 255, 1)',
                                }
                            },
                            // data:[-120, -132, -101, -134, -190, -230, -210]
                            data: MbarData
                        }
                    ]
                };

                return option
            },

            // 折线图
            getLineChartData(huaBei, huaDong, huaNan, jiaoYang, time) {
                let option = {
                    title: {
                        text: ''
                    },
                    color: ['#87CEFA', '#FFA500', '#8A2BE2', '#3CB371',],
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params) {
                            var relVal = params[0].name;
                            for (var i = 0, l = params.length; i < l; i++) {
                                //遍历出来的值一般是字符串，需要转换成数字，再进项tiFixed四舍五入
                                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + Number(params[i].value).toFixed(2)
                            }
                            return relVal;
                        }
                    },
                    legend: {
                        data: ['华北', '华东', '华南', '骄阳'],
                        textStyle: {
                            fontSize: 12,
                            color: '#B0C4DE'
                        },
                    },
                    grid: {
                        left: '3%',
                        right: '15%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: time,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#B0C4DE'
                            }
                        },
                        axisLine: {  //x轴线
                            show: true,
                            lineStyle: {
                                color: '#B0C4DE'
                            }
                        },


                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: '#B0C4DE'
                            }
                        },
                        axisLine: {  //x轴线
                            show: true,
                            lineStyle: {
                                color: '#B0C4DE'
                            }
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "#B0C4DE"
                            }
                        },
                    },
                    series: [

                        {
                            name: '华北',
                            type: 'line',
                            data: huaBei,
                            smooth: true,
                        },
                        {
                            name: '华东',
                            type: 'line',
                            data: huaDong,
                            smooth: true,
                        },
                        {
                            name: '华南',
                            type: 'line',
                            data: huaNan,
                            smooth: true,
                        },
                        {
                            name: '骄阳',
                            type: 'line',
                            data: jiaoYang,
                            smooth: true,
                        },

                    ]
                };
                return option
            },
            getData() {

                let params = {
                    startTime: this.priceRangeDate[0].format('YYYY-MM-DD'),
                    endTime: this.priceRangeDate[1].format('YYYY-MM-DD'),
                    mediaType: this.value
                }
                this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getCompanyAccountDataInfo', params).then(res => {
                    if (res.code == 0) {
                        let arr = res.result
                        let optionArray = [];
                        // for (var i = 0; i < arr.length; i++) {
                        //     var obj = new Object();
                        //     // if (arr[i].cost != 0) {
                        //     obj.name = arr[i].area;
                        //     obj.value = arr[i].cost;
                        //     obj.rate = arr[i].rate;
                        //     optionArray[i] = obj;
                        //     // }

                        // }
                        res.result.forEach(element => {
                            optionArray.push({ name: element.area, value: element.cost, rate: element.rate })
                        });
                        this.optionData = optionArray
                        if (this.optionData.length == 0) {
                            this.optionData.push({
                                name: '暂无数据',
                                value: 100,
                                rate: '',
                            })


                            this.chartPie = true
                            this.$nextTick(() => {
                                this.setLabel(this.optionData);
                                this.initChart(this.optionData);
                            })
                        } else {
                            this.chartPie = true;
                            this.$nextTick(() => {
                                this.setLabel(this.optionData);
                                this.initChart(this.optionData);
                            })

                        }



                    }
                })
                // this.optionData = [{
                //   name: '华北',
                //   value: 10746
                // },
                // {
                //   name: '华东',
                //   value: 8005
                // },]
            },
            // 初始化label样式
            setLabel(optionData) {
                optionData.forEach((item, index) => {
                    item.itemStyle = {
                        color: color[index],
                    }
                    item.label = {
                        normal: {
                            show: true,
                            color: color[index],
                            fontSize: 18,
                            padding: [250, 0],
                            formatter: function (params) {
                                return params.value != 0 ? params.name == '暂无数据' ? params.name + '\r\n' + params.data.rate
                                    : params.name + '\r\n' + echarts.format.addCommas(params.value.toFixed(2)) + '\r\n' + params.data.rate
                                    : ''
                            }, // 用\n来换行
                            // rich: {
                            //     b: {
                            //         color: '#fff',
                            //         lineHeight: 18,
                            //         align: 'left'
                            //     },
                            //     c: {
                            //         fontSize: 20,
                            //         color: '#fff',
                            //         textShadowColor: '#1c90a6',
                            //         textShadowOffsetX: 0,
                            //         textShadowOffsetY: 50,
                            //         textShadowBlur: 5,
                            //         align: 'left'
                            //     },
                            //     d: {
                            //         color: color[index],
                            //         fontSize: 20,
                            //         align: 'left'
                            //     }
                            // }
                        }
                    }
                    item.labelLine = {
                        normal: {
                            lineStyle: {
                                width: 1,
                                color: 'rgba(255,255,255,0.7)'
                            }
                        }
                    }
                })
            },
            // 图表初始化
            initChart(optionData) {
                this.statusChart = echarts.init(this.$refs.chart)
                // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
                this.option = getPie3D(optionData, 0, 240, 28, 30, 0.5)
                this.statusChart.setOption(this.option)
                // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
                this.option.series.push({
                    name: '', //自己根据场景修改
                    backgroundColor: 'transparent',
                    type: 'pie',
                    label: {
                        opacity: 1,
                        fontSize: 13,
                        lineHeight: 20,
                        normal: {
                            show: true, //图形外文字上下显示
                            position: 'outside',         //文字和图的边距
                            padding: [0, 20]
                        }
                    },
                    startAngle: -30, // 起始角度，支持范围[0, 360]。
                    clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
                    radius: '45%',
                    center: ['50%', '50%'],
                    data: optionData,
                    labelLine: {  //删除指示线
                        show: false,

                    },
                    itemStyle: {
                        opacity: 0  //这里必须是0，不然2d的图会覆盖在表面
                    }
                })
                this.statusChart.setOption(this.option)
                this.bindListen(this.statusChart)
            },
            // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
            // optionName是防止有多个图表进行定向option传递，单个图表可以不传，默认是opiton
            bindListen(myChart, optionName = 'option') {
                let selectedIndex = ''
                let hoveredIndex = ''
                // 监听点击事件，实现选中效果（单选）
                myChart.on('click', (params) => {
                    // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
                    const isSelected = !this[optionName].series[params.seriesIndex].pieStatus
                        .selected
                    const isHovered =
                        this[optionName].series[params.seriesIndex].pieStatus.hovered
                    const k = this[optionName].series[params.seriesIndex].pieStatus.k
                    const startRatio =
                        this[optionName].series[params.seriesIndex].pieData.startRatio
                    const endRatio =
                        this[optionName].series[params.seriesIndex].pieData.endRatio
                    // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
                    if (selectedIndex !== '' && selectedIndex !== params.seriesIndex) {
                        this[optionName].series[
                            selectedIndex
                        ].parametricEquation = getParametricEquation(
                            this[optionName].series[selectedIndex].pieData.startRatio,
                            this[optionName].series[selectedIndex].pieData.endRatio,
                            false,
                            false,
                            k,
                            this[optionName].series[selectedIndex].pieData.value
                        )
                        this[optionName].series[selectedIndex].pieStatus.selected = false
                    }
                    // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
                    this[optionName].series[
                        params.seriesIndex
                    ].parametricEquation = getParametricEquation(
                        startRatio,
                        endRatio,
                        isSelected,
                        isHovered,
                        k,
                        this[optionName].series[params.seriesIndex].pieData.value
                    )
                    this[optionName].series[params.seriesIndex].pieStatus.selected = isSelected
                    // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
                    selectedIndex = isSelected ? params.seriesIndex : null
                    // 使用更新后的 option，渲染图表
                    myChart.setOption(this[optionName])
                })
                // 监听 mouseover，近似实现高亮（放大）效果
                // myChart.on('mouseover', (params) => {
                //     // 准备重新渲染扇形所需的参数
                //     let isSelected
                //     let isHovered
                //     let startRatio
                //     let endRatio
                //     let k
                //     // 如果触发 mouseover 的扇形当前已高亮，则不做操作
                //     if (hoveredIndex === params.seriesIndex) {
                //         // 否则进行高亮及必要的取消高亮操作
                //     } else {
                //         // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
                //         if (hoveredIndex !== '') {
                //             // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
                //             isSelected = this[optionName].series[hoveredIndex].pieStatus.selected
                //             isHovered = false
                //             startRatio = this[optionName].series[hoveredIndex].pieData.startRatio
                //             endRatio = this[optionName].series[hoveredIndex].pieData.endRatio
                //             k = this[optionName].series[hoveredIndex].pieStatus.k
                //             // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
                //             this[optionName].series[
                //                 hoveredIndex
                //             ].parametricEquation = getParametricEquation(
                //                 startRatio,
                //                 endRatio,
                //                 isSelected,
                //                 isHovered,
                //                 k,
                //                 this[optionName].series[hoveredIndex].pieData.value
                //             )
                //             this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered
                //             // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
                //             hoveredIndex = ''
                //         }
                //         // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
                //         if (
                //             params.seriesName !== 'mouseoutSeries' &&
                //             params.seriesName !== 'pie2d'
                //         ) {
                //             // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
                //             isSelected =
                //                 this[optionName].series[params.seriesIndex].pieStatus.selected
                //             isHovered = true
                //             startRatio =
                //                 this[optionName].series[params.seriesIndex].pieData.startRatio
                //             endRatio = this[optionName].series[params.seriesIndex].pieData.endRatio
                //             k = this[optionName].series[params.seriesIndex].pieStatus.k
                //             // 对当前点击的扇形，执行高亮操作（对 option 更新）
                //             this[optionName].series[
                //                 params.seriesIndex
                //             ].parametricEquation = getParametricEquation(
                //                 startRatio,
                //                 endRatio,
                //                 isSelected,
                //                 isHovered,
                //                 k,
                //                 this[optionName].series[params.seriesIndex].pieData.value + 60
                //             )
                //             this[optionName].series[
                //                 params.seriesIndex
                //             ].pieStatus.hovered = isHovered
                //             // 记录上次高亮的扇形对应的系列号 seriesIndex
                //             hoveredIndex = params.seriesIndex
                //         }
                //         // 使用更新后的 option，渲染图表
                //         myChart.setOption(this[optionName])
                //     }
                // })
                // 修正取消高亮失败的 bug
                myChart.on('globalout', () => {
                    // 准备重新渲染扇形所需的参数
                    let isSelected
                    let isHovered
                    let startRatio
                    let endRatio
                    let k
                    if (hoveredIndex !== '') {
                        // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
                        isSelected = this[optionName].series[hoveredIndex].pieStatus.selected
                        isHovered = false
                        k = this[optionName].series[hoveredIndex].pieStatus.k
                        startRatio = this[optionName].series[hoveredIndex].pieData.startRatio
                        endRatio = this[optionName].series[hoveredIndex].pieData.endRatio
                        // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
                        this[optionName].series[
                            hoveredIndex
                        ].parametricEquation = getParametricEquation(
                            startRatio,
                            endRatio,
                            isSelected,
                            isHovered,
                            k,
                            this[optionName].series[hoveredIndex].pieData.value
                        )
                        this[optionName].series[hoveredIndex].pieStatus.hovered = isHovered
                        // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
                        hoveredIndex = ''
                    }
                    // 使用更新后的 option，渲染图表
                    myChart.setOption(this[optionName])
                })
            },
            // 自适应宽高
            changeSize() {
                this.statusChart.resize()
            },
            tableRowClass(record, index) {

                return "rowClassColor";

            }

        },
    }
</script>