prod
lily.zhang 3 years ago
parent d8c3733820
commit c4b9d8c8bc

@ -0,0 +1,29 @@
/*
* @Author: your name
* @Date: 2021-10-20 16:36:08
* @LastEditTime: 2021-10-20 16:55:28
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/api/comm/index.js
*/
import httpService from "@/request"
// 获取顶部选择项
export function getOneTime(params) {
let obj = Object.assign({action: 'getTime', sType: 0}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'get',
params: obj
})
}
// 获取顶部选择项
export function getTwoTime(params) {
let obj = Object.assign({action: 'getTime',sType: 1}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'get',
params: obj
})
}

@ -0,0 +1,88 @@
/*
* @Author: your name
* @Date: 2021-10-20 16:17:39
* @LastEditTime: 2021-10-21 12:04:50
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/api/home/index.js
*/
import httpService from "@/request"
// 首页_实时事件
export function getEventsListH(params) {
let obj = Object.assign({action: 'getEventsListH',sQuDao: '新车上市', sType: 'Home', iTimeType: 0}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'get',
params: obj
})
}
// 首页_传播重点阵地
export function getWebsiteHome0528(params) {
let obj = Object.assign({action: 'getWebsiteHome0528',sType: 'Home'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'get',
params: obj
})
}
// 首页_全网传播数量
export function getHomeCount0528(params) {
let obj = Object.assign({action: 'getHomeCount0528',sType: 'Home'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'get',
params: obj
})
}
// 首页_热销排行
export function getCheZhuBrandCount0528(params) {
let obj = Object.assign({action: 'getCheZhuBrandCount0528',sType: 'Home'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'get',
params: obj
})
}
// 首页_热门词云
export function getHotWordHome(params) {
let obj = Object.assign({action: 'getHotWordHome',sType: 'Home'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'get',
params: obj
})
}
// 首页_正面词云
export function getPositive0528(params) {
let obj = Object.assign({action: 'getPositive0528',sType: 'Home'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'get',
params: obj
})
}
// 首页_负面词云
export function getNegative0528(params) {
let obj = Object.assign({action: 'getNegative0528',sType: 'Home'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'get',
params: obj
})
}
// 首页_尾翼洞察
export function getWeiYiCountHome0528(params) {
let obj = Object.assign({action: 'getWeiYiCountHome0528',sType: 'Home'}, params)
return httpService({
url: `/api/v6.ashx`,
method: 'get',
params: obj
})
}

@ -1,7 +1,7 @@
/*
* @Author: your name
* @Date: 2021-10-12 10:28:00
* @LastEditTime: 2021-10-14 13:20:45
* @LastEditTime: 2021-10-21 13:21:05
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/components/index.js

@ -0,0 +1,347 @@
.zh-load-mark {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9999;
}
.zh-load-box {
position: fixed;
z-index: 3;
width: 7.6em;
min-height: 7.6em;
top: 180px;
left: 50%;
margin-left: -3.8em;
background: rgba(0, 0, 0, 0.7);
text-align: center;
border-radius: 5px;
color: #FFFFFF;
}
.zh-load-content {
margin-top: 64%;
font-size: 14px;
}
.zh-loading {
position: absolute;
width: 0px;
left: 50%;
top: 38%;
}
.loading_leaf {
position: absolute;
top: -1px;
opacity: 0.25;
}
.loading_leaf:before {
content: " ";
position: absolute;
width: 9.14px;
height: 3.08px;
background: #d1d1d5;
box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 1px;
border-radius: 1px;
-webkit-transform-origin: left 50% 0px;
transform-origin: left 50% 0px;
}
.loading_leaf_0 {
-webkit-animation: opacity-0 1.25s linear infinite;
animation: opacity-0 1.25s linear infinite;
}
.loading_leaf_0:before {
-webkit-transform: rotate(0deg) translate(7.92px, 0px);
transform: rotate(0deg) translate(7.92px, 0px);
}
.loading_leaf_1 {
-webkit-animation: opacity-1 1.25s linear infinite;
animation: opacity-1 1.25s linear infinite;
}
.loading_leaf_1:before {
-webkit-transform: rotate(30deg) translate(7.92px, 0px);
transform: rotate(30deg) translate(7.92px, 0px);
}
.loading_leaf_2 {
-webkit-animation: opacity-2 1.25s linear infinite;
animation: opacity-2 1.25s linear infinite;
}
.loading_leaf_2:before {
-webkit-transform: rotate(60deg) translate(7.92px, 0px);
transform: rotate(60deg) translate(7.92px, 0px);
}
.loading_leaf_3 {
-webkit-animation: opacity-3 1.25s linear infinite;
animation: opacity-3 1.25s linear infinite;
}
.loading_leaf_3:before {
-webkit-transform: rotate(90deg) translate(7.92px, 0px);
transform: rotate(90deg) translate(7.92px, 0px);
}
.loading_leaf_4 {
-webkit-animation: opacity-4 1.25s linear infinite;
animation: opacity-4 1.25s linear infinite;
}
.loading_leaf_4:before {
-webkit-transform: rotate(120deg) translate(7.92px, 0px);
transform: rotate(120deg) translate(7.92px, 0px);
}
.loading_leaf_5 {
-webkit-animation: opacity-5 1.25s linear infinite;
animation: opacity-5 1.25s linear infinite;
}
.loading_leaf_5:before {
-webkit-transform: rotate(150deg) translate(7.92px, 0px);
transform: rotate(150deg) translate(7.92px, 0px);
}
.loading_leaf_6 {
-webkit-animation: opacity-6 1.25s linear infinite;
animation: opacity-6 1.25s linear infinite;
}
.loading_leaf_6:before {
-webkit-transform: rotate(180deg) translate(7.92px, 0px);
transform: rotate(180deg) translate(7.92px, 0px);
}
.loading_leaf_7 {
-webkit-animation: opacity-7 1.25s linear infinite;
animation: opacity-7 1.25s linear infinite;
}
.loading_leaf_7:before {
-webkit-transform: rotate(210deg) translate(7.92px, 0px);
transform: rotate(210deg) translate(7.92px, 0px);
}
.loading_leaf_8 {
-webkit-animation: opacity-8 1.25s linear infinite;
animation: opacity-8 1.25s linear infinite;
}
.loading_leaf_8:before {
-webkit-transform: rotate(240deg) translate(7.92px, 0px);
transform: rotate(240deg) translate(7.92px, 0px);
}
.loading_leaf_9 {
-webkit-animation: opacity-9 1.25s linear infinite;
animation: opacity-9 1.25s linear infinite;
}
.loading_leaf_9:before {
-webkit-transform: rotate(270deg) translate(7.92px, 0px);
transform: rotate(270deg) translate(7.92px, 0px);
}
.loading_leaf_10 {
-webkit-animation: opacity-10 1.25s linear infinite;
animation: opacity-10 1.25s linear infinite;
}
.loading_leaf_10:before {
-webkit-transform: rotate(300deg) translate(7.92px, 0px);
transform: rotate(300deg) translate(7.92px, 0px);
}
.loading_leaf_11 {
-webkit-animation: opacity-11 1.25s linear infinite;
animation: opacity-11 1.25s linear infinite;
}
.loading_leaf_11:before {
-webkit-transform: rotate(330deg) translate(7.92px, 0px);
transform: rotate(330deg) translate(7.92px, 0px);
}
@-webkit-keyframes opacity-0 {
0% {
opacity: 0.25;
}
0.01% {
opacity: 0.25;
}
0.02% {
opacity: 1;
}
60.01% {
opacity: 0.25;
}
100% {
opacity: 0.25;
}
}
@-webkit-keyframes opacity-1 {
0% {
opacity: 0.25;
}
8.34333% {
opacity: 0.25;
}
8.35333% {
opacity: 1;
}
68.3433% {
opacity: 0.25;
}
100% {
opacity: 0.25;
}
}
@-webkit-keyframes opacity-2 {
0% {
opacity: 0.25;
}
16.6767% {
opacity: 0.25;
}
16.6867% {
opacity: 1;
}
76.6767% {
opacity: 0.25;
}
100% {
opacity: 0.25;
}
}
@-webkit-keyframes opacity-3 {
0% {
opacity: 0.25;
}
25.01% {
opacity: 0.25;
}
25.02% {
opacity: 1;
}
85.01% {
opacity: 0.25;
}
100% {
opacity: 0.25;
}
}
@-webkit-keyframes opacity-4 {
0% {
opacity: 0.25;
}
33.3433% {
opacity: 0.25;
}
33.3533% {
opacity: 1;
}
93.3433% {
opacity: 0.25;
}
100% {
opacity: 0.25;
}
}
@-webkit-keyframes opacity-5 {
0% {
opacity: 0.270958333333333;
}
41.6767% {
opacity: 0.25;
}
41.6867% {
opacity: 1;
}
1.67667% {
opacity: 0.25;
}
100% {
opacity: 0.270958333333333;
}
}
@-webkit-keyframes opacity-6 {
0% {
opacity: 0.375125;
}
50.01% {
opacity: 0.25;
}
50.02% {
opacity: 1;
}
10.01% {
opacity: 0.25;
}
100% {
opacity: 0.375125;
}
}
@-webkit-keyframes opacity-7 {
0% {
opacity: 0.479291666666667;
}
58.3433% {
opacity: 0.25;
}
58.3533% {
opacity: 1;
}
18.3433% {
opacity: 0.25;
}
100% {
opacity: 0.479291666666667;
}
}
@-webkit-keyframes opacity-8 {
0% {
opacity: 0.583458333333333;
}
66.6767% {
opacity: 0.25;
}
66.6867% {
opacity: 1;
}
26.6767% {
opacity: 0.25;
}
100% {
opacity: 0.583458333333333;
}
}
@-webkit-keyframes opacity-9 {
0% {
opacity: 0.687625;
}
75.01% {
opacity: 0.25;
}
75.02% {
opacity: 1;
}
35.01% {
opacity: 0.25;
}
100% {
opacity: 0.687625;
}
}
@-webkit-keyframes opacity-10 {
0% {
opacity: 0.791791666666667;
}
83.3433% {
opacity: 0.25;
}
83.3533% {
opacity: 1;
}
43.3433% {
opacity: 0.25;
}
100% {
opacity: 0.791791666666667;
}
}
@-webkit-keyframes opacity-11 {
0% {
opacity: 0.895958333333333;
}
91.6767% {
opacity: 0.25;
}
91.6867% {
opacity: 1;
}
51.6767% {
opacity: 0.25;
}
100% {
opacity: 0.895958333333333;
}
}

@ -0,0 +1,71 @@
/*
* @Author: your name
* @Date: 2021-10-21 13:16:41
* @LastEditTime: 2021-10-21 13:16:43
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/components/v-loading/index.js
*/
/*
自定义 loading 组件
调用
this.$loading('正在加载中...');
this.$loading.close();
*/
let _LOADING = {
show: false, // Boolean loading显示状态
component: null // Object loading组件
};
export default {
install(Vue) {
/*
text: String
type: String
*/
Vue.prototype.$loading = function(text='正在加载中...', type) {
if (type == 'close') {
_LOADING.component.show = _LOADING.show = false;
} else {
if (_LOADING.show) {
return;
}
let LoadingCompoent = Vue.extend({
data: function() {
return {
show: _LOADING.show
}
},
template: `<div v-show="show" class="zh-load-mark">
<div class="zh-load-box">
<div class="zh-loading">
<div class="loading_leaf loading_leaf_0"></div>
<div class="loading_leaf loading_leaf_1"></div>
<div class="loading_leaf loading_leaf_2"></div>
<div class="loading_leaf loading_leaf_3"></div>
<div class="loading_leaf loading_leaf_4"></div>
<div class="loading_leaf loading_leaf_5"></div>
<div class="loading_leaf loading_leaf_6"></div>
<div class="loading_leaf loading_leaf_7"></div>
<div class="loading_leaf loading_leaf_8"></div>
<div class="loading_leaf loading_leaf_9"></div>
<div class="loading_leaf loading_leaf_10"></div>
<div class="loading_leaf loading_leaf_11"></div>
</div>
<div class="zh-load-content">${text}</div>
</div>
</div>`
});
_LOADING.component = new LoadingCompoent();
let element = _LOADING.component.$mount().$el;
document.body.appendChild(element);
_LOADING.component.show = _LOADING.show = true;
}
};
// 打开/关闭
['open', 'close'].forEach(function(type) {
Vue.prototype.$loading[type] = function(text) {
return Vue.prototype.$loading(text, type);
}
});
}
}

@ -1,23 +1,92 @@
<!--
* @Author: your name
* @Date: 2021-10-09 16:08:39
* @LastEditTime: 2021-10-09 16:44:16
* @LastEditTime: 2021-10-21 12:47:48
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/components/v-pagination/index.vue
-->
<template>
<div class="v-p-outter">
<span class="iconfont icon-shang1 s1"></span>
<span class="s2">1/3</span>
<span class="iconfont icon-xia1 s3"></span>
<div class="v-p-outter" v-if="pages">
<span class="iconfont icon-shang1 s1" @click="handlerPre"></span>
<span class="s2">{{page}}/{{pages}}</span>
<span class="iconfont icon-xia1 s3" @click="handlerNext"></span>
</div>
</template>
<script>
export default {
name: "v-pagination"
}
name: "v-pagination",
props: {
data: {
type: Array,
default: () => [],
},
sizes: {
type: Number,
default: 5,
},
},
computed: {
pageObj() {
return {
data: this.data,
sizes: this.sizes,
};
},
},
watch: {
pageObj: {
handler() {
this.comitPages();
},
immediate: true,
},
},
data() {
return {
page: 1,
pages: 1,
cdata: [],
};
},
created() {
this.comitPages();
},
methods: {
//
comitPages() {
this.pages = Math.floor(this.data.length / this.sizes);
if (this.pages) {
this.doDatas();
}
},
//
doDatas() {
this.cdata = this.data.slice(
(this.page - 1) * this.sizes,
this.page * this.sizes
);
this.$emit("change", this.cdata);
},
//
handlerPre() {
if (this.page <= 1) {
return;
}
this.page--;
this.doDatas();
},
//
handlerNext() {
if (this.page >= this.pages) {
return;
}
this.page++;
this.doDatas();
},
},
};
</script>
<style lang="less" scoped>
@ -50,5 +119,4 @@ export default {
}
}
}
</style>

@ -24,12 +24,12 @@
</a-dropdown>
<span class="iH-left-s1">菜单</span>
<a-select :default-value="1" :size="$vuiSize" style="width: 120px; margin-left: 40px; margin-right: 8px" v-model="selVal" @change="handleChange">
<a-select :default-value="1" :size="$vuiSize" style="width: 120px; margin-left: 40px; margin-right: 8px" v-model="sTimeType" @change="handleChange">
<a-select-option :style="{ color: '#fff' }" v-for="item in selDatas" :value="item.key" :key="item.key">
{{ item.label }}
{{ item.value }}
</a-select-option>
</a-select>
<a-range-picker :size="$vuiSize" valueFormat="YYYY-MM-DD" v-if="selVal === 4">
<a-range-picker :size="$vuiSize" valueFormat="YYYY-MM-DD" v-if="sTimeType === selVal" @change="handlerChangeTime">
<a-icon slot="suffixIcon" type="calendar" />
</a-range-picker>
</div>
@ -60,35 +60,25 @@
</template>
<script>
import {getTwoTime} from "@/api/comm"
export default {
name: "iHeader",
data() {
return {
selVal: 1,
sTimeType: 1,
selVal: '',
clock: "",
sClock: "",
week: "",
intDt: null,
selDatas: [
{
key: 1,
label: "24小时",
},
{
key: 2,
label: "最近7天",
},
{
key: 3,
label: "最近30天",
},
{
key: 4,
label: "自定义",
},
],
};
},
created() {
this.getTime(this.getCommTime)
},
mounted() {
this.intDt = self.setInterval(() => {
this.getDatetime();
@ -101,7 +91,11 @@ export default {
},
methods: {
handleChange(val) {
console.log(val);
this.setCommTime({sTimeType: val});
if(this.sTimeType != this.selVal) {
this.setCommTime({sStartTime: "",sEndTime: ""});
console.log(this.getCommTime)
}
},
//
getDatetime() {
@ -144,10 +138,28 @@ export default {
handlerMyself() {
this.$router.push("/myself");
},
//
//
handlerType(obj) {
console.log(obj.key)
this.$router.push({path: `/${obj.key}`})
},
//
getTime(commTime) {
let obj = {sType: commTime.sType}
getTwoTime(obj).then(res => {
this.selDatas = res.data;
this.sTimeType = this.selDatas[0].key;
this.selVal = this.selDatas[this.selDatas.length - 1].key;
this.setCommTime({sTimeType: this.sTimeType})
})
},
//
handlerChangeTime(val) {
let obj = {
sStartTime: val[0],
sEndTime: val[1]
}
this.setCommTime(obj);
console.log(this.getCommTime)
}
},
};

@ -1,7 +1,7 @@
/*
* @Author: your name
* @Date: 2021-10-08 08:41:57
* @LastEditTime: 2021-10-16 09:50:21
* @LastEditTime: 2021-10-21 13:24:18
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/main.js

@ -1,7 +1,7 @@
/*
* @Author: your name
* @Date: 2021-10-12 13:56:13
* @LastEditTime: 2021-10-20 16:00:57
* @LastEditTime: 2021-10-20 16:54:05
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/mixins/index.js
@ -12,10 +12,10 @@ export default {
install(Vue) {
Vue.mixin({
computed: {
...mapGetters(['getZoom','getToken', 'getUser', 'getAccount'])
...mapGetters(['getZoom','getToken', 'getUser', 'getAccount', 'getCommTime'])
},
methods: {
...mapActions(["setZoom", 'setToken', 'setUser', 'setAccount'])
...mapActions(["setZoom", 'setToken', 'setUser', 'setAccount', 'setCommTime'])
}
})
}

@ -1,7 +1,7 @@
/*
* @Author: your name
* @Date: 2021-10-13 09:28:02
* @LastEditTime: 2021-10-20 15:19:35
* @LastEditTime: 2021-10-20 19:00:46
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/request/index.js
@ -12,7 +12,7 @@ import router from "@/permission"
function filterRequestData(obj) {
let o = {};
for(let key in obj) {
let b1 = obj[key] == 0;
let b1 = obj[key] === 0;
let b2 = obj[key] === false;
if(obj[key] || b1 || b2) {
o[key] = obj[key]
@ -32,6 +32,7 @@ httpService.interceptors.request.use(config => {
// if(localStorage.getItem('token')){//判断浏览器中的cookie中是否存在项目的token
// config.headers.token = localStorage.getItem('token')
// }
const rqData = filterRequestData(config.data);
const rqParams = filterRequestData(config.params);
// post 'Content-Type' === 'application/x-www-form-urlencoded'

@ -1,7 +1,7 @@
/*
* @Author: your name
* @Date: 2021-10-12 13:36:49
* @LastEditTime: 2021-10-20 15:57:58
* @LastEditTime: 2021-10-20 16:50:37
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/store/actions.js
@ -18,6 +18,9 @@ const actions = {
},
setAccount: ({commit}, log) => {
commit('setAccount', log)
},
setCommTime: ({commit}, log) => {
commit('setCommTime', log)
}
}
export default actions

@ -1,7 +1,7 @@
/*
* @Author: your name
* @Date: 2021-10-12 13:37:06
* @LastEditTime: 2021-10-20 15:59:37
* @LastEditTime: 2021-10-20 16:52:59
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/store/getters.js
@ -18,6 +18,9 @@ const getters = {
},
getAccount(state) {
return state.account
},
getCommTime(state) {
return state.commTime
}
}
export default getters

@ -1,7 +1,7 @@
/*
* @Author: your name
* @Date: 2021-10-12 13:37:35
* @LastEditTime: 2021-10-20 16:11:54
* @LastEditTime: 2021-10-20 16:59:00
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/store/mutations.js
@ -23,6 +23,12 @@ const mutations = {
state.account = log;
let str = JSON.stringify(log);
localStorage.setItem('account', str);
},
setCommTime: (state, log) => {
let obj = Object.assign(state.commTime, log)
state.commTime = obj;
let str = JSON.stringify(obj);
sessionStorage.setItem('commTime', str);
}
}

@ -1,15 +1,21 @@
/*
* @Author: your name
* @Date: 2021-10-12 13:37:50
* @LastEditTime: 2021-10-20 16:11:46
* @LastEditTime: 2021-10-20 17:23:01
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/store/state.js
*/
let commTime = {
sStartTime: "",
sEndTime: "",
sTimeType: 20
}
const state = {
$zoom: 1,
token: sessionStorage.getItem('token') || "",
user: JSON.parse(sessionStorage.getItem('user')) || {},
account: JSON.parse(localStorage.getItem('account')) || {}
account: JSON.parse(localStorage.getItem('account')) || {},
commTime: JSON.parse(sessionStorage.getItem('commTime')) || commTime
}
export default state;

@ -0,0 +1,130 @@
/*
* @Author: your name
* @Date: 2021-10-21 11:36:36
* @LastEditTime: 2021-10-21 11:43:38
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/utils/gol/bubbleWord.js
*/
// 将后台数据转成数组
function doWordCloud(data) {
let arr1 = [];
for (let key in data) {
let obj = { name: key, value: data[key] };
arr1.push(obj);
}
return arr1;
}
// 创建词云的对象
function bubbleChart(data = [], format = []) {
let [maxValue, temp] = [0, []];
data.forEach((item) => {
temp.push(item[format[1]]);
});
maxValue = Math.max.apply(null, temp);
// 气泡颜色数组
let color = [
"#FFB600",
"#886CFF",
"#0084FF",
"#4CB690",
"#58B458",
"#6C6C6C",
"#F56161",
"#FC754C",
"#5F5EEC",
];
// 气泡颜色备份
let bakeColor = [...color];
// 气泡数据
let bubbleData = [];
// 气泡基础大小
let basicSize = 70;
// 节点之间的斥力因子,值越大,气泡间距越大
let repulsion = 380;
// 根据气泡数量配置基础大小和斥力因子(以实际情况进行适当调整,使气泡合理分布)
if (data.length >= 5 && data.length < 10) {
basicSize = 50;
repulsion = 230;
}
if (data.length >= 10 && data.length < 20) {
basicSize = 40;
repulsion = 150;
} else if (data.length >= 20) {
basicSize = 50;
repulsion = 65;
}
// 填充气泡数据数组bubbleData
for (let item of data) {
// 确保气泡数据条数少于或等于气泡颜色数组大小时,气泡颜色不重复
if (!bakeColor.length) bakeColor = [...color];
let colorSet = new Set(bakeColor);
let curIndex = Math.round(Math.random() * (colorSet.size - 1));
let curColor = bakeColor[curIndex];
colorSet.delete(curColor);
bakeColor = [...colorSet];
// 气泡大小设置
let size = (item[format[1]] * basicSize * 2) / maxValue;
if (size < basicSize) size = basicSize;
bubbleData.push({
name: item[format[0]],
value: item[format[1]],
symbolSize: size,
draggable: true,
itemStyle: {
normal: {
color: curColor,
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: "rgba(0,0,0,0.3)",
},
},
});
}
return {
bubbleData,
repulsion,
};
}
// 创建词云图
export default function createWordCloud(obj) {
let words = doWordCloud(obj);
let bubble = bubbleChart(words, ['name', 'value']);
return {
animationEasingUpdate: 'bounceIn',
tooltip: {
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
formatter: function(param) {
let data = param.data;
return `<span>${data.name}</span><br><span>${data.value}</span>`
}
},
series: [{
type: 'graph',
layout: 'force',
label: {
show:true,
color:"#FFF",
fontSize:12,
},
force: {
repulsion: bubble.repulsion,
edgeLength: 10
},
// 是否开启鼠标缩放和平移漫游
roam: true,
data: bubble.bubbleData
}]
}
}

@ -1,7 +1,7 @@
<!--
* @Author: xw
* @Date: 2021-10-09 14:25:05
* @LastEditTime: 2021-10-11 18:11:01
* @LastEditTime: 2021-10-20 18:16:19
* @LastEditors: Please set LastEditors
* @Description: 大数据统计gif
* @FilePath: /data-show/src/views/Index/dynamicNumber/index.vue
@ -11,43 +11,43 @@
<div class="d1">
<span class="s1">APP</span>
<span class="s2">
<countTo :startVal='0' :endVal='1320897' :duration='3000'></countTo>
<countTo :startVal='0' :endVal='form.app' :duration='3000'></countTo>
</span>
</div>
<div class="d1" :style="{top: '340px', left: '0px'}">
<span class="s1">其他</span>
<span class="s2">
<countTo :startVal='0' :endVal='822588' :duration='3000'></countTo>
<countTo :startVal='0' :endVal='form.other' :duration='3000'></countTo>
</span>
</div>
<div class="d1" :style="{top: '91px', left: '426px'}">
<span class="s1">微信</span>
<span class="s2">
<countTo :startVal='0' :endVal='658345' :duration='3000'></countTo>
<countTo :startVal='0' :endVal='form.wecat' :duration='3000'></countTo>
</span>
</div>
<div class="d2" :style="{top: '240px', left: '656px'}">
<span class="s1">
<countTo :startVal='0' :endVal='567894' :duration='3000'></countTo>
<countTo :startVal='0' :endVal='form.forum' :duration='3000'></countTo>
</span>
<span class="s2">论坛</span>
</div>
<div class="d2" :style="{top: '340px', left: '656px'}">
<span class="s1">
<countTo :startVal='0' :endVal='567894' :duration='3000'></countTo>
<countTo :startVal='0' :endVal='form.weipo' :duration='3000'></countTo>
</span>
<span class="s2">微博</span>
</div>
<div class="d2" :style="{top: '490px', left: '246px'}">
<span class="s1">
<countTo :startVal='0' :endVal='567894' :duration='3000'></countTo>
<countTo :startVal='0' :endVal='form.news' :duration='3000'></countTo>
</span>
<span class="s2">新闻</span>
</div>
<div class="d3">
<span class="s1">系统入库 数据总量</span>
<span class="s2">
<countTo :startVal='0' :endVal='274073195' :duration='3000'></countTo>
<countTo :startVal='0' :endVal='form.total' :duration='3000'></countTo>
</span>
</div>
</div>
@ -55,10 +55,55 @@
<script>
import countTo from 'vue-count-to';
import {getHomeCount0528} from "@/api/home"
export default {
name: "dynamic-number",
components: {
countTo
},
data() {
return {
form: {
total: 0,
app: 0,
news: 0,
weipo: 0,
other: 0,
short: 0,
forum: 0,
wecat: 0
}
}
},
created() {
this.getData()
},
methods: {
getData() {
getHomeCount0528(this.getCommTime).then(res => {
let data = res.data;
this.form.total = data.count;
let sourcetypeCount = data.sourcetypeCount;
if(Array.isArray(sourcetypeCount)) {
sourcetypeCount.forEach(ele => {
if(ele.key == '新闻') {
this.form.news = ele.value;
} else if(ele.key == 'APP') {
this.form.app = ele.value;
} else if(ele.key == '论坛') {
this.form.forum = ele.value;
} else if (ele.key == '微信') {
this.form.wecat = ele.value;
} else if(ele.key == '微博') {
this.form.weipo = ele.value;
} else {
this.form.other = ele.value;
}
})
}
})
}
}
}
</script>

@ -1,45 +1,80 @@
<!--
* @Author: xw
* @Date: 2021-10-09 13:25:49
* @LastEditTime: 2021-10-12 10:42:58
* @LastEditTime: 2021-10-21 11:45:00
* @LastEditors: Please set LastEditors
* @Description: 热议图谱
* @FilePath: /data-show/src/views/Index/hotDiscussionGraph/index.vue
-->
<template>
<div class="hdg-ouuter">
<v-label-div title="热议图谱">
<v-tab-group :btns="['热门', '正面', '负面']"></v-tab-group>
</v-label-div>
<div class="hdg-bd">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
<div class="hdg-ouuter">
<v-label-div title="热议图谱">
<v-tab-group :btns="['热门', '正面', '负面']" @change="handlerChange"></v-tab-group>
</v-label-div>
<div class="hdg-bd">
<v-echarts :opt="opt"></v-echarts>
</div>
</div>
</template>
<script>
import createOpt from "./opt"
import createWordCloud from "@/utils/gol/bubbleWord";
import { getHotWordHome, getPositive0528, getNegative0528 } from "@/api/home";
export default {
name: "hot-discussion-graph",
data() {
return {
opt: createOpt()
}
}
name: "hot-discussion-graph",
data() {
return {
opt: {},
type: 0,
};
},
created() {
this.getData();
},
methods: {
handlerChange(n) {
this.type = n;
this.getData();
},
//
getData() {
switch (this.type) {
case 0:
getHotWordHome(this.getCommTime).then((res) => {
let data = res.data;
this.opt = createWordCloud(data);
});
break;
case 1:
getPositive0528(this.getCommTime).then((res) => {
let data = res.data;
this.opt = createWordCloud(data);
});
break;
case 2:
getNegative0528(this.getCommTime).then((res) => {
let data = res.data;
this.opt = createWordCloud(data);
});
break;
default:
break;
}
},
},
};
</script>
<style lang="less" scoped>
.hdg-ouuter {
width: 460px;
height: 312px;
border: 2px solid #0f2a4d;
margin-top: 16px;
margin-left: 16px;
.hdg-bd {
width: 100%;
height: calc(100% - 48px);
}
width: 460px;
height: 312px;
border: 2px solid #0f2a4d;
margin-top: 16px;
margin-left: 16px;
.hdg-bd {
width: 100%;
height: calc(100% - 48px);
}
}
</style>

@ -1,215 +0,0 @@
/*
* @Author: your name
* @Date: 2021-10-09 13:35:13
* @LastEditTime: 2021-10-09 16:03:40
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/Index/hotDiscussionGraph/opt.js
*/
// import * as echarts from "echarts";
const dataBJ = [
[1, 55, 9, 56, 0.46, 18, 6, '良'],
[2, 25, 11, 21, 0.65, 34, 9, '优'],
[3, 56, 7, 63, 0.3, 14, 5, '良'],
[4, 33, 7, 29, 0.33, 16, 6, '优'],
[5, 42, 24, 44, 0.76, 40, 16, '优'],
[6, 82, 58, 90, 1.77, 68, 33, '良'],
[7, 74, 49, 77, 1.46, 48, 27, '良'],
[8, 78, 55, 80, 1.29, 59, 29, '良'],
[9, 267, 216, 280, 4.8, 108, 64, '重度污染'],
// [10, 185, 127, 216, 2.52, 61, 27, '中度污染'],
// [11, 39, 19, 38, 0.57, 31, 15, '优'],
// [12, 41, 11, 40, 0.43, 21, 7, '优'],
// [13, 64, 38, 74, 1.04, 46, 22, '良'],
// [14, 108, 79, 120, 1.7, 75, 41, '轻度污染'],
// [15, 108, 63, 116, 1.48, 44, 26, '轻度污染'],
// [16, 33, 6, 29, 0.34, 13, 5, '优'],
// [17, 94, 66, 110, 1.54, 62, 31, '良'],
// [18, 186, 142, 192, 3.88, 93, 79, '中度污染'],
// [19, 57, 31, 54, 0.96, 32, 14, '良'],
// [20, 22, 8, 17, 0.48, 23, 10, '优'],
// [21, 39, 15, 36, 0.61, 29, 13, '优'],
// [22, 94, 69, 114, 2.08, 73, 39, '良'],
// [23, 99, 73, 110, 2.43, 76, 48, '良'],
// [24, 31, 12, 30, 0.5, 32, 16, '优'],
// [25, 42, 27, 43, 1, 53, 22, '优'],
// [26, 154, 117, 157, 3.05, 92, 58, '中度污染'],
// [27, 234, 185, 230, 4.09, 123, 69, '重度污染'],
// [28, 160, 120, 186, 2.77, 91, 50, '中度污染'],
// [29, 134, 96, 165, 2.76, 83, 41, '轻度污染'],
// [30, 52, 24, 60, 1.03, 50, 21, '良'],
// [31, 46, 5, 49, 0.28, 10, 6, '优']
];
const dataGZ = [
[1, 26, 37, 27, 1.163, 27, 13, '优'],
[2, 85, 62, 71, 1.195, 60, 8, '良'],
[3, 78, 38, 74, 1.363, 37, 7, '良'],
[4, 21, 21, 36, 0.634, 40, 9, '优'],
[5, 41, 42, 46, 0.915, 81, 13, '优'],
// [6, 56, 52, 69, 1.067, 92, 16, '良'],
// [7, 64, 30, 28, 0.924, 51, 2, '良'],
// [8, 55, 48, 74, 1.236, 75, 26, '良'],
// [9, 76, 85, 113, 1.237, 114, 27, '良'],
// [10, 91, 81, 104, 1.041, 56, 40, '良'],
// [11, 84, 39, 60, 0.964, 25, 11, '良'],
// [12, 64, 51, 101, 0.862, 58, 23, '良'],
// [13, 70, 69, 120, 1.198, 65, 36, '良'],
// [14, 77, 105, 178, 2.549, 64, 16, '良'],
// [15, 109, 68, 87, 0.996, 74, 29, '轻度污染'],
// [16, 73, 68, 97, 0.905, 51, 34, '良'],
// [17, 54, 27, 47, 0.592, 53, 12, '良'],
// [18, 51, 61, 97, 0.811, 65, 19, '良'],
// [19, 91, 71, 121, 1.374, 43, 18, '良'],
// [20, 73, 102, 182, 2.787, 44, 19, '良'],
// [21, 73, 50, 76, 0.717, 31, 20, '良'],
// [22, 84, 94, 140, 2.238, 68, 18, '良'],
// [23, 93, 77, 104, 1.165, 53, 7, '良'],
// [24, 99, 130, 227, 3.97, 55, 15, '良'],
// [25, 146, 84, 139, 1.094, 40, 17, '轻度污染'],
// [26, 113, 108, 137, 1.481, 48, 15, '轻度污染'],
// [27, 81, 48, 62, 1.619, 26, 3, '良'],
// [28, 56, 48, 68, 1.336, 37, 9, '良'],
// [29, 82, 92, 174, 3.29, 0, 13, '良'],
// [30, 106, 116, 188, 3.628, 101, 16, '轻度污染'],
// [31, 118, 50, 0, 1.383, 76, 11, '轻度污染']
];
const dataSH = [
[1, 91, 45, 125, 0.82, 34, 23, '良'],
[2, 65, 27, 78, 0.86, 45, 29, '良'],
[3, 83, 60, 84, 1.09, 73, 27, '良'],
[4, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
[5, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
// [6, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
// [7, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
// [8, 89, 65, 78, 0.86, 51, 26, '良'],
// [9, 53, 33, 47, 0.64, 50, 17, '良'],
// [10, 80, 55, 80, 1.01, 75, 24, '良'],
// [11, 117, 81, 124, 1.03, 45, 24, '轻度污染'],
// [12, 99, 71, 142, 1.1, 62, 42, '良'],
// [13, 95, 69, 130, 1.28, 74, 50, '良'],
// [14, 116, 87, 131, 1.47, 84, 40, '轻度污染'],
// [15, 108, 80, 121, 1.3, 85, 37, '轻度污染'],
// [16, 134, 83, 167, 1.16, 57, 43, '轻度污染'],
// [17, 79, 43, 107, 1.05, 59, 37, '良'],
// [18, 71, 46, 89, 0.86, 64, 25, '良'],
// [19, 97, 71, 113, 1.17, 88, 31, '良'],
// [20, 84, 57, 91, 0.85, 55, 31, '良'],
// [21, 87, 63, 101, 0.9, 56, 41, '良'],
// [22, 104, 77, 119, 1.09, 73, 48, '轻度污染'],
// [23, 87, 62, 100, 1, 72, 28, '良'],
// [24, 168, 128, 172, 1.49, 97, 56, '中度污染'],
// [25, 65, 45, 51, 0.74, 39, 17, '良'],
// [26, 39, 24, 38, 0.61, 47, 17, '优'],
// [27, 39, 24, 39, 0.59, 50, 19, '优'],
// [28, 93, 68, 96, 1.05, 79, 29, '良'],
// [29, 188, 143, 197, 1.66, 99, 51, '中度污染'],
// [30, 174, 131, 174, 1.55, 108, 50, '中度污染'],
// [31, 187, 143, 201, 1.39, 89, 53, '中度污染']
];
// const schema = [
// { name: 'date', index: 0, text: '日' },
// { name: 'AQIindex', index: 1, text: 'AQI指数' },
// { name: 'PM25', index: 2, text: 'PM2.5' },
// { name: 'PM10', index: 3, text: 'PM10' },
// { name: 'CO', index: 4, text: '一氧化碳CO' },
// { name: 'NO2', index: 5, text: '二氧化氮NO2' },
// { name: 'SO2', index: 6, text: '二氧化硫SO2' }
// ];
const itemStyle = {
opacity: 0.8,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0,0,0,0.3)'
};
export default function createOpt() {
return {
grid: {
top: "16px",
left: "16px",
right: "16px",
bottom: "16px",
containLabel: true,
},
tooltip: {
backgroundColor: "#08182F",
color: "#fff",
borderColor: "#3373CC",
textStyle: {
color: "#fff", //设置文字颜色
},
extraCssText: "box-shadow: 0px 0px 10px 0px #3373CC;",
formatter: function(param) {
let value = param.value;
return `<span>${value[value.length - 1]}</span><br><span>${value[0]}</span>`
}
},
xAxis: {
show: false,
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
}
},
yAxis: {
show: false,
type: 'value',
splitLine: {
lineStyle: {
type: 'dashed'
}
},
scale: true
},
series: [{
name: '北京',
data: dataBJ,
type: 'scatter',
symbolSize: function (data) {
return data[2]
},
label: {
show: true,
color: "#FFF",
formatter: function (param) {
return param.data[param.data.length - 1];
},
},
itemStyle: itemStyle
}, {
name: '上海',
data: dataSH,
type: 'scatter',
symbolSize: function (data) {
return data[2]
},
label: {
show: true,
color: "#FFF",
formatter: function (param) {
return param.data[param.data.length - 1];
},
},
itemStyle: itemStyle
},
{
name: '广州',
data: dataGZ,
type: 'scatter',
symbolSize: function (data) {
return data[2]
},
label: {
show: true,
color: "#FFF",
formatter: function (param) {
return param.data[param.data.length - 1];
},
},
itemStyle: itemStyle
}
]
}
}

@ -1,49 +1,76 @@
<!--
* @Author: xw
* @Date: 2021-10-08 16:37:30
* @LastEditTime: 2021-10-12 10:43:12
* @LastEditTime: 2021-10-20 17:55:49
* @LastEditors: Please set LastEditors
* @Description: 传播重点阵地
* @FilePath: /data-show/src/views/Index/key-communication-positions/index.vue
-->
<template>
<div class="kcp-outter">
<v-label-div title="传播重点阵地"></v-label-div>
<div class="kcp-inner">
<div class="d1">
<v-ranking :num="1" label="懂车帝" val="594614" :lineShow="false"></v-ranking>
<v-ranking :num="2" label="今日头条" val="594614"></v-ranking>
<v-ranking :num="3" label="汽车之家" val="594614"></v-ranking>
<v-ranking :num="4" label="抖音" val="594614"></v-ranking>
<v-ranking :num="5" label="新浪微博" val="594614"></v-ranking>
</div>
<div class="d1" style="margin-left: 14px">
<v-ranking :num="6" label="懂车帝" val="594614" :lineShow="false"></v-ranking>
<v-ranking :num="7" label="今日头条" val="594614"></v-ranking>
<v-ranking :num="8" label="汽车之家" val="594614"></v-ranking>
<v-ranking :num="9" label="抖音" val="594614"></v-ranking>
<v-ranking :num="10" label="新浪微博" val="594614"></v-ranking>
</div>
<div class="kcp-outter">
<v-label-div title="传播重点阵地"></v-label-div>
<div class="kcp-inner">
<div class="d1">
<v-ranking v-for="(item,index) in d1" :key="index" :lineShow="index === 0 ? false : true" :num="index + 1" :label="item.label" :val="item.val"></v-ranking>
</div>
<div class="d1" style="margin-left: 14px">
<v-ranking v-for="(item,index) in d2" :key="index" :lineShow="index === 0 ? false : true" :num="index + 1" :label="item.label" :val="item.val"></v-ranking>
</div>
</div>
</div>
</div>
</template>
<script>
import { getWebsiteHome0528 } from "@/api/home";
export default {
name: "key-communication-positions",
name: "key-communication-positions",
data() {
return {
d1: [],
d2: [],
};
},
created() {
this.getData();
},
methods: {
//
group(array, subGroupLength) {
let index = 0;
let newArray = [];
while (index < array.length) {
newArray.push(array.slice(index, (index += subGroupLength)));
}
return newArray;
},
//
getData() {
getWebsiteHome0528(this.getCommTime).then((res) => {
let data = res.data;
let vals = [];
for (let key in data) {
let obj = { label: key, val: data[key] };
vals.push(obj);
}
let groupedArray = this.group(vals, 5);
this.d1 = groupedArray[0];
this.d2 = groupedArray[1];
});
},
},
};
</script>
<style lang="less" scoped>
.kcp-outter {
width: 460px;
height: 316px;
border: 2px solid #0f2a4d;
margin-top: 16px;
width: 460px;
height: 316px;
border: 2px solid #0f2a4d;
margin-top: 16px;
}
.kcp-inner {
display: flex;
justify-content: flex-start;
padding: 0 16px;
display: flex;
justify-content: flex-start;
padding: 0 16px;
}
</style>

@ -1,60 +1,68 @@
<!--
* @Author: xw
* @Date: 2021-10-08 15:56:35
* @LastEditTime: 2021-10-12 10:43:24
* @LastEditTime: 2021-10-20 17:30:28
* @LastEditors: Please set LastEditors
* @Description: 实时事件
* @FilePath: /data-show/src/views/Index/realTimeEvent/index.vue
-->
<template>
<div class="rte-outter">
<v-label-div title="实时事件"></v-label-div>
<div class="rte-tb">
<dv-scroll-board
:config="config"
:style="{ width: '100%', height: '230px' }"
/>
<div class="rte-outter">
<v-label-div title="实时事件"></v-label-div>
<div class="rte-tb">
<dv-scroll-board :config="config" :style="{ width: '100%', height: '230px' }" />
</div>
</div>
</div>
</template>
<script>
import { getEventsListH } from "@/api/home";
export default {
name: "real-time-event",
data() {
return {
config: {
headerBGC: "#0F2A4D",
oddRowBGC: "rgba(69, 149, 244, 0);",
evenRowBGC: "#0F2A4D;",
columnWidth: [260],
header: ["事件标题", "影响力", "关联品牌"],
data: [
["2021广州车展现场更多你没…", "40.90", "五菱宏光"],
["丰田威兰达高性能版配置曝光...", "39.90", "本田"],
["广州车展15分钟抢空的限定…", "38.20", "丰田"],
["2021广州车展现场更多你没…", "37.50", "长安"],
["全新本田思域发布动力提升内…", "36.50", "哈弗"],
["全新本田思域发布动力提升内…", "36.50", "哈弗"],
["全新本田思域发布动力提升内…", "36.50", "哈弗"],
["全新本田思域发布动力提升内…", "36.50", "哈弗"],
["全新本田思域发布动力提升内…", "36.50", "哈弗"],
["全新本田思域发布动力提升内…", "36.50", "哈弗"],
],
},
};
},
name: "real-time-event",
data() {
return {
config: {},
};
},
created() {
this.getData();
},
methods: {
getData() {
getEventsListH(this.getCommTime).then((res) => {
let arr = [];
if (Array.isArray(res.data)) {
res.data.forEach((ele) => {
let a = [
ele.events_title,
ele.events_influence,
ele.events_brand,
];
arr.push(a);
});
this.config = {
headerBGC: "#0F2A4D",
oddRowBGC: "rgba(69, 149, 244, 0);",
evenRowBGC: "#0F2A4D;",
columnWidth: [260],
header: ["事件标题", "影响力", "关联品牌"],
data: arr,
};
}
});
},
},
};
</script>
<style lang="less" scoped>
.rte-outter {
width: 460px;
height: 312px;
border: 2px solid #0f2a4d;
.rte-tb {
padding: 16px;
}
width: 460px;
height: 312px;
border: 2px solid #0f2a4d;
.rte-tb {
padding: 16px;
}
}
</style>

@ -1,65 +1,83 @@
<!--
* @Author: xw
* @Date: 2021-10-08 18:58:00
* @LastEditTime: 2021-10-12 10:43:37
* @LastEditTime: 2021-10-20 18:52:14
* @LastEditors: Please set LastEditors
* @Description: 热销排行
* @FilePath: /data-show/src/views/Index/salesRank/index.vue
-->
<template>
<div class="sr-outter">
<v-label-div title="热销排行">
<div>
<v-tab-group :btns="['品牌', '车型']"></v-tab-group>
<a-select
default-value="lucy"
style="width: 80px;margin-left: 16px"
@change="handleChange"
>
<a-select-option value="jack"> Jack </a-select-option>
<a-select-option value="lucy"> Lucy </a-select-option>
<a-select-option value="disabled" disabled>
Disabled
</a-select-option>
<a-select-option value="Yiminghe"> yiminghe </a-select-option>
</a-select>
</div>
</v-label-div>
<div class="sr-bd">
<v-echarts :opt="opt"></v-echarts>
<v-pagination :style="{position: 'absolute', right: '2px', bottom: '11px'}"></v-pagination>
</div>
</div>
<div class="sr-outter">
<v-label-div title="热销排行">
<div>
<v-tab-group :btns="['品牌', '车型']" @change="handlerTabChange"></v-tab-group>
<a-select v-model="form.sTimeType" style="width: 80px;margin-left: 16px">
<a-select-option v-for="item in selArr" :key="item.key" :value="item.key"> {{item.value}} </a-select-option>
</a-select>
</div>
</v-label-div>
<div class="sr-bd">
<v-echarts :opt="opt"></v-echarts>
<v-pagination :style="{position: 'absolute', right: '2px', bottom: '11px'}"></v-pagination>
</div>
</div>
</template>
<script>
import createOpt from "./opt"
import createOpt from "./opt";
import {getOneTime} from "@/api/comm"
import {getCheZhuBrandCount0528} from "@/api/home"
export default {
name: "sales-rank",
data() {
return {
opt: createOpt(["奥迪", "宝马", "奔驰", "吉利", "江淮"],[120, 200, 150, 80, 70])
}
},
methods: {
handleChange(val) {
console.log(val)
}
}
name: "sales-rank",
data() {
return {
form: {
sQueryType: 1,
sTimeType: 34,
sType: 'Home'
},
selArr: [],
opt: createOpt(
["奥迪", "宝马", "奔驰", "吉利", "江淮"],
[120, 200, 150, 80, 70]
),
};
},
created() {
this.getSelect();
this.getData()
},
methods: {
handlerTabChange(n) {
this.form.sQueryType = n === 0 ? 1 : 2
},
//
getSelect() {
getOneTime().then(res => {
this.selArr = res.data
})
},
//
getData() {
let obj = Object.assign({}, this.getCommTime, this.form)
getCheZhuBrandCount0528(obj).then(res => {
console.log(res)
})
}
},
};
</script>
<style lang="less" scoped>
.sr-outter {
width: 460px;
height: 312px;
border: 2px solid #0f2a4d;
margin-left: 16px;
width: 460px;
height: 312px;
border: 2px solid #0f2a4d;
margin-left: 16px;
}
.sr-bd {
position: relative;
width: 100%;
height: calc(100% - 48px);
}
</style>

@ -1,7 +1,7 @@
<!--
* @Author: xw
* @Date: 2021-10-09 11:56:50
* @LastEditTime: 2021-10-12 10:44:20
* @LastEditTime: 2021-10-21 13:24:45
* @LastEditors: Please set LastEditors
* @Description: 尾翼洞察
* @FilePath: /data-show/src/views/Index/tailInsight/index.vue
@ -11,23 +11,60 @@
<div class="tl-outter">
<vLabel-div title="尾翼洞察">
<div>
<v-tab-group :btns="['品牌', '车型']"></v-tab-group>
<v-tab-group :btns="['品牌', '车型']" @change="handlerChange"></v-tab-group>
</div>
</vLabel-div>
<div class="tl-bd">
<v-echarts :opt="opt"></v-echarts>
<v-pagination :style="{position: 'absolute', left: '2px', bottom: '3px'}"></v-pagination>
<v-pagination :data="pdata" :style="{position: 'absolute', left: '2px', bottom: '3px'}" @change="handlerData"></v-pagination>
</div>
</div>
</template>
<script>
import createOpt from "./opt"
import {getWeiYiCountHome0528} from "@/api/home"
export default {
name: "tail-insight",
data() {
return {
opt: createOpt()
form: {
sQueryType: 1
},
opt: {},
pdata: []
}
},
created() {
this.getData()
},
methods: {
//
handlerChange(n) {
this.form.sQueryType = n+1;
this.getData();
},
//
getData() {
let obj = Object.assign({}, this.getCommTime, this.form);
getWeiYiCountHome0528(obj).then(res => {
let data = res.data;
this.pdata = data;
})
},
//
handlerData(arr) {
let dy = [];
let ds = [];
arr.forEach(ele => {
let key = ele.key;
let value = ele.value;
dy.push(key);
ds.push(value)
});
this.opt = createOpt(dy,ds);
}
}
};
@ -35,6 +72,7 @@ export default {
<style lang="less" scoped>
.tl-outter {
position: relative;
width: 460px;
height: 312px;
border: 2px solid #0f2a4d;

@ -3,18 +3,18 @@
/*
* @Author: your name
* @Date: 2021-10-09 12:38:34
* @LastEditTime: 2021-10-09 16:54:54
* @LastEditTime: 2021-10-21 12:56:48
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/Index/tailInsight/opt.js
*/
export default function createOpt() {
export default function createOpt(dy=[],ds=[]) {
return {
grid: {
left: '4%',
right: '4%',
bottom: '3%',
top: "1%",
left: 26,
right: 16,
bottom: 10,
top: 16,
containLabel: true
},
tooltip: {
@ -44,7 +44,7 @@ export default function createOpt() {
},
yAxis: {
type: 'category',
data: ['Brazil', 'USA', 'India', 'China', 'World'],
data: dy,
axisTick: {
show: false,
},
@ -54,13 +54,13 @@ export default function createOpt() {
color: "#fff",
},
},
inverse: true
},
series: [
{
name: '2011',
type: 'bar',
barWidth: 24,
data: [500, 1000, 2220, 3000, 4000]
data: ds
}
]
}

Loading…
Cancel
Save