浏览代码

修改数据看板的横向柱状图的展示效果

liubei@c-top.com.cn 3 年之前
父节点
当前提交
25d9e4a62b
共有 1 个文件被更改,包括 83 次插入62 次删除
  1. 83 62
      src/views/bossDataKanban/index.vue

+ 83 - 62
src/views/bossDataKanban/index.vue

@@ -3,17 +3,21 @@
         background: rgb(26, 52, 104) !important;
         color: #fff;
     }
-    .range-pick-echart .ant-calendar-range .ant-calendar-input{
+
+    .range-pick-echart .ant-calendar-range .ant-calendar-input {
         background: rgb(26, 52, 104) !important;
         color: #fff;
     }
-    .range-pick-echart .ant-calendar-year-select{
+
+    .range-pick-echart .ant-calendar-year-select {
         color: #fff;
     }
-    .range-pick-echart .ant-calendar-month-select{
+
+    .range-pick-echart .ant-calendar-month-select {
         color: #fff;
     }
-    .range-pick-echart .ant-calendar-date{
+
+    .range-pick-echart .ant-calendar-date {
         color: #B0C4DE;
     }
 </style>
@@ -135,7 +139,7 @@
     }
 
     .fullList {
-        margin-bottom: 5%;
+        margin-bottom: 6%;
     }
 
     .chart-container {
@@ -271,7 +275,7 @@
 
                             <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  :format="percent => `${percent}%`" />
+                                    :strokeWidth=10 :format="percent => `${percent}%`" />
                                 <p style="line-height: 20%;text-align: center;color: #fff;">素材爆款率</p>
                             </div>
 
@@ -279,7 +283,8 @@
 
 
                             <div style="float: left;margin-left: 7%;width: 25%;height: 20%;text-align: center;">
-                                <a-progress type="circle" :percent="innovateRateData" :strokeWidth=10 :width="88"  :format="percent => `${percent}%`" />
+                                <a-progress type="circle" :percent="innovateRateData" :strokeWidth=10 :width="88"
+                                    :format="percent => `${percent}%`" />
                                 <p style="line-height: 20%;text-align: center;color: #fff;">素材创新率</p>
                             </div>
 
@@ -305,9 +310,8 @@
                             </a-radio-button>
                         </a-radio-group>
                         <a-range-picker format="YYYY-MM-DD" style="float: right;" v-model="priceRangeDate"
-                             :disabled-date="disabledDate" :allowClear="false"
-                            dropdownClassName="range-pick-echart" @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-if="chartPie"></div>
@@ -320,14 +324,15 @@
                         </branch> -->
                     </div>
                     <!-- 横向柱状图 -->
-                    <div
-                        style="height:243px;background-color:  rgba(2, 28, 69, 1);overflow: hidden;overflow-y: scroll;">
+                    <div style="height:243px;background-color:  rgba(2, 28, 69, 1);">
                         <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 style="height:213px;overflow: hidden;overflow-y: scroll;">
+                            <div id="shadow" ref="shadow" :style="{width:'98%'}"></div>
+                        </div>
 
-                        <div id="shadow" ref="shadow" style="width: 98%;height: 930px;"></div>
 
 
 
@@ -348,13 +353,14 @@
                         </div>
                         <span style="color: #0099FF;font-size: 0.8vw;padding: 10px;;">{{launchDate}}</span>
                         <div v-if="emptyShowThree">
-                            <div id="lineChart" ref="lineChart" style="width: 100%;height: 260px;margin-top: 5px;"></div>
+                            <div id="lineChart" ref="lineChart" style="width: 100%;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);">
+                    <div style="height:523px;background-color:  rgba(2, 28, 69, 1);">
                         <br>
                         <div style="width:5px;height: 14px;background:#0099FF;display: inline-block;margin-left: 10px;">
                         </div>
@@ -399,19 +405,19 @@
         data() {
             return {
                 optionData: [],
-                
+
                 container: true,
                 chartPie: true,
                 emptyShowOne: true,
-                emptyShowTwo:true,
-                emptyShowThree:true,
+                emptyShowTwo: true,
+                emptyShowThree: true,
                 statusChart: null,
                 option: {},
                 fullscreenShow: false,
                 branchShow: true,
                 value: '2',
                 priceRangeDate: [moment().startOf('day').subtract(7, 'days'), moment().endOf('day')],
-                launchDate:'',
+                launchDate: '',
                 selectPriceDate: '',
                 offsetDays: 86400000 * 31,
                 fullText: true,
@@ -419,6 +425,8 @@
                 faddishRateData: '',
                 innovateRateData: '',
                 pieData: [],
+                timeMadeType: [],
+                autoHeight: '',
                 columns: [
                     {
                         dataIndex: 'ranking',
@@ -458,16 +466,16 @@
 
 
         },
-       
+
         mounted() {
-           
+
             this.getData();
             this.getQueryNewlyData();
             const that = this
             window.onresize = function () {
                 that.changeSize()
             }
-            this.launchDate  = this.priceRangeDate[0].format('YYYY-MM-DD') + '到'+this.priceRangeDate[1].format('YYYY-MM-DD')+'投放数据'
+            this.launchDate = this.priceRangeDate[0].format('YYYY-MM-DD') + '到' + this.priceRangeDate[1].format('YYYY-MM-DD') + '投放数据'
         },
         methods: {
 
@@ -510,11 +518,11 @@
                 this.getQueryNewlyData();
             },
             changePriceRangeDate(event) {
-                
-                if (this.priceRangeDate[0].format('YYYY-MM-DD') !=  this.priceRangeDate[1].format('YYYY-MM-DD')) {
-                    this.launchDate = this.priceRangeDate[0].format('YYYY-MM-DD') + '到'+this.priceRangeDate[1].format('YYYY-MM-DD')+'投放数据'
-                }else{
-                    this.launchDate = this.priceRangeDate[0].format('YYYY-MM-DD')+'投放数据'
+
+                if (this.priceRangeDate[0].format('YYYY-MM-DD') != this.priceRangeDate[1].format('YYYY-MM-DD')) {
+                    this.launchDate = this.priceRangeDate[0].format('YYYY-MM-DD') + '到' + this.priceRangeDate[1].format('YYYY-MM-DD') + '投放数据'
+                } else {
+                    this.launchDate = this.priceRangeDate[0].format('YYYY-MM-DD') + '投放数据'
                 }
                 this.selectPriceDate = '';
                 this.chartPie = false
@@ -563,7 +571,7 @@
                             this.$nextTick(() => {
                                 this.initEchart('accountIndexEchartOnePie', this.initPieOneData(this.pieData, this.pieTotal));
                             })
-                            
+
                         } else {
                             this.emptyShowOne = false;
                         }
@@ -591,7 +599,7 @@
                             this.$nextTick(() => {
                                 this.initEchart('consume', this.getConsumeData(areaArray, payNumArray));
                             })
-                            
+
                         } else {
                             this.emptyShowTwo = false;
                         }
@@ -634,10 +642,12 @@
 
                 this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getAccountDataByMediaType').then(res => {
                     if (res.code == 0) {
-                        let bytedance = res.result.bytedance
+                        let bytedance = res.result.bytedance;
                         let kuaishou = res.result.kuaishou;
                         let time = res.result.time
+                        this.timeMadeType = time;
                         this.initEchart('shadow', this.getShadowData(bytedance, kuaishou, time));
+
                     }
 
                 })
@@ -685,17 +695,28 @@
                 let that = this;
                 const chart = this.$refs[idName]
                 if (chart) {
-                    const myChart = echarts.init(document.getElementById(idName))
-                    // myChart.showLoading({
-                    //     text: "图表数据正在努力加载..."
-                    // });
-                    myChart.clear()
-                    myChart.setOption(optionName);
-
-                    window.addEventListener('resize', function () {
-                        that.clientWidth = document.documentElement.clientWidth - 224
-                        myChart.resize()
-                    })
+                    if (idName == 'shadow') {
+                        const myCharts = echarts.init(document.getElementById(idName))
+                        this.autoHeight = this.timeMadeType.length * 40 + 20;
+                        
+                        myCharts.clear()
+                        myCharts.setOption(optionName);
+                        myCharts.resize({ height: this.autoHeight })
+                        window.addEventListener('resize', function () {
+                            // that.clientWidth = document.documentElement.clientWidth - 224
+                           
+                        })
+                    } else {
+                        const myChart = echarts.init(document.getElementById(idName))
+                        myChart.clear()
+                        myChart.setOption(optionName);
+
+                        window.addEventListener('resize', function () {
+                            // that.clientWidth = document.documentElement.clientWidth - 224
+                            myChart.resize()
+                        })
+                    }
+
                 }
             },
             // 第一个饼图
@@ -705,8 +726,8 @@
                 let option = {
                     tooltip: {
                         trigger: 'item',
-                        formatter: function(obj){
-                            return obj.name+':'+obj.value+'('+Math.round(obj.value/pieTotal* 100)+'%)'
+                        formatter: function (obj) {
+                            return obj.name + ':' + obj.value + '(' + Math.round(obj.value / pieTotal * 100) + '%)'
                         }
                     },
                     legend: {
@@ -718,8 +739,8 @@
                             fontSize: 12
                         },
                         itemGap: 20,
-                        itemWidth:15,
-                        itemHeight:10,
+                        itemWidth: 15,
+                        itemHeight: 10,
                         padding: [-20, 0, 0, 80],
                         bottom: '55%',
                         formatter: function (name) {  //该函数用于设置图例显示后的百分比
@@ -733,7 +754,7 @@
                                 }
                             })
                             var p = Math.round(((value / total) * 100)); //求出百分比
-                            return p>=10? `${name}    ${'|'}  ${p}%    ${value}` : `${name}    ${'|'}    ${p}%      ${value}` //返回出图例所显示的内容是名称+百分比
+                            return p >= 10 ? `${name}    ${'|'}  ${p}%    ${value}` : `${name}    ${'|'}    ${p}%      ${value}` //返回出图例所显示的内容是名称+百分比
 
 
                         },
@@ -755,7 +776,7 @@
                             label: {
                                 show: true,
                                 position: 'center',
-                                fontSize:10,
+                                fontSize: 10,
                                 formatter: function (param) {
 
                                     return '素材总数\r\n' + pieTotal
@@ -785,7 +806,7 @@
                 // var buyTop = echarts.init(document.getElementById('buyTop'));  //图表容器
                 var areaData = areaArray;   //横坐标值
                 var payPersonNum = payNumArray;  //柱状图的值
-               
+
                 let VALUE1 = [{    //每个柱子的颜色(可自行改变颜色)
                     value: payPersonNum[0],
                     itemStyle: {
@@ -815,18 +836,18 @@
                     itemStyle: {
                         color: 'rgba(182,105,86,1.0)'
                     }
-                },{
+                }, {
                     value: payPersonNum[5],
                     itemStyle: {
                         color: '#40E0D0'
                     }
                 },
                 ]
-                
+
                 VALUE1 = VALUE1.filter(item => {
-                    return item.value !=undefined
-                    })
-                    console.log(VALUE1);
+                    return item.value != undefined
+                })
+                console.log(VALUE1);
                 let VALUE2 = [{  //最高值的柱子颜色  就是你所看到的透明那部分
                     value: Math.max.apply(null, payPersonNum),    //这个value是柱状图的值里的最大值
                     itemStyle: {
@@ -858,9 +879,9 @@
                     }
                 }
                 ]
-                if (VALUE1.length !=VALUE2.length) {
+                if (VALUE1.length != VALUE2.length) {
 
-                    VALUE2.splice(VALUE1.length,VALUE2.length-VALUE1.length)
+                    VALUE2.splice(VALUE1.length, VALUE2.length - VALUE1.length)
                 }
                 console.log(VALUE2);
                 // 绘制左侧面
@@ -912,7 +933,7 @@
                 echarts.graphic.registerShape('CubeLeft', CubeLeft)
                 echarts.graphic.registerShape('CubeRight', CubeRight)
                 echarts.graphic.registerShape('CubeTop', CubeTop)
-                const MAX = [300, 300, 300, 300, 300,300]
+                const MAX = [300, 300, 300, 300, 300, 300]
                 const VALUE = payPersonNum
                 let option = {
                     backgroundColor: "transparent",
@@ -979,7 +1000,7 @@
                         type: 'custom',
                         renderItem: (params, api) => {
                             const location = api.coord([api.value(0), api.value(1)])
-                            
+
                             return {
                                 type: 'group',
                                 children: [{
@@ -1318,7 +1339,7 @@
                         formatter: function (params) {
                             var relVal = params[0].name;
                             for (var i = 0, l = params.length; i < l; i++) {
-                            //遍历出来的值一般是字符串,需要转换成数字,再进项tiFixed四舍五入
+                                //遍历出来的值一般是字符串,需要转换成数字,再进项tiFixed四舍五入
                                 relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + Number(params[i].value).toFixed(2)
                             }
                             return relVal;
@@ -1479,11 +1500,11 @@
                             show: true,
                             color: color[index],
                             fontSize: 18,
-                            padding:[250,0],
+                            padding: [250, 0],
                             formatter: function (params) {
-                                return params.value != 0 ? params.name == '暂无数据'? params.name + '\r\n' + params.data.rate 
-                                : params.name + '\r\n' + echarts.format.addCommas(params.value.toFixed(2)) + '\r\n' + params.data.rate 
-                                : ''
+                                return params.value != 0 ? params.name == '暂无数据' ? params.name + '\r\n' + params.data.rate
+                                    : params.name + '\r\n' + echarts.format.addCommas(params.value.toFixed(2)) + '\r\n' + params.data.rate
+                                    : ''
                             }, // 用\n来换行
                             // rich: {
                             //     b: {