x-php-Admin/src/views/home/widgets/components/StoreConversionData.vue

<template>
    <div class="card-item">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane :stretch="true" :label="storeList[0].title + i" :name="i" v-for="(item, i) in storeList" :key="i">
                <template #label>
                    <div class="tab-box">
                        {{ item.title }}
                        <div class="tab-echart">
                            <div class="text">
                                转化率
                                <div class="num">
                                    {{ item.num }}%
                                </div>
                            </div>
                            <div style="height:30px;width:30px;margin-left:15px;position: relative;">
                                <div class="echart-pop" :class="{ 'echart-pop-tran': activeName == i }"></div>
                                <xEcharts ref="topInfo" :option="item.saleOption"></xEcharts>
                            </div>
                        </div>
                    </div>
                </template>
            </el-tab-pane>
        </el-tabs>
        <div class="data-echart-box">
            <xEcharts ref="c1" :option="storeOption"></xEcharts>
        </div>
    </div>
</template>

<script>
import xEcharts from '@/components/xEcharts';
export default {
    title: "门店转化率",
    icon: "el-icon-switch",
    description: "门店转化率数据",
    minWidth:8,
    components: {
        xEcharts
    },
    data() {
        return {
            activeName: 0,
            storeList: [{
                title: '门店'
            }],
            saleOption: {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['60%', '100%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        labelLine: {
                            show: false
                        },
                        itemStyle: {
                            normal: {
                                color: function (colors) {
                                    var colorList = [
                                        '#5470c6',
                                    ];
                                    return colorList[colors.dataIndex];
                                }
                            }
                        },
                        data: [
                            { value: 80, name: '' },
                            { value: 20, name: '' },
                        ]
                    }
                ]
            },
            storeOption: {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                dataZoom: [
                    {
                        startValue: 'Mon'
                    },
                    {
                        type: 'inside'
                    }
                ],
                series: [
                    {
                        name: 'Email',
                        type: 'line',
                        data: [120, 132, 101, 134, 90, 230, 210]
                    },
                    {
                        name: 'Union Ads',
                        type: 'line',
                        data: [220, 182, 191, 234, 290, 330, 310]
                    },
                    {
                        name: 'Video Ads',
                        type: 'line',
                        data: [150, 232, 201, 154, 190, 330, 410]
                    },
                    {
                        name: 'Direct',
                        type: 'line',
                        data: [320, 332, 301, 334, 390, 330, 320]
                    },
                    {
                        name: 'Search Engine',
                        type: 'line',
                        data: [820, 932, 901, 934, 1290, 1330, 1320]
                    }
                ]
            }
        }
    },
    methods: {
        setOption(data) {
            let option = {}
            this.saleOption.series[0].data = data ? data : [{ value: 80, name: '' }, { value: 20, name: '' }]
            option = JSON.parse(JSON.stringify(this.saleOption))
            return option
        },
        //设置获取数据
        setList(data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) {
            let arr = []
            data.map(res => {
                let obj = {}
                obj['title'] = res.title ? res.title : `门店${res}`
                obj['num'] = res % 2 ? 80 : 60
                obj['saleOption'] = this.setOption([{ value: res % 2 ? 80 : 60, name: '' }, { value: res % 2 ? 20 : 40, name: '' }])
                arr.push(obj)
            })
            this.storeList = arr
        },
        //设置门店数据 设置dataZoom、series
        setStoreOption(data={}){
            this.storeOption.series=data.list?data.list:this.storeOption.series
            this.storeOption.dataZoom=[{startValue: 'Mon'},{type: 'inside'}]
        },
        //设置series属性
        setStoreSeries(data){
            let arr=[]
            data.map(res=>{
                let obj={
                    name: '',
                    type: 'line',
                    data: []
                }
                obj['type']=res.title
                obj['data']=res.data
                arr.push(obj)
            })
            // console.log(arr)
            return arr
        },
        refView(){
            this.$refs.c1.setSize()
        }
    },
    mounted() {
        this.setList()
    },
}
</script>

<style scoped>
.pos-r {
    position: relative;
}

.dis-f {
    display: flex;
}

.al-item {
    align-items: center;
}

.jus-bet {
    justify-content: space-between;
}

.card-item {
    width: 100%;
    background: #fff;
    margin-bottom: 16px;
    border:1px solid #e4e7ed;
    border-radius:4px;
}

.tab-box {
    height: 100px;
    color: #000000d9;
    font-size: 16px;
}

.tab-echart {
    display: flex;
    align-items: center;
}

.tab-echart .text {
    color: #00000073;
    font-size: 14px;
    line-height: 22px;
}

.tab-echart .text .num {
    height: 32px;
    color: #000000d9;
    font-size: 24px;
    line-height: 32px;
}

.echart-pop {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 66;
    background: rgba(255, 255, 255, 0.5);
}

.echart-pop-tran {
    background: transparent;
}

.data-echart-box {
    width: 100%;
    height: 267px;
}

::v-deep .el-tabs__nav-scroll {
    margin: 0 24px;
    height: 100%;
}

::v-deep .el-tabs__nav-wrap.is-scrollable {
    height: 100px;
}

::v-deep .el-tabs__nav-prev {
    display: flex;
    align-items: center;
    height: 100%;
}

::v-deep .el-tabs__nav-next {
    display: flex;
    align-items: center;
    height: 100%;
}

::v-deep .el-tabs__nav {
    height: 100px;
}

/* ::v-deep .el-tabs{
    --el-tabs-header-height: 100px;
} */
</style>