|
@@ -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>
|
|
<style lang="scss" scoped>
|
|
.body-css {
|
|
.body-css {
|
|
min-width: 100%;
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
min-height: 100%;
|
|
position: absolute;
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
-
|
|
|
|
background-image: url('../../assets/img/wangge2.png');
|
|
background-image: url('../../assets/img/wangge2.png');
|
|
background-repeat: repeat;
|
|
background-repeat: repeat;
|
|
background-position: center;
|
|
background-position: center;
|
|
@@ -138,11 +156,11 @@
|
|
|
|
|
|
.bg {
|
|
.bg {
|
|
position: absolute;
|
|
position: absolute;
|
|
- bottom: 145px;
|
|
|
|
|
|
+ bottom: 56px;
|
|
left: 50%;
|
|
left: 50%;
|
|
z-index: 0;
|
|
z-index: 0;
|
|
- width: 468px;
|
|
|
|
- height: 273px;
|
|
|
|
|
|
+ width: 92%;
|
|
|
|
+ height: 75%;
|
|
background: no-repeat center;
|
|
background: no-repeat center;
|
|
background-image: url('../../assets/img/u4.svg');
|
|
background-image: url('../../assets/img/u4.svg');
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
@@ -152,11 +170,11 @@
|
|
|
|
|
|
.bgtwo {
|
|
.bgtwo {
|
|
position: absolute;
|
|
position: absolute;
|
|
- bottom: 100px;
|
|
|
|
|
|
+ bottom: 97px;
|
|
left: 50%;
|
|
left: 50%;
|
|
z-index: 0;
|
|
z-index: 0;
|
|
- width: 583px;
|
|
|
|
- height: 340px;
|
|
|
|
|
|
+ width: 74%;
|
|
|
|
+ height: 62%;
|
|
background: no-repeat center;
|
|
background: no-repeat center;
|
|
background-image: url('../../assets/img/u3.svg');
|
|
background-image: url('../../assets/img/u3.svg');
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
@@ -166,11 +184,11 @@
|
|
|
|
|
|
.bgthree {
|
|
.bgthree {
|
|
position: absolute;
|
|
position: absolute;
|
|
- bottom: 61px;
|
|
|
|
|
|
+ bottom: 130px;
|
|
left: 50%;
|
|
left: 50%;
|
|
z-index: 0;
|
|
z-index: 0;
|
|
- width: 688px;
|
|
|
|
- height: 399px;
|
|
|
|
|
|
+ width: 61%;
|
|
|
|
+ height: 51%;
|
|
background: no-repeat center;
|
|
background: no-repeat center;
|
|
background-image: url('../../assets/img/u2.svg');
|
|
background-image: url('../../assets/img/u2.svg');
|
|
background-size: 100% 100%;
|
|
background-size: 100% 100%;
|
|
@@ -210,10 +228,13 @@
|
|
<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;;">素材产出占比</span>
|
|
-
|
|
|
|
- <div id="accountIndexEchartOnePie" ref="accountIndexEchartOnePie"
|
|
|
|
- style="width: 90%;height: 300px;margin-right: 20px;">
|
|
|
|
|
|
+ <div v-if="emptyShow">
|
|
|
|
+ <div id="accountIndexEchartOnePie" ref="accountIndexEchartOnePie"
|
|
|
|
+ style="width: 90%;height: 300px;margin-right: 20px;">
|
|
|
|
+ </div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <a-list v-else :data-source="[]" />
|
|
|
|
+ <!-- <a-empty :image="emptyImg" /> -->
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
@@ -224,9 +245,11 @@
|
|
<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;;">分公司消耗素材</span>
|
|
-
|
|
|
|
- <div id="consume" ref="consume" style="width: 95%;height: 290px;"></div>
|
|
|
|
-
|
|
|
|
|
|
+ <div v-if="emptyShow">
|
|
|
|
+ <div id="consume" ref="consume" style="width: 95%;height: 290px;"></div>
|
|
|
|
+ </div>
|
|
|
|
+ <a-list v-else :data-source="[]" v-else />
|
|
|
|
+ <!-- <a-empty style="margin-top: 20px;" /> -->
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 环形图 -->
|
|
<!-- 环形图 -->
|
|
@@ -238,21 +261,29 @@
|
|
<span style="color: #0099FF;font-size: 0.8vw;padding: 10px;;">素材相关数据</span>
|
|
<span style="color: #0099FF;font-size: 0.8vw;padding: 10px;;">素材相关数据</span>
|
|
<div style="line-height: 180px;">
|
|
<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
|
|
<a-progress type="circle" strokeColor="#FF00FF" :percent="useRateData" :strokeWidth=10
|
|
- :width="95" />
|
|
|
|
|
|
+ :width="88" />
|
|
<p style="line-height: 20%;text-align: center;color: #fff;">素材使用率</p>
|
|
<p style="line-height: 20%;text-align: center;color: #fff;">素材使用率</p>
|
|
</div>
|
|
</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"
|
|
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+ <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 />
|
|
:strokeWidth=10 />
|
|
<p style="line-height: 20%;text-align: center;color: #fff;">素材爆款率</p>
|
|
<p style="line-height: 20%;text-align: center;color: #fff;">素材爆款率</p>
|
|
</div>
|
|
</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" />
|
|
<p style="line-height: 20%;text-align: center;color: #fff;">素材创新率</p>
|
|
<p style="line-height: 20%;text-align: center;color: #fff;">素材创新率</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
+
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@@ -274,11 +305,12 @@
|
|
</a-radio-button>
|
|
</a-radio-button>
|
|
</a-radio-group>
|
|
</a-radio-group>
|
|
<a-range-picker format="YYYY-MM-DD" style="float: right;" v-model="priceRangeDate"
|
|
<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-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="bg"></div>
|
|
<div class="bgtwo"></div>
|
|
<div class="bgtwo"></div>
|
|
@@ -288,12 +320,18 @@
|
|
</branch> -->
|
|
</branch> -->
|
|
</div>
|
|
</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>
|
|
<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;;">本月分媒体消耗数据</span>
|
|
- <div id="shadow" ref="shadow" style="width: 98%;height: 200px;"></div>
|
|
|
|
|
|
+
|
|
|
|
+ <div id="shadow" ref="shadow" style="width: 98%;height: 930px;"></div>
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</a-col>
|
|
</a-col>
|
|
@@ -309,8 +347,11 @@
|
|
<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;;">近七天分日数据</span>
|
|
-
|
|
|
|
- <div id="lineChart" ref="lineChart" style="width: 90%;height: 260px;margin-top: 5px;"></div>
|
|
|
|
|
|
+ <div v-if="emptyShow">
|
|
|
|
+ <div id="lineChart" ref="lineChart" style="width: 90%;height: 260px;margin-top: 5px;"></div>
|
|
|
|
+ </div>
|
|
|
|
+ <a-list v-else :data-source="[]" v-else />
|
|
|
|
+ <!-- <a-empty v-else /> -->
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<div style="height:512px;background-color: rgba(2, 28, 69, 1);">
|
|
<div style="height:512px;background-color: rgba(2, 28, 69, 1);">
|
|
@@ -324,6 +365,9 @@
|
|
<span
|
|
<span
|
|
:class="text == '1' || text == '2' || text == '3' ?'threeList' :'listsort'">{{text}}</span>
|
|
:class="text == '1' || text == '2' || text == '3' ?'threeList' :'listsort'">{{text}}</span>
|
|
</span>
|
|
</span>
|
|
|
|
+ <span slot="totalCost" slot-scope="text,record">
|
|
|
|
+ <span>{{text > 10000?(text/10000).toFixed(2)+'万':text}}</span>
|
|
|
|
+ </span>
|
|
</a-table>
|
|
</a-table>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
@@ -347,15 +391,17 @@
|
|
require('echarts/lib/component/graphic');
|
|
require('echarts/lib/component/graphic');
|
|
require('echarts/lib/component/toolbox');
|
|
require('echarts/lib/component/toolbox');
|
|
require('echarts/lib/component/legend');
|
|
require('echarts/lib/component/legend');
|
|
-
|
|
|
|
|
|
+ import { Empty } from 'ant-design-vue';
|
|
import { getAction, postAction, putAction } from '@/api/manage';
|
|
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';
|
|
import 'echarts-gl';
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
optionData: [],
|
|
optionData: [],
|
|
- chartPie:true,
|
|
|
|
|
|
+ container: true,
|
|
|
|
+ chartPie: true,
|
|
|
|
+ emptyShow: true,
|
|
statusChart: null,
|
|
statusChart: null,
|
|
option: {},
|
|
option: {},
|
|
fullscreenShow: false,
|
|
fullscreenShow: false,
|
|
@@ -394,20 +440,28 @@
|
|
dataIndex: 'totalCost',
|
|
dataIndex: 'totalCost',
|
|
key: 'totalCost',
|
|
key: 'totalCost',
|
|
ellipsis: true,
|
|
ellipsis: true,
|
|
|
|
+ scopedSlots: { customRender: 'totalCost' },
|
|
},
|
|
},
|
|
|
|
|
|
],
|
|
],
|
|
data: [],
|
|
data: [],
|
|
pieTotal: '',
|
|
pieTotal: '',
|
|
|
|
+ emptyImg: '',
|
|
}
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
created() {
|
|
- this.getData();
|
|
|
|
|
|
|
|
|
|
|
|
- },
|
|
|
|
|
|
|
|
|
|
+ },
|
|
|
|
+ beforeCreate() {
|
|
|
|
+ console.log(Empty);
|
|
|
|
+ this.emptyImg = Empty.PRESENTED_IMAGE_SIMPLE
|
|
|
|
+ console.log(this.emptyImg);
|
|
|
|
+ },
|
|
mounted() {
|
|
mounted() {
|
|
|
|
+
|
|
|
|
+ this.getData();
|
|
this.getQueryNewlyData();
|
|
this.getQueryNewlyData();
|
|
const that = this
|
|
const that = this
|
|
window.onresize = function () {
|
|
window.onresize = function () {
|
|
@@ -450,11 +504,13 @@
|
|
this.fullShow = true;
|
|
this.fullShow = true;
|
|
},
|
|
},
|
|
radioChange() {
|
|
radioChange() {
|
|
|
|
+ this.chartPie = false
|
|
this.getData();
|
|
this.getData();
|
|
this.getQueryNewlyData();
|
|
this.getQueryNewlyData();
|
|
},
|
|
},
|
|
changePriceRangeDate() {
|
|
changePriceRangeDate() {
|
|
this.selectPriceDate = '';
|
|
this.selectPriceDate = '';
|
|
|
|
+ this.chartPie = false
|
|
this.getData();
|
|
this.getData();
|
|
this.getQueryNewlyData();
|
|
this.getQueryNewlyData();
|
|
},
|
|
},
|
|
@@ -485,17 +541,26 @@
|
|
this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getMeterialProduceRate', params).then(res => {
|
|
this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getMeterialProduceRate', params).then(res => {
|
|
if (res.code == 0) {
|
|
if (res.code == 0) {
|
|
var servicedata = res.result
|
|
var servicedata = res.result
|
|
- 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.emptyShow = 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.emptyShow = false;
|
|
}
|
|
}
|
|
- this.pieTotal = num
|
|
|
|
- this.initEchart('accountIndexEchartOnePie', this.initPieOneData(this.pieData, this.pieTotal));
|
|
|
|
|
|
+
|
|
}
|
|
}
|
|
})
|
|
})
|
|
// 3D柱状图
|
|
// 3D柱状图
|
|
@@ -510,11 +575,20 @@
|
|
this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getCompanyMeterialConsume', paramsTwo).then(res => {
|
|
this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getCompanyMeterialConsume', paramsTwo).then(res => {
|
|
if (res.code == 0) {
|
|
if (res.code == 0) {
|
|
resultArray = res.result;
|
|
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.emptyShow = true;
|
|
|
|
+ resultArray.forEach(element => {
|
|
|
|
+ areaArray.push(element.area);
|
|
|
|
+ payNumArray.push(element.cost)
|
|
|
|
+ });
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.initEchart('consume', this.getConsumeData(areaArray, payNumArray));
|
|
|
|
+ })
|
|
|
|
+
|
|
|
|
+ } else {
|
|
|
|
+ this.emptyShow = false;
|
|
|
|
+ }
|
|
|
|
+
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
|
|
@@ -526,9 +600,23 @@
|
|
}
|
|
}
|
|
this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getMeterialRelevantInfo', paramsThree).then(res => {
|
|
this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getMeterialRelevantInfo', paramsThree).then(res => {
|
|
if (res.code == 0) {
|
|
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;
|
|
|
|
+ }
|
|
|
|
+
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
|
|
@@ -554,12 +642,18 @@
|
|
}
|
|
}
|
|
this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getAccountTrendByMediaType', paramsFour).then(res => {
|
|
this.getAction(process.env.VUE_APP_BASE_MATERIAL_URL + '/boss/bossDataExhibitionController/getAccountTrendByMediaType', paramsFour).then(res => {
|
|
if (res.code == 0) {
|
|
if (res.code == 0) {
|
|
|
|
+ this.emptyShow = true;
|
|
let huaBei = res.result.huaBei;
|
|
let huaBei = res.result.huaBei;
|
|
let huaDong = res.result.huaDong;
|
|
let huaDong = res.result.huaDong;
|
|
let huaNan = res.result.huaNan;
|
|
let huaNan = res.result.huaNan;
|
|
let jiaoYang = res.result.jiaoYang;
|
|
let jiaoYang = res.result.jiaoYang;
|
|
let time = res.result.time
|
|
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.emptyShow = false;
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
|
|
@@ -590,7 +684,7 @@
|
|
// });
|
|
// });
|
|
myChart.clear()
|
|
myChart.clear()
|
|
myChart.setOption(optionName);
|
|
myChart.setOption(optionName);
|
|
-
|
|
|
|
|
|
+
|
|
window.addEventListener('resize', function () {
|
|
window.addEventListener('resize', function () {
|
|
that.clientWidth = document.documentElement.clientWidth - 224
|
|
that.clientWidth = document.documentElement.clientWidth - 224
|
|
myChart.resize()
|
|
myChart.resize()
|
|
@@ -604,17 +698,21 @@
|
|
let option = {
|
|
let option = {
|
|
tooltip: {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
trigger: 'item',
|
|
- formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
|
|
|
|
+ formatter: function(obj){
|
|
|
|
+ return obj.name+':'+obj.value+'('+Math.round(obj.value/pieTotal* 100)+'%)'
|
|
|
|
+ }
|
|
},
|
|
},
|
|
legend: {
|
|
legend: {
|
|
- top: '10%',
|
|
|
|
|
|
+ top: '25%',
|
|
orient: 'vertical',
|
|
orient: 'vertical',
|
|
- right: '10%',
|
|
|
|
|
|
+ right: '0%',
|
|
textStyle: { //图例文字的样式
|
|
textStyle: { //图例文字的样式
|
|
color: '#fff',
|
|
color: '#fff',
|
|
- fontSize: 13
|
|
|
|
|
|
+ fontSize: 12
|
|
},
|
|
},
|
|
itemGap: 20,
|
|
itemGap: 20,
|
|
|
|
+ itemWidth:15,
|
|
|
|
+ itemHeight:10,
|
|
padding: [-20, 0, 0, 80],
|
|
padding: [-20, 0, 0, 80],
|
|
bottom: '55%',
|
|
bottom: '55%',
|
|
formatter: function (name) { //该函数用于设置图例显示后的百分比
|
|
formatter: function (name) { //该函数用于设置图例显示后的百分比
|
|
@@ -628,7 +726,7 @@
|
|
}
|
|
}
|
|
})
|
|
})
|
|
var p = Math.round(((value / total) * 100)); //求出百分比
|
|
var p = Math.round(((value / total) * 100)); //求出百分比
|
|
- return `${name} ${'|'} ${p}% ${value}`; //返回出图例所显示的内容是名称+百分比
|
|
|
|
|
|
+ return `${name} ${'|'} ${p}% ${value}`; //返回出图例所显示的内容是名称+百分比
|
|
|
|
|
|
|
|
|
|
},
|
|
},
|
|
@@ -638,7 +736,7 @@
|
|
{
|
|
{
|
|
name: '',
|
|
name: '',
|
|
type: 'pie',
|
|
type: 'pie',
|
|
- radius: ['50%', '80%'],
|
|
|
|
|
|
+ radius: ['50%', '75%'],
|
|
avoidLabelOverlap: false,
|
|
avoidLabelOverlap: false,
|
|
hoverAnimation: true,
|
|
hoverAnimation: true,
|
|
silent: false,
|
|
silent: false,
|
|
@@ -650,17 +748,18 @@
|
|
label: {
|
|
label: {
|
|
show: true,
|
|
show: true,
|
|
position: 'center',
|
|
position: 'center',
|
|
|
|
+ fontSize:10,
|
|
formatter: function (param) {
|
|
formatter: function (param) {
|
|
|
|
|
|
- return '素材总数\r\n\r\n' + pieTotal
|
|
|
|
|
|
+ return '素材总数\r\n' + pieTotal
|
|
},
|
|
},
|
|
textStyle: {
|
|
textStyle: {
|
|
- fontSize: 16,
|
|
|
|
|
|
+ fontSize: 13,
|
|
color: '#fff'
|
|
color: '#fff'
|
|
}
|
|
}
|
|
},
|
|
},
|
|
left: 0,
|
|
left: 0,
|
|
- right: '56%',
|
|
|
|
|
|
+ right: '50%',
|
|
top: 0,
|
|
top: 0,
|
|
bottom: '20%',
|
|
bottom: '20%',
|
|
|
|
|
|
@@ -795,13 +894,13 @@
|
|
const VALUE = payPersonNum
|
|
const VALUE = payPersonNum
|
|
let option = {
|
|
let option = {
|
|
backgroundColor: "transparent",
|
|
backgroundColor: "transparent",
|
|
-
|
|
|
|
|
|
+
|
|
grid: { //图表的上下左右的距离
|
|
grid: { //图表的上下左右的距离
|
|
- left: '-10%',
|
|
|
|
- right: '0%',
|
|
|
|
|
|
+ left: '-20%',
|
|
|
|
+ right: '2%',
|
|
bottom: '15%',
|
|
bottom: '15%',
|
|
top: '20%',
|
|
top: '20%',
|
|
- padding: [0, 0, 0, 0],
|
|
|
|
|
|
+ padding: [50, 0, 0, 0],
|
|
containLabel: true,
|
|
containLabel: true,
|
|
},
|
|
},
|
|
xAxis: { //x轴的样式设置
|
|
xAxis: { //x轴的样式设置
|
|
@@ -1018,7 +1117,7 @@
|
|
offset: [2, -25],
|
|
offset: [2, -25],
|
|
formatter: function (value) {
|
|
formatter: function (value) {
|
|
var val = value.data;
|
|
var val = value.data;
|
|
- if (val >= 10000 && val < 10000000) {
|
|
|
|
|
|
+ if (val >= 10000 && val < 1000000000000) {
|
|
val = (val / 10000).toFixed(2) + "万";
|
|
val = (val / 10000).toFixed(2) + "万";
|
|
}
|
|
}
|
|
return val;
|
|
return val;
|
|
@@ -1063,23 +1162,23 @@
|
|
return 'loading...';
|
|
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: {
|
|
legend: {
|
|
data: ['快手', '头条'],
|
|
data: ['快手', '头条'],
|
|
x: 'right',
|
|
x: 'right',
|
|
@@ -1198,7 +1297,7 @@
|
|
legend: {
|
|
legend: {
|
|
data: ['华北', '华东', '华南', '骄阳'],
|
|
data: ['华北', '华东', '华南', '骄阳'],
|
|
textStyle: {
|
|
textStyle: {
|
|
- fontSize: 15,
|
|
|
|
|
|
+ fontSize: 12,
|
|
color: '#B0C4DE'
|
|
color: '#B0C4DE'
|
|
},
|
|
},
|
|
},
|
|
},
|
|
@@ -1254,28 +1353,24 @@
|
|
name: '华北',
|
|
name: '华北',
|
|
type: 'line',
|
|
type: 'line',
|
|
data: huaBei,
|
|
data: huaBei,
|
|
- symbol: 'none',
|
|
|
|
smooth: true,
|
|
smooth: true,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
name: '华东',
|
|
name: '华东',
|
|
type: 'line',
|
|
type: 'line',
|
|
data: huaDong,
|
|
data: huaDong,
|
|
- symbol: 'none',
|
|
|
|
smooth: true,
|
|
smooth: true,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
name: '华南',
|
|
name: '华南',
|
|
type: 'line',
|
|
type: 'line',
|
|
data: huaNan,
|
|
data: huaNan,
|
|
- symbol: 'none',
|
|
|
|
smooth: true,
|
|
smooth: true,
|
|
},
|
|
},
|
|
{
|
|
{
|
|
name: '骄阳',
|
|
name: '骄阳',
|
|
type: 'line',
|
|
type: 'line',
|
|
data: jiaoYang,
|
|
data: jiaoYang,
|
|
- symbol: 'none',
|
|
|
|
smooth: true,
|
|
smooth: true,
|
|
},
|
|
},
|
|
|
|
|
|
@@ -1294,30 +1389,43 @@
|
|
if (res.code == 0) {
|
|
if (res.code == 0) {
|
|
let arr = res.result
|
|
let arr = res.result
|
|
let optionArray = [];
|
|
let optionArray = [];
|
|
- 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;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- }
|
|
|
|
- this.optionData = optionArray.filter(d=>d)
|
|
|
|
- console.log(this.optionData);
|
|
|
|
|
|
+ // 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
|
|
if (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.chartPie = true;
|
|
-
|
|
|
|
|
|
+ this.$nextTick(() => {
|
|
|
|
+ this.setLabel(this.optionData);
|
|
|
|
+ this.initChart(this.optionData);
|
|
|
|
+ })
|
|
|
|
+
|
|
}
|
|
}
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+
|
|
|
|
+
|
|
|
|
|
|
}
|
|
}
|
|
})
|
|
})
|
|
@@ -1334,37 +1442,39 @@
|
|
setLabel(optionData) {
|
|
setLabel(optionData) {
|
|
optionData.forEach((item, index) => {
|
|
optionData.forEach((item, index) => {
|
|
item.itemStyle = {
|
|
item.itemStyle = {
|
|
- color: color[index]
|
|
|
|
|
|
+ color: color[index],
|
|
}
|
|
}
|
|
|
|
+ console.log(item);
|
|
item.label = {
|
|
item.label = {
|
|
normal: {
|
|
normal: {
|
|
show: true,
|
|
show: true,
|
|
color: color[index],
|
|
color: color[index],
|
|
- fontSize: 20,
|
|
|
|
|
|
+ fontSize: 18,
|
|
|
|
+ padding:[250,0],
|
|
formatter: function (params) {
|
|
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 + '\r\n' + echarts.format.addCommas(params.value.toFixed(2)) + '\r\n' + params.data.rate : ''
|
|
}, // 用\n来换行
|
|
}, // 用\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 = {
|
|
item.labelLine = {
|
|
@@ -1381,7 +1491,7 @@
|
|
initChart(optionData) {
|
|
initChart(optionData) {
|
|
this.statusChart = echarts.init(this.$refs.chart)
|
|
this.statusChart = echarts.init(this.$refs.chart)
|
|
// 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
|
|
// 传入数据生成 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)
|
|
this.statusChart.setOption(this.option)
|
|
// 是否需要label指引线,如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐,并再次setOption
|
|
// 是否需要label指引线,如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐,并再次setOption
|
|
this.option.series.push({
|
|
this.option.series.push({
|
|
@@ -1400,7 +1510,7 @@
|
|
},
|
|
},
|
|
startAngle: -30, // 起始角度,支持范围[0, 360]。
|
|
startAngle: -30, // 起始角度,支持范围[0, 360]。
|
|
clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
|
clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
|
- radius: ['20%', '52%'],
|
|
|
|
|
|
+ radius: '45%',
|
|
center: ['50%', '50%'],
|
|
center: ['50%', '50%'],
|
|
data: optionData,
|
|
data: optionData,
|
|
labelLine: { //删除指示线
|
|
labelLine: { //删除指示线
|