|
@@ -1,10 +1,28 @@
|
|
|
+<style>
|
|
|
+ .range-pick-echart .ant-calendar-range-part {
|
|
|
+ background: rgb(26, 52, 104) !important;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .range-pick-echart .ant-calendar-range .ant-calendar-input{
|
|
|
+ background: rgb(26, 52, 104) !important;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .range-pick-echart .ant-calendar-year-select{
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .range-pick-echart .ant-calendar-month-select{
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .range-pick-echart .ant-calendar-date{
|
|
|
+ color: #B0C4DE;
|
|
|
+ }
|
|
|
+</style>
|
|
|
<style lang="scss" scoped>
|
|
|
.body-css {
|
|
|
min-width: 100%;
|
|
|
min-height: 100%;
|
|
|
position: absolute;
|
|
|
box-sizing: border-box;
|
|
|
-
|
|
|
background-image: url('../../assets/img/wangge2.png');
|
|
|
background-repeat: repeat;
|
|
|
background-position: center;
|
|
@@ -15,7 +33,7 @@
|
|
|
|
|
|
.body-heada {
|
|
|
min-width: 100%;
|
|
|
- height: 60px;
|
|
|
+ height: 45px;
|
|
|
background-image: url('../../assets/img/head_bg.png');
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
@@ -45,7 +63,7 @@
|
|
|
color: white;
|
|
|
/* background: rgba(2, 28, 69, 1) !important; */
|
|
|
border-bottom: 1px solid rgba(2, 28, 69, 1);
|
|
|
- padding: 14px;
|
|
|
+ padding: 10px;
|
|
|
background-color: rgb(26, 52, 104);
|
|
|
}
|
|
|
|
|
@@ -138,11 +156,11 @@
|
|
|
|
|
|
.bg {
|
|
|
position: absolute;
|
|
|
- bottom: 145px;
|
|
|
+ bottom: 56px;
|
|
|
left: 50%;
|
|
|
z-index: 0;
|
|
|
- width: 468px;
|
|
|
- height: 273px;
|
|
|
+ width: 92%;
|
|
|
+ height: 75%;
|
|
|
background: no-repeat center;
|
|
|
background-image: url('../../assets/img/u4.svg');
|
|
|
background-size: 100% 100%;
|
|
@@ -152,11 +170,11 @@
|
|
|
|
|
|
.bgtwo {
|
|
|
position: absolute;
|
|
|
- bottom: 100px;
|
|
|
+ bottom: 97px;
|
|
|
left: 50%;
|
|
|
z-index: 0;
|
|
|
- width: 583px;
|
|
|
- height: 340px;
|
|
|
+ width: 74%;
|
|
|
+ height: 62%;
|
|
|
background: no-repeat center;
|
|
|
background-image: url('../../assets/img/u3.svg');
|
|
|
background-size: 100% 100%;
|
|
@@ -166,11 +184,11 @@
|
|
|
|
|
|
.bgthree {
|
|
|
position: absolute;
|
|
|
- bottom: 61px;
|
|
|
+ bottom: 130px;
|
|
|
left: 50%;
|
|
|
z-index: 0;
|
|
|
- width: 688px;
|
|
|
- height: 399px;
|
|
|
+ width: 61%;
|
|
|
+ height: 51%;
|
|
|
background: no-repeat center;
|
|
|
background-image: url('../../assets/img/u2.svg');
|
|
|
background-size: 100% 100%;
|
|
@@ -190,10 +208,10 @@
|
|
|
style="letter-spacing:10px;color:#00BFFF;line-height: 50px;font-size: 1.5vw; text-align: center;padding-left: 110px;font-weight: bold;">
|
|
|
分公司投放数据监控中心
|
|
|
<a-button @click="fullScreen" v-if="fullText"
|
|
|
- style="float: right;background: rgb(58, 77, 87);height: 28px;margin-top: 2px;margin-right: 2px;"
|
|
|
+ style="float: right;background: rgb(58, 77, 87);height: 18px;margin-top: 2px;margin-right: 2px;font-size: 12px;"
|
|
|
type="primary" size="small">全屏查看</a-button>
|
|
|
<a-button @click="signOutfullScreen" v-else
|
|
|
- style="float: right;background: rgb(58, 77, 87);height: 28px;margin-top: 2px;margin-right: 2px;"
|
|
|
+ style="float: right;background: rgb(58, 77, 87);height: 18px;margin-top: 2px;margin-right: 2px;font-size: 12px;"
|
|
|
type="primary" size="small">退出全屏</a-button>
|
|
|
</p>
|
|
|
|
|
@@ -210,10 +228,13 @@
|
|
|
<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 id="accountIndexEchartOnePie" ref="accountIndexEchartOnePie"
|
|
|
- style="width: 90%;height: 300px;margin-right: 20px;">
|
|
|
+ <div v-if="emptyShowOne">
|
|
|
+ <div id="accountIndexEchartOnePie" ref="accountIndexEchartOnePie"
|
|
|
+ style="width: 90%;height: 300px;margin-right: 20px;">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <a-list v-else :data-source="[]" />
|
|
|
+ <!-- <a-empty :image="emptyImg" /> -->
|
|
|
|
|
|
</div>
|
|
|
|
|
@@ -224,9 +245,11 @@
|
|
|
<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 id="consume" ref="consume" style="width: 95%;height: 290px;"></div>
|
|
|
-
|
|
|
+ <div v-if="emptyShowTwo">
|
|
|
+ <div id="consume" ref="consume" style="width: 98%;height: 290px;"></div>
|
|
|
+ </div>
|
|
|
+ <a-list v-else :data-source="[]" v-else />
|
|
|
+ <!-- <a-empty style="margin-top: 20px;" /> -->
|
|
|
</div>
|
|
|
|
|
|
<!-- 环形图 -->
|
|
@@ -238,21 +261,29 @@
|
|
|
<span style="color: #0099FF;font-size: 0.8vw;padding: 10px;;">素材相关数据</span>
|
|
|
<div style="line-height: 180px;">
|
|
|
|
|
|
- <div style="float: left;margin-left: 5%;width: 25%;height: 20%;text-align: center;">
|
|
|
+ <div style="float: left;margin-left: 2%;width: 25%;height: 20%;text-align: center;">
|
|
|
<a-progress type="circle" strokeColor="#FF00FF" :percent="useRateData" :strokeWidth=10
|
|
|
- :width="95" />
|
|
|
+ :width="88" :format="percent => `${percent}%`" />
|
|
|
<p style="line-height: 20%;text-align: center;color: #fff;">素材使用率</p>
|
|
|
</div>
|
|
|
- <div style="float: left;margin-left: 5%;width: 25%;height: 20%;text-align: center;">
|
|
|
- <a-progress type="circle" strokeColor="#00FFFF" :percent="faddishRateData" :width="95"
|
|
|
- :strokeWidth=10 />
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <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}%`" />
|
|
|
<p style="line-height: 20%;text-align: center;color: #fff;">素材爆款率</p>
|
|
|
</div>
|
|
|
- <div style="float: left;margin-left: 5%;width: 25%;height: 20%;text-align: center;">
|
|
|
- <a-progress type="circle" :percent="innovateRateData" :strokeWidth=10 :width="95" />
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <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}%`" />
|
|
|
<p style="line-height: 20%;text-align: center;color: #fff;">素材创新率</p>
|
|
|
</div>
|
|
|
|
|
|
+
|
|
|
</div>
|
|
|
|
|
|
|
|
@@ -274,11 +305,12 @@
|
|
|
</a-radio-button>
|
|
|
</a-radio-group>
|
|
|
<a-range-picker format="YYYY-MM-DD" style="float: right;" v-model="priceRangeDate"
|
|
|
- class="range-pick" :disabled-date="disabledDate" :allowClear="false"
|
|
|
- @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-show="chartPie"></div>
|
|
|
+ <div class="chart" ref="chart" v-if="chartPie"></div>
|
|
|
<!-- 底座背景 -->
|
|
|
<div class="bg"></div>
|
|
|
<div class="bgtwo"></div>
|
|
@@ -288,12 +320,18 @@
|
|
|
</branch> -->
|
|
|
</div>
|
|
|
<!-- 横向柱状图 -->
|
|
|
- <div style="height:243px;background-color: rgba(2, 28, 69, 1);">
|
|
|
+ <div
|
|
|
+ style="height:243px;background-color: rgba(2, 28, 69, 1);overflow: hidden;overflow-y: scroll;">
|
|
|
<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 id="shadow" ref="shadow" style="width: 98%;height: 200px;"></div>
|
|
|
+
|
|
|
+ <div id="shadow" ref="shadow" style="width: 98%;height: 930px;"></div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
|
|
|
</div>
|
|
|
</a-col>
|
|
@@ -308,9 +346,12 @@
|
|
|
<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 id="lineChart" ref="lineChart" style="width: 90%;height: 260px;margin-top: 5px;"></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>
|
|
|
+ <a-list v-else :data-source="[]" v-else />
|
|
|
+ <!-- <a-empty v-else /> -->
|
|
|
|
|
|
</div>
|
|
|
<div style="height:512px;background-color: rgba(2, 28, 69, 1);">
|
|
@@ -324,6 +365,9 @@
|
|
|
<span
|
|
|
:class="text == '1' || text == '2' || text == '3' ?'threeList' :'listsort'">{{text}}</span>
|
|
|
</span>
|
|
|
+ <span slot="totalCost" slot-scope="text,record">
|
|
|
+ <span>{{text > 10000?(text/10000).toFixed(2)+'万':text}}</span>
|
|
|
+ </span>
|
|
|
</a-table>
|
|
|
|
|
|
</div>
|
|
@@ -347,21 +391,27 @@
|
|
|
require('echarts/lib/component/graphic');
|
|
|
require('echarts/lib/component/toolbox');
|
|
|
require('echarts/lib/component/legend');
|
|
|
-
|
|
|
+ import { Empty } from 'ant-design-vue';
|
|
|
import { getAction, postAction, putAction } from '@/api/manage';
|
|
|
- const color = ['#FF00FF', '#8A2BE2', '#00FFFF', '#4169E1', '#FFA500', '#7FFF00']
|
|
|
+ const color = ['#8A2BE2', '#FFA500', '#00FFFF', '#4169E1', '#FF00FF', '#48D1CC']
|
|
|
import 'echarts-gl';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
optionData: [],
|
|
|
- chartPie:true,
|
|
|
+
|
|
|
+ container: true,
|
|
|
+ chartPie: true,
|
|
|
+ emptyShowOne: 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:'',
|
|
|
selectPriceDate: '',
|
|
|
offsetDays: 86400000 * 31,
|
|
|
fullText: true,
|
|
@@ -394,25 +444,30 @@
|
|
|
dataIndex: 'totalCost',
|
|
|
key: 'totalCost',
|
|
|
ellipsis: true,
|
|
|
+ scopedSlots: { customRender: 'totalCost' },
|
|
|
},
|
|
|
|
|
|
],
|
|
|
data: [],
|
|
|
pieTotal: '',
|
|
|
+ emptyImg: '',
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- this.getData();
|
|
|
|
|
|
|
|
|
- },
|
|
|
|
|
|
+ },
|
|
|
+
|
|
|
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')+'投放数据'
|
|
|
},
|
|
|
methods: {
|
|
|
|
|
@@ -450,11 +505,19 @@
|
|
|
this.fullShow = true;
|
|
|
},
|
|
|
radioChange() {
|
|
|
+ this.chartPie = false
|
|
|
this.getData();
|
|
|
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.chartPie = false
|
|
|
this.getData();
|
|
|
this.getQueryNewlyData();
|
|
|
},
|
|
@@ -485,18 +548,26 @@
|
|
|
this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getMeterialProduceRate', params).then(res => {
|
|
|
if (res.code == 0) {
|
|
|
var servicedata = res.result
|
|
|
- console.log(servicedata);
|
|
|
- this.pieData = [];
|
|
|
- let num = 0;
|
|
|
- for (var i = 0; i < servicedata.length; i++) {
|
|
|
- var obj = new Object();
|
|
|
- obj.name = servicedata[i].area;
|
|
|
- obj.value = servicedata[i].meterialNum;
|
|
|
- num += servicedata[i].meterialNum;
|
|
|
- this.pieData[i] = obj;
|
|
|
+ if (servicedata.length > 0) {
|
|
|
+ this.emptyShowOne = true;
|
|
|
+ this.pieData = [];
|
|
|
+ let num = 0;
|
|
|
+ for (var i = 0; i < servicedata.length; i++) {
|
|
|
+ var obj = new Object();
|
|
|
+ obj.name = servicedata[i].area;
|
|
|
+ obj.value = servicedata[i].meterialNum;
|
|
|
+ num += servicedata[i].meterialNum;
|
|
|
+ this.pieData[i] = obj;
|
|
|
+ }
|
|
|
+ this.pieTotal = num
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initEchart('accountIndexEchartOnePie', this.initPieOneData(this.pieData, this.pieTotal));
|
|
|
+ })
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.emptyShowOne = false;
|
|
|
}
|
|
|
- this.pieTotal = num
|
|
|
- this.initEchart('accountIndexEchartOnePie', this.initPieOneData(this.pieData, this.pieTotal));
|
|
|
+
|
|
|
}
|
|
|
})
|
|
|
// 3D柱状图
|
|
@@ -511,11 +582,20 @@
|
|
|
this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getCompanyMeterialConsume', paramsTwo).then(res => {
|
|
|
if (res.code == 0) {
|
|
|
resultArray = res.result;
|
|
|
- resultArray.forEach(element => {
|
|
|
- areaArray.push(element.area);
|
|
|
- payNumArray.push(element.cost)
|
|
|
- });
|
|
|
- this.initEchart('consume', this.getConsumeData(areaArray, payNumArray));
|
|
|
+ if (resultArray.length > 0) {
|
|
|
+ this.emptyShowTwo = true;
|
|
|
+ resultArray.forEach(element => {
|
|
|
+ areaArray.push(element.area);
|
|
|
+ payNumArray.push(element.cost)
|
|
|
+ });
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initEchart('consume', this.getConsumeData(areaArray, payNumArray));
|
|
|
+ })
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.emptyShowTwo = false;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
})
|
|
|
|
|
@@ -527,9 +607,23 @@
|
|
|
}
|
|
|
this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getMeterialRelevantInfo', paramsThree).then(res => {
|
|
|
if (res.code == 0) {
|
|
|
- this.useRateData = res.result.useRate;
|
|
|
- this.faddishRateData = res.result.faddishRate;
|
|
|
- this.innovateRateData = res.result.innovateRate;
|
|
|
+ if (res.result.useRate) {
|
|
|
+
|
|
|
+ this.useRateData = res.result.useRate;
|
|
|
+ } else {
|
|
|
+ this.useRateData = 0;
|
|
|
+ }
|
|
|
+ if (res.result.faddishRate) {
|
|
|
+ this.faddishRateData = res.result.faddishRate;
|
|
|
+ } else {
|
|
|
+ this.faddishRateData = 0;
|
|
|
+ }
|
|
|
+ if (res.result.innovateRate) {
|
|
|
+ this.innovateRateData = res.result.innovateRate;
|
|
|
+ } else {
|
|
|
+ this.innovateRateData = 0;
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
})
|
|
|
|
|
@@ -555,12 +649,18 @@
|
|
|
}
|
|
|
this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getAccountTrendByMediaType', paramsFour).then(res => {
|
|
|
if (res.code == 0) {
|
|
|
+ this.emptyShowThree = true;
|
|
|
let huaBei = res.result.huaBei;
|
|
|
let huaDong = res.result.huaDong;
|
|
|
let huaNan = res.result.huaNan;
|
|
|
let jiaoYang = res.result.jiaoYang;
|
|
|
let time = res.result.time
|
|
|
- this.initEchart('lineChart', this.getLineChartData(huaBei, huaDong, huaNan, jiaoYang, time));
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.initEchart('lineChart', this.getLineChartData(huaBei, huaDong, huaNan, jiaoYang, time));
|
|
|
+ })
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.emptyShowThree = false;
|
|
|
}
|
|
|
})
|
|
|
|
|
@@ -591,7 +691,7 @@
|
|
|
// });
|
|
|
myChart.clear()
|
|
|
myChart.setOption(optionName);
|
|
|
-
|
|
|
+
|
|
|
window.addEventListener('resize', function () {
|
|
|
that.clientWidth = document.documentElement.clientWidth - 224
|
|
|
myChart.resize()
|
|
@@ -605,17 +705,21 @@
|
|
|
let option = {
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
- formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
|
+ formatter: function(obj){
|
|
|
+ return obj.name+':'+obj.value+'('+Math.round(obj.value/pieTotal* 100)+'%)'
|
|
|
+ }
|
|
|
},
|
|
|
legend: {
|
|
|
- top: '10%',
|
|
|
+ top: '20%',
|
|
|
orient: 'vertical',
|
|
|
- right: '10%',
|
|
|
+ right: '0%',
|
|
|
textStyle: { //图例文字的样式
|
|
|
color: '#fff',
|
|
|
- fontSize: 13
|
|
|
+ fontSize: 12
|
|
|
},
|
|
|
itemGap: 20,
|
|
|
+ itemWidth:15,
|
|
|
+ itemHeight:10,
|
|
|
padding: [-20, 0, 0, 80],
|
|
|
bottom: '55%',
|
|
|
formatter: function (name) { //该函数用于设置图例显示后的百分比
|
|
@@ -629,7 +733,7 @@
|
|
|
}
|
|
|
})
|
|
|
var p = Math.round(((value / total) * 100)); //求出百分比
|
|
|
- return `${name} ${'|'} ${p}% ${value}`; //返回出图例所显示的内容是名称+百分比
|
|
|
+ return p>=10? `${name} ${'|'} ${p}% ${value}` : `${name} ${'|'} ${p}% ${value}` //返回出图例所显示的内容是名称+百分比
|
|
|
|
|
|
|
|
|
},
|
|
@@ -639,29 +743,30 @@
|
|
|
{
|
|
|
name: '',
|
|
|
type: 'pie',
|
|
|
- radius: ['50%', '80%'],
|
|
|
+ radius: ['50%', '75%'],
|
|
|
avoidLabelOverlap: false,
|
|
|
hoverAnimation: true,
|
|
|
silent: false,
|
|
|
itemStyle: {
|
|
|
- borderRadius: 20,
|
|
|
+ borderRadius: 10,
|
|
|
borderColor: 'rgba(2, 28, 69, 1)',
|
|
|
- borderWidth: 6
|
|
|
+ borderWidth: 2
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: 'center',
|
|
|
+ fontSize:10,
|
|
|
formatter: function (param) {
|
|
|
|
|
|
- return '素材总数\r\n\r\n' + pieTotal
|
|
|
+ return '素材总数\r\n' + pieTotal
|
|
|
},
|
|
|
textStyle: {
|
|
|
- fontSize: 16,
|
|
|
+ fontSize: 13,
|
|
|
color: '#fff'
|
|
|
}
|
|
|
},
|
|
|
left: 0,
|
|
|
- right: '56%',
|
|
|
+ right: '50%',
|
|
|
top: 0,
|
|
|
bottom: '20%',
|
|
|
|
|
@@ -678,10 +783,10 @@
|
|
|
// 柱状图
|
|
|
getConsumeData(areaArray, payNumArray) {
|
|
|
// var buyTop = echarts.init(document.getElementById('buyTop')); //图表容器
|
|
|
-
|
|
|
var areaData = areaArray; //横坐标值
|
|
|
var payPersonNum = payNumArray; //柱状图的值
|
|
|
- const VALUE1 = [{ //每个柱子的颜色(可自行改变颜色)
|
|
|
+
|
|
|
+ let VALUE1 = [{ //每个柱子的颜色(可自行改变颜色)
|
|
|
value: payPersonNum[0],
|
|
|
itemStyle: {
|
|
|
color: 'rgba(0,137,255,1.0)'
|
|
@@ -710,9 +815,19 @@
|
|
|
itemStyle: {
|
|
|
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是柱状图的值里的最大值
|
|
|
itemStyle: {
|
|
|
color: 'rgba(0,137,255,.1)'
|
|
@@ -743,6 +858,11 @@
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
+ if (VALUE1.length !=VALUE2.length) {
|
|
|
+
|
|
|
+ VALUE2.splice(VALUE1.length,VALUE2.length-VALUE1.length)
|
|
|
+ }
|
|
|
+ console.log(VALUE2);
|
|
|
// 绘制左侧面
|
|
|
const CubeLeft = echarts.graphic.extendShape({
|
|
|
shape: {
|
|
@@ -792,17 +912,17 @@
|
|
|
echarts.graphic.registerShape('CubeLeft', CubeLeft)
|
|
|
echarts.graphic.registerShape('CubeRight', CubeRight)
|
|
|
echarts.graphic.registerShape('CubeTop', CubeTop)
|
|
|
- const MAX = [300, 300, 300, 300, 300]
|
|
|
+ const MAX = [300, 300, 300, 300, 300,300]
|
|
|
const VALUE = payPersonNum
|
|
|
let option = {
|
|
|
backgroundColor: "transparent",
|
|
|
-
|
|
|
+
|
|
|
grid: { //图表的上下左右的距离
|
|
|
- left: '-10%',
|
|
|
- right: '0%',
|
|
|
+ left: '-80',
|
|
|
+ right: '10%',
|
|
|
bottom: '15%',
|
|
|
top: '20%',
|
|
|
- padding: [0, 0, 0, 0],
|
|
|
+ padding: [50, 0, 0, 0],
|
|
|
containLabel: true,
|
|
|
},
|
|
|
xAxis: { //x轴的样式设置
|
|
@@ -859,6 +979,7 @@
|
|
|
type: 'custom',
|
|
|
renderItem: (params, api) => {
|
|
|
const location = api.coord([api.value(0), api.value(1)])
|
|
|
+
|
|
|
return {
|
|
|
type: 'group',
|
|
|
children: [{
|
|
@@ -1019,7 +1140,7 @@
|
|
|
offset: [2, -25],
|
|
|
formatter: function (value) {
|
|
|
var val = value.data;
|
|
|
- if (val >= 10000 && val < 10000000) {
|
|
|
+ if (val >= 10000 && val < 1000000000000) {
|
|
|
val = (val / 10000).toFixed(2) + "万";
|
|
|
}
|
|
|
return val;
|
|
@@ -1052,7 +1173,6 @@
|
|
|
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
|
|
|
},
|
|
|
formatter: function (params, ticket, callback) {
|
|
|
- console.log(params)
|
|
|
var res = params[0].name;
|
|
|
for (var i = 0, l = params.length; i < l; i++) {
|
|
|
res += '<br/>' + params[i].seriesName + ' : ' + Math.abs(params[i].value);
|
|
@@ -1064,23 +1184,23 @@
|
|
|
return 'loading...';
|
|
|
}
|
|
|
},
|
|
|
- dataZoom: [
|
|
|
- {
|
|
|
- type: "slider", //滑动条
|
|
|
- show: true, //开启
|
|
|
- yAxisIndex: [0],
|
|
|
- left: "96%", //滑动条位置
|
|
|
- start: 0, //初始化时,滑动条宽度开始标度
|
|
|
- end: 20, //初始化时,滑动条宽度结束标度<br>
|
|
|
- filterMode:"none"
|
|
|
- },
|
|
|
- {
|
|
|
- type: "inside", //内置滑动,随鼠标滚轮展示
|
|
|
- yAxisIndex: [0],
|
|
|
- start: 20, //初始化时,滑动条宽度开始标度
|
|
|
- filterMode:"none"
|
|
|
- },
|
|
|
- ],
|
|
|
+ // dataZoom: [
|
|
|
+ // {
|
|
|
+ // type: "slider", //滑动条
|
|
|
+ // show: true, //开启
|
|
|
+ // yAxisIndex: [0],
|
|
|
+ // left: "96%", //滑动条位置
|
|
|
+ // start: 0, //初始化时,滑动条宽度开始标度
|
|
|
+ // end: 20, //初始化时,滑动条宽度结束标度<br>
|
|
|
+ // filterMode:"none"
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // type: "inside", //内置滑动,随鼠标滚轮展示
|
|
|
+ // yAxisIndex: [0],
|
|
|
+ // start: 20, //初始化时,滑动条宽度开始标度
|
|
|
+ // filterMode:"none"
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
legend: {
|
|
|
data: ['快手', '头条'],
|
|
|
x: 'right',
|
|
@@ -1194,18 +1314,26 @@
|
|
|
},
|
|
|
color: ['#87CEFA', '#FFA500', '#8A2BE2', '#3CB371',],
|
|
|
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: {
|
|
|
data: ['华北', '华东', '华南', '骄阳'],
|
|
|
textStyle: {
|
|
|
- fontSize: 15,
|
|
|
+ fontSize: 12,
|
|
|
color: '#B0C4DE'
|
|
|
},
|
|
|
},
|
|
|
grid: {
|
|
|
left: '3%',
|
|
|
- right: '4%',
|
|
|
+ right: '15%',
|
|
|
bottom: '3%',
|
|
|
containLabel: true
|
|
|
},
|
|
@@ -1255,28 +1383,24 @@
|
|
|
name: '华北',
|
|
|
type: 'line',
|
|
|
data: huaBei,
|
|
|
- symbol: 'none',
|
|
|
smooth: true,
|
|
|
},
|
|
|
{
|
|
|
name: '华东',
|
|
|
type: 'line',
|
|
|
data: huaDong,
|
|
|
- symbol: 'none',
|
|
|
smooth: true,
|
|
|
},
|
|
|
{
|
|
|
name: '华南',
|
|
|
type: 'line',
|
|
|
data: huaNan,
|
|
|
- symbol: 'none',
|
|
|
smooth: true,
|
|
|
},
|
|
|
{
|
|
|
name: '骄阳',
|
|
|
type: 'line',
|
|
|
data: jiaoYang,
|
|
|
- symbol: 'none',
|
|
|
smooth: true,
|
|
|
},
|
|
|
|
|
@@ -1295,27 +1419,43 @@
|
|
|
if (res.code == 0) {
|
|
|
let arr = res.result
|
|
|
let optionArray = [];
|
|
|
- for (var i = 0; i < arr.length; i++) {
|
|
|
- var obj = new Object();
|
|
|
- obj.name = arr[i].area;
|
|
|
- obj.value = arr[i].cost;
|
|
|
- obj.rate = arr[i].rate;
|
|
|
- optionArray[i] = obj;
|
|
|
- }
|
|
|
+ // for (var i = 0; i < arr.length; i++) {
|
|
|
+ // var obj = new Object();
|
|
|
+ // // if (arr[i].cost != 0) {
|
|
|
+ // obj.name = arr[i].area;
|
|
|
+ // obj.value = arr[i].cost;
|
|
|
+ // obj.rate = arr[i].rate;
|
|
|
+ // optionArray[i] = obj;
|
|
|
+ // // }
|
|
|
+
|
|
|
+ // }
|
|
|
+ res.result.forEach(element => {
|
|
|
+ optionArray.push({ name: element.area, value: element.cost, rate: element.rate })
|
|
|
+ });
|
|
|
this.optionData = optionArray
|
|
|
- console.log(this.optionData.length == 0);
|
|
|
if (this.optionData.length == 0) {
|
|
|
- this.chartPie = false
|
|
|
-
|
|
|
- }else{
|
|
|
-
|
|
|
- this.setLabel(this.optionData);
|
|
|
- this.initChart(this.optionData);
|
|
|
+ this.optionData.push({
|
|
|
+ name: '暂无数据',
|
|
|
+ value: 100,
|
|
|
+ rate: '',
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ this.chartPie = true
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.setLabel(this.optionData);
|
|
|
+ this.initChart(this.optionData);
|
|
|
+ })
|
|
|
+ } else {
|
|
|
this.chartPie = true;
|
|
|
-
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.setLabel(this.optionData);
|
|
|
+ this.initChart(this.optionData);
|
|
|
+ })
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+
|
|
|
|
|
|
}
|
|
|
})
|
|
@@ -1326,49 +1466,46 @@
|
|
|
// {
|
|
|
// name: '华东',
|
|
|
// value: 8005
|
|
|
- // }, {
|
|
|
- // name: '骄阳',
|
|
|
- // value: 2848
|
|
|
- // }, {
|
|
|
- // name: '华南',
|
|
|
- // value: 5708
|
|
|
- // }]
|
|
|
+ // },]
|
|
|
},
|
|
|
// 初始化label样式
|
|
|
setLabel(optionData) {
|
|
|
optionData.forEach((item, index) => {
|
|
|
item.itemStyle = {
|
|
|
- color: color[index]
|
|
|
+ color: color[index],
|
|
|
}
|
|
|
item.label = {
|
|
|
normal: {
|
|
|
show: true,
|
|
|
color: color[index],
|
|
|
- fontSize: 20,
|
|
|
+ fontSize: 18,
|
|
|
+ padding:[250,0],
|
|
|
formatter: function (params) {
|
|
|
- return 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: {
|
|
|
- color: '#fff',
|
|
|
- lineHeight: 18,
|
|
|
- align: 'left'
|
|
|
- },
|
|
|
- c: {
|
|
|
- fontSize: 20,
|
|
|
- color: '#fff',
|
|
|
- textShadowColor: '#1c90a6',
|
|
|
- textShadowOffsetX: 0,
|
|
|
- textShadowOffsetY: 2,
|
|
|
- textShadowBlur: 5,
|
|
|
- align: 'left'
|
|
|
- },
|
|
|
- d: {
|
|
|
- color: color[index],
|
|
|
- fontSize: 20,
|
|
|
- align: 'left'
|
|
|
- }
|
|
|
- }
|
|
|
+ // rich: {
|
|
|
+ // b: {
|
|
|
+ // color: '#fff',
|
|
|
+ // lineHeight: 18,
|
|
|
+ // align: 'left'
|
|
|
+ // },
|
|
|
+ // c: {
|
|
|
+ // fontSize: 20,
|
|
|
+ // color: '#fff',
|
|
|
+ // textShadowColor: '#1c90a6',
|
|
|
+ // textShadowOffsetX: 0,
|
|
|
+ // textShadowOffsetY: 50,
|
|
|
+ // textShadowBlur: 5,
|
|
|
+ // align: 'left'
|
|
|
+ // },
|
|
|
+ // d: {
|
|
|
+ // color: color[index],
|
|
|
+ // fontSize: 20,
|
|
|
+ // align: 'left'
|
|
|
+ // }
|
|
|
+ // }
|
|
|
}
|
|
|
}
|
|
|
item.labelLine = {
|
|
@@ -1385,7 +1522,7 @@
|
|
|
initChart(optionData) {
|
|
|
this.statusChart = echarts.init(this.$refs.chart)
|
|
|
// 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
|
|
|
- this.option = getPie3D(optionData, 0, 240, 28, 30, 0.7)
|
|
|
+ this.option = getPie3D(optionData, 0, 240, 28, 30, 0.5)
|
|
|
this.statusChart.setOption(this.option)
|
|
|
// 是否需要label指引线,如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐,并再次setOption
|
|
|
this.option.series.push({
|
|
@@ -1404,7 +1541,7 @@
|
|
|
},
|
|
|
startAngle: -30, // 起始角度,支持范围[0, 360]。
|
|
|
clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
|
|
- radius: ['20%', '52%'],
|
|
|
+ radius: '45%',
|
|
|
center: ['50%', '50%'],
|
|
|
data: optionData,
|
|
|
labelLine: { //删除指示线
|