首页图表优化

front-vue/src/views/home.vue

@@ -162,45 +162,72 @@
                     <el-col>
                         <div class="zap-home-chart__title">平台资金统计</div>
                         <div id="echartPie" style="width: 100%;height: 490px"></div>
-                        <!-- <echart-pie :series-data="financeAmountList" :extra-option="extraOption"/> -->
                     </el-col>
                 </el-row>
                     
-                <el-card class="box-card" style="width:93%;margin:0.6%;float:left;">
-                    <div slot="header" class="clearfix">
-                        <span style="color: #666ee8; font-weight: bold;">平台用户统计</span>
-                    </div>
-                    <div class="text item" style="height:650px">
-                        <el-select v-model="dateType" @change="getCompanyReport">
-                            <el-option v-for="(item,index) in dateTypeList" :key="index" :label="item.label" :value="item.value">
-                            </el-option>
-                        </el-select>
-                        <echart-bar :series-data="companyDataList" :extra-option="companyExtraOption"/>
-                    </div>
-                </el-card>
-                <el-card class="box-card" style="width:93%;margin:0.6%;float:left;">
-                    <div slot="header" class="clearfix">
-                        <span style="color: #666ee8; font-weight: bold;">平台业务统计</span>
-                    </div>
-                    <div class="text item" style="height:650px">
-                        <el-select v-model="financeDateType" @change="getFinanceRecordMonth">
-                            <el-option v-for="(item,index) in dateTypeList" :key="index" :label="item.label" :value="item.value">
-                            </el-option>
-                        </el-select>
-                        <echart-bar :series-data="yearDataList" :extra-option="yearExtraOption"/>
-                    </div>
-                </el-card>
-                <el-card class="box-card" style="width:93%;margin:0.6%;float:left;">
-                    <div slot="header" class="clearfix">
-                        <span style="color: #666ee8; font-weight: bold;">核心企业可用额度比例</span>
-                    </div>
-                    <div class="text item" style="height:650px">
-                        <echart-bar :series-data="coreFinanceAmountList" :extra-option="coreFinanceAmountExtraOption"/>
-                    </div>
-                </el-card>
+                <!-- 平台用户统计 -->
+                <el-row class="zap-home-chart zap-home-chart--space">
+                    <el-col>
+                        <div class="zap-home-chart__title">
+                            平台用户统计（天） 
+                            <div class="zap-home-chart__legend">
+                                <span class="zap-home-chart__circle zap-home-chart__circle--blue"></span>
+                                <span class="zap-home-chart__text">供应商</span>
+                                <span class="zap-home-chart__circle zap-home-chart__circle--green zap-home-chart__circle--margin"></span>
+                                <span class="zap-home-chart__text">核心企业</span>
+                            </div>
+                        </div>
+                        <div id="echarBarUser" style="width: 100%;height: 490px"></div>
+                    </el-col>
+                </el-row>
+
+                <!-- 平台业务统计 -->
+                <el-row class="zap-home-chart zap-home-chart--space">
+                    <el-col>
+                        <div class="zap-home-chart__title">
+                            <div class="zap-home-chart__wrap">
+                                平台业务统计
+                                <el-select class="zap-home-chart__select" v-model="financeDateType" @change="getFinanceRecordMonth">
+                                    <el-option v-for="(item,index) in dateTypeList" :key="index" :label="item.label" :value="item.value">
+                                    </el-option>
+                                </el-select>
+                            </div>
+                            <div class="zap-home-chart__legend">
+                                <span class="zap-home-chart__circle zap-home-chart__circle--blue"></span>
+                                <span class="zap-home-chart__text">融资开立</span>
+                                <span class="zap-home-chart__circle zap-home-chart__circle--green zap-home-chart__circle--margin"></span>
+                                <span class="zap-home-chart__text">融资还款</span>
+                            </div>
+                        </div>
+                        <div id="echarBarBusiness" style="width: 100%;height: 490px"></div>
+                    </el-col>
+                </el-row>
+                <!-- 核心企业可用额度比例 -->
+                <el-row class="zap-home-chart zap-home-chart--space">
+                    <el-col>
+                        <div class="zap-home-chart__title">
+                            <div class="zap-home-chart__wrap">
+                                核心企业可用额度比例
+                                <el-input
+                                    class="zap-home-chart__search"
+                                    placeholder="请输入"
+                                    suffix-icon="el-icon-search"
+                                    v-model="input1">
+                                </el-input>
+                            </div>
+                            <div class="zap-home-chart__legend">
+                                <span class="zap-home-chart__circle zap-home-chart__circle--blue"></span>
+                                <span class="zap-home-chart__text">可用额度</span>
+                                <span class="zap-home-chart__circle zap-home-chart__circle--green zap-home-chart__circle--margin"></span>
+                                <span class="zap-home-chart__text">已用额度</span>
+                            </div>
+                        </div>
+                        <div id="echarBarCore" style="width: 100%;height: 490px"></div>
+                    </el-col>
+                </el-row>
             </div>
         </div>
-
+        
         <!-- 核心企业 -->
         <div v-if="company.scyType == '01'">
             <el-card class="box-card" style="width:30.2%;margin:0.6%;float:left;">
@@ -661,7 +688,8 @@ export default {
             //权限展示
             companyData:true,
             companyWork:true,
-            companyChart:true
+            companyChart:true,
+            input1: ''
         }
     },
     created: function () {
@@ -683,12 +711,12 @@ export default {
     },
     methods: {
         initChartPie () {
-            console.log(this.financeAmountList, 9999)
             let chartPie = document.getElementById('echartPie');
             let myChart = echarts.init(chartPie);
             let option = {
                 tooltip: {
-                    trigger: 'item'
+                    trigger: 'item',
+                    formatter: '{b}： {d}%'
                 },
                 color: ["#f9b51d", "#30d894", "#ff6d8a", "#4280f2"],
                 label: {
@@ -710,16 +738,10 @@ export default {
                 },
                 series: [
                     {
-                        name: '访问来源',
+                        name: '平台资金统计',
                         type: 'pie',
                         radius: '50%',
-                        data: [
-                            {value: 1048, name: '搜索引擎'},
-                            {value: 735, name: '直接访问'},
-                            {value: 580, name: '邮件营销'},
-                            {value: 484, name: '联盟广告'},
-                            {value: 300, name: '视频广告'}
-                        ], // this.financeAmountList
+                        data: this.financeAmountList,
                         emphasis: {
                             itemStyle: {
                                 shadowBlur: 10,
@@ -981,8 +1003,177 @@ export default {
             getCompanyReport(queryParams).then((response) => {
                 this.companyDataList = response.data.dataList
                 this.companyExtraOption.xAxis[0].data = response.data.dateList
+                this.iniEcharBar('echarBarUser', response.data.dataList, response.data.dateList)
             });
         },
+        iniEcharBar (id, series, dateList) {
+            // 时间选择是周的时候进行转换 YYYY-MM-D 2 MM.D
+            if (this.financeDateType === '00') {
+                dateList = dateList.map(item => {
+                    let arr = item.split('-').slice(1)
+                    return arr.join('.')
+                })
+            }
+            
+            let _series = series.map(item => {
+                item.type = 'bar'
+                item.barWidth = 12
+                item.barGap = '25%'
+                return item
+            })
+            // _series.push({
+            //     name: '供应商',
+            //     type: 'line',
+            //     yAxisIndex: 1,
+            //     data: _series[0].data.map(item => {
+            //         return item / eval(_series[0].data.join('+')) * 100
+            //     })
+            // })
+            // _series.push({
+            //     name: '核心企业',
+            //     type: 'line',
+            //     yAxisIndex: 1,
+            //     data: _series[1].data.map(item => {
+            //         return item / eval(_series[1].data.join('+')) * 100
+            //     })
+            // })
+            let option = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'cross',
+                        crossStyle: {
+                            color: '#999'
+                        }
+                    }
+                },
+                color: ["#4280f2", "#30d894"],
+                xAxis: [
+                    {
+                        type: 'category',
+                        axisLine: {
+                            show: false
+                        },
+                        axisTick: {
+                            show:false //y轴坐标点消失
+                        },
+                        data: dateList,
+                        axisPointer: {
+                            type: 'shadow'
+                        },
+                        axisLabel: {
+                            margin: 34,
+                            fontSize: 16,
+                            color: '#666666',
+                        },
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        name: '',
+                        axisLine:{
+                            show:false //y轴线消失
+                        },
+                        axisTick: {
+                            show:false //y轴坐标点消失
+                        },
+                        axisLabel: {
+                            margin: 11,
+                            fontSize: 16,
+                            color: '#666666',
+                            formatter: '{value}'
+                        },
+                        splitLine: {
+                            lineStyle: {
+                                 color: ['#e5e5e5'],
+                                 width: 2
+                            }
+                        }
+                    },
+                    {
+                        type: 'value',
+                        name: '',
+                        axisLine:{
+                            show:false //y轴线消失
+                        },
+                        axisTick: {
+                            show:false //y轴坐标点消失
+                        },
+                        // min: 0,
+                        // max: 100,
+                        // axisLabel: {
+                        //     margin: 11,
+                        //     fontSize: 16,
+                        //     color: '#666666',
+                        //     formatter: '{value}%'
+                        // },
+                        splitLine: {
+                            lineStyle: {
+                                 color: ['#e5e5e5'],
+                                 width: 2
+                            }
+                        }
+                    }
+                ],
+                series:  _series
+            };
+            let chartBar = document.getElementById(id);
+            let myChart = echarts.init(chartBar);
+            myChart.clear()
+            myChart.setOption(option)
+        },
+        iniEchartBarCore (series, dateList) {
+            var barCore = document.getElementById('echarBarCore');
+            var myChart = echarts.init(barCore);
+            let _series = series.map(item => {
+                item.type = 'bar'
+                item.barWidth = 75
+
+                item.label = {show: true}
+                return item
+            })
+            var option = {
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    }
+                },
+                color: ["#4280f2", "#30d894"],
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                xAxis: [
+                    {
+                        type: 'category',
+                        data: dateList,
+                         axisLine:{
+                            show:false //y轴线消失
+                        },
+                        axisTick: {
+                            show:false //y轴坐标点消失
+                        },
+                        axisLabel: {
+                            margin: 34,
+                            fontSize: 16,
+                            color: '#666666',
+                        },
+                    }
+                ],
+                yAxis: [
+                    {
+                        show: false
+                    }
+                ],
+                series: _series
+            };
+
+            option && myChart.setOption(option);
+        },
         //核心企业额度比例 -- 柱状图
         getFinanceAmountAll(){
             let queryParams = {}
@@ -991,6 +1182,8 @@ export default {
             getFinanceAmountAll(queryParams).then((response) => {
                 this.coreFinanceAmountList = response.data.dataList
                 this.coreFinanceAmountExtraOption.yAxis[0].data = response.data.dateList
+
+                this.iniEchartBarCore(response.data.dataList, response.data.dateList)
             });
         },
         //融资开立月度统计 -- 柱状图
@@ -1000,6 +1193,7 @@ export default {
             financeRecordMonth(queryParams).then((response) => {
                 this.yearDataList = response.data.dataList
                 this.yearExtraOption.xAxis[0].data = response.data.dateList
+                this.iniEcharBar('echarBarBusiness', response.data.dataList, response.data.dateList)
             });
         },
         //查询代办
@@ -1128,17 +1322,95 @@ export default {
     }
 }
 .zap-home__title{
-    padding-top: 30px;
-    padding-bottom: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 78px;
     font-size: 18px;
     color: #333333;
 }
+
 .zap-home-chart{
     background-color: #ffffff;
 }
 .zap-home-chart__title{
-    padding: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 78px;
+    padding: 0 30px;
     font-size: 18px;
     color: #333333;
+    white-space: nowrap;
+}
+.zap-home-chart--space{
+    margin-top: 20px;
+}
+.zap-home-chart__wrap{
+    display: flex;
+    align-items: center;
+}
+.zap-home-chart__select{    
+    width: 116px;
+	height: 40px;
+    margin-left: 26px;
+	background-image: linear-gradient(
+		#ffffff, 
+		#ffffff), 
+	linear-gradient(
+		#71befe, 
+		#71befe);
+	background-blend-mode: normal, 
+		normal;
+	border: solid 1px #ebebeb;
+    .el-input--medium .el-input__inner{
+        line-height: 38px;
+        height: 38px;
+        font-size: 14px;
+    }
+}
+// 自定义图例
+.zap-home-chart__legend{
+    display: flex;
+    align-items: center;
+}
+.zap-home-chart__circle{
+    display: inline-block;
+    width: 11px;
+    height: 11px;
+    border-radius: 50%;
+}
+.zap-home-chart__circle--blue{
+    background-color: #4280f2;
+}
+.zap-home-chart__circle--green{
+    background-color: #30d894;
+}
+.zap-home-chart__circle--margin{
+    margin-left: 25px;
+}
+.zap-home-chart__text{
+    margin-left: 10px;
+    font-size: 14px;
+    color: #666666;
+}
+.zap-home-chart__search{
+    width: 199px;
+	height: 40px;
+    margin-left: 30px;
+	background-image: linear-gradient(
+		#ffffff, 
+		#ffffff), 
+	linear-gradient(
+		#71befe, 
+		#71befe);
+	background-blend-mode: normal, 
+		normal;
+	border: solid 1px #ebebeb;
+    .zap-home .el-input--medium .el-input__inner{
+        height: 38px;
+        line-height: 38px;
+        font-size: 14px;
+    }
 }
 </style>

front-vue/src/views/login.vue

@@ -630,7 +630,8 @@ export default {
     // 扫码登录
     .zap-scanning{
         width: 410px;
-        height: 550px;
+        min-height: 550px;
+        padding-bottom: 66px;
         background-image: linear-gradient(
             #ffffff,
             #ffffff),