浏览代码

修改分公司看板数据细节样式

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

+ 48 - 19
src/views/bossDataKanban/index.vue

@@ -346,7 +346,7 @@
                         <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>
+                        <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>
@@ -399,6 +399,7 @@
         data() {
             return {
                 optionData: [],
+                
                 container: true,
                 chartPie: true,
                 emptyShowOne: true,
@@ -410,6 +411,7 @@
                 branchShow: true,
                 value: '2',
                 priceRangeDate: [moment().startOf('day').subtract(7, 'days'), moment().endOf('day')],
+                launchDate:'',
                 selectPriceDate: '',
                 offsetDays: 86400000 * 31,
                 fullText: true,
@@ -456,11 +458,7 @@
 
 
         },
-        beforeCreate() {
-            console.log(Empty);
-            this.emptyImg = Empty.PRESENTED_IMAGE_SIMPLE
-            console.log(this.emptyImg);
-        },
+       
         mounted() {
            
             this.getData();
@@ -469,6 +467,7 @@
             window.onresize = function () {
                 that.changeSize()
             }
+            this.launchDate  = this.priceRangeDate[0].format('YYYY-MM-DD') + '到'+this.priceRangeDate[1].format('YYYY-MM-DD')+'投放数据'
         },
         methods: {
 
@@ -510,7 +509,13 @@
                 this.getData();
                 this.getQueryNewlyData();
             },
-            changePriceRangeDate() {
+            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')+'投放数据'
+                }
                 this.selectPriceDate = '';
                 this.chartPie = false
                 this.getData();
@@ -728,7 +733,7 @@
                                 }
                             })
                             var p = Math.round(((value / total) * 100)); //求出百分比
-                            return `${name}    ${'|'}  ${p}%    ${value}`;  //返回出图例所显示的内容是名称+百分比
+                            return p>=10? `${name}    ${'|'}  ${p}%    ${value}` : `${name}    ${'|'}    ${p}%      ${value}` //返回出图例所显示的内容是名称+百分比
 
 
                         },
@@ -743,9 +748,9 @@
                             hoverAnimation: true,
                             silent: false,
                             itemStyle: {
-                                borderRadius: 20,
+                                borderRadius: 10,
                                 borderColor: 'rgba(2, 28, 69, 1)',
-                                borderWidth: 6
+                                borderWidth: 2
                             },
                             label: {
                                 show: true,
@@ -778,10 +783,10 @@
             // 柱状图
             getConsumeData(areaArray, payNumArray) {
                 // var buyTop = echarts.init(document.getElementById('buyTop'));  //图表容器
-
                 var areaData = areaArray;   //横坐标值
                 var payPersonNum = payNumArray;  //柱状图的值
-                const VALUE1 = [{    //每个柱子的颜色(可自行改变颜色)
+               
+                let VALUE1 = [{    //每个柱子的颜色(可自行改变颜色)
                     value: payPersonNum[0],
                     itemStyle: {
                         color: 'rgba(0,137,255,1.0)'
@@ -810,9 +815,19 @@
                     itemStyle: {
                         color: 'rgba(182,105,86,1.0)'
                     }
-                }
+                },{
+                    value: payPersonNum[5],
+                    itemStyle: {
+                        color: '#40E0D0'
+                    }
+                },
                 ]
-                const VALUE2 = [{  //最高值的柱子颜色  就是你所看到的透明那部分
+                
+                VALUE1 = VALUE1.filter(item => {
+                    return item.value !=undefined
+                    })
+                    console.log(VALUE1);
+                let VALUE2 = [{  //最高值的柱子颜色  就是你所看到的透明那部分
                     value: Math.max.apply(null, payPersonNum),    //这个value是柱状图的值里的最大值
                     itemStyle: {
                         color: 'rgba(0,137,255,.1)'
@@ -843,6 +858,11 @@
                     }
                 }
                 ]
+                if (VALUE1.length !=VALUE2.length) {
+
+                    VALUE2.splice(VALUE1.length,VALUE2.length-VALUE1.length)
+                }
+                console.log(VALUE2);
                 // 绘制左侧面
                 const CubeLeft = echarts.graphic.extendShape({
                     shape: {
@@ -892,7 +912,7 @@
                 echarts.graphic.registerShape('CubeLeft', CubeLeft)
                 echarts.graphic.registerShape('CubeRight', CubeRight)
                 echarts.graphic.registerShape('CubeTop', CubeTop)
-                const MAX = [300, 300, 300, 300, 300]
+                const MAX = [300, 300, 300, 300, 300,300]
                 const VALUE = payPersonNum
                 let option = {
                     backgroundColor: "transparent",
@@ -959,6 +979,7 @@
                         type: 'custom',
                         renderItem: (params, api) => {
                             const location = api.coord([api.value(0), api.value(1)])
+                            
                             return {
                                 type: 'group',
                                 children: [{
@@ -1152,7 +1173,6 @@
                             type: 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                         },
                         formatter: function (params, ticket, callback) {
-                            console.log(params)
                             var res = params[0].name;
                             for (var i = 0, l = params.length; i < l; i++) {
                                 res += '<br/>' + params[i].seriesName + ' : ' + Math.abs(params[i].value);
@@ -1294,7 +1314,15 @@
                     },
                     color: ['#87CEFA', '#FFA500', '#8A2BE2', '#3CB371',],
                     tooltip: {
-                        trigger: 'axis'
+                        trigger: 'axis',
+                        formatter: function (params) {
+                            var relVal = params[0].name;
+                            for (var i = 0, l = params.length; i < l; i++) {
+                            //遍历出来的值一般是字符串,需要转换成数字,再进项tiFixed四舍五入
+                                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + Number(params[i].value).toFixed(2)
+                            }
+                            return relVal;
+                        }
                     },
                     legend: {
                         data: ['华北', '华东', '华南', '骄阳'],
@@ -1446,7 +1474,6 @@
                     item.itemStyle = {
                         color: color[index],
                     }
-                    console.log(item);
                     item.label = {
                         normal: {
                             show: true,
@@ -1454,7 +1481,9 @@
                             fontSize: 18,
                             padding:[250,0],
                             formatter: function (params) {
-                                return params.value != 0 ? 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: {