|
@@ -346,7 +346,7 @@
|
|
<br>
|
|
<br>
|
|
<div style="width:5px;height: 14px;background:#0099FF;display: inline-block;margin-left: 10px;">
|
|
<div style="width:5px;height: 14px;background:#0099FF;display: inline-block;margin-left: 10px;">
|
|
</div>
|
|
</div>
|
|
- <span style="color: #0099FF;font-size: 0.8vw;padding: 10px;;">近七天分日数据</span>
|
|
|
|
|
|
+ <span style="color: #0099FF;font-size: 0.8vw;padding: 10px;;">{{launchDate}}</span>
|
|
<div v-if="emptyShowThree">
|
|
<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>
|
|
</div>
|
|
@@ -399,6 +399,7 @@
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
optionData: [],
|
|
optionData: [],
|
|
|
|
+
|
|
container: true,
|
|
container: true,
|
|
chartPie: true,
|
|
chartPie: true,
|
|
emptyShowOne: true,
|
|
emptyShowOne: true,
|
|
@@ -410,6 +411,7 @@
|
|
branchShow: true,
|
|
branchShow: true,
|
|
value: '2',
|
|
value: '2',
|
|
priceRangeDate: [moment().startOf('day').subtract(7, 'days'), moment().endOf('day')],
|
|
priceRangeDate: [moment().startOf('day').subtract(7, 'days'), moment().endOf('day')],
|
|
|
|
+ launchDate:'',
|
|
selectPriceDate: '',
|
|
selectPriceDate: '',
|
|
offsetDays: 86400000 * 31,
|
|
offsetDays: 86400000 * 31,
|
|
fullText: true,
|
|
fullText: true,
|
|
@@ -456,11 +458,7 @@
|
|
|
|
|
|
|
|
|
|
},
|
|
},
|
|
- beforeCreate() {
|
|
|
|
- console.log(Empty);
|
|
|
|
- this.emptyImg = Empty.PRESENTED_IMAGE_SIMPLE
|
|
|
|
- console.log(this.emptyImg);
|
|
|
|
- },
|
|
|
|
|
|
+
|
|
mounted() {
|
|
mounted() {
|
|
|
|
|
|
this.getData();
|
|
this.getData();
|
|
@@ -469,6 +467,7 @@
|
|
window.onresize = function () {
|
|
window.onresize = function () {
|
|
that.changeSize()
|
|
that.changeSize()
|
|
}
|
|
}
|
|
|
|
+ this.launchDate = this.priceRangeDate[0].format('YYYY-MM-DD') + '到'+this.priceRangeDate[1].format('YYYY-MM-DD')+'投放数据'
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
|
|
|
|
@@ -510,7 +509,13 @@
|
|
this.getData();
|
|
this.getData();
|
|
this.getQueryNewlyData();
|
|
this.getQueryNewlyData();
|
|
},
|
|
},
|
|
- changePriceRangeDate() {
|
|
|
|
|
|
+ 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')+'投放数据'
|
|
|
|
+ }
|
|
this.selectPriceDate = '';
|
|
this.selectPriceDate = '';
|
|
this.chartPie = false
|
|
this.chartPie = false
|
|
this.getData();
|
|
this.getData();
|
|
@@ -728,7 +733,7 @@
|
|
}
|
|
}
|
|
})
|
|
})
|
|
var p = Math.round(((value / total) * 100)); //求出百分比
|
|
var p = Math.round(((value / total) * 100)); //求出百分比
|
|
- return `${name} ${'|'} ${p}% ${value}`; //返回出图例所显示的内容是名称+百分比
|
|
|
|
|
|
+ return p>=10? `${name} ${'|'} ${p}% ${value}` : `${name} ${'|'} ${p}% ${value}` //返回出图例所显示的内容是名称+百分比
|
|
|
|
|
|
|
|
|
|
},
|
|
},
|
|
@@ -743,9 +748,9 @@
|
|
hoverAnimation: true,
|
|
hoverAnimation: true,
|
|
silent: false,
|
|
silent: false,
|
|
itemStyle: {
|
|
itemStyle: {
|
|
- borderRadius: 20,
|
|
|
|
|
|
+ borderRadius: 10,
|
|
borderColor: 'rgba(2, 28, 69, 1)',
|
|
borderColor: 'rgba(2, 28, 69, 1)',
|
|
- borderWidth: 6
|
|
|
|
|
|
+ borderWidth: 2
|
|
},
|
|
},
|
|
label: {
|
|
label: {
|
|
show: true,
|
|
show: true,
|
|
@@ -778,10 +783,10 @@
|
|
// 柱状图
|
|
// 柱状图
|
|
getConsumeData(areaArray, payNumArray) {
|
|
getConsumeData(areaArray, payNumArray) {
|
|
// var buyTop = echarts.init(document.getElementById('buyTop')); //图表容器
|
|
// var buyTop = echarts.init(document.getElementById('buyTop')); //图表容器
|
|
-
|
|
|
|
var areaData = areaArray; //横坐标值
|
|
var areaData = areaArray; //横坐标值
|
|
var payPersonNum = payNumArray; //柱状图的值
|
|
var payPersonNum = payNumArray; //柱状图的值
|
|
- const VALUE1 = [{ //每个柱子的颜色(可自行改变颜色)
|
|
|
|
|
|
+
|
|
|
|
+ let VALUE1 = [{ //每个柱子的颜色(可自行改变颜色)
|
|
value: payPersonNum[0],
|
|
value: payPersonNum[0],
|
|
itemStyle: {
|
|
itemStyle: {
|
|
color: 'rgba(0,137,255,1.0)'
|
|
color: 'rgba(0,137,255,1.0)'
|
|
@@ -810,9 +815,19 @@
|
|
itemStyle: {
|
|
itemStyle: {
|
|
color: 'rgba(182,105,86,1.0)'
|
|
color: 'rgba(182,105,86,1.0)'
|
|
}
|
|
}
|
|
- }
|
|
|
|
|
|
+ },{
|
|
|
|
+ value: payPersonNum[5],
|
|
|
|
+ itemStyle: {
|
|
|
|
+ color: '#40E0D0'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
]
|
|
]
|
|
- const VALUE2 = [{ //最高值的柱子颜色 就是你所看到的透明那部分
|
|
|
|
|
|
+
|
|
|
|
+ VALUE1 = VALUE1.filter(item => {
|
|
|
|
+ return item.value !=undefined
|
|
|
|
+ })
|
|
|
|
+ console.log(VALUE1);
|
|
|
|
+ let VALUE2 = [{ //最高值的柱子颜色 就是你所看到的透明那部分
|
|
value: Math.max.apply(null, payPersonNum), //这个value是柱状图的值里的最大值
|
|
value: Math.max.apply(null, payPersonNum), //这个value是柱状图的值里的最大值
|
|
itemStyle: {
|
|
itemStyle: {
|
|
color: 'rgba(0,137,255,.1)'
|
|
color: 'rgba(0,137,255,.1)'
|
|
@@ -843,6 +858,11 @@
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
]
|
|
|
|
+ if (VALUE1.length !=VALUE2.length) {
|
|
|
|
+
|
|
|
|
+ VALUE2.splice(VALUE1.length,VALUE2.length-VALUE1.length)
|
|
|
|
+ }
|
|
|
|
+ console.log(VALUE2);
|
|
// 绘制左侧面
|
|
// 绘制左侧面
|
|
const CubeLeft = echarts.graphic.extendShape({
|
|
const CubeLeft = echarts.graphic.extendShape({
|
|
shape: {
|
|
shape: {
|
|
@@ -892,7 +912,7 @@
|
|
echarts.graphic.registerShape('CubeLeft', CubeLeft)
|
|
echarts.graphic.registerShape('CubeLeft', CubeLeft)
|
|
echarts.graphic.registerShape('CubeRight', CubeRight)
|
|
echarts.graphic.registerShape('CubeRight', CubeRight)
|
|
echarts.graphic.registerShape('CubeTop', CubeTop)
|
|
echarts.graphic.registerShape('CubeTop', CubeTop)
|
|
- const MAX = [300, 300, 300, 300, 300]
|
|
|
|
|
|
+ const MAX = [300, 300, 300, 300, 300,300]
|
|
const VALUE = payPersonNum
|
|
const VALUE = payPersonNum
|
|
let option = {
|
|
let option = {
|
|
backgroundColor: "transparent",
|
|
backgroundColor: "transparent",
|
|
@@ -959,6 +979,7 @@
|
|
type: 'custom',
|
|
type: 'custom',
|
|
renderItem: (params, api) => {
|
|
renderItem: (params, api) => {
|
|
const location = api.coord([api.value(0), api.value(1)])
|
|
const location = api.coord([api.value(0), api.value(1)])
|
|
|
|
+
|
|
return {
|
|
return {
|
|
type: 'group',
|
|
type: 'group',
|
|
children: [{
|
|
children: [{
|
|
@@ -1152,7 +1173,6 @@
|
|
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
|
|
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
|
|
},
|
|
},
|
|
formatter: function (params, ticket, callback) {
|
|
formatter: function (params, ticket, callback) {
|
|
- console.log(params)
|
|
|
|
var res = params[0].name;
|
|
var res = params[0].name;
|
|
for (var i = 0, l = params.length; i < l; i++) {
|
|
for (var i = 0, l = params.length; i < l; i++) {
|
|
res += '<br/>' + params[i].seriesName + ' : ' + Math.abs(params[i].value);
|
|
res += '<br/>' + params[i].seriesName + ' : ' + Math.abs(params[i].value);
|
|
@@ -1294,7 +1314,15 @@
|
|
},
|
|
},
|
|
color: ['#87CEFA', '#FFA500', '#8A2BE2', '#3CB371',],
|
|
color: ['#87CEFA', '#FFA500', '#8A2BE2', '#3CB371',],
|
|
tooltip: {
|
|
tooltip: {
|
|
- trigger: 'axis'
|
|
|
|
|
|
+ trigger: 'axis',
|
|
|
|
+ formatter: function (params) {
|
|
|
|
+ var relVal = params[0].name;
|
|
|
|
+ for (var i = 0, l = params.length; i < l; i++) {
|
|
|
|
+ //遍历出来的值一般是字符串,需要转换成数字,再进项tiFixed四舍五入
|
|
|
|
+ relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + Number(params[i].value).toFixed(2)
|
|
|
|
+ }
|
|
|
|
+ return relVal;
|
|
|
|
+ }
|
|
},
|
|
},
|
|
legend: {
|
|
legend: {
|
|
data: ['华北', '华东', '华南', '骄阳'],
|
|
data: ['华北', '华东', '华南', '骄阳'],
|
|
@@ -1446,7 +1474,6 @@
|
|
item.itemStyle = {
|
|
item.itemStyle = {
|
|
color: color[index],
|
|
color: color[index],
|
|
}
|
|
}
|
|
- console.log(item);
|
|
|
|
item.label = {
|
|
item.label = {
|
|
normal: {
|
|
normal: {
|
|
show: true,
|
|
show: true,
|
|
@@ -1454,7 +1481,9 @@
|
|
fontSize: 18,
|
|
fontSize: 18,
|
|
padding:[250,0],
|
|
padding:[250,0],
|
|
formatter: function (params) {
|
|
formatter: function (params) {
|
|
- return params.value != 0 ? 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来换行
|
|
}, // 用\n来换行
|
|
// rich: {
|
|
// rich: {
|
|
// b: {
|
|
// b: {
|