dev
zx
3 years ago
parent
2f8f2dad36
commit
3025b28a1e
@ -0,0 +1,117 @@
|
||||
import histogram from "../../../../../components/option/columnarOption"
|
||||
import brokenLine from "../../../../../components/option/stackingLineOption"
|
||||
import singleLine from "../../../../../components/option/sgOption"
|
||||
import pictographicOption from '../../../../../components/option/pictographicOption'
|
||||
const app = getApp();
|
||||
const dColor=['#FF4852','#FF6E25','#FFBF00','#20CC62','#00D6D6']
|
||||
Component({
|
||||
data: {
|
||||
showChart: true,
|
||||
detailData: '',
|
||||
ttTransform: singleLine([],[]),
|
||||
hotTopicData1: pictographicOption([],[]),
|
||||
hotTopicData2: pictographicOption([],[]),
|
||||
transTopModal: histogram([],[],[],'#20CC62'),
|
||||
top5ModalTrans: brokenLine([],[],[],[]),
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
app.globalData.requestMessage({
|
||||
action: 'getBbsInsightAnalysis', //论坛洞察详情
|
||||
token: 't%2BrswgjvzGM=',
|
||||
sType: 'BbsBrand',
|
||||
sTimeType: wx.getStorageSync('sTimeType') || 34,
|
||||
sBrand: wx.getStorageSync('sBrand') || '',
|
||||
iBBsType: 1,
|
||||
}).then(res => {
|
||||
this.setData({detailData: res})
|
||||
});
|
||||
app.globalData.request({
|
||||
action: 'getBbsCountTime', //论坛传播态势
|
||||
token: 't%2BrswgjvzGM=',
|
||||
sType: 'BbsBrand',
|
||||
sTimeType: wx.getStorageSync('sTimeType') || 34,
|
||||
sBrand: wx.getStorageSync('sBrand') || '',
|
||||
iBBsType: 1,
|
||||
}).then(res => {
|
||||
let dx = []; let dValue = [];
|
||||
res.forEach(ele => {
|
||||
dx.push(ele.Time); dValue.push(ele.value)
|
||||
});
|
||||
this.setData({ ttTransform: singleLine(dValue,dx) })
|
||||
});
|
||||
app.globalData.request({
|
||||
action: 'getHotTopic0528', //全网热议话题方向
|
||||
token: 't%2BrswgjvzGM=',
|
||||
sType: 'BbsBrand',
|
||||
sTimeType: wx.getStorageSync('sTimeType') || 34,
|
||||
sBrand: wx.getStorageSync('sBrand') || '',
|
||||
iBBsType: 1,
|
||||
}).then(res => {
|
||||
let dr = []; let dv = []; let total = 0;
|
||||
res.forEach(ele => {
|
||||
dr.push(ele.key);
|
||||
dv.push(ele.value);
|
||||
total = total + ele.value*1
|
||||
})
|
||||
let dr1 = []; let dr2 = []; let dv1 = []; let dv2 = [];
|
||||
for(let i = 0;i<dr.length;i++) {
|
||||
if(i % 2 == 0) {
|
||||
dr1.push(dr[i]);
|
||||
dv1.push((dv[i]/total*100))
|
||||
} else {
|
||||
dr2.push(dr[i]);
|
||||
dv2.push((dv[i]/total*100))
|
||||
}
|
||||
}
|
||||
this.setData({
|
||||
hotTopicData1: pictographicOption(dr1,dv1),
|
||||
hotTopicData2: pictographicOption(dr2,dv2),
|
||||
})
|
||||
});
|
||||
app.globalData.request({
|
||||
action: 'getCartypeTop10', //传播TOP车型
|
||||
token: 't%2BrswgjvzGM=',
|
||||
sType: 'BbsBrand',
|
||||
sTimeType: wx.getStorageSync('sTimeType') || 34,
|
||||
sBrand: wx.getStorageSync('sBrand') || '',
|
||||
iBBsType: 1,
|
||||
}).then(res => {
|
||||
let dx = []; let dValue = [];
|
||||
for(let key in res) {
|
||||
dx.push(key);
|
||||
dValue.push(res[key]*1);
|
||||
}
|
||||
this.setData({ transTopModal: histogram(dx,dValue,[],'#20CC62')})
|
||||
});
|
||||
app.globalData.request({
|
||||
action: 'getBbsBrandTime', //TOP车型传播态势
|
||||
token: 't%2BrswgjvzGM=',
|
||||
sType: 'BbsBrand',
|
||||
sTimeType: wx.getStorageSync('sTimeType') || 34,
|
||||
sBrand: wx.getStorageSync('sBrand') || '',
|
||||
iBBsType: 1,
|
||||
}).then(res => {
|
||||
let dx = []; let dName = [];
|
||||
let dValue = [[],[],[],[],[]];
|
||||
res.forEach(ele => {
|
||||
dx.push(ele.Time)
|
||||
for(let i=0;i<ele.Data.length;i++) {
|
||||
dValue[i].push(ele.Data[i].value*1);
|
||||
if(dName.indexOf(ele.Data[i].key) == -1) {
|
||||
dName.push(ele.Data[i].key)
|
||||
}
|
||||
}
|
||||
});
|
||||
this.setData({
|
||||
top5ModalTrans: brokenLine(dName,dValue,dColor,dx)
|
||||
})
|
||||
});
|
||||
}
|
||||
},
|
||||
lifetimes: {
|
||||
attached() {
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,6 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"c-echars": "../../../../../components/c-echars/index"
|
||||
},
|
||||
"component": true
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
<view class="tu-content">
|
||||
<view class="tu-item">
|
||||
<view class="tu-chart-title">论坛洞察详情</view>
|
||||
<view class="tu-chart-item" style="padding: 16rpx 0rpx 0rpx 32rpx;width: 100%;height: auto;">
|
||||
<!-- {{detailData}} -->
|
||||
<rich-text nodes="{{detailData}}"></rich-text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tu-item">
|
||||
<view class="tu-chart-title">论坛传播态势</view>
|
||||
<view class="tu-chart-item" style="width: 110%;">
|
||||
<c-echars showChart="{{showChart}}" canvasId="ttTrans-canvas" chartId="ttTransLine" chartOption="{{ttTransform}}" height="100%"></c-echars>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tu-item">
|
||||
<view class="tu-chart-title">全网热议话题方向</view>
|
||||
<view class="tt-area-item">
|
||||
<view class="tt-area-item-chart">
|
||||
<c-echars showChart="{{showChart}}" canvasId="qht-canvas" chartId="qht" chartOption="{{hotTopicData1}}" height="100%"></c-echars>
|
||||
</view>
|
||||
<view class="tt-area-item-chart">
|
||||
<c-echars showChart="{{showChart}}" canvasId="qht-canvas" chartId="qht" chartOption="{{hotTopicData2}}" height="100%"></c-echars>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tu-item">
|
||||
<view class="tu-chart-title">传播TOP车型</view>
|
||||
<view class="tu-chart-item">
|
||||
<c-echars showChart="{{showChart}}" canvasId="tttopModal-canvas" chartId="tttopModal" chartOption="{{transTopModal}}" height="100%"></c-echars>
|
||||
</view>
|
||||
</view>
|
||||
<view class="tu-item">
|
||||
<view class="tu-chart-title">TOP5车型传播态势</view>
|
||||
<view class="tu-chart-item">
|
||||
<c-echars showChart="{{showChart}}" canvasId="tp5modal-canvas" chartId="tp5modal" chartOption="{{top5ModalTrans}}" height="100%"></c-echars>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@ -0,0 +1,60 @@
|
||||
.tu-content {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.tu-item {
|
||||
width: 628rpx;
|
||||
/* height: 90%; */
|
||||
margin: 16rpx 0rpx 32rpx 32rpx;
|
||||
padding: 16rpx 60rpx 8rpx 0rpx;
|
||||
background-color: #ffffff;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
.tu-chart-title {
|
||||
font-size: 18px;
|
||||
padding-left: 32rpx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
.tu-chart-subTitle {
|
||||
font-size: 12px;
|
||||
padding-left: 32rpx;
|
||||
margin-top: 8rpx;
|
||||
color: #999999;
|
||||
}
|
||||
.tu-chart-item {
|
||||
width: 110%;
|
||||
height: 350rpx;
|
||||
}
|
||||
.tu-rank-list {
|
||||
width: 125%;
|
||||
margin: 32rpx;
|
||||
}
|
||||
.ranking{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
.ranking-number{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.rank_num {
|
||||
width: 53rpx;
|
||||
height: 40rpx
|
||||
}
|
||||
/* 热议话题方向 */
|
||||
.tt-area-item {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 656rpx;
|
||||
height: 410rpx;
|
||||
padding: 32rpx 0 0 24rpx;
|
||||
}
|
||||
.tt-area-item-chart{
|
||||
width: 318rpx;
|
||||
height: 410rpx;
|
||||
}
|
||||
Loading…
Reference in new issue