diff --git a/src/styles/index.scss b/src/styles/index.scss index 93916ac0..6b3ebaee 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -163,7 +163,7 @@ input, textarea{ } ::-webkit-scrollbar-thumb { - background-color: rgba(144,147,153,.5); + background-color: #EDEDED; background-clip: padding-box; min-height: 28px; -webkit-border-radius: 2em; @@ -174,7 +174,7 @@ input, textarea{ } ::-webkit-scrollbar-thumb:hover { - background-color: rgba(144,147,153,.3); + background-color: #D9D9D9; } // 抽屉head区域---start diff --git a/src/views/delivery/deliveryLogDet/components/deliveryLogDetDetail.vue b/src/views/delivery/deliveryLogDet/components/deliveryLogDetDetail.vue index f23cd794..fda599ad 100644 --- a/src/views/delivery/deliveryLogDet/components/deliveryLogDetDetail.vue +++ b/src/views/delivery/deliveryLogDet/components/deliveryLogDetDetail.vue @@ -2,7 +2,7 @@ @@ -47,7 +47,7 @@
@@ -75,7 +75,7 @@ v), @@ -230,7 +232,7 @@ export default { // 图 chartDom: '', chart: '', - chartHeight: this.tableHeight(300) + chartHeight: this.tableHeight(300)*0.6 } }, // watch: { @@ -270,6 +272,8 @@ export default { } }, getBar() { + let color = ['#7164FF','#288AFF','#63BDFF','#8EF0AB','#FFCE6A'] + let colorList = [] if ( this.chart !== null && this.chart !== '' && @@ -280,64 +284,90 @@ export default { this.chartDom = document.getElementById('logDetPieBar') this.chart = echarts.init(this.chartDom) let seriesData = [] - let sumData = 0 - this.tableData && this.tableData.map(item =>{ + if (this.tableData.length > 0) { + for (let i = 0; i < this.tableData.length; i++) { + let obj = {} + obj.value = this.tableData[i].num + obj.name = this.tableData[i].name + seriesData.push(obj) + if (i < 5) { + colorList.push(color[i]) + } else { + colorList.push(color[i%5]) + } + } + } + if (this.orderMsg.num < this.orderMsg.orderNum) { let obj = {} - obj.value = item.rate - obj.name = item.name + obj.value = this.orderMsg.orderNum - this.orderMsg.num + obj.name = "未发货" seriesData.push(obj) - sumData+=item.rate - }) - if (sumData < 100) { + colorList.push('#F5F5F5') + }else { let obj = {} - obj.value = 100 - sumData + obj.value = 0 obj.name = "未发货" seriesData.push(obj) + colorList.push('#F5F5F5') } var option = { - color: ['#B0EB42', '#FF9747', '#FF6860', '#7164FF', '#288AFF', '#63BDFF', '#73DE93', '#FFCE6A'], - tooltip: { - trigger: 'item', - formatter: function(params) { - let str = `` - return ` - ${str}${params.name} - ${params.percent} - ` - } - }, + color: colorList, legend: { - type: 'scroll', - orient: 'vertical', - right: '10%', - top: 20, - bottom: 20, - icon: 'rect', - itemHeight: 8, - itemWidth: 8 + bottom: '5%', + left: 'center', + itemWidth: 8, + itemHeight: 8 }, series: [ { type: 'pie', - radius: ['60%', '80%'], - avoidLabelOverlap: false, - label: { - show: false, - position: 'center' - }, + radius: ['40%', '55%'], emphasis: { - label: { - show: true, - fontSize: 40, - fontWeight: 'bold' - }, - scale: true , - scaleSize: 20 , + scale: false }, - labelLine: { - show: false + label: { + alignTo: 'edge', + formatter: '{name|{b}}\n{value|{c}}', + minMargin: 5, + edgeDistance: 10, + lineHeight: 15, + rich: { + name: { + fontSize: 14, + color: 'rgba(0,0,0,0.65)' + }, + value: { + fontSize: 14, + color: 'rgba(0,0,0,0.65)' + } + } }, data: seriesData + }, + { + type: 'pie', + radius: ['40%', '40%'], + label: { + show: true, + position: 'center', + color: '#000', + formatter: [ + '{a|'+this.orderMsg.orderNum+'}', + '{b|总数}' + ].join('\n\n'), + rich: { + a: { + fontSize: 26 +'px' + }, + b: { + fontSize: 16 +'px' + } + } + }, + emphasis: { + scale: false + }, + data: [100] } ] }; @@ -377,11 +407,13 @@ export default {