<template>
    <div class="wrap bigscreen">
        <el-tabs class="tabs-style" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="数据视图" v-loading="loading" name="first">
                <div class="inner">
                    <div class="mc-title">前台</div>
                    <div class="mc-right-select">
                        <el-select v-model="topType" @change="topTypeEvent" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.dataName"
                                :value="item.dataCode">
                            </el-option>
                        </el-select>
                    </div>
                    <el-col>
                        <el-col :span="8">
                            <div class="echart-total">
                                <span class="num-style">{{ topLeftTotal }}</span>
                                <span class="translate">次</span>
                            </div>
                            <div class="both-height">
                                日视图
                                <el-time-select v-model="topTime" @change="topTimeEvent" :picker-options="{
                    start: '07:00',
                    step: '00:60',
                    end: '22:00',
                  }" placeholder="选择时间">
                                </el-time-select>
                            </div>
                            <el-date-picker style="height: 0; overflow: hidden" ref="picker" v-model="topValue"
                                type="date" placeholder="选择日期" @change="checkTopTime" value-format="yyyy-MM-dd">
                            </el-date-picker>
                            <div id="echarts-pies" class="echarts-style"></div>
                        </el-col>
                        <el-col :span="16">
                            <div class="echart-total">
                                <span class="num-style">{{ topRightTotal }}</span>
                                <span class="translate">次</span>
                            </div>
                            <div class="both-height">近60日视图</div>
                            <div id="echarts-Line" class="echarts-style"></div>
                        </el-col>
                    </el-col>
                </div>
                <div class="inner" style="margin-top: 20px">
                    <div class="mc-title">电子渠道</div>
                    <div class="mc-right-select">
                        <el-select v-model="bottomType" @change="bottomTypeEvent" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.dataName"
                                :value="item.dataCode">
                            </el-option>
                        </el-select>
                    </div>
                    <el-col>
                        <el-col :span="8">
                            <div class="echart-total">
                                <span class="num-style">{{ bottomLeftTotal }}</span>
                                <span class="translate">次</span>
                            </div>
                            <div class="both-height">
                                日视图
                                <el-time-select v-model="bottomTime" :picker-options="{
                    start: '07:00',
                    step: '00:60',
                    end: '22:00',
                  }" @change="bottomTimeEvent" placeholder="选择时间">
                                </el-time-select>
                            </div>
                            <el-date-picker style="height: 0; overflow: hidden" ref="picker1" v-model="bottomValue"
                                type="date" placeholder="选择日期" @change="checkBottomTime" value-format="yyyy-MM-dd">
                            </el-date-picker>
                            <div id="bottom-echarts-pies" class="echarts-style"></div>
                        </el-col>
                        <el-col :span="16">
                            <div class="echart-total">
                                <span class="num-style">{{ bottomRightTotal }}</span>
                                <span class="translate">次</span>
                            </div>
                            <div class="both-height">近60日视图</div>
                            <div id="bottom-echarts-Line" class="echarts-style"></div>
                        </el-col>
                    </el-col>
                </div>
            </el-tab-pane>
            <el-tab-pane label="表格视图" v-loading="loading" name="second">
                <div class="inner">
                    <div style="overflow: hidden">
                        <div class="mc-title">业务量比较</div>
                        <el-date-picker style="float: right" v-model="timeRange" type="daterange" range-separator="至 "
                            start-placeholder="开始日期" end-placeholder="结束日期" @change="dateRange"
                            value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </div>
                    <el-table :data="tableData" height="calc(100% - 100px)" style="width: 100%; margin-top: 15px">
                        <el-table-column prop="time" label="时间" align="center" width="150">
                        </el-table-column>
                        <el-table-column prop="name" label="开户" align="center">
                            <el-table-column prop="province" label="前台" align="center">
                                <el-table-column prop="qtKhFirstVal" :label="today" align="center">
                                </el-table-column>
                                <el-table-column prop="qtKhSecondValue" :label="yesday" align="center">
                                </el-table-column>
                                <el-table-column prop="qtKhChageValue" label="变化" align="center" :formatter="formatter">
                                </el-table-column>
                            </el-table-column>
                            <el-table-column prop="city" label="电子渠道" align="center">
                                <el-table-column prop="dzKhFirstValue" :label="today" align="center">
                                </el-table-column>
                                <el-table-column prop="dzKhSecondValue" :label="yesday" align="center">
                                </el-table-column>
                                <el-table-column prop="dzKhChageValue" label="变化" align="center" :formatter="formatter">
                                </el-table-column>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column prop="name" label="营销" align="center">
                            <el-table-column prop="province" label="前台" align="center">
                                <el-table-column prop="qtYxFirstVal" :label="today" align="center">
                                </el-table-column>
                                <el-table-column prop="qtYxSecondValue" :label="yesday" align="center">
                                </el-table-column>
                                <el-table-column prop="qtYxChageValue" label="变化" align="center" :formatter="formatter">
                                </el-table-column>
                            </el-table-column>
                            <el-table-column prop="city" label="电子渠道" align="center">
                                <el-table-column prop="dzYxFirstValue" :label="today" align="center">
                                </el-table-column>
                                <el-table-column prop="dzYxSecondValue" :label="yesday" align="center">
                                </el-table-column>
                                <el-table-column prop="dzYxChageValue" label="变化" align="center" :formatter="formatter">
                                </el-table-column>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column prop="name" label="商品受理" align="center">
                            <el-table-column prop="province" label="前台" align="center">
                                <el-table-column prop="qtSpFirstVal" :label="today" align="center">
                                </el-table-column>
                                <el-table-column prop="qtSpSecondValue" :label="yesday" align="center">
                                </el-table-column>
                                <el-table-column prop="qtSpChageValue" label="变化" align="center" :formatter="formatter">
                                </el-table-column>
                            </el-table-column>
                            <el-table-column prop="city" label="电子渠道" align="center">
                                <el-table-column prop="dzSpFirstValue" :label="today" align="center">
                                </el-table-column>
                                <el-table-column prop="dzSpSecondValue" :label="yesday" align="center">
                                </el-table-column>
                                <el-table-column prop="dzSpChageValue" label="变化" align="center" :formatter="formatter">
                                </el-table-column>
                            </el-table-column>
                        </el-table-column>
                        <el-table-column prop="name" label="缴费" align="center">
                            <el-table-column prop="province" label="前台" align="center">
                                <el-table-column prop="qtJfFirstVal" :label="today" align="center">
                                </el-table-column>
                                <el-table-column prop="qtJfSecondValue" :label="yesday" align="center">
                                </el-table-column>
                                <el-table-column prop="qtJfChageValue" label="变化" align="center" :formatter="formatter">
                                </el-table-column>
                            </el-table-column>
                            <el-table-column prop="city" label="电子渠道" align="center">
                                <el-table-column prop="dzJfFirstValue" :label="today" align="center">
                                </el-table-column>
                                <el-table-column prop="dzJfSecondValue" :label="yesday" align="center">
                                </el-table-column>
                                <el-table-column prop="dzJfChageValue" label="变化" align="center" :formatter="formatter">
                                </el-table-column>
                            </el-table-column>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
    import echarts from "echarts";
    export default {
        data() {
            return {
                loading: false,
                topValue: "", // 柱状图点击时间值
                bottomValue: "",
                topTime: "", // 前台时间
                bottomTime: "", // 渠道时间
                topTimeList: [], // 前台日期
                topType: "0000",
                bottomType: "0000",
                bottomTimeList: [], // 渠道日期
                tableData: [{
                        date: "2016-05-03",
                        name: "王小虎",
                        province: "上海",
                        city: "普陀区",
                        address: "上海市普陀区金沙江路 1518 弄",
                        zip: 200333,
                    },
                    {
                        date: "2016-05-02",
                        name: "王小虎",
                        province: "上海",
                        city: "普陀区",
                        address: "上海市普陀区金沙江路 1518 弄",
                        zip: 200333,
                    },
                    {
                        date: "2016-05-04",
                        name: "王小虎",
                        province: "上海",
                        city: "普陀区",
                        address: "上海市普陀区金沙江路 1518 弄",
                        zip: 200333,
                    },
                    {
                        date: "2016-05-01",
                        name: "王小虎",
                        province: "上海",
                        city: "普陀区",
                        address: "上海市普陀区金沙江路 1518 弄",
                        zip: 200333,
                    },
                    {
                        date: "2016-05-08",
                        name: "王小虎",
                        province: "上海",
                        city: "普陀区",
                        address: "上海市普陀区金沙江路 1518 弄",
                        zip: 200333,
                    },
                    {
                        date: "2016-05-06",
                        name: "王小虎",
                        province: "上海",
                        city: "普陀区",
                        address: "上海市普陀区金沙江路 1518 弄",
                        zip: 200333,
                    },
                    {
                        date: "2016-05-07",
                        name: "王小虎",
                        province: "上海",
                        city: "普陀区",
                        address: "上海市普陀区金沙江路 1518 弄",
                        zip: 200333,
                    },
                ],
                topLeftTotal: 0,
                bottomLeftTotal: 0,
                topRightTotal: 0,
                bottomRightTotal: 0,
                activeName: "first",
                options: [],
                dataIndex: "",
                timeRange: "",
                today: "今日",
                yesday: "昨日",
            };
        },
        methods: {
            formatter(row, column, cellValue, index) {
                return cellValue + "%";
            },
            dateRange(val) {
                this.getTableData();
                if (val == null) {
                    this.today = "今日";
                    this.yesday = "昨日";
                } else {
                    this.today = val[1];
                    this.yesday = val[0];
                }
            },
            getTableData() {
                this.loading = true;
                this.$http({
                    url: "/sysmgr/cbusi/queryCompList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {
                        firstTime: this.timeRange != "" && this.timeRange != null ?
                            this.timeRange[1] : "",
                        secondTime: this.timeRange != "" && this.timeRange != null ?
                            this.timeRange[0] : "",
                    },
                }).then((res) => {
                    this.loading = false;
                    this.tableData = res.data.data;
                });
            },
            // 获取下拉框选项
            getOpations() {
                this.$http({
                    url: "/market/cfgDataDict/queryList",
                    method: "post",
                    headers: {
                        "Content-Type": "application/json",
                    },
                    data: {
                        dictCode: "func",
                    },
                }).then((res) => {
                    this.options = res.data;
                });
            },
            // 上部分类型切换
            topTypeEvent(val) {
                this.getTopBarData();
                this.getTopLineData();
            },
            // 下部分类型切换
            bottomTypeEvent(val) {
                this.getBottomLineData();
                this.getBottomBarData();
            },
            // 上部分时间切换
            topTimeEvent(val) {
                this.getTopBarData();
            },
            // 下部分时间切换
            bottomTimeEvent(val) {
                this.getBottomBarData();
            },
            // 上部分柱状图数据
            getTopBarData() {
                return new Promise((resolve, reject) => {
                    this.$http({
                        url: "/sysmgr/cbusi/queryCylList",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        data: {
                            time: this.topTime ? this.topTime + ":00" : this.topTime,
                            type: this.topType,
                            channel: "前台",
                            date: this.topTimeList,
                        },
                    }).then((res) => {
                        resolve(res);
                        let list = [];
                        res.data.data.map((item) => {
                            list.push(item.day);
                        });
                        this.topTimeList = list;
                        this.initTopBar(res.data.data, list);
                        this.topLeftTotal = res.data.total;
                    });
                });
            },
            // 上部分折线图数据
            getTopLineData() {
                return new Promise((resolve, reject) => {
                    this.$http({
                        url: "/sysmgr/cbusi/queryCurList",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        data: {
                            type: this.topType,
                            channel: "前台",
                        },
                    }).then((res) => {
                        resolve(res);
                        let list = [];
                        let data = res.data.data.reverse();
                        data.map((item) => {
                            list.push(item.day);
                        });
                        this.initTopLine(data, list);
                        this.topRightTotal = res.data.total;
                    });
                });
            },
            // 下部分折线图数据
            getBottomLineData() {
                return new Promise((resolve, reject) => {
                    this.$http({
                        url: "/sysmgr/cbusi/queryCurList",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        data: {
                            type: this.bottomType,
                            channel: "电子渠道",
                        },
                    }).then((res) => {
                        resolve(res);
                        let list = [];
                        let data = res.data.data.reverse();
                        data.map((item) => {
                            list.push(item.day);
                        });
                        this.initBottomLine(data, list);
                        this.bottomRightTotal = res.data.total;
                    });
                });
            },
            // 下部分柱状图数据
            getBottomBarData() {
                return new Promise((resolve, reject) => {
                    this.$http({
                        url: "/sysmgr/cbusi/queryCylList",
                        method: "post",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        data: {
                            time: this.bottomTime ? this.bottomTime + ":00" : this.bottomTime,
                            type: this.bottomType,
                            channel: "电子渠道",
                            date: this.bottomTimeList,
                        },
                    }).then((res) => {
                        let list = [];
                        resolve(res);
                        res.data.data.map((item) => {
                            list.push(item.day);
                        });
                        this.bottomTimeList = list;
                        this.initBottomBar(res.data.data, list);
                        this.bottomLeftTotal = res.data.total;
                    });
                });
            },
            // 上部分点击柱状体日期切换
            checkTopTime(value) {
                this.topTimeList[this.dataIndex] = value;
                this.getTopBarData();
            },
            // 下部分点击柱状体日期切换
            checkBottomTime(value) {
                this.bottomTimeList[this.dataIndex] = value;
                this.getBottomBarData();
            },
            // tab切换事件
            handleClick(tab, event) {
                if (tab.name == "first") {
                    this.getAllAjax();
                    this.topTimeList = [];
                    this.bottomTimeList = [];
                } else {
                    this.getTableData();
                }
            },
            // 初始化上部分柱状图
            initTopBar(data, xData) {
                let _this = this;
                let myChart = echarts.init(document.getElementById("echarts-pies"));
                let colorArr = [
                    "#0081CC", //黄色
                    "#62DAAA", //蓝色
                    "#657797", //蓝色
                ];

                myChart.setOption({
                    tooltip: {
                        formatter: function(params) {
                            return `<div>
              ${params.name}
              <div style="overflow:hidden"><div style="float:left;text-align:left">办理量</div><div style="float:left;text-align:right;margin-left:20px">
              ${params.data.value}

             ${
               params.data.change == null
                 ? ""
                 : `</div></div><div style="float:hidden"><div style="float:left;text-align:left">变化率</div><div style="float:left;text-align:right;margin-left:20px">${params.data.change}%`
             }
              </div></div>`;
                        },
                        extraCssText: "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
                        axisPointer: {
                            // 悬停显示块级
                            type: "shadow",
                            shadowStyle: {
                                color: "#ffffff",
                                shadowColor: "rgba(225,225,225,1)",
                                shadowBlur: 5,
                            },
                        },
                    },
                    backgroundColor: "#fff",
                    grid: {
                        left: "0",
                        right: "25",
                        bottom: "15",
                        top: "10",
                        containLabel: true,
                    },
                    xAxis: [{
                        type: "category",
                        color: "#59588D",
                        data: xData,
                        axisLabel: {
                            color: "#999",
                            textStyle: {
                                fontSize: 12,
                            },
                        },
                        triggerEvent: true,
                        splitLine: {
                            show: false,
                        },
                        axisLine: {
                            lineStyle: {
                                color: "rgba(107,107,107,0.37)",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    }, ],
                    yAxis: [{
                        axisLabel: {
                            color: "#999",
                            textStyle: {
                                fontSize: 12,
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                color: "rgba(107,107,107,0.37)",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(131,101,101,0.2)",
                                type: "dashed",
                            },
                        },
                    }, ],
                    series: {
                        type: "bar",
                        data: data,
                        barWidth: "30px",
                        barMinHeight: 2,
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    return colorArr[params.dataIndex];
                                },
                            },
                        },
                        label: {
                            normal: {
                                show: false,
                                fontSize: 18,
                                fontWeight: "bold",
                                color: "#333",
                                position: "top",
                            },
                        },
                    },
                });
                window.addEventListener("resize", function() {
                    myChart.resize();
                });
                myChart.on("click", function(param) {
                    _this.dataIndex = param.dataIndex;
                    _this.$refs.picker.$el.style.left = param.event.offsetX + "px";
                    _this.$refs.picker.$el.style.top = param.event.offsetY + "px";
                    _this.$refs.picker.focus();
                });
            },
            // 初始化上部分折线图
            initTopLine(data, xData) {
                let color = [
                    "#0090FF",
                    "#36CE9E",
                    "#FFC005",
                    "#FF515A",
                    "#8B5CFF",
                    "#00CA69",
                ];
                const hexToRgba = (hex, opacity) => {
                    let rgbaColor = "";
                    let reg = /^#[\da-f]{6}$/i;
                    if (reg.test(hex)) {
                        rgbaColor =
                            `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
            "0x" + hex.slice(3, 5)
          )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
                    }
                    return rgbaColor;
                };
                let myChart = echarts.init(document.getElementById("echarts-Line"));
                myChart.setOption({
                    backgroundColor: "#fff",
                    color: ["#73A0FA", "#73DEB3", "#FFB761"],
                    tooltip: {
                        trigger: "axis",
                        formatter: function(params) {
                            return `<div>
              ${params[0].name}
              <div style="overflow:hidden"><div style="float:left;text-align:left">办理量</div><div style="float:left;text-align:right;margin-left:20px">
              ${params[0].data.value}

             ${
               params[0].data.change == null
                 ? ""
                 : `</div></div><div style="float:hidden"><div style="float:left;text-align:left">变化率</div><div style="float:left;text-align:right;margin-left:20px">${params[0].data.change}%`
             }
              </div></div>`;
                        },
                        extraCssText: "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
                    },
                    grid: {
                        left: "25",
                        right: "25",
                        bottom: "0",
                        top: "10",
                        containLabel: true,
                    },
                    xAxis: {
                        type: "category",
                        data: xData,
                        show: false,
                        splitLine: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: false,
                        },
                    },
                    yAxis: {
                        type: "value",
                        axisLabel: {
                            color: "#999",
                            textStyle: {
                                fontSize: 12,
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "#F3F4F4",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                        },
                    },
                    series: {
                        name: "钱包笔数",
                        type: "line",
                        smooth: true,
                        showSymbol: false,
                        // symbolSize: 1,
                        zlevel: 3,
                        lineStyle: {
                            normal: {
                                color: color[0],
                                shadowBlur: 3,
                                shadowColor: hexToRgba(color[0], 0.5),
                                shadowOffsetY: 8,
                            },
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [{
                                            offset: 0,
                                            color: hexToRgba(color[0], 0.3),
                                        },
                                        {
                                            offset: 1,
                                            color: hexToRgba(color[0], 0.1),
                                        },
                                    ],
                                    false
                                ),
                                shadowColor: hexToRgba(color[0], 0.1),
                                shadowBlur: 10,
                            },
                        },
                        data: data,
                    },
                });
                window.addEventListener("resize", function() {
                    myChart.resize();
                });
            },
            // 初始化下部份柱状图
            initBottomBar(data, xData) {
                let myChart = echarts.init(
                    document.getElementById("bottom-echarts-pies")
                );
                let colorArr = [
                    "#0081CC", //黄色
                    "#62DAAA", //蓝色
                    "#657797", //蓝色
                ];
                myChart.setOption({
                    tooltip: {
                        formatter: function(params) {
                            return `<div>
              ${params.name}
              <div style="overflow:hidden"><div style="float:left;text-align:left">办理量</div><div style="float:left;text-align:right;margin-left:20px">
              ${params.data.value}

             ${
               params.data.change == null
                 ? ""
                 : `</div></div><div style="float:hidden"><div style="float:left;text-align:left">变化率</div><div style="float:left;text-align:right;margin-left:20px">${params.data.change}%`
             }
              </div></div>`;
                        },
                        extraCssText: "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
                        axisPointer: {
                            // 悬停显示块级
                            type: "shadow",
                            shadowStyle: {
                                color: "#ffffff",
                                shadowColor: "rgba(225,225,225,1)",
                                shadowBlur: 5,
                            },
                        },
                    },
                    backgroundColor: "#fff",
                    grid: {
                        left: "0",
                        right: "25",
                        bottom: "15",
                        top: "10",
                        containLabel: true,
                    },
                    xAxis: [{
                        type: "category",
                        color: "#59588D",
                        data: xData,
                        axisLabel: {
                            color: "#999",
                            textStyle: {
                                fontSize: 12,
                            },
                        },
                        triggerEvent: true,
                        splitLine: {
                            show: false,
                        },
                        axisLine: {
                            lineStyle: {
                                color: "rgba(107,107,107,0.37)",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                    }, ],
                    yAxis: [{
                        axisLabel: {
                            color: "#999",
                            textStyle: {
                                fontSize: 12,
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                color: "rgba(107,107,107,0.37)",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            lineStyle: {
                                color: "rgba(131,101,101,0.2)",
                                type: "dashed",
                            },
                        },
                    }, ],
                    series: {
                        type: "bar",
                        data: data,
                        barWidth: "30px",
                        barMinHeight: 2,
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    return colorArr[params.dataIndex];
                                },
                            },
                        },
                        label: {
                            normal: {
                                show: false,
                                fontSize: 18,
                                fontWeight: "bold",
                                color: "#333",
                                position: "top",
                            },
                        },
                    },
                });
                window.addEventListener("resize", function() {
                    myChart.resize();
                });
                let _this = this;
                myChart.on("click", function(param) {
                    _this.dataIndex = param.dataIndex;
                    _this.$refs.picker1.$el.style.left = param.event.offsetX + "px";
                    _this.$refs.picker1.$el.style.top = param.event.offsetY + "px";
                    _this.$refs.picker1.focus();
                });
            },
            // 初始化下部分折线图
            initBottomLine(data, xData) {
                let color = [
                    "#0090FF",
                    "#36CE9E",
                    "#FFC005",
                    "#FF515A",
                    "#8B5CFF",
                    "#00CA69",
                ];
                const hexToRgba = (hex, opacity) => {
                    let rgbaColor = "";
                    let reg = /^#[\da-f]{6}$/i;
                    if (reg.test(hex)) {
                        rgbaColor =
                            `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
            "0x" + hex.slice(3, 5)
          )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
                    }
                    return rgbaColor;
                };
                let myChart = echarts.init(
                    document.getElementById("bottom-echarts-Line")
                );
                myChart.setOption({
                    backgroundColor: "#fff",
                    color: ["#73A0FA", "#73DEB3", "#FFB761"],
                    tooltip: {
                        trigger: "axis",
                        formatter: function(params) {
                            return `<div>
              ${params[0].name}
              <div style="overflow:hidden"><div style="float:left;text-align:left">办理量</div><div style="float:left;text-align:right;margin-left:20px">
              ${params[0].data.value}

             ${
               params[0].data.change == null
                 ? ""
                 : `</div></div><div style="float:hidden"><div style="float:left;text-align:left">变化率</div><div style="float:left;text-align:right;margin-left:20px">${params[0].data.change}%`
             }
              </div></div>`;
                        },
                        extraCssText: "background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;",
                    },
                    grid: {
                        left: "25",
                        right: "25",
                        bottom: "0",
                        top: "10",
                        containLabel: true,
                    },
                    xAxis: {
                        type: "category",
                        data: xData,
                        splitLine: {
                            show: false,
                        },
                        show: false,
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                        },
                    },
                    yAxis: {
                        type: "value",
                        axisLabel: {
                            color: "#999",
                            textStyle: {
                                fontSize: 12,
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: "#F3F4F4",
                            },
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                        },
                    },
                    series: {
                        name: "钱包笔数",
                        type: "line",
                        smooth: true,
                        showSymbol: false,
                        // symbolSize: 1,
                        zlevel: 3,
                        lineStyle: {
                            normal: {
                                color: color[0],
                                shadowBlur: 3,
                                shadowColor: hexToRgba(color[0], 0.5),
                                shadowOffsetY: 8,
                            },
                        },
                        areaStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [{
                                            offset: 0,
                                            color: hexToRgba(color[0], 0.3),
                                        },
                                        {
                                            offset: 1,
                                            color: hexToRgba(color[0], 0.1),
                                        },
                                    ],
                                    false
                                ),
                                shadowColor: hexToRgba(color[0], 0.1),
                                shadowBlur: 10,
                            },
                        },
                        data: data,
                    },
                });
                window.addEventListener("resize", function() {
                    myChart.resize();
                });
            },
            // 初始化所有请求loading
            getAllAjax() {
                this.loading = true;
                Promise.all([
                        this.getTopBarData(),
                        this.getBottomBarData(),
                        this.getTopLineData(),
                        this.getBottomLineData(),
                    ])
                    .then((result) => {
                        this.loading = false;
                    })
                    .catch((error) => {
                        console.log(error); // 失败了，打出 '失败'
                        this.loading = false;
                    });
            },
        },
        mounted() {
            this.getOpations();
            this.getAllAjax();
        },
    };
</script>
<style scoped>
    .el-table--border {
        overflow: auto;
    }

    .el-tabs__content {
        width: calc(100% + 40px);
        height: 95%;
        overflow-y: scroll;
        padding-right: 20px;
    }

    .el-date-editor .el-range-separator {
        width: 7% !important;
    }
</style>
<style lang="scss" scoped>
    .wrap {
        padding: 0px 15px 15px 15px;
        height: 100%;

        .tabs-style {
            box-sizing: border-box !important;
            margin: 0;
            height: calc(100vh - 120px);
            overflow-x: hidden;
            width: 100%;
        }

        .inner {
            background-color: white;
            padding: 20px;
            overflow: hidden;

            // height: calc(100vh - 120px);
            .mc-title {
                font-size: 20px;
                float: left;
            }

            .mc-right-select {
                float: right;
            }

            .echarts-style {
                background-color: #ffffff;
                height: 300px;
                padding: 10px;
            }

            .num-style {
                font-size: 24px;
                font-weight: 400;
            }

            .translate {
                font-size: 14px;
            }

            .both-height {
                height: 45px;
                line-height: 45px;
            }
        }
    }
</style>
<style>
    .bigscreen .el-tabs__header {
        margin: 0 !important;
    }

    .bigscreen .el-tabs__nav {
        float: right;
    }

    .bigscreen .el-table thead.is-group th {
        background-color: white !important;
    }
</style>
