Browse Source

分公司数据看板修改第二版

liubei@c-top.com.cn 3 năm trước cách đây
mục cha
commit
bfbe873dd6
4 tập tin đã thay đổi với 286 bổ sung168 xóa
  1. 4 2
      src/permission.js
  2. 32 28
      src/views/bossDataKanban/chart.js
  3. 247 137
      src/views/bossDataKanban/index.vue
  4. 3 1
      src/views/user/Login.vue

+ 4 - 2
src/permission.js

@@ -58,7 +58,8 @@ router.beforeEach((to, from, next) => {
               // 跳转到目的路由
               if( to.path === '/dashboard/analysis' && from.path == '/'){
                 if (store.getters.userInfo.id == '4aba62011120ac565c7f2b9f8f4aa96b' || store.getters.userInfo.id == 'e9ca23d68d884d4ebb19d07889727dae') {
-                  window.open("/boss-data-kanban", "_blank");
+                  let tempPage = window.open('', '_blank');
+                  tempPage.location="/boss-data-kanban";
                 }
               }
               next({ path: redirect })
@@ -81,7 +82,8 @@ router.beforeEach((to, from, next) => {
       }
       if( to.path === '/dashboard/analysis' && from.path == '/'){
         if (store.getters.userInfo.id == '4aba62011120ac565c7f2b9f8f4aa96b' || store.getters.userInfo.id == 'e9ca23d68d884d4ebb19d07889727dae') {
-          window.open("/boss-data-kanban", "_blank");
+          let tempPage = window.open('', '_blank');
+          tempPage.location="/boss-data-kanban";
           return
         }
       }

+ 32 - 28
src/views/bossDataKanban/chart.js

@@ -112,31 +112,31 @@
         position: 'outside',
         formatter: '{b} \n{c} {d}%'
       },
-      tooltip: {
-        backgroundColor: '#033b77',
-        borderColor: '#21f2c4',
-        textStyle: {
-          color: '#fff',
-          fontSize: 13
-        },
-        formatter: params => {
-          if (
-            params.seriesName !== 'mouseoutSeries' &&
-              params.seriesName !== 'pie2d'
-          ) {
-            const bfb = (
-              (option.series[params.seriesIndex].pieData.endRatio -
-                  option.series[params.seriesIndex].pieData.startRatio) *
-                100
-            ).toFixed(2)
-            return (
-              `${params.seriesName}<br/>` +
-              `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
-              `${bfb}%`
-            )
-          }
-        }
-      },
+    //   tooltip: {
+    //     backgroundColor: '#033b77',
+    //     borderColor: '#21f2c4',
+    //     textStyle: {
+    //       color: '#fff',
+    //       fontSize: 13
+    //     },
+    //     formatter: params => {
+    //       if (
+    //         params.seriesName !== 'mouseoutSeries' &&
+    //           params.seriesName !== 'pie2d'
+    //       ) {
+    //         const bfb = (
+    //           (option.series[params.seriesIndex].pieData.endRatio -
+    //               option.series[params.seriesIndex].pieData.startRatio) *
+    //             100
+    //         ).toFixed(2)
+    //         return (
+    //           `${params.seriesName}<br/>` +
+    //           `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+    //           `${bfb}%`
+    //         )
+    //       }
+    //     }
+    //   },
       xAxis3D: {
         min: -1,
         max: 1
@@ -151,16 +151,20 @@
       },
       grid3D: {
         show: false,
+        width:'80%',
+        height:'80%',
+        left:'10%',
+        top:'10%',
         boxHeight: boxHeight, // 圆环的高度
         viewControl: {
           // 3d效果可以放大、旋转等
-          alpha:30, // 角度
-          distance:350, // 调整视角到主体的距离,类似调整zoom
+          alpha:40, // 角度
+          distance:400, // 调整视角到主体的距离,类似调整zoom
           rotateSensitivity: 0, // 设置为0无法旋转
           zoomSensitivity: 0, // 设置为0无法缩放
           panSensitivity: 0, // 设置为0无法平移
           autoRotate: false // 自动旋转
-        },
+        }
       },
       series: series
     }

+ 247 - 137
src/views/bossDataKanban/index.vue

@@ -1,10 +1,28 @@
+<style>
+    .range-pick-echart .ant-calendar-range-part {
+        background: rgb(26, 52, 104) !important;
+        color: #fff;
+    }
+    .range-pick-echart .ant-calendar-range .ant-calendar-input{
+        background: rgb(26, 52, 104) !important;
+        color: #fff;
+    }
+    .range-pick-echart .ant-calendar-year-select{
+        color: #fff;
+    }
+    .range-pick-echart .ant-calendar-month-select{
+        color: #fff;
+    }
+    .range-pick-echart .ant-calendar-date{
+        color: #B0C4DE;
+    }
+</style>
 <style lang="scss" scoped>
     .body-css {
         min-width: 100%;
         min-height: 100%;
         position: absolute;
         box-sizing: border-box;
-
         background-image: url('../../assets/img/wangge2.png');
         background-repeat: repeat;
         background-position: center;
@@ -138,11 +156,11 @@
 
         .bg {
             position: absolute;
-            bottom: 145px;
+            bottom: 56px;
             left: 50%;
             z-index: 0;
-            width: 468px;
-            height: 273px;
+            width: 92%;
+            height: 75%;
             background: no-repeat center;
             background-image: url('../../assets/img/u4.svg');
             background-size: 100% 100%;
@@ -152,11 +170,11 @@
 
         .bgtwo {
             position: absolute;
-            bottom: 100px;
+            bottom: 97px;
             left: 50%;
             z-index: 0;
-            width: 583px;
-            height: 340px;
+            width: 74%;
+            height: 62%;
             background: no-repeat center;
             background-image: url('../../assets/img/u3.svg');
             background-size: 100% 100%;
@@ -166,11 +184,11 @@
 
         .bgthree {
             position: absolute;
-            bottom: 61px;
+            bottom: 130px;
             left: 50%;
             z-index: 0;
-            width: 688px;
-            height: 399px;
+            width: 61%;
+            height: 51%;
             background: no-repeat center;
             background-image: url('../../assets/img/u2.svg');
             background-size: 100% 100%;
@@ -210,10 +228,13 @@
                         <div style="width:5px;height: 14px;background:#0099FF;display: inline-block;margin-left: 10px;">
                         </div>
                         <span style="color: #0099FF;font-size: 0.8vw;padding: 10px;;">素材产出占比</span>
-
-                        <div id="accountIndexEchartOnePie" ref="accountIndexEchartOnePie"
-                            style="width: 90%;height: 300px;margin-right: 20px;">
+                        <div v-if="emptyShow">
+                            <div id="accountIndexEchartOnePie" ref="accountIndexEchartOnePie"
+                                style="width: 90%;height: 300px;margin-right: 20px;">
+                            </div>
                         </div>
+                        <a-list v-else :data-source="[]" />
+                        <!-- <a-empty :image="emptyImg"  /> -->
 
                     </div>
 
@@ -224,9 +245,11 @@
                         <div style="width:5px;height: 14px;background:#0099FF;display: inline-block;margin-left: 10px;">
                         </div>
                         <span style="color: #0099FF;font-size: 0.8vw;padding: 10px;;">分公司消耗素材</span>
-
-                        <div id="consume" ref="consume" style="width: 95%;height: 290px;"></div>
-
+                        <div v-if="emptyShow">
+                            <div id="consume" ref="consume" style="width: 95%;height: 290px;"></div>
+                        </div>
+                        <a-list v-else :data-source="[]" v-else />
+                        <!-- <a-empty style="margin-top: 20px;"  /> -->
                     </div>
 
                     <!-- 环形图 -->
@@ -238,21 +261,29 @@
                         <span style="color: #0099FF;font-size: 0.8vw;padding: 10px;;">素材相关数据</span>
                         <div style="line-height: 180px;">
 
-                            <div style="float: left;margin-left: 5%;width: 25%;height: 20%;text-align: center;">
+                            <div style="float: left;margin-left: 2%;width: 25%;height: 20%;text-align: center;">
                                 <a-progress type="circle" strokeColor="#FF00FF" :percent="useRateData" :strokeWidth=10
-                                    :width="95" />
+                                    :width="88" />
                                 <p style="line-height: 20%;text-align: center;color: #fff;">素材使用率</p>
                             </div>
-                            <div style="float: left;margin-left: 5%;width: 25%;height: 20%;text-align: center;">
-                                <a-progress type="circle" strokeColor="#00FFFF" :percent="faddishRateData" :width="95"
+
+
+
+                            <div style="float: left;margin-left: 7%;width: 25%;height: 20%;text-align: center;">
+                                <a-progress type="circle" strokeColor="#00FFFF" :percent="faddishRateData" :width="88"
                                     :strokeWidth=10 />
                                 <p style="line-height: 20%;text-align: center;color: #fff;">素材爆款率</p>
                             </div>
-                            <div style="float: left;margin-left: 5%;width: 25%;height: 20%;text-align: center;">
-                                <a-progress type="circle" :percent="innovateRateData" :strokeWidth=10 :width="95" />
+
+
+
+
+                            <div style="float: left;margin-left: 7%;width: 25%;height: 20%;text-align: center;">
+                                <a-progress type="circle" :percent="innovateRateData" :strokeWidth=10 :width="88" />
                                 <p style="line-height: 20%;text-align: center;color: #fff;">素材创新率</p>
                             </div>
 
+
                         </div>
 
 
@@ -274,11 +305,12 @@
                             </a-radio-button>
                         </a-radio-group>
                         <a-range-picker format="YYYY-MM-DD" style="float: right;" v-model="priceRangeDate"
-                            class="range-pick" :disabled-date="disabledDate" :allowClear="false"
-                            @calendarChange="calendarPriceRangeChange" @change="changePriceRangeDate" />
+                             :disabled-date="disabledDate" :allowClear="false"
+                            dropdownClassName="range-pick-echart" @calendarChange="calendarPriceRangeChange"
+                            @change="changePriceRangeDate" />
 
                         <div class="chart-container">
-                            <div class="chart" ref="chart" v-show="chartPie"></div>
+                            <div class="chart" ref="chart" v-if="chartPie"></div>
                             <!-- 底座背景 -->
                             <div class="bg"></div>
                             <div class="bgtwo"></div>
@@ -288,12 +320,18 @@
                         </branch> -->
                     </div>
                     <!-- 横向柱状图 -->
-                    <div style="height:243px;background-color:  rgba(2, 28, 69, 1);">
+                    <div
+                        style="height:243px;background-color:  rgba(2, 28, 69, 1);overflow: hidden;overflow-y: scroll;">
                         <br>
                         <div style="width:5px;height: 14px;background:#0099FF;display: inline-block;margin-left: 10px;">
                         </div>
                         <span style="color: #0099FF;font-size: 0.8vw;padding: 10px;;">本月分媒体消耗数据</span>
-                        <div id="shadow" ref="shadow" style="width: 98%;height: 200px;"></div>
+
+                        <div id="shadow" ref="shadow" style="width: 98%;height: 930px;"></div>
+
+
+
+
 
                     </div>
                 </a-col>
@@ -309,8 +347,11 @@
                         <div style="width:5px;height: 14px;background:#0099FF;display: inline-block;margin-left: 10px;">
                         </div>
                         <span style="color: #0099FF;font-size: 0.8vw;padding: 10px;;">近七天分日数据</span>
-
-                        <div id="lineChart" ref="lineChart" style="width: 90%;height: 260px;margin-top: 5px;"></div>
+                        <div v-if="emptyShow">
+                            <div id="lineChart" ref="lineChart" style="width: 90%;height: 260px;margin-top: 5px;"></div>
+                        </div>
+                        <a-list v-else :data-source="[]" v-else />
+                        <!-- <a-empty v-else /> -->
 
                     </div>
                     <div style="height:512px;background-color:  rgba(2, 28, 69, 1);">
@@ -324,6 +365,9 @@
                                 <span
                                     :class="text == '1' || text == '2' || text == '3' ?'threeList' :'listsort'">{{text}}</span>
                             </span>
+                            <span slot="totalCost" slot-scope="text,record">
+                                <span>{{text > 10000?(text/10000).toFixed(2)+'万':text}}</span>
+                            </span>
                         </a-table>
 
                     </div>
@@ -347,15 +391,17 @@
     require('echarts/lib/component/graphic');
     require('echarts/lib/component/toolbox');
     require('echarts/lib/component/legend');
-
+    import { Empty } from 'ant-design-vue';
     import { getAction, postAction, putAction } from '@/api/manage';
-    const color = ['#FF00FF', '#8A2BE2', '#00FFFF', '#4169E1', '#FFA500', '#7FFF00']
+    const color = ['#8A2BE2', '#FFA500', '#00FFFF', '#4169E1', '#FF00FF', '#48D1CC']
     import 'echarts-gl';
     export default {
         data() {
             return {
                 optionData: [],
-                chartPie:true,
+                container: true,
+                chartPie: true,
+                emptyShow: true,
                 statusChart: null,
                 option: {},
                 fullscreenShow: false,
@@ -394,20 +440,28 @@
                         dataIndex: 'totalCost',
                         key: 'totalCost',
                         ellipsis: true,
+                        scopedSlots: { customRender: 'totalCost' },
                     },
 
                 ],
                 data: [],
                 pieTotal: '',
+                emptyImg: '',
             }
         },
         created() {
-            this.getData();
 
 
-        },
 
+        },
+        beforeCreate() {
+            console.log(Empty);
+            this.emptyImg = Empty.PRESENTED_IMAGE_SIMPLE
+            console.log(this.emptyImg);
+        },
         mounted() {
+           
+            this.getData();
             this.getQueryNewlyData();
             const that = this
             window.onresize = function () {
@@ -450,11 +504,13 @@
                 this.fullShow = true;
             },
             radioChange() {
+                this.chartPie = false
                 this.getData();
                 this.getQueryNewlyData();
             },
             changePriceRangeDate() {
                 this.selectPriceDate = '';
+                this.chartPie = false
                 this.getData();
                 this.getQueryNewlyData();
             },
@@ -485,17 +541,26 @@
                 this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getMeterialProduceRate', params).then(res => {
                     if (res.code == 0) {
                         var servicedata = res.result
-                        this.pieData = [];
-                        let num = 0;
-                        for (var i = 0; i < servicedata.length; i++) {
-                            var obj = new Object();
-                            obj.name = servicedata[i].area;
-                            obj.value = servicedata[i].meterialNum;
-                            num += servicedata[i].meterialNum;
-                            this.pieData[i] = obj;
+                        if (servicedata.length > 0) {
+                            this.emptyShow = true;
+                            this.pieData = [];
+                            let num = 0;
+                            for (var i = 0; i < servicedata.length; i++) {
+                                var obj = new Object();
+                                obj.name = servicedata[i].area;
+                                obj.value = servicedata[i].meterialNum;
+                                num += servicedata[i].meterialNum;
+                                this.pieData[i] = obj;
+                            }
+                            this.pieTotal = num
+                            this.$nextTick(() => {
+                                this.initEchart('accountIndexEchartOnePie', this.initPieOneData(this.pieData, this.pieTotal));
+                            })
+                            
+                        } else {
+                            this.emptyShow = false;
                         }
-                        this.pieTotal = num
-                        this.initEchart('accountIndexEchartOnePie', this.initPieOneData(this.pieData, this.pieTotal));
+
                     }
                 })
                 // 3D柱状图
@@ -510,11 +575,20 @@
                 this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getCompanyMeterialConsume', paramsTwo).then(res => {
                     if (res.code == 0) {
                         resultArray = res.result;
-                        resultArray.forEach(element => {
-                            areaArray.push(element.area);
-                            payNumArray.push(element.cost)
-                        });
-                        this.initEchart('consume', this.getConsumeData(areaArray, payNumArray));
+                        if (resultArray.length > 0) {
+                            this.emptyShow = true;
+                            resultArray.forEach(element => {
+                                areaArray.push(element.area);
+                                payNumArray.push(element.cost)
+                            });
+                            this.$nextTick(() => {
+                                this.initEchart('consume', this.getConsumeData(areaArray, payNumArray));
+                            })
+                            
+                        } else {
+                            this.emptyShow = false;
+                        }
+
                     }
                 })
 
@@ -526,9 +600,23 @@
                 }
                 this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getMeterialRelevantInfo', paramsThree).then(res => {
                     if (res.code == 0) {
-                        this.useRateData = res.result.useRate;
-                        this.faddishRateData = res.result.faddishRate;
-                        this.innovateRateData = res.result.innovateRate;
+                        if (res.result.useRate) {
+
+                            this.useRateData = res.result.useRate;
+                        } else {
+                            this.useRateData = 0;
+                        }
+                        if (res.result.faddishRate) {
+                            this.faddishRateData = res.result.faddishRate;
+                        } else {
+                            this.faddishRateData = 0;
+                        }
+                        if (res.result.innovateRate) {
+                            this.innovateRateData = res.result.innovateRate;
+                        } else {
+                            this.innovateRateData = 0;
+                        }
+
                     }
                 })
 
@@ -554,12 +642,18 @@
                 }
                 this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getAccountTrendByMediaType', paramsFour).then(res => {
                     if (res.code == 0) {
+                        this.emptyShow = true;
                         let huaBei = res.result.huaBei;
                         let huaDong = res.result.huaDong;
                         let huaNan = res.result.huaNan;
                         let jiaoYang = res.result.jiaoYang;
                         let time = res.result.time
-                        this.initEchart('lineChart', this.getLineChartData(huaBei, huaDong, huaNan, jiaoYang, time));
+                        this.$nextTick(() => {
+                            this.initEchart('lineChart', this.getLineChartData(huaBei, huaDong, huaNan, jiaoYang, time));
+                        })
+
+                    } else {
+                        this.emptyShow = false;
                     }
                 })
 
@@ -590,7 +684,7 @@
                     // });
                     myChart.clear()
                     myChart.setOption(optionName);
-                    
+
                     window.addEventListener('resize', function () {
                         that.clientWidth = document.documentElement.clientWidth - 224
                         myChart.resize()
@@ -604,17 +698,21 @@
                 let option = {
                     tooltip: {
                         trigger: 'item',
-                        formatter: '{a} <br/>{b}: {c} ({d}%)'
+                        formatter: function(obj){
+                            return obj.name+':'+obj.value+'('+Math.round(obj.value/pieTotal* 100)+'%)'
+                        }
                     },
                     legend: {
-                        top: '10%',
+                        top: '25%',
                         orient: 'vertical',
-                        right: '10%',
+                        right: '0%',
                         textStyle: { //图例文字的样式
                             color: '#fff',
-                            fontSize: 13
+                            fontSize: 12
                         },
                         itemGap: 20,
+                        itemWidth:15,
+                        itemHeight:10,
                         padding: [-20, 0, 0, 80],
                         bottom: '55%',
                         formatter: function (name) {  //该函数用于设置图例显示后的百分比
@@ -628,7 +726,7 @@
                                 }
                             })
                             var p = Math.round(((value / total) * 100)); //求出百分比
-                            return `${name}        ${'|'}  ${p}%       ${value}`;  //返回出图例所显示的内容是名称+百分比
+                            return `${name}    ${'|'}  ${p}%    ${value}`;  //返回出图例所显示的内容是名称+百分比
 
 
                         },
@@ -638,7 +736,7 @@
                         {
                             name: '',
                             type: 'pie',
-                            radius: ['50%', '80%'],
+                            radius: ['50%', '75%'],
                             avoidLabelOverlap: false,
                             hoverAnimation: true,
                             silent: false,
@@ -650,17 +748,18 @@
                             label: {
                                 show: true,
                                 position: 'center',
+                                fontSize:10,
                                 formatter: function (param) {
 
-                                    return '素材总数\r\n\r\n' + pieTotal
+                                    return '素材总数\r\n' + pieTotal
                                 },
                                 textStyle: {
-                                    fontSize: 16,
+                                    fontSize: 13,
                                     color: '#fff'
                                 }
                             },
                             left: 0,
-                            right: '56%',
+                            right: '50%',
                             top: 0,
                             bottom: '20%',
 
@@ -795,13 +894,13 @@
                 const VALUE = payPersonNum
                 let option = {
                     backgroundColor: "transparent",
-                        
+
                     grid: {  //图表的上下左右的距离
-                        left: '-10%',
-                        right: '0%',
+                        left: '-20%',
+                        right: '2%',
                         bottom: '15%',
                         top: '20%',
-                        padding: [0, 0, 0, 0],
+                        padding: [50, 0, 0, 0],
                         containLabel: true,
                     },
                     xAxis: {  //x轴的样式设置
@@ -1018,7 +1117,7 @@
                                 offset: [2, -25],
                                 formatter: function (value) {
                                     var val = value.data;
-                                    if (val >= 10000 && val < 10000000) {
+                                    if (val >= 10000 && val < 1000000000000) {
                                         val = (val / 10000).toFixed(2) + "万";
                                     }
                                     return val;
@@ -1063,23 +1162,23 @@
                             return 'loading...';
                         }
                     },
-                    dataZoom: [
-                        {
-                            type: "slider", //滑动条
-                            show: true, //开启
-                            yAxisIndex: [0],
-                            left: "96%", //滑动条位置
-                            start: 0, //初始化时,滑动条宽度开始标度
-                            end: 20, //初始化时,滑动条宽度结束标度<br>  
-                            filterMode:"none"                 
-                        },
-                        {
-                            type: "inside", //内置滑动,随鼠标滚轮展示
-                            yAxisIndex: [0],
-                            start: 20, //初始化时,滑动条宽度开始标度
-                            filterMode:"none"     
-                        },
-                    ],
+                    // dataZoom: [
+                    //     {
+                    //         type: "slider", //滑动条
+                    //         show: true, //开启
+                    //         yAxisIndex: [0],
+                    //         left: "96%", //滑动条位置
+                    //         start: 0, //初始化时,滑动条宽度开始标度
+                    //         end: 20, //初始化时,滑动条宽度结束标度<br>  
+                    //         filterMode:"none"                 
+                    //     },
+                    //     {
+                    //         type: "inside", //内置滑动,随鼠标滚轮展示
+                    //         yAxisIndex: [0],
+                    //         start: 20, //初始化时,滑动条宽度开始标度
+                    //         filterMode:"none"     
+                    //     },
+                    // ],
                     legend: {
                         data: ['快手', '头条'],
                         x: 'right',
@@ -1198,7 +1297,7 @@
                     legend: {
                         data: ['华北', '华东', '华南', '骄阳'],
                         textStyle: {
-                            fontSize: 15,
+                            fontSize: 12,
                             color: '#B0C4DE'
                         },
                     },
@@ -1254,28 +1353,24 @@
                             name: '华北',
                             type: 'line',
                             data: huaBei,
-                            symbol: 'none',
                             smooth: true,
                         },
                         {
                             name: '华东',
                             type: 'line',
                             data: huaDong,
-                            symbol: 'none',
                             smooth: true,
                         },
                         {
                             name: '华南',
                             type: 'line',
                             data: huaNan,
-                            symbol: 'none',
                             smooth: true,
                         },
                         {
                             name: '骄阳',
                             type: 'line',
                             data: jiaoYang,
-                            symbol: 'none',
                             smooth: true,
                         },
 
@@ -1294,30 +1389,43 @@
                     if (res.code == 0) {
                         let arr = res.result
                         let optionArray = [];
-                        for (var i = 0; i < arr.length; i++) {
-                            var obj = new Object();
-                            if (arr[i].cost != 0) {
-                            obj.name = arr[i].area;
-                            obj.value = arr[i].cost;
-                            obj.rate = arr[i].rate;
-                            optionArray[i] = obj;
-                            }
-                            
-                        }
-                        this.optionData = optionArray.filter(d=>d)
-                        console.log(this.optionData);
+                        // for (var i = 0; i < arr.length; i++) {
+                        //     var obj = new Object();
+                        //     // if (arr[i].cost != 0) {
+                        //     obj.name = arr[i].area;
+                        //     obj.value = arr[i].cost;
+                        //     obj.rate = arr[i].rate;
+                        //     optionArray[i] = obj;
+                        //     // }
+
+                        // }
+                        res.result.forEach(element => {
+                            optionArray.push({ name: element.area, value: element.cost, rate: element.rate })
+                        });
+                        this.optionData = optionArray
                         if (this.optionData.length == 0) {
-                            this.chartPie = false
-                            
-                        }else{
-                            
-                            this.setLabel(this.optionData);
-                            this.initChart(this.optionData);
+                            this.optionData.push({
+                                name: '暂无数据',
+                                value: 100,
+                                rate: '',
+                            })
+
+
+                            this.chartPie = true
+                            this.$nextTick(() => {
+                                this.setLabel(this.optionData);
+                                this.initChart(this.optionData);
+                            })
+                        } else {
                             this.chartPie = true;
-                            
+                            this.$nextTick(() => {
+                                this.setLabel(this.optionData);
+                                this.initChart(this.optionData);
+                            })
+
                         }
-                            
-                        
+
+
 
                     }
                 })
@@ -1334,37 +1442,39 @@
             setLabel(optionData) {
                 optionData.forEach((item, index) => {
                     item.itemStyle = {
-                        color: color[index]
+                        color: color[index],
                     }
+                    console.log(item);
                     item.label = {
                         normal: {
                             show: true,
                             color: color[index],
-                            fontSize: 20,
+                            fontSize: 18,
+                            padding:[250,0],
                             formatter: function (params) {
-                                return params.name + '\r\n' + echarts.format.addCommas(params.value.toFixed(2)) + '\r\n' + params.data.rate
+                                return params.value != 0 ? params.name + '\r\n' + echarts.format.addCommas(params.value.toFixed(2)) + '\r\n' + params.data.rate : ''
                             }, // 用\n来换行
-                            rich: {
-                                b: {
-                                    color: '#fff',
-                                    lineHeight: 18,
-                                    align: 'left'
-                                },
-                                c: {
-                                    fontSize: 20,
-                                    color: '#fff',
-                                    textShadowColor: '#1c90a6',
-                                    textShadowOffsetX: 0,
-                                    textShadowOffsetY: 2,
-                                    textShadowBlur: 5,
-                                    align: 'left'
-                                },
-                                d: {
-                                    color: color[index],
-                                    fontSize: 20,
-                                    align: 'left'
-                                }
-                            }
+                            // rich: {
+                            //     b: {
+                            //         color: '#fff',
+                            //         lineHeight: 18,
+                            //         align: 'left'
+                            //     },
+                            //     c: {
+                            //         fontSize: 20,
+                            //         color: '#fff',
+                            //         textShadowColor: '#1c90a6',
+                            //         textShadowOffsetX: 0,
+                            //         textShadowOffsetY: 50,
+                            //         textShadowBlur: 5,
+                            //         align: 'left'
+                            //     },
+                            //     d: {
+                            //         color: color[index],
+                            //         fontSize: 20,
+                            //         align: 'left'
+                            //     }
+                            // }
                         }
                     }
                     item.labelLine = {
@@ -1381,7 +1491,7 @@
             initChart(optionData) {
                 this.statusChart = echarts.init(this.$refs.chart)
                 // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
-                this.option = getPie3D(optionData, 0, 240, 28, 30, 0.7)
+                this.option = getPie3D(optionData, 0, 240, 28, 30, 0.5)
                 this.statusChart.setOption(this.option)
                 // 是否需要label指引线,如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐,并再次setOption
                 this.option.series.push({
@@ -1400,7 +1510,7 @@
                     },
                     startAngle: -30, // 起始角度,支持范围[0, 360]。
                     clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
-                    radius: ['20%', '52%'],
+                    radius: '45%',
                     center: ['50%', '50%'],
                     data: optionData,
                     labelLine: {  //删除指示线

+ 3 - 1
src/views/user/Login.vue

@@ -448,7 +448,9 @@ export default {
         path: '/dashboard/analysis',
       })
       if (this.userInfo().id == '4aba62011120ac565c7f2b9f8f4aa96b' || this.userInfo().id == 'e9ca23d68d884d4ebb19d07889727dae') {
-        window.open("/boss-data-kanban","_blank")
+        let tempPage = window.open('', '_blank');
+        tempPage.location="/boss-data-kanban";
+        // window.open("/boss-data-kanban","_blank")
       }
       
       this.$notification.success({