elm-admin
/
dashboard.html

<div id="dashboard">
    <el-row :gutter="20">
        <el-col :span="6">
            <div class="grid-content">
                <div class="chart-title">
                    <label>总销售额</label>
                    <el-tooltip class="item" effect="dark" content="提示文字" placement="top">
                        <i class="el-icon-warning-outline"></i>
                    </el-tooltip>
                </div>
                <div class="chart-total">¥ 126,560</div>
                <div class="chart-content">
                    <ul>
                        <li>周同比<span class="pl-sm">12%</span><i class="el-icon-caret-top"></i></li>
                        <li>日同比<span class="pl-sm">16%</span><i class="el-icon-caret-bottom"></i></li>
                    </ul>
                </div>
                <div class="chart-footer">
                    <p> 日销售额 <span class="ml-sm">¥ 126,560</span> </p>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content">
                <div class="chart-title">
                    <label>访问量</label>
                    <el-tooltip class="item" effect="dark" content="提示文字" placement="top">
                        <i class="el-icon-warning-outline"></i>
                    </el-tooltip>
                </div>
                <div class="chart-total">8,848</div>
                <div class="chart-content">
                    <div class="chart" id="c1"></div>
                </div>
                <div class="chart-footer">
                    <p> 日访问量 <span class="ml-sm">1,234</span> </p>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content">
                <div class="chart-title">
                    <label>支付笔数</label>
                    <el-tooltip class="item" effect="dark" content="提示文字" placement="top">
                        <i class="el-icon-warning-outline"></i>
                    </el-tooltip>
                </div>
                <div class="chart-total">¥ 126,560</div>
                <div class="chart-content">
                    <div class="chart" id="c2"></div>
                </div>
                <div class="chart-footer">
                    <p> 转化率 <span class="ml-sm">60%</span> </p>
                </div>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="grid-content">
                <div class="chart-title">
                    <label>运营活动效果</label>
                    <el-tooltip class="item" effect="dark" content="提示文字" placement="top">
                        <i class="el-icon-warning-outline"></i>
                    </el-tooltip>
                </div>
                <div class="chart-total">¥ 126,560</div>
                <div class="chart-content">
                    <div class="chart" id="c3"></div>
                </div>
                <div class="chart-footer">
                    <p>
                        周同比<span class="pl-sm">12%</span><i class="el-icon-caret-top"></i> 日同比
                        <span class="pl-sm">16%</span><i class="el-icon-caret-bottom"></i>
                    </p>
                </div>
            </div>
        </el-col>
    </el-row>
    <el-row class="mt20" :gutter="20">
        <el-col :span="24">

            <div class="grid-content sales-volume">
                <div class="chart-date fr">
                    <el-date-picker type="daterange" size="small" v-model="chartDate" :picker-options="pickerOptions" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </div>
                <el-tabs class="chart-el-tabs" v-model="tabSelect">
                    <el-tab-pane label="销售额" name="first">
                        <el-row :gutter="20">
                            <el-col :span="17">
                                <h4>销售趋势</h4>
                                <div id="c4" class="salesvolume-chart">

                                </div>
                            </el-col>
                            <el-col :span="7">
                                <h4>门店销售额排名</h4>
                                <div class="salesvolume-list">
                                    <ul class="rank-list">
                                        <li class="ng-star-inserted" v-for="item in [1,2,3,4,5,6,7]">
                                            <span class="number" v-bind:class="{'active':(item<=3)}">{{item}}</span>
                                            <span class="title">工专路 0 号店</span>
                                            <span class="value">323,234</span>
                                        </li>
                                    </ul>
                                </div>
                            </el-col>
                        </el-row>


                    </el-tab-pane>
                    <el-tab-pane label="访问量" name="second">
                        <el-row :gutter="20">
                            <el-col :span="17">
                                <h4>访问量趋势</h4>
                                <div id="c5" class="salesvolume-chart">

                                </div>
                            </el-col>
                            <el-col :span="7">
                                <h4>门店访问量排名</h4>
                                <div class="salesvolume-list">
                                    <ul class="rank-list">
                                        <li class="ng-star-inserted" v-for="item in [1,2,3,4,5,6,7]">
                                            <span class="number" v-bind:class="{'active':(item<=3)}">{{item}}</span>
                                            <span class="title">工专路 0 号店</span>
                                            <span class="value">323,234</span>
                                        </li>
                                    </ul>
                                </div>
                            </el-col>
                        </el-row>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-col>
    </el-row>
    <el-row class="mt20" :gutter="20">
        <el-col :span="12">
            <div class="grid-content sales-volume"></div>
        </el-col>
        <el-col :span="12">
            <div class="grid-content sales-volume"></div>
        </el-col>
    </el-row>

    <el-row class="mt20" :gutter="20">
        <el-col :span="24">
            <div class="grid-content sales-volume"></div>
        </el-col>
    </el-row>
</div>
<script>
    new Vue({
        el: '#dashboard',
        data: function() {
            return {
                isCollapse: false,
                chartDate: '',
                tabSelect: 'first',
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                }
            };
        },
        methods: {
            change_collapse: function() {
                if (this.isCollapse) {
                    this.isCollapse = false;
                } else {
                    this.isCollapse = true;
                }
            }
        }
    });
    $(function() {
        $(document).pjax('a[data-pjax]', '#container', {
            cache: false,
            show: 'fade'
        });


        var data = [{
            'date': "2019-08-01",
            'value': 79
        }, {
            'date': "2019-08-02",
            'value': 59
        }, {
            'date': "2019-08-03",
            'value': 76
        }, {
            'date': "2019-08-04",
            'value': 100
        }, {
            'date': "2019-08-05",
            'value': 3
        }, {
            'date': "2019-08-06",
            'value': 79
        }, {
            'date': "2019-08-07",
            'value': 59
        }, {
            'date': "2019-08-08",
            'value': 76
        }, {
            'date': "2019-08-09",
            'value': 100
        }, {
            'date': "2019-08-10",
            'value': 3
        }, {
            'date': "2019-08-11",
            'value': 79
        }, {
            'date': "2019-08-12",
            'value': 59
        }, {
            'date': "2019-08-13",
            'value': 76
        }, {
            'date': "2019-08-14",
            'value': 100
        }, {
            'date': "2019-08-15",
            'value': 3
        }, {
            'date': "2019-08-16",
            'value': 79
        }, {
            'date': "2019-08-17",
            'value': 59
        }, {
            'date': "2019-08-18",
            'value': 76
        }, {
            'date': "2019-08-19",
            'value': 100
        }, {
            'date': "2019-08-20",
            'value': 3
        }];
        setTimeout(function() {
            createMiniLineChart(data);
            createBarChart(data);
            createLineChart(data);
            createLineChart4("c4", data);
            createLineChart4("c5", data);

        }, 1000);

    });

    function createBarChart(data) {
        var chart = new G2.Chart({
            container: "c2",
            forceFit: true,
            height: 46,
            padding: [10, 10, 10, 10]
        });
        chart.source(data);
        chart.legend(false);
        chart.axis(false);
        chart.interval().position('date*value').opacity(1).tooltip("date*value", (date, value) => {
            return {
                date,
                value
            };
        });

        chart.render();
    }

    function createMiniLineChart(data) {
        var chart = new G2.Chart({
            container: 'c1',
            forceFit: true,
            height: 46,
            padding: [10, 10, 10, 10]
        });
        chart.source(data);
        chart.legend(false);
        chart.axis(false);
        // chart.tooltip(true, {
        //     showTitle: false // 默认标题不显示
        // });
        chart.area().position('date*value').shape('smooth').opacity(0.2);
        chart.line().position('date*value').opacity(1).shape('smooth');
        chart.render();
    }

    function createLineChart(data) {
        var chart = new G2.Chart({
            container: 'c3',
            forceFit: true,
            height: 46,
            padding: [10, 10, 10, 10]
        });
        chart.source(data);
        chart.legend(false);
        chart.axis(false);
        // chart.tooltip(true, {
        //     showTitle: false // 默认标题不显示
        // });
        chart.line().position('date*value').opacity(1).shape('smooth');
        chart.render();
    }

    function createLineChart4(container, data) {
        var chart = new G2.Chart({
            container: container,
            forceFit: true,
            height: 300,
            padding: [50, 10, 30, 60]
        });
        chart.source(data);
        chart.scale('sales', {
            tickInterval: 20
        });
        chart.interval().position('date*value');
        chart.render();
    }
</script>