|
@@ -48,7 +48,7 @@
|
48
|
48
|
:dataset="linedata"
|
49
|
49
|
:tooltipFormat="lineTooltipFormat"
|
50
|
50
|
:encode="[
|
51
|
|
- { x: 'month', y: 'lastYearAmount', seriesName: '入场',bool:'true' },
|
|
51
|
+ { x: 'mouth', y: 'lastAmount', seriesName: '新能源趋势',bool:'true' },
|
52
|
52
|
]"
|
53
|
53
|
id="sxcyfzqk"
|
54
|
54
|
/>
|
|
@@ -56,9 +56,9 @@
|
56
|
56
|
<div style="width: 50%;height: 500px;">
|
57
|
57
|
<h4 style="color: white">新能源车排名</h4>
|
58
|
58
|
<div class="progress-wrapper">
|
59
|
|
- <div style="display: flex;line-height: 50px;" :key="item.label" v-for="item in progresslist">
|
60
|
|
- <span style="color: #fff; padding: 0 10px;">{{item.label}}</span>
|
61
|
|
- <el-progress :text-inside="false" :stroke-width="26" :percentage="item.value" define-back-color="#191e3a" text-color="#888ea8"></el-progress>
|
|
59
|
+ <div style="display: flex;line-height: 80px;" :key="item.label" v-for="item in progresslist">
|
|
60
|
+ <span style="width:60px; color: #fff; padding: 0 10px;">{{item.mouth}}</span>
|
|
61
|
+ <el-progress style="width: 80%" :text-inside="false" :stroke-width="26" :percentage="item.lastAmount" define-back-color="#191e3a" text-color="#fff"></el-progress>
|
62
|
62
|
</div>
|
63
|
63
|
</div>
|
64
|
64
|
</div>
|
|
@@ -89,7 +89,7 @@ export default {
|
89
|
89
|
this.getPieData1()
|
90
|
90
|
this.getPieData2()
|
91
|
91
|
this.getLineData()
|
92
|
|
- this.getProgresslist()
|
|
92
|
+ this.getProgressList()
|
93
|
93
|
},
|
94
|
94
|
watch: {
|
95
|
95
|
},
|
|
@@ -97,7 +97,7 @@ export default {
|
97
|
97
|
lineTooltipFormat(params) {
|
98
|
98
|
return `<div class="line-tooltip">
|
99
|
99
|
<div style="color: ${params[0].color}">${params[0].seriesName}: ${
|
100
|
|
- params[0].data.lastYearAmount || "--"
|
|
100
|
+ params[0].data.lastAmount || "--"
|
101
|
101
|
}</div>
|
102
|
102
|
</div>`;
|
103
|
103
|
},
|
|
@@ -118,9 +118,16 @@ export default {
|
118
|
118
|
},
|
119
|
119
|
getProgressList() {
|
120
|
120
|
api.cllx4().then(res => {
|
121
|
|
- this.progresslist = res.data || []
|
|
121
|
+ this.progresslist = (res.data || []).sort(this.compare('lastAmount'))
|
122
|
122
|
})
|
123
|
|
- }
|
|
123
|
+ },
|
|
124
|
+ compare(key) {
|
|
125
|
+ return function(a, b) {//第一个参数是前一个对象,第二个参数是后一个对象,如果从大到小排序,将参数位置调换
|
|
126
|
+ let val1 = a[key];
|
|
127
|
+ let val2 = b[key];
|
|
128
|
+ return val2 - val1;//求差:如果差值大于0,这两个就要对调位置
|
|
129
|
+ }
|
|
130
|
+ },
|
124
|
131
|
}
|
125
|
132
|
}
|
126
|
133
|
</script>
|
|
@@ -189,7 +196,7 @@ export default {
|
189
|
196
|
width: 100%;
|
190
|
197
|
height: 480px;
|
191
|
198
|
.el-progress {
|
192
|
|
- line-height: 50px;
|
|
199
|
+ line-height: 80px;
|
193
|
200
|
}
|
194
|
201
|
}
|
195
|
202
|
/deep/.el-progress-bar__outer {
|