上个小节我们写好了后端查询图表数据的代码，既有三个环形图用的数据，也有面积图用的数据。所以这节课，咱们把这些数据展示到新的标签页面上。

一、跳转到图表标签页面

在amect.vue页面上，有“查看报告”按钮，只有用户具备ROOT或者AMECT:SELECT权限的时候，才可以点击这个按钮。

<el-button
    size="medium"
    type="warning"
    :disabled="!isAuth(['ROOT', 'AMECT:SELECT'])"
    @click="reportHandle()"
>
    查看报告
</el-button>

按钮的回调函数我们要实现了，创建reportHandle()函数。

reportHandle: function() {
    this.$router.push({ name: 'AmectReport' });
}

在router/index.js文件中，定义了amect_report.vue页面的路由信息，页面的名字叫做AmectReport，所以上面的跳转语句自然就能执行的通。

{
    path: '/amect_report',
    name: 'AmectReport',
    component: AmectReport,
    meta: {
        title: '违纪报告',
        isTab: true
    }
},

二、熟悉图表页面

amect_report.vue页面的内容并不复杂，除了查询条件控件之外，就是用于显示图表的DIV控件了。

<template>
    <div>
        <el-form :inline="true" :model="dataForm" :rules="dataRule" ref="dataForm">
            <el-form-item>
                <el-select
                    v-model="dataForm.deptId"
                    class="input"
                    placeholder="部门"
                    size="medium"
                    clearable="clearable"
                >
                    <el-option v-for="one in deptList" :label="one.deptName" :value="one.id" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select
                    v-model="dataForm.typeId"
                    class="input"
                    placeholder="罚款类型"
                    size="medium"
                    clearable="clearable"
                >
                    <el-option v-for="one in amectTypeList" :label="one.type" :value="one.id" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-date-picker
                    v-model="dataForm.date"
                    type="daterange"
                    range-separator="~"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    size="medium"
                ></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button size="medium" type="primary" @click="searchHandle()">生成报表</el-button>
            </el-form-item>
        </el-form>
        <div id="chart-container">
            <el-row :gutter="100">
                <el-col :span="8"><div class="chart" id="chart-1"></div></el-col>
                <el-col :span="8"><div class="chart" id="chart-2"></div></el-col>
                <el-col :span="8"><div class="chart" id="chart-3"></div></el-col>
            </el-row>
            <el-row>
                <el-col :span="24"><div id="chart-4"></div></el-col>
            </el-row>
        </div>
    </div>
</template>

页面模型层部分的代码也不多，除了dataForm用来存储查询条件之外，还有就是下拉列表的数据。

data: function() {
    return {
        dataForm: {
            deptId: null,
            typeId: null,
            date: null
        },
        deptList: [],
        amectTypeList: [],
        dataList: []
    };
},

三、查询列表数据

在页面中有罚款类型列表和部门列表的数据需要用Ajax查询，所以我们把这些代码给封装起来。

loadDeptList: function() {
    let that = this;
    that.$http('dept/searchAllDept', 'GET', null, true, function(resp) {
        that.deptList = resp.list;
    });
},
loadAmectTypeList: function() {
    let that = this;
    that.$http('amect_type/searchAllAmectType', 'GET', {}, true, function(resp) {
        that.amectTypeList = resp.list;
    });
},

四、查询Chart图表数据

查询Chart图表的代码我们也要封装起来，并且还要对获取的chart数据加以改造才能用在Echarts上面。

loadDataList: function() {
    let that = this;
    that.dataListLoading = true;
    let data = {
        deptId: that.dataForm.deptId,
        typeId: that.dataForm.typeId
    };
    if (that.dataForm.date != null && that.dataForm.date.length == 2) {
        let startDate = that.dataForm.date[0];
        let endDate = that.dataForm.date[1];
        data.startDate = dayjs(startDate).format('YYYY-MM-DD');
        data.endDate = dayjs(endDate).format('YYYY-MM-DD');
    }
    that.$http('amect/searchChart', 'POST', data, true, function(resp) {
        let chart_1 = resp.chart_1;
        let temp = [];
        for (let one of chart_1) {
            temp.push({ name: one.type, value: one.ct });
        }
        // 绘制图表
        let option_1 = {
            title: {
                show: false,
                text: '暂无数据',
                left: 'center',
                top: 'center',
                textStyle: {
                    color: 'pink',
                    fontSize: 16,
                    fontWeight: 400
                }
            },
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '罚款类型',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        formatter: '{name|{b}}',
                        rich: {
                            time: {
                                fontSize: 12,
                                color: '#999'
                            }
                        }
                    },
                    data: temp
                }
            ]
        };
        let myChart = null;
        if (temp == null || temp.length == 0) {
            option_1.title.show = true;
            myChart = that.$echarts.init($('#chart-1')[0]);
            myChart.setOption(option_1);
        } else {
            myChart = that.$echarts.init($('#chart-1')[0]);
            myChart.setOption(option_1);
        }
        let chart_2 = resp.chart_2;
        temp = [];
        for (let one of chart_2) {
            if (one.ct > 0) {
                temp.push({ name: one.title, value: one.ct });
            }
        }
        let option_2 = {
            title: {
                show: false,
                text: '暂无数据',
                left: 'center',
                top: 'center',
                textStyle: {
                    color: 'pink',
                    fontSize: 16,
                    fontWeight: 400
                }
            },
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '罚款类型',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        formatter: '{name|{b}}',
                        rich: {
                            time: {
                                fontSize: 12,
                                color: '#999'
                            }
                        }
                    },
                    data: temp
                }
            ]
        };
        if (temp == null || temp.length == 0) {
            option_2.title.show = true;
            myChart = that.$echarts.init($('#chart-2')[0]);
            myChart.setOption(option_2);
        } else {
            myChart = that.$echarts.init($('#chart-2')[0]);
            myChart.setOption(option_2);
        }
        let chart_3 = resp.chart_3;
        temp = [];
        for (let one of chart_3) {
            if (one.ct > 0) {
                temp.push({ name: one.title, value: one.ct });
            }
        }
        let option_3 = {
            title: {
                show: false,
                text: '暂无数据',
                left: 'center',
                top: 'center',
                textStyle: {
                    color: 'pink',
                    fontSize: 16,
                    fontWeight: 400
                }
            },
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: '罚款类型',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        formatter: '{name|{b}}',
                        rich: {
                            time: {
                                fontSize: 12,
                                color: '#999'
                            }
                        }
                    },
                    data: temp
                }
            ]
        };
        if (temp == null || temp.length == 0) {
            option_3.title.show = true;
            myChart = that.$echarts.init($('#chart-3')[0]);
            myChart.setOption(option_3);
        } else {
            myChart = that.$echarts.init($('#chart-3')[0]);
            myChart.setOption(option_3);
        }
        console.log(resp);
        let chart_4_1 = resp.chart_4_1;
        let data_1 = [];
        for (let one of chart_4_1) {
            data_1.push(one.ct);
        }
        let chart_4_2 = resp.chart_4_2;
        let data_2 = [];
        for (let one of chart_4_2) {
            data_2.push(one.ct);
        }
        let option_4 = {
            title: {
                text: '全年违纪统计图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['已交费', '未交费']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: [
                        '1月',
                        '2月',
                        '3月',
                        '4月',
                        '5月',
                        '6月',
                        '7月',
                        '8月',
                        '9月',
                        '10月',
                        '11月',
                        '12月'
                    ]
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '已交费',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    smooth: true,
                    data: data_1
                },
                {
                    name: '未交费',
                    type: 'line',
                    stack: '总量',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    smooth: true,
                    data: data_2
                }
            ]
        };
        myChart = that.$echarts.init($('#chart-4')[0]);
        myChart.setOption(option_4);
    });
},

在created()函数中，我们要调用封装好的这些方法。

created: function() {
    this.loadDeptList();
    this.loadAmectTypeList();
    this.loadDataList();
}

四、执行有条件查询

在amect_report.vue页面上，可以执行有条件的查询，按钮标签如下。

<el-button size="medium" type="primary" @click="searchHandle()">生成报表</el-button>

按钮点击事件回调函数是searchHandle()，我们发起Ajax查询请求。

searchHandle: function() {
    this.$refs['dataForm'].validate(valid => {
        if (valid) {
            this.$refs['dataForm'].clearValidate();
            this.loadDataList();
        } else {
            return false;
        }
    });
}