|
@@ -3,17 +3,21 @@
|
|
|
background: rgb(26, 52, 104) !important;
|
|
|
color: #fff;
|
|
|
}
|
|
|
- .range-pick-echart .ant-calendar-range .ant-calendar-input{
|
|
|
+
|
|
|
+ .range-pick-echart .ant-calendar-range .ant-calendar-input {
|
|
|
background: rgb(26, 52, 104) !important;
|
|
|
color: #fff;
|
|
|
}
|
|
|
- .range-pick-echart .ant-calendar-year-select{
|
|
|
+
|
|
|
+ .range-pick-echart .ant-calendar-year-select {
|
|
|
color: #fff;
|
|
|
}
|
|
|
- .range-pick-echart .ant-calendar-month-select{
|
|
|
+
|
|
|
+ .range-pick-echart .ant-calendar-month-select {
|
|
|
color: #fff;
|
|
|
}
|
|
|
- .range-pick-echart .ant-calendar-date{
|
|
|
+
|
|
|
+ .range-pick-echart .ant-calendar-date {
|
|
|
color: #B0C4DE;
|
|
|
}
|
|
|
</style>
|
|
@@ -135,7 +139,7 @@
|
|
|
}
|
|
|
|
|
|
.fullList {
|
|
|
- margin-bottom: 5%;
|
|
|
+ margin-bottom: 6%;
|
|
|
}
|
|
|
|
|
|
.chart-container {
|
|
@@ -271,7 +275,7 @@
|
|
|
|
|
|
<div style="float: left;margin-left: 7%;width: 25%;height: 20%;text-align: center;">
|
|
|
<a-progress type="circle" strokeColor="#00FFFF" :percent="faddishRateData" :width="88"
|
|
|
- :strokeWidth=10 :format="percent => `${percent}%`" />
|
|
|
+ :strokeWidth=10 :format="percent => `${percent}%`" />
|
|
|
<p style="line-height: 20%;text-align: center;color: #fff;">素材爆款率</p>
|
|
|
</div>
|
|
|
|
|
@@ -279,7 +283,8 @@
|
|
|
|
|
|
|
|
|
<div style="float: left;margin-left: 7%;width: 25%;height: 20%;text-align: center;">
|
|
|
- <a-progress type="circle" :percent="innovateRateData" :strokeWidth=10 :width="88" :format="percent => `${percent}%`" />
|
|
|
+ <a-progress type="circle" :percent="innovateRateData" :strokeWidth=10 :width="88"
|
|
|
+ :format="percent => `${percent}%`" />
|
|
|
<p style="line-height: 20%;text-align: center;color: #fff;">素材创新率</p>
|
|
|
</div>
|
|
|
|
|
@@ -305,9 +310,8 @@
|
|
|
</a-radio-button>
|
|
|
</a-radio-group>
|
|
|
<a-range-picker format="YYYY-MM-DD" style="float: right;" v-model="priceRangeDate"
|
|
|
- :disabled-date="disabledDate" :allowClear="false"
|
|
|
- dropdownClassName="range-pick-echart" @calendarChange="calendarPriceRangeChange"
|
|
|
- @change="changePriceRangeDate" />
|
|
|
+ :disabled-date="disabledDate" :allowClear="false" dropdownClassName="range-pick-echart"
|
|
|
+ @calendarChange="calendarPriceRangeChange" @change="changePriceRangeDate" />
|
|
|
|
|
|
<div class="chart-container">
|
|
|
<div class="chart" ref="chart" v-if="chartPie"></div>
|
|
@@ -320,14 +324,15 @@
|
|
|
</branch> -->
|
|
|
</div>
|
|
|
<!-- 横向柱状图 -->
|
|
|
- <div
|
|
|
- style="height:243px;background-color: rgba(2, 28, 69, 1);overflow: hidden;overflow-y: scroll;">
|
|
|
+ <div style="height:243px;background-color: rgba(2, 28, 69, 1);">
|
|
|
<br>
|
|
|
<div style="width:5px;height: 14px;background:#0099FF;display: inline-block;margin-left: 10px;">
|
|
|
</div>
|
|
|
<span style="color: #0099FF;font-size: 0.8vw;padding: 10px;;">本月分媒体消耗数据</span>
|
|
|
+ <div style="height:213px;overflow: hidden;overflow-y: scroll;">
|
|
|
+ <div id="shadow" ref="shadow" :style="{width:'98%'}"></div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div id="shadow" ref="shadow" style="width: 98%;height: 930px;"></div>
|
|
|
|
|
|
|
|
|
|
|
@@ -348,13 +353,14 @@
|
|
|
</div>
|
|
|
<span style="color: #0099FF;font-size: 0.8vw;padding: 10px;;">{{launchDate}}</span>
|
|
|
<div v-if="emptyShowThree">
|
|
|
- <div id="lineChart" ref="lineChart" style="width: 100%;height: 260px;margin-top: 5px;"></div>
|
|
|
+ <div id="lineChart" ref="lineChart" style="width: 100%;height: 260px;margin-top: 5px;">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<a-list v-else :data-source="[]" v-else />
|
|
|
<!-- <a-empty v-else /> -->
|
|
|
|
|
|
</div>
|
|
|
- <div style="height:512px;background-color: rgba(2, 28, 69, 1);">
|
|
|
+ <div style="height:523px;background-color: rgba(2, 28, 69, 1);">
|
|
|
<br>
|
|
|
<div style="width:5px;height: 14px;background:#0099FF;display: inline-block;margin-left: 10px;">
|
|
|
</div>
|
|
@@ -399,19 +405,19 @@
|
|
|
data() {
|
|
|
return {
|
|
|
optionData: [],
|
|
|
-
|
|
|
+
|
|
|
container: true,
|
|
|
chartPie: true,
|
|
|
emptyShowOne: true,
|
|
|
- emptyShowTwo:true,
|
|
|
- emptyShowThree:true,
|
|
|
+ emptyShowTwo: true,
|
|
|
+ emptyShowThree: true,
|
|
|
statusChart: null,
|
|
|
option: {},
|
|
|
fullscreenShow: false,
|
|
|
branchShow: true,
|
|
|
value: '2',
|
|
|
priceRangeDate: [moment().startOf('day').subtract(7, 'days'), moment().endOf('day')],
|
|
|
- launchDate:'',
|
|
|
+ launchDate: '',
|
|
|
selectPriceDate: '',
|
|
|
offsetDays: 86400000 * 31,
|
|
|
fullText: true,
|
|
@@ -419,6 +425,8 @@
|
|
|
faddishRateData: '',
|
|
|
innovateRateData: '',
|
|
|
pieData: [],
|
|
|
+ timeMadeType: [],
|
|
|
+ autoHeight: '',
|
|
|
columns: [
|
|
|
{
|
|
|
dataIndex: 'ranking',
|
|
@@ -458,16 +466,16 @@
|
|
|
|
|
|
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
mounted() {
|
|
|
-
|
|
|
+
|
|
|
this.getData();
|
|
|
this.getQueryNewlyData();
|
|
|
const that = this
|
|
|
window.onresize = function () {
|
|
|
that.changeSize()
|
|
|
}
|
|
|
- this.launchDate = this.priceRangeDate[0].format('YYYY-MM-DD') + '到'+this.priceRangeDate[1].format('YYYY-MM-DD')+'投放数据'
|
|
|
+ this.launchDate = this.priceRangeDate[0].format('YYYY-MM-DD') + '到' + this.priceRangeDate[1].format('YYYY-MM-DD') + '投放数据'
|
|
|
},
|
|
|
methods: {
|
|
|
|
|
@@ -510,11 +518,11 @@
|
|
|
this.getQueryNewlyData();
|
|
|
},
|
|
|
changePriceRangeDate(event) {
|
|
|
-
|
|
|
- if (this.priceRangeDate[0].format('YYYY-MM-DD') != this.priceRangeDate[1].format('YYYY-MM-DD')) {
|
|
|
- this.launchDate = this.priceRangeDate[0].format('YYYY-MM-DD') + '到'+this.priceRangeDate[1].format('YYYY-MM-DD')+'投放数据'
|
|
|
- }else{
|
|
|
- this.launchDate = this.priceRangeDate[0].format('YYYY-MM-DD')+'投放数据'
|
|
|
+
|
|
|
+ if (this.priceRangeDate[0].format('YYYY-MM-DD') != this.priceRangeDate[1].format('YYYY-MM-DD')) {
|
|
|
+ this.launchDate = this.priceRangeDate[0].format('YYYY-MM-DD') + '到' + this.priceRangeDate[1].format('YYYY-MM-DD') + '投放数据'
|
|
|
+ } else {
|
|
|
+ this.launchDate = this.priceRangeDate[0].format('YYYY-MM-DD') + '投放数据'
|
|
|
}
|
|
|
this.selectPriceDate = '';
|
|
|
this.chartPie = false
|
|
@@ -563,7 +571,7 @@
|
|
|
this.$nextTick(() => {
|
|
|
this.initEchart('accountIndexEchartOnePie', this.initPieOneData(this.pieData, this.pieTotal));
|
|
|
})
|
|
|
-
|
|
|
+
|
|
|
} else {
|
|
|
this.emptyShowOne = false;
|
|
|
}
|
|
@@ -591,7 +599,7 @@
|
|
|
this.$nextTick(() => {
|
|
|
this.initEchart('consume', this.getConsumeData(areaArray, payNumArray));
|
|
|
})
|
|
|
-
|
|
|
+
|
|
|
} else {
|
|
|
this.emptyShowTwo = false;
|
|
|
}
|
|
@@ -634,10 +642,12 @@
|
|
|
|
|
|
this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getAccountDataByMediaType').then(res => {
|
|
|
if (res.code == 0) {
|
|
|
- let bytedance = res.result.bytedance
|
|
|
+ let bytedance = res.result.bytedance;
|
|
|
let kuaishou = res.result.kuaishou;
|
|
|
let time = res.result.time
|
|
|
+ this.timeMadeType = time;
|
|
|
this.initEchart('shadow', this.getShadowData(bytedance, kuaishou, time));
|
|
|
+
|
|
|
}
|
|
|
|
|
|
})
|
|
@@ -685,17 +695,28 @@
|
|
|
let that = this;
|
|
|
const chart = this.$refs[idName]
|
|
|
if (chart) {
|
|
|
- const myChart = echarts.init(document.getElementById(idName))
|
|
|
- // myChart.showLoading({
|
|
|
- // text: "图表数据正在努力加载..."
|
|
|
- // });
|
|
|
- myChart.clear()
|
|
|
- myChart.setOption(optionName);
|
|
|
-
|
|
|
- window.addEventListener('resize', function () {
|
|
|
- that.clientWidth = document.documentElement.clientWidth - 224
|
|
|
- myChart.resize()
|
|
|
- })
|
|
|
+ if (idName == 'shadow') {
|
|
|
+ const myCharts = echarts.init(document.getElementById(idName))
|
|
|
+ this.autoHeight = this.timeMadeType.length * 40 + 20;
|
|
|
+
|
|
|
+ myCharts.clear()
|
|
|
+ myCharts.setOption(optionName);
|
|
|
+ myCharts.resize({ height: this.autoHeight })
|
|
|
+ window.addEventListener('resize', function () {
|
|
|
+ // that.clientWidth = document.documentElement.clientWidth - 224
|
|
|
+
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ const myChart = echarts.init(document.getElementById(idName))
|
|
|
+ myChart.clear()
|
|
|
+ myChart.setOption(optionName);
|
|
|
+
|
|
|
+ window.addEventListener('resize', function () {
|
|
|
+ // that.clientWidth = document.documentElement.clientWidth - 224
|
|
|
+ myChart.resize()
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
},
|
|
|
// 第一个饼图
|
|
@@ -705,8 +726,8 @@
|
|
|
let option = {
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
- formatter: function(obj){
|
|
|
- return obj.name+':'+obj.value+'('+Math.round(obj.value/pieTotal* 100)+'%)'
|
|
|
+ formatter: function (obj) {
|
|
|
+ return obj.name + ':' + obj.value + '(' + Math.round(obj.value / pieTotal * 100) + '%)'
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
@@ -718,8 +739,8 @@
|
|
|
fontSize: 12
|
|
|
},
|
|
|
itemGap: 20,
|
|
|
- itemWidth:15,
|
|
|
- itemHeight:10,
|
|
|
+ itemWidth: 15,
|
|
|
+ itemHeight: 10,
|
|
|
padding: [-20, 0, 0, 80],
|
|
|
bottom: '55%',
|
|
|
formatter: function (name) { //该函数用于设置图例显示后的百分比
|
|
@@ -733,7 +754,7 @@
|
|
|
}
|
|
|
})
|
|
|
var p = Math.round(((value / total) * 100)); //求出百分比
|
|
|
- return p>=10? `${name} ${'|'} ${p}% ${value}` : `${name} ${'|'} ${p}% ${value}` //返回出图例所显示的内容是名称+百分比
|
|
|
+ return p >= 10 ? `${name} ${'|'} ${p}% ${value}` : `${name} ${'|'} ${p}% ${value}` //返回出图例所显示的内容是名称+百分比
|
|
|
|
|
|
|
|
|
},
|
|
@@ -755,7 +776,7 @@
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: 'center',
|
|
|
- fontSize:10,
|
|
|
+ fontSize: 10,
|
|
|
formatter: function (param) {
|
|
|
|
|
|
return '素材总数\r\n' + pieTotal
|
|
@@ -785,7 +806,7 @@
|
|
|
// var buyTop = echarts.init(document.getElementById('buyTop')); //图表容器
|
|
|
var areaData = areaArray; //横坐标值
|
|
|
var payPersonNum = payNumArray; //柱状图的值
|
|
|
-
|
|
|
+
|
|
|
let VALUE1 = [{ //每个柱子的颜色(可自行改变颜色)
|
|
|
value: payPersonNum[0],
|
|
|
itemStyle: {
|
|
@@ -815,18 +836,18 @@
|
|
|
itemStyle: {
|
|
|
color: 'rgba(182,105,86,1.0)'
|
|
|
}
|
|
|
- },{
|
|
|
+ }, {
|
|
|
value: payPersonNum[5],
|
|
|
itemStyle: {
|
|
|
color: '#40E0D0'
|
|
|
}
|
|
|
},
|
|
|
]
|
|
|
-
|
|
|
+
|
|
|
VALUE1 = VALUE1.filter(item => {
|
|
|
- return item.value !=undefined
|
|
|
- })
|
|
|
- console.log(VALUE1);
|
|
|
+ return item.value != undefined
|
|
|
+ })
|
|
|
+ console.log(VALUE1);
|
|
|
let VALUE2 = [{ //最高值的柱子颜色 就是你所看到的透明那部分
|
|
|
value: Math.max.apply(null, payPersonNum), //这个value是柱状图的值里的最大值
|
|
|
itemStyle: {
|
|
@@ -858,9 +879,9 @@
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
- if (VALUE1.length !=VALUE2.length) {
|
|
|
+ if (VALUE1.length != VALUE2.length) {
|
|
|
|
|
|
- VALUE2.splice(VALUE1.length,VALUE2.length-VALUE1.length)
|
|
|
+ VALUE2.splice(VALUE1.length, VALUE2.length - VALUE1.length)
|
|
|
}
|
|
|
console.log(VALUE2);
|
|
|
// 绘制左侧面
|
|
@@ -912,7 +933,7 @@
|
|
|
echarts.graphic.registerShape('CubeLeft', CubeLeft)
|
|
|
echarts.graphic.registerShape('CubeRight', CubeRight)
|
|
|
echarts.graphic.registerShape('CubeTop', CubeTop)
|
|
|
- const MAX = [300, 300, 300, 300, 300,300]
|
|
|
+ const MAX = [300, 300, 300, 300, 300, 300]
|
|
|
const VALUE = payPersonNum
|
|
|
let option = {
|
|
|
backgroundColor: "transparent",
|
|
@@ -979,7 +1000,7 @@
|
|
|
type: 'custom',
|
|
|
renderItem: (params, api) => {
|
|
|
const location = api.coord([api.value(0), api.value(1)])
|
|
|
-
|
|
|
+
|
|
|
return {
|
|
|
type: 'group',
|
|
|
children: [{
|
|
@@ -1318,7 +1339,7 @@
|
|
|
formatter: function (params) {
|
|
|
var relVal = params[0].name;
|
|
|
for (var i = 0, l = params.length; i < l; i++) {
|
|
|
- //遍历出来的值一般是字符串,需要转换成数字,再进项tiFixed四舍五入
|
|
|
+ //遍历出来的值一般是字符串,需要转换成数字,再进项tiFixed四舍五入
|
|
|
relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + Number(params[i].value).toFixed(2)
|
|
|
}
|
|
|
return relVal;
|
|
@@ -1479,11 +1500,11 @@
|
|
|
show: true,
|
|
|
color: color[index],
|
|
|
fontSize: 18,
|
|
|
- padding:[250,0],
|
|
|
+ padding: [250, 0],
|
|
|
formatter: function (params) {
|
|
|
- return params.value != 0 ? params.name == '暂无数据'? params.name + '\r\n' + params.data.rate
|
|
|
- : params.name + '\r\n' + echarts.format.addCommas(params.value.toFixed(2)) + '\r\n' + params.data.rate
|
|
|
- : ''
|
|
|
+ return params.value != 0 ? params.name == '暂无数据' ? params.name + '\r\n' + params.data.rate
|
|
|
+ : params.name + '\r\n' + echarts.format.addCommas(params.value.toFixed(2)) + '\r\n' + params.data.rate
|
|
|
+ : ''
|
|
|
}, // 用\n来换行
|
|
|
// rich: {
|
|
|
// b: {
|