parent
1bf40556c4
commit
7eceb69991
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
@ -1,85 +1,89 @@
|
||||
<!--
|
||||
* @Author: xw
|
||||
* @Date: 2021-10-09 10:53:21
|
||||
* @LastEditTime: 2021-10-22 11:59:54
|
||||
* @LastEditTime: 2021-10-29 14:35:40
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: 传播声量TOP10
|
||||
* @FilePath: /data-show/src/views/Index/spreadTheSound/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="st-outter" v-loading="load">
|
||||
<v-label-div title="传播声量TOP10">
|
||||
<div>
|
||||
<v-tab-group :btns="['品牌', '车型']" @change="handlerChange"></v-tab-group>
|
||||
</div>
|
||||
</v-label-div>
|
||||
<div class="st-bd">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
<v-pagination :data="pdata" :style="{position: 'absolute', right: '2px', bottom: '2px'}" @change="handlerData"></v-pagination>
|
||||
</div>
|
||||
</div>
|
||||
<div class="st-outter" v-loading="load">
|
||||
<v-label-div title="传播声量TOP10">
|
||||
<div class="tis">
|
||||
<v-pagination :data="pdata" :style="{marginRight: '0.8rem', marginTop: '0.4rem'}" @change="handlerData"></v-pagination>
|
||||
<v-tab-group :btns="['品牌', '车型']" @change="handlerChange"></v-tab-group>
|
||||
</div>
|
||||
</v-label-div>
|
||||
<div class="st-bd">
|
||||
<v-echarts :opt="opt"></v-echarts>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import createOpt from "./opt"
|
||||
import {getHomeBrandSourceType0528} from "@/api/home"
|
||||
import createOpt from "./opt";
|
||||
import { getHomeBrandSourceType0528 } from "@/api/home";
|
||||
export default {
|
||||
name: "spread-the-sound",
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
form: {
|
||||
sQueryType: 1
|
||||
},
|
||||
opt: {},
|
||||
pdata: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
// 切换选择后台数据
|
||||
handlerChange(n) {
|
||||
this.form.sQueryType = n + 1;
|
||||
this.getData()
|
||||
name: "spread-the-sound",
|
||||
data() {
|
||||
return {
|
||||
load: false,
|
||||
form: {
|
||||
sQueryType: 1,
|
||||
},
|
||||
opt: {},
|
||||
pdata: [],
|
||||
};
|
||||
},
|
||||
// 获取数据
|
||||
getData() {
|
||||
this.load = true;
|
||||
let obj = Object.assign({}, this.getCommTime, this.form);
|
||||
getHomeBrandSourceType0528(obj).then(res => {
|
||||
let data = res.data;
|
||||
this.pdata = data;
|
||||
this.load = false;
|
||||
})
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
// 切换选择后台数据
|
||||
handlerChange(n) {
|
||||
this.form.sQueryType = n + 1;
|
||||
this.getData();
|
||||
},
|
||||
// 获取数据
|
||||
getData() {
|
||||
this.load = true;
|
||||
let obj = Object.assign({}, this.getCommTime, this.form);
|
||||
getHomeBrandSourceType0528(obj).then((res) => {
|
||||
let data = res.data;
|
||||
this.pdata = data;
|
||||
this.load = false;
|
||||
});
|
||||
},
|
||||
// 分页显示数据
|
||||
handlerData(arr) {
|
||||
let dx = [];
|
||||
let ds = [];
|
||||
arr.forEach((ele) => {
|
||||
let key = ele.key;
|
||||
let value = ele.value;
|
||||
dx.push(key);
|
||||
ds.push(value);
|
||||
});
|
||||
this.opt = createOpt(dx, ds);
|
||||
},
|
||||
},
|
||||
// 分页显示数据
|
||||
handlerData(arr) {
|
||||
let dx = [];
|
||||
let ds = [];
|
||||
arr.forEach(ele => {
|
||||
let key = ele.key;
|
||||
let value = ele.value;
|
||||
dx.push(key);
|
||||
ds.push(value);
|
||||
})
|
||||
this.opt = createOpt(dx,ds);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.st-outter {
|
||||
width: 460px;
|
||||
height: 312px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.st-bd {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
width: 460px;
|
||||
height: 312px;
|
||||
border: 2px solid #0f2a4d;
|
||||
margin-top: 16px;
|
||||
.st-bd {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
}
|
||||
.tis {
|
||||
display: flex;
|
||||
justify-items: flex-end;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue