dev
Esdese
3 years ago
parent
9e4ae2fcd5
commit
8a476f11ec
@ -0,0 +1,61 @@
|
||||
export default function multipleColumn(columnName = [], xMsg = [], data = []) {
|
||||
const valData = []
|
||||
const color = ['#ff4852', '#ff6e25', '#ffbf00', '#20cc62', '#00d6d6', '#0084ff']
|
||||
console.log(xMsg);
|
||||
for (let [index, i] of data.entries()) {
|
||||
let ojb = {
|
||||
name: i.name,
|
||||
type: 'bar',
|
||||
barGap: 0,
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
data: i.data,
|
||||
itemStyle: {
|
||||
color: color[index]
|
||||
},
|
||||
}
|
||||
valData.push(ojb)
|
||||
}
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: columnName,
|
||||
textStyle: { //图例文字的样式
|
||||
color: 'black',
|
||||
fontSize: 8
|
||||
},
|
||||
left: 10,
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
borderRadius: 1, //圆角半径
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle:{
|
||||
fontSize:8
|
||||
}
|
||||
},
|
||||
data: xMsg
|
||||
},
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
textStyle:{
|
||||
fontSize:8
|
||||
}
|
||||
},
|
||||
}],
|
||||
series: valData
|
||||
}
|
||||
return option
|
||||
}
|
||||
@ -1,27 +1,62 @@
|
||||
export default function brokenLine(yName=[],data=[],hoveName=[]){
|
||||
export default function stack(yName=[],data=[],color=[]){
|
||||
let msgData = []
|
||||
let arr = ['正面','中性','负面',]
|
||||
for(let [index,i] of data.entries()){
|
||||
console.log(i);
|
||||
let obj = {
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
// barWidth:40,
|
||||
name:arr[index],
|
||||
emphasis: {
|
||||
focus: 'series'
|
||||
},
|
||||
itemStyle:{
|
||||
color:color[index]
|
||||
},
|
||||
data:i
|
||||
}
|
||||
msgData.push(obj)
|
||||
}
|
||||
const option = {
|
||||
legend: {
|
||||
left:10,
|
||||
// data:[{name:'正面'},{name:'中性'},{name:'负面'},]
|
||||
textStyle: { //图例文字的样式
|
||||
color: 'black',
|
||||
fontSize: 8
|
||||
},
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
borderRadius: 1,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
// Use axis to trigger tooltip
|
||||
type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value'
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
textStyle:{
|
||||
fontSize:8
|
||||
}
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: yName
|
||||
data: yName,
|
||||
axisLabel: {
|
||||
textStyle:{
|
||||
fontSize:8
|
||||
}
|
||||
},
|
||||
},
|
||||
//数据
|
||||
series:[]
|
||||
series:msgData
|
||||
}
|
||||
return option
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
// import brokenLine from "../../../../../components/option/stackingLineOption"
|
||||
// const app = getApp()
|
||||
// Component({
|
||||
// data:{
|
||||
// showChart: true,
|
||||
// transformOption: brokenLine([],[],[],[]),
|
||||
// },
|
||||
// lifetimes:{
|
||||
// attached() {
|
||||
// //页面数据
|
||||
// // app.globalData.request({
|
||||
// // action: 'getUserBrand',
|
||||
// // token: 't%2BrswgjvzGM=',
|
||||
// // })
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
@ -1,4 +0,0 @@
|
||||
<view class="chart_box">
|
||||
<view class="chart_title">信息量趋势</view>
|
||||
<c-echars height="100%" showChart="{{showChart}}" canvasId="eventbar-canvas" chartId="eventbar" chartOption="{{transformOption}}"></c-echars>
|
||||
</view>
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"time-component":"/components/timecomponent/index",
|
||||
"survey":"./comm/survey/index"
|
||||
"survey":"./survey/index"
|
||||
},
|
||||
"navigationBarTitleText": "品牌对比"
|
||||
}
|
||||
@ -0,0 +1,173 @@
|
||||
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:{
|
||||
showChart: true,
|
||||
transformOption: brokenLines([],[],[],[]),
|
||||
brandOption: histogram([],[],[],'#0084FF'),
|
||||
brandOption2: histogram([],[],[],'#20cc62'),
|
||||
brandOption3:multipleColumn([],[],[]),
|
||||
brandOption4:sHistogram(),
|
||||
stackOption:stack([],[],['#00aaff','#20cc62','#ff4852']),
|
||||
boxArr:new Array(6),
|
||||
},
|
||||
lifetimes:{
|
||||
attached() {
|
||||
this.setData({
|
||||
boxArr:wx.getStorageSync('brandData')
|
||||
})
|
||||
let sBrand = []
|
||||
this.data.boxArr.forEach((ele)=>{
|
||||
if(ele) sBrand.push(ele.brandname)
|
||||
})
|
||||
//信息量趋势数据
|
||||
app.globalData.request({
|
||||
action: 'getCountTime0528C',
|
||||
token: 't%2BrswgjvzGM=',
|
||||
sType:'BrandOverview',
|
||||
sTimeType:'34',
|
||||
iContrastType:'1',
|
||||
sBrand: sBrand.join(',')
|
||||
}).then(res=>{
|
||||
let dtime = []
|
||||
let dVal = []
|
||||
let dataObj = {}
|
||||
for(let i of res){
|
||||
dtime.push(i.key)
|
||||
for(let j of i.value){
|
||||
let obj = {key:j.key,value:j.value}
|
||||
if (!dataObj.hasOwnProperty(j.key)){
|
||||
dataObj[j.key] = []
|
||||
}
|
||||
dataObj[j.key].push(obj)
|
||||
}
|
||||
}
|
||||
Object.keys(dataObj).forEach(ele=>{
|
||||
dVal.push(dataObj[ele])
|
||||
})
|
||||
this.setData({
|
||||
transformOption: brokenLines(sBrand,dVal,dColor,dtime),
|
||||
})
|
||||
})
|
||||
//整体信息量
|
||||
app.globalData.request({
|
||||
action: 'getContrastCount0528C',
|
||||
token: 't%2BrswgjvzGM=',
|
||||
sType:'BrandOverview',
|
||||
sTimeType:'34',
|
||||
iContrastType:'1',
|
||||
sBrand: sBrand.join(',')
|
||||
}).then(res=>{
|
||||
let dx = []
|
||||
let dy = []
|
||||
for(let i of res){
|
||||
dx.push(i.key)
|
||||
dy.push(i.value)
|
||||
}
|
||||
this.setData({
|
||||
brandOption: histogram(dx,dy,[],'#0084FF'),
|
||||
})
|
||||
})
|
||||
//整体互动人数
|
||||
app.globalData.request({
|
||||
action: 'getInteractCount0528C',
|
||||
token: 't%2BrswgjvzGM=',
|
||||
sType:'BrandOverview',
|
||||
sTimeType:'34',
|
||||
iContrastType:'1',
|
||||
sBrand: sBrand.join(',')
|
||||
}).then(res=>{
|
||||
let dx = []
|
||||
let dy = []
|
||||
for(let i of res){
|
||||
dx.push(i.key)
|
||||
dy.push(i.value)
|
||||
}
|
||||
this.setData({
|
||||
brandOption2: histogram(dx,dy,[],'#20cc62'),
|
||||
})
|
||||
})
|
||||
//品牌条形对比
|
||||
app.globalData.request({
|
||||
action: 'getAffectionsC',
|
||||
token: 't%2BrswgjvzGM=',
|
||||
sType:'BrandOverview',
|
||||
sTimeType:'34',
|
||||
iContrastType:'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['负面'])
|
||||
}
|
||||
console.log(data);
|
||||
this.setData({
|
||||
stackOption:stack(yMsg,data,['#00aaff','#20cc62','#ff4852'])
|
||||
})
|
||||
})
|
||||
//渠道分布
|
||||
app.globalData.request({
|
||||
action: 'getSourcetypeC',
|
||||
token: 't%2BrswgjvzGM=',
|
||||
sType:'BrandOverview',
|
||||
sTimeType:'34',
|
||||
iContrastType:'1',
|
||||
sBrand: sBrand.join(',')
|
||||
}).then(res=>{
|
||||
let arr = []
|
||||
let channelMsg = []
|
||||
for(let i of res){
|
||||
let obj = {name:i.Name}
|
||||
let da = []
|
||||
Object.keys(i.Data).forEach(ele=>{
|
||||
da.push(i.Data[ele])
|
||||
channelMsg.push(ele)
|
||||
})
|
||||
obj.data = da
|
||||
arr.push(obj)
|
||||
}
|
||||
channelMsg = [...new Set(channelMsg)]
|
||||
this.setData({
|
||||
brandOption3:multipleColumn(sBrand,channelMsg,arr),
|
||||
})
|
||||
})
|
||||
//重点媒体
|
||||
app.globalData.request({
|
||||
action: 'getSourceCount0528C',
|
||||
token: 't%2BrswgjvzGM=',
|
||||
sType:'BrandOverview',
|
||||
sTimeType:'34',
|
||||
iContrastType:'1',
|
||||
sBrand: sBrand.join(',')
|
||||
}).then(res=>{
|
||||
let data = []
|
||||
for(let i of res[0].value){
|
||||
let obj = {name:i.key,data:[]}
|
||||
data.push(obj)
|
||||
}
|
||||
for(let i of res){
|
||||
for(let j of i.value){
|
||||
for(let k of data){
|
||||
if(j.key==k.name) {
|
||||
k.data.push(j.value)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
data=data.map(ele=>{ return ele = ele.data})
|
||||
console.log(data);
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,41 @@
|
||||
<view class="chart_box">
|
||||
<view class="chart_title">信息量趋势</view>
|
||||
<view class="table">
|
||||
<c-echars height="100%" showChart="{{showChart}}" canvasId="eventbar-canvas" chartId="eventbar" chartOption="{{transformOption}}"></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="{{brandOption}}" 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="{{brandOption2}}" height="100%"></c-echars>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="chart_box">
|
||||
<view class="chart_title">品牌调性对比</view>
|
||||
<view class="table" style="height: 100%;">
|
||||
<c-echars showChart="{{showChart}}" canvasId="brandbar-canvas" chartId="brandbar" chartOption="{{stackOption}}" height="100%"></c-echars>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="chart_box">
|
||||
<view class="chart_title">渠道分布</view>
|
||||
<view class="table" style="height: 100%;">
|
||||
<c-echars showChart="{{showChart}}" canvasId="brandbar-canvas" chartId="brandbar" chartOption="{{brandOption3}}" height="100%"></c-echars>
|
||||
</view>
|
||||
</view>
|
||||
<view class="chart_box">
|
||||
<view class="chart_title">重点媒体传播对比</view>
|
||||
<view class="table" style="height: 100%;">
|
||||
<c-echars showChart="{{showChart}}" canvasId="brandbar-canvas" chartId="brandbar" chartOption="{{brandOption4}}" height="100%"></c-echars>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
Loading…
Reference in new issue