diff --git a/src/views/dashboard/home.vue b/src/views/dashboard/home.vue
index 9f09e99..29ccc07 100644
--- a/src/views/dashboard/home.vue
+++ b/src/views/dashboard/home.vue
@@ -456,10 +456,16 @@ export default {
content1[0].map((item) => {
this.pieData.push({
name: item.快递名称,
- value: item.收件量,
- percent: (item.收件量 / content1[0][0].日总收件量).toFixed(4) * 100,
+ y: item.收件量,
+ // percent: (item.收件量 / content1[0][0].日总收件量).toFixed(4) * 100,
});
});
+ this.pieData = this.pieData.sort(function (a, b) {
+ return b.y - a.y;
+ });
+ this.pieData[0].h = 15
+ this.pieData[1].h = 10
+ this.pieData[2].h = 5
console.log(this.pieData);
this.shouData.map((item, index) => {
if (index <= 10) {
@@ -470,7 +476,7 @@ export default {
});
this.$nextTick(() => {
this.createChart();
- // this.createCharts();
+ this.createPieChart(this.pieData);
// this.createCharts1();
this.run();
this.run1();
@@ -556,7 +562,7 @@ export default {
};
this.trendCharts.setOption(option);
},
- createPieChart() {
+ createPieChart(data) {
var each = Highcharts.each,
round = Math.round,
cos = Math.cos,
@@ -648,13 +654,31 @@ export default {
allowPointSelect: true,
cursor: "pointer",
depth: 35,
+ // dataLabels: {
+ // enabled: true,
+ // formatter: function (params) {
+ // console.log(this);
+ // //this 为当前的点(扇区)对象,可以通过 console.log(this) 来查看详细信息
+ // return `${this.key}:
+ // ${((this.y / this.total) * 100).toFixed(2)}%
+ // ${this.y}`
+ // },
+ // },
dataLabels: {
- enabled: true,
+ enabled: true, //是否显示饼图的线形tip
+ distance: "11%",
+ connectorWidth: 1,
+ style: {
+ // fontSize: 14,
+ // color: "#41A6FC",
+ textOutline: "none", // 去除黑色阴影
+ },
formatter: function (params) {
// console.log(this);
//this 为当前的点(扇区)对象,可以通过 console.log(this) 来查看详细信息
- let str = '' + this.key + '' + "
" + ((this.y / this.total) * 100).toFixed(2) + "%";
- return str;
+ return `${this.key}:
+ ${((this.y / this.total) * 100).toFixed(2)}%
+ ${this.y}`;
},
},
},
@@ -667,23 +691,7 @@ export default {
{
type: "pie",
name: "派件入库量占比",
- data: [
- {
- name: "应急物资1",
- y: 10,
- h: 5,
- },
- {
- name: "应急物资2",
- y: 20,
- h: 10,
- },
- {
- name: "应急物资3",
- y: 30,
- h: 15,
- },
- ],
+ data:data
},
],
});
@@ -1555,9 +1563,6 @@ export default {
.pie_box {
height: 83%;
width: 100%;
- // background: url(~@/assets/img/pie_bg.png);
- // background-size: 100% 100%;
- // background-position: 0% 10%;
}
.pie_bg{
@@ -1566,9 +1571,9 @@ export default {
background: url(http://192.168.1.35:8080/img/pie_bg.587a605d.png) no-repeat;
position: absolute;
background-size: 100% 100%;
- background-position-y: 0.7rem;
- background-position-x: -3px;
- top: 56%;
+ // background-position-y: 0.5rem;
+ // background-position-x: -3px;
+ top: 82%;
left: 50%;
transform: translate(-50%, -50%);
}