|
|
@@ -159,21 +159,25 @@
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
<br />
|
|
|
- <div v-if="item.name" class="item">区域名称：{{ item.name }}</div>
|
|
|
- <div v-if="item.name" class="item">
|
|
|
- 活跃用户数：
|
|
|
- <countTo
|
|
|
- :startVal="item.userSum"
|
|
|
- :endVal="item.userSum"
|
|
|
- :duration="100"
|
|
|
- ></countTo>
|
|
|
- </div>
|
|
|
- <div v-if="item.name" class="item">
|
|
|
- 活跃用户占比：{{ item.distribution }}
|
|
|
- </div>
|
|
|
</el-col>
|
|
|
<el-col :span="18">
|
|
|
- <div ref="regionChart"></div>
|
|
|
+ <div style="position: relative">
|
|
|
+ <div style="position: absolute; top: 10px; left: 10px">
|
|
|
+ <div v-if="item.name" class="item">区域名称：{{ item.name }}</div>
|
|
|
+ <div v-if="item.name" class="item">
|
|
|
+ 活跃用户数：
|
|
|
+ <countTo
|
|
|
+ :startVal="item.userSum"
|
|
|
+ :endVal="item.userSum"
|
|
|
+ :duration="100"
|
|
|
+ ></countTo>
|
|
|
+ </div>
|
|
|
+ <div v-if="item.name" class="item">
|
|
|
+ 活跃用户占比：{{ item.distribution }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div ref="regionChart"></div>
|
|
|
+ </div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-card>
|
|
|
@@ -305,24 +309,32 @@ export default {
|
|
|
chart.resize({
|
|
|
height: this.$refs.regionChart.offsetWidth * 1,
|
|
|
});
|
|
|
- let min = list[list.length - 1].userSum;
|
|
|
+ // let min = list[list.length - 1].userSum;
|
|
|
const p = {
|
|
|
tooltip: {
|
|
|
confine: true,
|
|
|
trigger: "item",
|
|
|
- formatter: function(e){
|
|
|
- if(e.value) return e.name + "<br />" + (e.value || "")
|
|
|
- return ""
|
|
|
+ formatter: function (e) {
|
|
|
+ if (e.value) return e.name + "<br />" + (e.value || "");
|
|
|
+ return "";
|
|
|
},
|
|
|
},
|
|
|
visualMap: {
|
|
|
- min,
|
|
|
- max: list[0].userSum,
|
|
|
- realtime: false,
|
|
|
- calculable: true,
|
|
|
- inRange: {
|
|
|
- color: ["lightskyblue", "yellow", "orangered"],
|
|
|
- },
|
|
|
+ // min,
|
|
|
+ // max: list[0].userSum,
|
|
|
+ // realtime: false,
|
|
|
+ // calculable: true,
|
|
|
+ // inRange: {
|
|
|
+ // color: ["lightskyblue", "yellow", "orangered"],
|
|
|
+ // },
|
|
|
+ type: "piecewise",
|
|
|
+ pieces: [
|
|
|
+ {min: 0, max: 500, label: "活跃用户数< 5000", color: '#02a7f0'},
|
|
|
+ {max: 1000, min: 500, label: "500<=活跃用户数< 1000", color: '#95f204'},
|
|
|
+ {min: 1000, max: 2500, label: "1000<=活跃用户数< 2500", color: '#ffff00'},
|
|
|
+ {min: 2500, max: 5000, label: "2500<= 活跃用户数< 5000", color: '#f59a23'},
|
|
|
+ {min: 5000, label: "活跃用户数>= 5000", color: '#d9001b'},
|
|
|
+ ],
|
|
|
},
|
|
|
series: [
|
|
|
{
|
liyongli