Esdese
3 years ago
parent
a8aeabf4aa
commit
ed6fe64981
@ -0,0 +1,158 @@
|
||||
// 调性分布
|
||||
export default function negaposiOption(dName = [], data = {}) {
|
||||
// let newValue = [];
|
||||
// dValue.forEach(ele => {
|
||||
// newValue.push(ele*1-100);
|
||||
// })
|
||||
const totalData = []
|
||||
const msg = []
|
||||
for (let [index, i] of Object.keys(data).entries()) {
|
||||
msg.push(i)
|
||||
let obj = {
|
||||
name: i,
|
||||
type: 'bar',
|
||||
barWidth: 12,
|
||||
stack: 'Total',
|
||||
label: {
|
||||
show: false,
|
||||
position: 'right',
|
||||
formatter: function (params) {
|
||||
return (params.data) + '%';
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
barBorderRadius: '',
|
||||
color: '#20cd61'
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: data[i]
|
||||
}
|
||||
if (index == 0) {
|
||||
obj.itemStyle.normal.barBorderRadius = [12, 0, 0, 12]
|
||||
obj.itemStyle.normal.color = '#0283ff'
|
||||
} else if (index == Object.keys(data).length - 1) {
|
||||
obj.itemStyle.normal.barBorderRadius = [0, 12, 12, 0]
|
||||
obj.itemStyle.normal.color = '#fec000'
|
||||
}
|
||||
totalData.push(obj)
|
||||
}
|
||||
return {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: msg,
|
||||
left: 10,
|
||||
// data:[{name:'正面'},{name:'中性'},{name:'负面'},]
|
||||
textStyle: { //图例文字的样式
|
||||
color: 'black',
|
||||
fontSize: 8
|
||||
},
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
borderRadius: 1,
|
||||
},
|
||||
grid: {
|
||||
top: 20,
|
||||
left: 12,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'value',
|
||||
show: false
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
fontSize: 12
|
||||
},
|
||||
data: dName
|
||||
}],
|
||||
series: totalData
|
||||
// [
|
||||
// {
|
||||
// name: '男',
|
||||
// type: 'bar',
|
||||
// barWidth:12,
|
||||
// stack: 'Total',
|
||||
// label: {
|
||||
// show: false,
|
||||
// position: 'right',
|
||||
// formatter: function (params) {
|
||||
// return (params.data)+'%';
|
||||
// },
|
||||
// },
|
||||
// itemStyle:{
|
||||
// normal:{
|
||||
// barBorderRadius:[12,0,0,12],
|
||||
// color: '#0084FF'
|
||||
// },
|
||||
// },
|
||||
// emphasis: {
|
||||
// focus: 'series'
|
||||
// },
|
||||
// data: dMan
|
||||
// },
|
||||
// {
|
||||
// name: '女',
|
||||
// type: 'bar',
|
||||
// barWidth:12,
|
||||
// stack: 'Total',
|
||||
// label: {
|
||||
// show: false,
|
||||
// position: 'right',
|
||||
// formatter: function (params) {
|
||||
// return (params.data)+'%';
|
||||
// },
|
||||
// },
|
||||
// itemStyle:{
|
||||
// normal:{
|
||||
// color: '#20cb65'
|
||||
// },
|
||||
// },
|
||||
// emphasis: {
|
||||
// focus: 'series'
|
||||
// },
|
||||
// data: dLady
|
||||
// },
|
||||
// {
|
||||
// name: '未设置性别',
|
||||
// type: 'bar',
|
||||
// barWidth:12,
|
||||
// stack: 'Total',
|
||||
// label: {
|
||||
// show: false,
|
||||
// position: 'left',
|
||||
// formatter: function (params) {
|
||||
// return (params.data) +'%';
|
||||
// },
|
||||
// },
|
||||
// itemStyle:{
|
||||
// normal:{
|
||||
// barBorderRadius:[0,12,12,0],
|
||||
// color: '#FFBF00',
|
||||
// },
|
||||
// },
|
||||
// emphasis: {
|
||||
// focus: 'series'
|
||||
// },
|
||||
// data: noGender
|
||||
// }
|
||||
// ]
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,74 @@
|
||||
// 象形
|
||||
export default function pictographicOption(dRegion = [], dValue = [], dSum = 0) {
|
||||
return {
|
||||
textStyle: {
|
||||
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
backgroundColor: "#08182F",
|
||||
color: "#fff",
|
||||
borderColor: "#3373CC",
|
||||
textStyle: {
|
||||
color: "#fff", //设置文字颜色
|
||||
fontSize: 9
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
show: false,
|
||||
type: 'value'
|
||||
},
|
||||
yAxis: {
|
||||
data: dRegion,
|
||||
inverse: true,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
color: '#333333',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
height: 186,
|
||||
width: '50%',
|
||||
left: 'center',
|
||||
},
|
||||
series: [{
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#0084FF',
|
||||
barBorderRadius: 12
|
||||
},
|
||||
},
|
||||
// current data
|
||||
type: 'bar',
|
||||
barWidth: 15,
|
||||
data: dValue,
|
||||
label: {
|
||||
show: true,
|
||||
formatter: function (params) {
|
||||
return ((params.value / dSum) * 100).toFixed(2) + ' %';
|
||||
},
|
||||
// position: 'right',
|
||||
position:[180,0],
|
||||
// offset: [20, 0],
|
||||
color: '#333333',
|
||||
fontSize: 12,
|
||||
},
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: 'rgba(180, 180, 180, 0.2)',
|
||||
borderRadius:[12,12,12,12]
|
||||
},
|
||||
markLine: {
|
||||
symbol: 'none',
|
||||
},
|
||||
}, ]
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,191 @@
|
||||
import stack from "../../../../../components/option/stackedBarChart"
|
||||
import pictographicOption from '../../../../../components/option/pictographicOption2'
|
||||
|
||||
import brokenLines from "../../../../../components/option/stackingLineOption"
|
||||
|
||||
const app = getApp()
|
||||
const dColor = ['#FF4852', '#FF6E25', '#FFBF00', '#20CC62', '#00D6D6', '#00AAFF', '#7257FF']
|
||||
Component({
|
||||
data: {
|
||||
imageUrl: getApp().globalData.imageUrl,
|
||||
showChart: true,
|
||||
stackOption: stack([], [], ['#00aaff', '#20cc62', '#ff4852']),
|
||||
transformOption2:brokenLines([], [], [], []),
|
||||
boxArr: new Array(6),
|
||||
bbsInfoData:[],
|
||||
bbsInfo:[],
|
||||
bbsInfoAction:0,
|
||||
positiveData:[],
|
||||
positive:[],
|
||||
positiveActive:0,
|
||||
negativeData:[],
|
||||
negative:[],
|
||||
negativeActive:0,
|
||||
},
|
||||
lifetimes: {
|
||||
attached() {
|
||||
let brandRatioTime = wx.getStorageSync('brandRatioTime')
|
||||
this.setData({
|
||||
boxArr: wx.getStorageSync('brandData')
|
||||
})
|
||||
let sBrand = []
|
||||
this.data.boxArr.forEach((ele) => {
|
||||
if (ele) sBrand.push(ele.brandname)
|
||||
})
|
||||
//论坛信息
|
||||
app.globalData.request({
|
||||
action: 'getCount0528C',
|
||||
sType: 'BbsBrand',
|
||||
iContrastType: '1',
|
||||
iBBsType: '1',
|
||||
sBrand: sBrand.join(','),
|
||||
token: wx.getStorageSync('token'),
|
||||
...brandRatioTime,
|
||||
}).then(res => {
|
||||
this.setData({
|
||||
bbsInfoData:res,
|
||||
bbsInfo:[res[0],res[1]]
|
||||
})
|
||||
})
|
||||
//论坛发帖趋势对比
|
||||
app.globalData.request({
|
||||
action: 'getCountTime0528C',
|
||||
token: wx.getStorageSync('token'),
|
||||
sType: 'BbsBrand',
|
||||
iContrastType: '1',
|
||||
iBBsType:'1',
|
||||
...brandRatioTime,
|
||||
sBrand: sBrand.join(',')
|
||||
}).then(res => {
|
||||
console.log(res);
|
||||
let dDate = []
|
||||
let dVal = new Array(res[0].value.length).fill([])
|
||||
dVal = dVal.map(ele => {
|
||||
ele = JSON.stringify(ele)
|
||||
ele = JSON.parse(ele)
|
||||
return ele
|
||||
})
|
||||
for (let i of res) {
|
||||
dDate.push(i.key)
|
||||
for (let [index, j] of i.value.entries()) {
|
||||
dVal[index].push(j)
|
||||
}
|
||||
}
|
||||
this.setData({
|
||||
transformOption2: brokenLines(sBrand, dVal, dColor, dDate),
|
||||
})
|
||||
})
|
||||
//论坛调性对比
|
||||
app.globalData.request({
|
||||
action: 'getAffectionsC',
|
||||
token: wx.getStorageSync('token'),
|
||||
sType: 'BbsBrand',
|
||||
...brandRatioTime,
|
||||
iContrastType: '1',
|
||||
iBBsType:'1',
|
||||
sBrand: sBrand.join(',')
|
||||
}).then(res => {
|
||||
let yMsg = []
|
||||
let data = [
|
||||
[],
|
||||
[],
|
||||
[]
|
||||
]
|
||||
for (let i of res) {
|
||||
yMsg.push(i.Name)
|
||||
data[0].push(i.Data['正面'])
|
||||
data[1].push(i.Data['中性'])
|
||||
data[2].push(i.Data['负面'])
|
||||
}
|
||||
this.setData({
|
||||
stackOption: stack(yMsg, data, ['#00aaff', '#20cc62', '#ff4852'])
|
||||
})
|
||||
})
|
||||
//论坛正面话题对比
|
||||
app.globalData.request({
|
||||
action: 'getTopicPosAndTopicNeg0528C',
|
||||
token: wx.getStorageSync('token'),
|
||||
sType: 'BbsBrand',
|
||||
...brandRatioTime,
|
||||
iContrastType: '1',
|
||||
iBBsType:'1',
|
||||
sBrand: sBrand.join(',')
|
||||
}).then(res=>{
|
||||
let newRes =[]
|
||||
let positive = []
|
||||
let negative = []
|
||||
console.log(res);
|
||||
for(let i of res){
|
||||
|
||||
for(let [index,j] of i.value.entries()){
|
||||
let obj ={name:i.key,region:[],value:[],sum:0}
|
||||
j.value.forEach(ele=>{
|
||||
obj.region.push(ele.key)
|
||||
obj.value.push(ele.value)
|
||||
obj.sum+=ele.value
|
||||
})
|
||||
index == 0?positive.push(obj):negative.push(obj)
|
||||
}
|
||||
}
|
||||
positive = positive.map(ele=>{
|
||||
ele.func=pictographicOption(ele.region.slice(0,5),ele.value.slice(0,5),ele.sum)
|
||||
return ele
|
||||
})
|
||||
negative = negative.map(ele=>{
|
||||
ele.func=pictographicOption(ele.region.slice(0,5),ele.value.slice(0,5),ele.sum)
|
||||
return ele
|
||||
})
|
||||
this.setData({
|
||||
positiveData:positive,
|
||||
positive:[positive[0],positive[1]],
|
||||
negativeData:negative,
|
||||
negative:[negative[0],negative[1]],
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
//负面
|
||||
negativeChange(event) {
|
||||
let obj = {
|
||||
0: [this.data.negativeData[0] || {}, this.data.negativeData[1] || {}],
|
||||
1: [this.data.negativeData[2] || {}, this.data.negativeData[3] || {}],
|
||||
2: [this.data.negativeData[4] || {}, this.data.negativeData[5] || {}]
|
||||
}
|
||||
let index = event.detail.index
|
||||
this.setData({
|
||||
negativeActive: index,
|
||||
negative: obj[index]
|
||||
})
|
||||
},
|
||||
//正面
|
||||
positiveChange(event) {
|
||||
let obj = {
|
||||
0: [this.data.positiveData[0] || {}, this.data.positiveData[1] || {}],
|
||||
1: [this.data.positiveData[2] || {}, this.data.positiveData[3] || {}],
|
||||
2: [this.data.positiveData[4] || {}, this.data.positiveData[5] || {}]
|
||||
}
|
||||
let index = event.detail.index
|
||||
console.log(obj[index]);
|
||||
this.setData({
|
||||
positiveActive: index,
|
||||
positive: obj[index]
|
||||
})
|
||||
},
|
||||
//论坛信息
|
||||
bbsChange(event) {
|
||||
let obj = {
|
||||
0: [this.data.bbsInfoData[0] || {}, this.data.bbsInfoData[1] || {}],
|
||||
1: [this.data.bbsInfoData[2] || {}, this.data.bbsInfoData[3] || {}],
|
||||
2: [this.data.bbsInfoData[4] || {}, this.data.bbsInfoData[5] || {}]
|
||||
}
|
||||
let index = event.detail.index
|
||||
console.log(obj[index]);
|
||||
this.setData({
|
||||
bbsInfoAction: index,
|
||||
bbsInfo: obj[index]
|
||||
})
|
||||
},
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,7 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"c-echars": "../../../../../../components/c-echars/index",
|
||||
"word-cloud": "../../../../../components/word-cloud/index"
|
||||
},
|
||||
"component": true
|
||||
}
|
||||
@ -0,0 +1,88 @@
|
||||
<view class="top_box">
|
||||
<view class="top-title">
|
||||
<view style="width: 45%;">论坛信息</view>
|
||||
<view style="width:50%;margin-right: 32rpx;">
|
||||
<van-tabs type="card" active="{{ bbsInfoAction }}" color="#BBBBBB" bind:change="bbsChange">
|
||||
<van-tab title="组一"></van-tab>
|
||||
<van-tab title="组二" wx:if="{{bbsInfoData.length>2}}"></van-tab>
|
||||
<van-tab title="组三" wx:if="{{bbsInfoData.length>4}}"></van-tab>
|
||||
</van-tabs>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="info_box" wx:for="{{bbsInfo}}" wx:key="s">
|
||||
<view class="info_left">
|
||||
<view style="font-size:32rpx">{{item.key || '无'}}</view>
|
||||
<view style="font-size:24rpx;color: rgba(153, 153, 153, 1);">品牌名称</view>
|
||||
</view>
|
||||
<view class="info_right">
|
||||
<view class="list_box">
|
||||
<view style="font-size:24rpx;color: rgba(153, 153, 153, 1);">论坛信息量</view>
|
||||
<view style="font-size:28rpx;color: rgba(51, 51, 51, 1);">{{item.Count|| '0'}}</view>
|
||||
</view>
|
||||
<view class="list_box" style="text-align: right;">
|
||||
<view style="font-size:24rpx;color: rgba(153, 153, 153, 1);">互动人数</view>
|
||||
<view style="font-size:28rpx;color: rgba(51, 51, 51, 1);">{{item.interactCount || '0'}}</view>
|
||||
</view>
|
||||
<view class="list_box">
|
||||
<view style="font-size:24rpx;color: rgba(153, 153, 153, 1);">论坛主贴量</view>
|
||||
<view style="font-size:28rpx;color: rgba(51, 51, 51, 1);">{{item.zhutieCount || '0'}}</view>
|
||||
</view>
|
||||
<view class="list_box" style="text-align: right;">
|
||||
<view style="font-size:24rpx;color: rgba(153, 153, 153, 1);">论坛品论量</view>
|
||||
<view style="font-size:28rpx;color: rgba(51, 51, 51, 1);">{{item.commentsSum || '0'}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<view class="chart_box">
|
||||
<view class="chart_title">论坛发帖趋势对比</view>
|
||||
<view class="table">
|
||||
<c-echars showChart="{{showChart}}" canvasId="brandbar-canvas" chartId="brandbar" chartOption="{{transformOption2}}" height="100%"></c-echars>
|
||||
</view>
|
||||
</view>
|
||||
<view class="chart_box">
|
||||
<view class="chart_title">论坛调性对比</view>
|
||||
<view class="table">
|
||||
<c-echars showChart="{{showChart}}" canvasId="brandbar-canvas" chartId="brandbar" chartOption="{{stackOption}}" height="100%"></c-echars>
|
||||
</view>
|
||||
</view>
|
||||
<view class="area_box">
|
||||
<view class="top-title">
|
||||
<view style="width: 45%;">论坛正面话题对比</view>
|
||||
<view style="width:50%;margin-right: 32rpx;">
|
||||
<van-tabs type="card" active="{{ positiveActive }}" color="#BBBBBB" bind:change="positiveChange">
|
||||
<van-tab title="组一"></van-tab>
|
||||
<van-tab title="组二" wx:if="{{bbsInfoData.length>2}}"></van-tab>
|
||||
<van-tab title="组三" wx:if="{{bbsInfoData.length>4}}"></van-tab>
|
||||
</van-tabs>
|
||||
</view>
|
||||
</view>
|
||||
<view wx:for="{{positive}}" wx:key="{{item.name}}">
|
||||
<view style="margin-left: 32rpx;">{{item.name}}</view>
|
||||
<view style="width:686rpx;height:486rpx;margin-top: -50px;">
|
||||
<c-echars showChart="{{showChart}}" canvasId="region-canvas1" chartId="regionbar1" chartOption="{{item.func}}" height="100%"></c-echars>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="area_box">
|
||||
<view class="top-title">
|
||||
<view style="width: 45%;">论坛负面话题对比</view>
|
||||
<view style="width:50%;margin-right: 32rpx;">
|
||||
<van-tabs type="card" active="{{ negativeActive }}" color="#BBBBBB" bind:change="negativeChange">
|
||||
<van-tab title="组一"></van-tab>
|
||||
<van-tab title="组二" wx:if="{{bbsInfoData.length>2}}"></van-tab>
|
||||
<van-tab title="组三" wx:if="{{bbsInfoData.length>4}}"></van-tab>
|
||||
</van-tabs>
|
||||
</view>
|
||||
</view>
|
||||
<view wx:for="{{negative}}" wx:key="{{item.name}}">
|
||||
<view style="margin-left: 32rpx;">{{item.name}}</view>
|
||||
<view style="width:686rpx;height:486rpx;margin-top: -50px;">
|
||||
<c-echars showChart="{{showChart}}" canvasId="region-canvas1" chartId="regionbar1" chartOption="{{item.func}}" height="100%"></c-echars>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -0,0 +1,98 @@
|
||||
.chart_box{
|
||||
margin-top: 24rpx;
|
||||
width: 686rpx;
|
||||
height: 486rpx;
|
||||
padding-top:32rpx ;
|
||||
background: white;
|
||||
}
|
||||
.chart_title{
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
margin-left:32rpx ;
|
||||
}
|
||||
.table{
|
||||
height: 380rpx;
|
||||
width: 95%;
|
||||
margin-left:16rpx ;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
.top_box{
|
||||
margin-top: 24rpx;
|
||||
width: 686rpx;
|
||||
height: 510rpx;
|
||||
background:#ffffff;
|
||||
border-radius: 8rpx;
|
||||
padding-top:32rpx;
|
||||
}
|
||||
.info_box{
|
||||
height: 200rpx;
|
||||
margin-top: 22rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.info_left{
|
||||
width: 30%;
|
||||
}
|
||||
.info_right{
|
||||
height: 100%;
|
||||
display:flex;
|
||||
width: 60%;
|
||||
justify-content:space-evenly;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.list_box{
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
}
|
||||
.top-title {
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
padding-left: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.rank_list{
|
||||
margin-left: 32rpx;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
.ranking{
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
.ranking_cell{
|
||||
height: 104rpx;
|
||||
display: flex ; align-items: center;
|
||||
}
|
||||
.henxian{
|
||||
height: 2rpx;
|
||||
background:linear-gradient(to right,white, #f2f1f1,white);
|
||||
}
|
||||
.cloud_box{
|
||||
margin-top: 24rpx;
|
||||
width: 686rpx;
|
||||
height: 884rpx;
|
||||
background:#ffffff;
|
||||
border-radius: 8rpx;
|
||||
padding-top:32rpx;
|
||||
}
|
||||
.cloud_title {
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
padding-left: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.area_box{
|
||||
margin-top: 24rpx;
|
||||
width: 686rpx;
|
||||
height: 970rpx;
|
||||
background:#ffffff;
|
||||
border-radius: 8rpx;
|
||||
padding-top:32rpx;
|
||||
}
|
||||
@ -0,0 +1,102 @@
|
||||
import brokenLines from "../../../../../components/option/stackingLineOption"
|
||||
import histogram from "../../../../../components/option/singleColumnarOption"
|
||||
import stack from "../../../../../components/option/stackedBarChart"
|
||||
import multipleColumn from "../../../../../components/option/multipleColumn"
|
||||
import sHistogram from "../../../../../components/option/sColumnarOption"
|
||||
const app = getApp()
|
||||
const dColor = ['#FF4852', '#FF6E25', '#FFBF00', '#20CC62', '#00D6D6', '#00AAFF', '#7257FF']
|
||||
Component({
|
||||
data: {
|
||||
imageUrl: getApp().globalData.imageUrl,
|
||||
showChart: true,
|
||||
transformOption: brokenLines([], [], [], []),
|
||||
transformOption2: brokenLines([], [], [], []),
|
||||
brandOption: histogram([], [], [], '#0084FF'),
|
||||
brandOption2: histogram([], [], [], '#20cc62'),
|
||||
brandOption3: multipleColumn([], [], []),
|
||||
brandOption4: sHistogram(),
|
||||
brandOption5: multipleColumn([], [], []),
|
||||
stackOption: stack([], [], ['#00aaff', '#20cc62', '#ff4852']),
|
||||
boxArr: new Array(6),
|
||||
topActive: 0, //品牌传播
|
||||
brandTop: [],
|
||||
brandTopData: [],
|
||||
cloudActive: 0, //词云
|
||||
positiveWord: [],
|
||||
negativeWord: [], //负面
|
||||
},
|
||||
lifetimes: {
|
||||
attached() {
|
||||
let brandRatioTime = wx.getStorageSync('brandRatioTime')
|
||||
this.setData({
|
||||
boxArr: wx.getStorageSync('brandData')
|
||||
})
|
||||
let sBrand = []
|
||||
this.data.boxArr.forEach((ele) => {
|
||||
if (ele) sBrand.push(ele.brandname)
|
||||
})
|
||||
//品牌传播TOP媒体
|
||||
app.globalData.request({
|
||||
action: 'getSourceTopCount0528C',
|
||||
token: wx.getStorageSync('token'),
|
||||
sType: 'BrandWeiYi',
|
||||
...brandRatioTime,
|
||||
iContrastType: '1',
|
||||
iSize:'10',
|
||||
sBrand: sBrand.join(',')
|
||||
}).then(res => {
|
||||
this.setData({
|
||||
brandTop: [res[0], res[1]],
|
||||
brandTopData: res
|
||||
})
|
||||
})
|
||||
//尾翼趋势
|
||||
app.globalData.request({
|
||||
action: 'getCountTime0528C',
|
||||
token: wx.getStorageSync('token'),
|
||||
sType: 'BrandWeiYi',
|
||||
iContrastType: '1',
|
||||
...brandRatioTime,
|
||||
sBrand: sBrand.join(',')
|
||||
}).then(res => {
|
||||
console.log(res);
|
||||
let dDate = []
|
||||
let dVal = new Array(res[0].value.length).fill([])
|
||||
dVal = dVal.map(ele => {
|
||||
ele = JSON.stringify(ele)
|
||||
ele = JSON.parse(ele)
|
||||
return ele
|
||||
})
|
||||
for (let i of res) {
|
||||
dDate.push(i.key)
|
||||
for (let [index, j] of i.value.entries()) {
|
||||
dVal[index].push(j)
|
||||
}
|
||||
}
|
||||
this.setData({
|
||||
salesDate: res.Time,
|
||||
transformOption2: brokenLines(sBrand, dVal, dColor, dDate),
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
methods: {
|
||||
//品牌传播top媒体
|
||||
changeModalHot(event) {
|
||||
let obj = {
|
||||
0: [this.data.brandTopData[0] || {}, this.data.brandTopData[1] || {}],
|
||||
1: [this.data.brandTopData[2] || {}, this.data.brandTopData[3] || {}],
|
||||
2: [this.data.brandTopData[4] || {}, this.data.brandTopData[5] || {}]
|
||||
}
|
||||
let index = event.detail.index
|
||||
this.setData({
|
||||
topActive: index,
|
||||
brandTop: obj[index]
|
||||
})
|
||||
},
|
||||
changeModalHot2(event) {
|
||||
|
||||
},
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,7 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"c-echars": "../../../../../../components/c-echars/index",
|
||||
"word-cloud": "../../../../../components/word-cloud/index"
|
||||
},
|
||||
"component": true
|
||||
}
|
||||
@ -0,0 +1,65 @@
|
||||
<view class="chart_box">
|
||||
<view class="chart_title">尾翼趋势对比</view>
|
||||
<view class="table">
|
||||
<c-echars height="100%" showChart="{{showChart}}" canvasId="eventbar-canvas" chartId="eventbar" chartOption="{{transformOption2}}"></c-echars>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="top_box">
|
||||
<view class="top-title">
|
||||
<view style="width: 45%;">尾翼TOP媒体</view>
|
||||
<view style="width:50%;margin-right: 32rpx;">
|
||||
<van-tabs type="card" active="{{ topActive }}" color="#BBBBBB" bind:change="changeModalHot">
|
||||
<van-tab title="组一"></van-tab>
|
||||
<van-tab title="组二" wx:if="{{brandTopData.length>2}}"></van-tab>
|
||||
<van-tab title="组三" wx:if="{{brandTopData.length>4}}"></van-tab>
|
||||
</van-tabs>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view style="font-size:32rpx;margin-left:30rpx;">{{brandTop[0].key}}</view>
|
||||
<view class="rank_list">
|
||||
<view class="ranking">
|
||||
<view style=" display: inline-block;">排名</view>
|
||||
<view style=" display: inline-block;margin-left: 172rpx;">车型</view>
|
||||
<view style=" display: inline-block;margin-left: 272rpx;">传播量</view>
|
||||
</view>
|
||||
<view class="ranking_cell" wx:for="{{brandTop[0].value}}" wx:for-item="item" wx:if="{{index>=0 && index<=4}}" wx:key="V">
|
||||
<view wx:if="{{index==0}}">
|
||||
<image src="{{imageUrl}}/img_diyi.png" style="height:46rpx;width:53rpx;"></image>
|
||||
</view>
|
||||
<view wx:elif="{{index==1}}">
|
||||
<image src="{{imageUrl}}/img_dier.png" style="height:46rpx;width:53rpx;"></image>
|
||||
</view>
|
||||
<view wx:elif="{{index==2}}">
|
||||
<image src="{{imageUrl}}/img_disan.png" style="height:46rpx;width:53rpx;"></image>
|
||||
</view>
|
||||
<view wx:else style="font-size: 28rpx;color: #999999;font-weight: bolder;width: 52rpx;">{{"0"+(index+1)}}</view>
|
||||
<view style=" display: inline-block;font-size: 28rpx;width: 112rpx;margin-left: 166rpx; font-weight: bolder;">{{item.key}}</view>
|
||||
<view style=" display: inline-block;font-size: 28rpx;width: 94rpx;margin-left: 194rpx;color: #0084ff;font-weight: bolder;">{{item.value}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="henxian"></view>
|
||||
<view style="font-size:32rpx;margin-left:30rpx;">{{brandTop[1].key}}</view>
|
||||
<view class="rank_list">
|
||||
<view class="ranking" wx:if="{{brandTop[1].key}}">
|
||||
<view style=" display: inline-block;">排名</view>
|
||||
<view style=" display: inline-block;margin-left: 172rpx;">车型</view>
|
||||
<view style=" display: inline-block;margin-left: 272rpx;">传播量</view>
|
||||
</view>
|
||||
<view class="ranking_cell" wx:for="{{brandTop[1].value}}" wx:for-item="item" wx:if="{{index>=0 && index<=4}}" wx:key="S">
|
||||
<view wx:if="{{index==0}}">
|
||||
<image src="{{imageUrl}}/img_diyi.png" style="height:46rpx;width:53rpx;"></image>
|
||||
</view>
|
||||
<view wx:elif="{{index==1}}">
|
||||
<image src="{{imageUrl}}/img_dier.png" style="height:46rpx;width:53rpx;"></image>
|
||||
</view>
|
||||
<view wx:elif="{{index==2}}">
|
||||
<image src="{{imageUrl}}/img_disan.png" style="height:46rpx;width:53rpx;"></image>
|
||||
</view>
|
||||
<view wx:else style="font-size: 28rpx;color: #999999;font-weight: bolder;width: 52rpx;">{{"0"+(index+1)}}</view>
|
||||
<view style=" display: inline-block;font-size: 28rpx;width: 112rpx;margin-left: 166rpx; font-weight: bolder;">{{item.key}}</view>
|
||||
<view style=" display: inline-block;font-size: 28rpx;width: 94rpx;margin-left: 194rpx;color: #0084ff;font-weight: bolder;">{{item.value}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -0,0 +1,69 @@
|
||||
.chart_box{
|
||||
margin-top: 24rpx;
|
||||
width: 686rpx;
|
||||
height: 486rpx;
|
||||
padding-top:32rpx ;
|
||||
background: white;
|
||||
}
|
||||
.chart_title{
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
margin-left:32rpx ;
|
||||
}
|
||||
.table{
|
||||
height: 380rpx;
|
||||
width: 95%;
|
||||
margin-left:16rpx ;
|
||||
margin-top: 32rpx;
|
||||
}
|
||||
.top_box{
|
||||
margin-top: 24rpx;
|
||||
width: 686rpx;
|
||||
height: 1312rpx;
|
||||
background:#ffffff;
|
||||
border-radius: 8rpx;
|
||||
padding-top:32rpx;
|
||||
}
|
||||
.top-title {
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
padding-left: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.rank_list{
|
||||
margin-left: 32rpx;
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
.ranking{
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
.ranking_cell{
|
||||
height: 104rpx;
|
||||
display: flex ; align-items: center;
|
||||
}
|
||||
.henxian{
|
||||
height: 2rpx;
|
||||
background:linear-gradient(to right,white, #f2f1f1,white);
|
||||
}
|
||||
.cloud_box{
|
||||
margin-top: 24rpx;
|
||||
width: 686rpx;
|
||||
height: 884rpx;
|
||||
background:#ffffff;
|
||||
border-radius: 8rpx;
|
||||
padding-top:32rpx;
|
||||
}
|
||||
.cloud_title {
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
padding-left: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
Loading…
Reference in new issue