qimall/addons/BusinessCard/backend/views/default/index.php

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 900px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <span>数据概况</span>
        </div>
        <div class="table-body" >
        <div style="border-bottom: 2px solid #DCDEE2;padding-bottom: 10px;">数据展示</div>
            <el-row :gutter="20" style="margin-top: 20px;" v-loading="dataLoading">
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <div class="grid-content bg-purple">
                        <div style="margin-bottom: 25px;">用户浏览量</div>
                        <div style="display: flex;align-items: flex-end;justify-content: space-between;">
                            <div style="font-size: 30px;color: #4D4F5C;font-weight: bold;">{{allData.browse_num}}</div>
                            <img style="width: 60px;height: 20px;" :src="diy_img_prefix+'/static/addons/business-card/liulanshuliang.png'" />
                        </div>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                    <div class="grid-content bg-purple">
                        <div style="margin-bottom: 25px;">名片数量</div>
                        <div style="display: flex;align-items: flex-end;justify-content: space-between;">
                            <div style="font-size: 30px;color: #4D4F5C;font-weight: bold;">{{allData.card_num}}</div>
                            <img style="width: 60px;height: 20px;" :src="diy_img_prefix+'/static/addons/business-card/mingpianshuliang.png'" />
                        </div>
                    </div>
                </el-col>
            </el-row>
            <div style="display: flex;align-items: center;">
				<div>请点击筛选：</div>
				<el-select v-model="selectValue" placeholder="近7天" @change="handle('selectDate', $event)">
				    <el-option label="近7天" value="7"></el-option>
                    <el-option label="近15天" value="15"></el-option>
                    <el-option label="近30天" value="30"></el-option>
				</el-select>
			</div>
            <div class="dataBox" id="echartsBox1" style="width: 15rem;height: 5.5rem;margin-bottom: 20px;" v-loading="chartLoading"></div>
        </div>

    </el-card>
</div>
<script>
    let myChart;
    const app = new Vue({
        el: '#app',
        data: {
            selectValue: '',
            chartLoading: true,
            dataLoading: true,
            user_rank: [],
            clue_rank: [],
            num_rank: [],
            diy_img_prefix: '<?= Yii::getAlias('@attachurl') ?>',
            money_rank: [],
            allData: {
                order_money: 0,order_num: 0,card_num: 0,browse_num: 0,clue_num: 0
            }
        },
        created() {
			var size = (window.innerWidth || document.documentElement.clientWidth) / 1920 * 100;
			   document.documentElement.style.fontSize = size + "px";
			   document.body.style.fontSize = "14px";
		},
        mounted() {
            myChart = echarts.init(document.querySelector("#echartsBox1"));
            this.send('chart');
            this.send('getData');
        },
        methods: {
            send(type, param1 = null, param2 = null){
                switch(type) {
                    //获取图表数据
                    case 'chart':
                        this.chartLoading = true;
                        request({
                            params: {
                                r: 'business-card/default/chart',
                                date: this.selectValue
                            },
                        }).then(e=>{
                            this.chartLoading = false;
                            if (e.data.code == 0) {
                                if(e.data.data){
                                    let obj = {
                                        date: e.data.data.date,
                                        card_num: e.data.data.series.card_num,
                                        clue_num: e.data.data.series.clue_num,
                                        order_num: e.data.data.series.order_num,
                                        order_money: e.data.data.series.order_money,
                                        user_views: e.data.data.series.user_views,
                                    }
                                    this.handle('chart', obj);
                                }

                            }
                        }).catch(e=>{
                            this.chartLoading = false;
                            this.$message.error(e.data.msg);
                        })
                        break;
                    //获取数据
                    case 'getData':
                        this.dataLoading = false;
                        request({
                            params: {
                                r: 'business-card/default/index'
                            },
                        }).then(e=>{
                            this.chartLoading = false;
                            if (e.data.code == 0) {
                               if(e.data.data){
                                   this.user_rank = e.data.data.userRank;
                                   this.clue_rank = e.data.data.clueRank;
                                   this.num_rank = e.data.data.numRank;
                                   this.money_rank = e.data.data.moneyRank;
                                   if(e.data.data.allData) this.allData = e.data.data.allData;

                               }

                            }

                        }).catch(e=>{
                            this.chartLoading = false;
                            this.$message.error(e.data.msg);
                        })
                        break;
                }
            },
            handle(type, param1 = null, param2 = null) {
                switch(type) {
                    //选择日期
                    case 'selectDate':
                        this.selectValue = param1;
                        this.send('chart');
                        break;
                    //渲染图表
                    case 'chart':
                        option = {
                        color: ["#77E0FE", "#B7B5FC","#70E5AA","#FF7161","#FFCB83"],
                        tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            lineStyle: {
                            color: "#dddc6b"
                            }
                        }
                        },
                        legend: {
                            bottom: "0%",
                            left:"4%",
                            itemGap : 60,
                            data: [ '用户浏览量', '名片数量']
                        },
                        grid: {
                            left: '2%',
                            right: '4%',
                            bottom: '8%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data:param1.date
                            },
                        ],
                        yAxis: [
                            {
                                type: 'value',
                                axisTick: { show: false },
                            }
                        ],
                        series: [
                            {
                                name: '用户浏览量',
                                type: 'line',
                                smooth: true,
                                symbolSize: 10,
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                        offset: 0,
                                        color: "#B7B5FC"
                                        },
                                        {
                                        offset: 1,
                                        color: "#ffffff"
                                        }
                                    ],
                                    false
                                    ),
                                    shadowColor: "rgba(0, 0, 0, 0.1)"
                                }
                                },
                                //data: [20, 500, 199, 800, 90, 1000, 300]
                                data:param1.user_views
                            },
                            {
                                name: '名片数量',
                                type: 'line',
                                smooth: true,
                                symbolSize: 10,
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {
                                        offset: 0,
                                        color: "#70E5AA"
                                        },
                                        {
                                        offset: 1,
                                        color: "#ffffff"
                                        }
                                    ],
                                    false
                                    ),
                                    shadowColor: "rgba(0, 0, 0, 0.1)"
                                }
                                },
                                //data: [2000, 500, 1200, 100, 90, 50, 30]
                                data:param1.card_num
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                    window.addEventListener("resize", function() {
                    var size = (window.innerWidth || document.documentElement.clientWidth) / 1920 * 100;
                    document.documentElement.style.fontSize = size + "px";
                    document.body.style.fontSize = "14px";
                    myChart.resize();

                    });
                    break;
                }
            }
        }
    })
</script>
<style>
    .el-tabs__header {
        font-size: 16px;
    }

    .table-body {
        padding: 20px;
        background-color: #fff;
    }

    .table-body .el-button {
        padding: 0 !important;
        border: 0;
        margin: 0 5px;
    }

    .input-item {
        width: 250px;
        margin: 0 0 20px;
        display: inline-block;
    }

    .input-item .el-input__inner {
        border-right: 0;
    }

    .input-item .el-input__inner:hover {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input__inner:focus {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        margin: 0;
    }

    .batch {
        margin: 0 0 20px;
        display: inline-block;
    }

    .batch .el-button {
        padding: 9px 15px !important;
    }



	.el-row {
	    margin-bottom: 20px;
	    &:last-child {
	      margin-bottom: 0;
	    }
	  }
	  .el-col {
	    border-radius: 4px;
	  }
	  .bg-purple-dark {
	    background: #99a9bf;
	  }
	  .bg-purple {
	    background: #d3dce6;
	  }
	  .bg-purple-light {
	    background: #e5e9f2;
	  }
	  .grid-content {
	    border-radius: 4px;
	    min-height: 36px;
		padding: 12px;

		background: #FFFFFF;
		border: 1px solid #DCDEE2;
		box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.04);
		/* width: 240px; */
		margin-bottom: 20px;
	  }
	  .row-bg {
	    padding: 10px 0;
	    background-color: #f9fafc;
	  }
	  .el-table th>.cell{
	      color: #333;
	      font-weight: bold;
	      font-size: 14px;

	  }
	  .el-table__footer-wrapper, .el-table__header-wrapper{
	      border-bottom: 1.4px solid #D6D6D6;
		  background-color: #F3F5F6;
	  }


	  .paihangbang{
		  margin-top: 10px;
		  padding-bottom: 50px;
		  /* display: flex; */

	  }
	  .paihangbangItem{
		  /* width: 350px; */
		  box-sizing: border-box;
		  padding: 0 22px;
		  background-color: #fff;
		  /* margin-right: 20px; */
		  margin-bottom: 20px;
	  }
	  .paihangbangItem .title{
		  color: #17233D;
		  font-size: 16px;
		  text-align: center;
		 padding: 15px 0;
		 border-bottom: 1px solid #DCDEE2;
	  }
</style>