qimall/addons/Mch/backend/views/compoents/information/money.php

<div id="information-money" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1600px;overflow-y: auto;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div class="table-body">
            <div class="table_body_title flex-x-between flex-y-center">
                <div class="flex-y-center">
                    <div class="table_body_title_text">整体情况</div>
                    <div class="date_box">
                        <el-date-picker @change='dateChange' size='small' v-model="value1" value-format='timestamp' type="daterange" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
                    </div>

                    <div class="flex-y-center">
                        <div style="margin-right: 10px;">门店：</div>
                        <div>
                            <el-select v-model="value" placeholder="请选择" @change='selectChange' size='small'>
                                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </div>
                    </div>
                </div>

                <div>当前时间：2021-03-11 17:34</div>
            </div>

            <div class="detail_list">
                <div class="detail_item flex">
                    <div class="detail_item_left flex-y-center flex-x-center">
                        <img src="/plugins/o2o_store/assets/images/browse.png" style="margin-bottom: 8px;">
                        <div>财务提现</div>
                    </div>
                    <div class="detail_item_right flex-y-center">
                        <div class="detail_item_right_box" v-for="(item,index) in browse_list" :key='index'>
                            <div class="detail_item_right_text">{{item.name}}</div>
                            <div class="detail_item_right_num">{{item.num}}</div>
                            <div class="detail_item_right_day">今日：{{item.day}}</div>
                        </div>
                    </div>
                </div>

                <div class="detail_item flex">
                    <div class="detail_item_left flex-y-center flex-x-center" style="background:#58CA79">
                        <img src="/plugins/o2o_store/assets/images/deal.png" style="margin-bottom: 8px;">
                        <div>成交金额</div>
                    </div>
                    <div class="detail_item_right flex-y-center" style="background: #F0F8F0;border-color:rgba(180, 217, 179, 1)">
                        <div class="detail_item_right_box" v-for="(item,index) in deal_list" :key='index'>
                            <div class="detail_item_right_text">{{item.name}}</div>
                            <div class="detail_item_right_num" style="color:#58CA79">{{item.num}}</div>
                            <div class="detail_item_right_day">今日：{{item.day}}</div>
                        </div>
                    </div>
                </div>

                <div class="detail_item flex">
                    <div class="detail_item_left flex-y-center flex-x-center" style="background:#FFBC4E">
                        <img src="/plugins/o2o_store/assets/images/deal.png" style="margin-bottom: 8px;">
                        <div>佣金支付</div>
                    </div>
                    <div class="detail_item_right flex-y-center" style="background: #FFFBF4;border-color:rgba(242, 216, 166, 1)">
                        <div class="detail_item_right_box" v-for="(item,index) in vip_list" :key='index'>
                            <div class="detail_item_right_text">{{item.name}}</div>
                            <div class="detail_item_right_num" style="color:#FFBC4E">{{item.num}}</div>
                            <div class="detail_item_right_day">今日：{{item.day}}</div>
                        </div>
                    </div>
                </div>

                <div class="charts_box">
                    <div class="charts_title">整体看板</div>
                    <div class="charts_content">
                        <div class="radio_group_box">
                            <div class="radio_group_item flex-y-center">
                                <div class="radio_group_title">财务提现：</div>
                                <div>
                                    <el-radio-group v-model="browse_radio" @change='browsChange'>
                                        <el-radio :label="1">访客数</el-radio>
                                        <el-radio :label="2">浏览量</el-radio>
                                        <el-radio :label="3">访问支付转化率</el-radio>
                                    </el-radio-group>
                                </div>
                            </div>

                            <div class="radio_group_item flex-y-center">
                                <div class="radio_group_title">成交金额：</div>
                                <div>
                                    <el-radio-group v-model="deal_radio" @change='dealChange'>
                                        <el-radio :label="1">销售额(元)</el-radio>
                                        <el-radio :label="2">支付金额(元)</el-radio>
                                        <el-radio :label="3">实收金额(元)</el-radio>
                                        <el-radio :label="4">退款金额(元)</el-radio>
                                        <el-radio :label="5">客单价(元)</el-radio>
                                    </el-radio-group>
                                </div>
                            </div>

                            <div class="radio_group_item flex-y-center" @change='vipChange'>
                                <div class="radio_group_title">佣金支付：</div>
                                <div>
                                    <el-radio-group v-model="vip_radio">
                                        <el-radio :label="1">下单人数</el-radio>
                                        <el-radio :label="2">支付人数</el-radio>
                                        <el-radio :label="3">售后人数</el-radio>
                                        <el-radio :label="4">首购人数</el-radio>
                                        <el-radio :label="5">复购人数</el-radio>
                                    </el-radio-group>
                                </div>
                            </div>
                        </div>

                        <div class="line_chart_box" id='line_chart' style="height: 400px;width:86%"></div>
                    </div>
                </div>
            </div>
        </div>
    </el-card>
</div>
<script>
    Vue.component('information-money', {
        el: '#information-money',
        data() {
            return {
                value1: '',

                browse_list: [{
                    name: '访客数',
                    num: '96',
                    day: '22',
                },
                    {
                        name: '浏览量',
                        num: '96',
                        day: '22',
                    },
                    {
                        name: '访问支付转化率',
                        num: '96',
                        day: '22',
                    },
                ],
                deal_list: [{
                    name: '销售金额(元)',
                    num: '96',
                    day: '22',
                },
                    {
                        name: '支付金额(元)',
                        num: '96',
                        day: '22',
                    },
                    {
                        name: '实收金额(元)',
                        num: '96',
                        day: '22',
                    },
                    {
                        name: '成功退款金额(元)',
                        num: '96',
                        day: '22',
                    },
                    {
                        name: '客单价(元)',
                        num: '96',
                        day: '22',
                    },
                ],
                vip_list: [{
                    name: '下单人数',
                    num: '96',
                    day: '22',
                },
                    {
                        name: '支付人数',
                        num: '96',
                        day: '22',
                    },
                    {
                        name: '售后人数',
                        num: '96',
                        day: '22',
                    },
                    {
                        name: '首购人数',
                        num: '96',
                        day: '22',
                    },
                    {
                        name: '复购人数',
                        num: '96',
                        day: '22',
                    },
                ],

                tableData: [{
                    rank: '01',
                    goods_id: '2',
                    goods_url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.sccnn.com%2Fbimg%2F338%2F23900.jpg&refer=http%3A%2F%2Fimg.sccnn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617950035&t=16c84034b404b5d4bc2ca155bf970aac',
                    goods_name: '3USB车载充电器',
                    shop_url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.sccnn.com%2Fbimg%2F338%2F23900.jpg&refer=http%3A%2F%2Fimg.sccnn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1617950035&t=16c84034b404b5d4bc2ca155bf970aac',
                    shop_name: '共和生鲜-老百姓最爱生鲜店',
                    num1: 10,
                }],

                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: '',

                browse_radio: 1,
                deal_radio: 1,
                vip_radio: 1,
            };
        },
        mounted() {
            this.loadData();
        },
        methods: {
            loadData() {
                //发送请求，拿到数据后处理
                this.initLineChart();
            },
            initLineChart() {
                var myChart = echarts.init(document.getElementById('line_chart'));
                myChart.setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['访问数', '销售金额', '下单人数']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisLabel: {
                            rotate: -45
                        },
                        data: ['2020-01-02', '2020-01-03', '2020-01-04', '2020-01-05', '2020-01-06', '2020-01-07', '2020-01-08', '2020-01-09', '2020-01-10', '2020-01-11', '2020-01-12']
                    },
                    yAxis: {
                        type: 'value',
                        nameTextStyle: {
                            borderWidth: 0
                        },
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            length: 0
                        }
                    },
                    series: [{
                        name: '访问数',
                        type: 'line',
                        data: [120, 132, 101, 134, 90, 230, 210, 1020, 600, 0]
                    },
                        {
                            name: '销售金额',
                            type: 'line',
                            data: [220, 182, 191, 234, 290, 330, 310, 681, 957, 430]
                        },
                        {
                            name: '下单人数',
                            type: 'line',
                            data: [150, 232, 201, 154, 190, 330, 410, 163, 1230, 547]
                        }
                    ]
                });

                window.addEventListener("resize", function() {
                    myChart.resize();
                });

            },
            dateChange() {
                console.log(this.value1, 'value1value1');
                //重新请求loadData方法
            },
            browsChange() {
                //单选框改变，再次发送请求图表的数据的接口
                console.log(this.browse_radio, 'browse_radiobrowse_radio');
            },
            dealChange() {
                //单选框改变，再次发送请求图表的数据的接口
                console.log(this.deal_radio, 'deal_radiodeal_radio');
            },
            vipChange() {
                //单选框改变，再次发送请求图表的数据的接口
                console.log(this.vip_radio, 'vip_radiovip_radio');
            },
            selectChange() {
                //门店选择
            },
        }
    });
</script>