diff --git a/src/views/dashboard/PieChartCreate.vue b/src/views/dashboard/PieChartCreate.vue index c7348d2..15aada0 100644 --- a/src/views/dashboard/PieChartCreate.vue +++ b/src/views/dashboard/PieChartCreate.vue @@ -13,14 +13,17 @@ - - +
+ + {{ Math.floor((chartData.collectionSuccessOrderNum + / chartData.collectionTotalOrder) * 100) }}% + 0% + +
+
- +
@@ -38,30 +41,34 @@ 总金额: - - {{ NumberDiv(chartData.collectionAllPrice,10000) }} + + {{ NumberDiv(chartData.collectionAllPrice, 10000) }} {{ chartData.collectionAllPrice }} - 万元 + 万元
- +
+ + {{ Math.floor((chartData.collectionSuccessPrice + / chartData.collectionAllPrice) * 100) }}% + 0% + +
- - + + - 万元 + 万元
@@ -78,6 +85,18 @@ 总订单:{{ chartData.paymentTotalOrder }}笔 + + +
+ + {{ + Math.floor((chartData.paymentSuccessOrderNum / chartData.paymentTotalOrder) * 100) }}% + 0% + + +
+
@@ -95,22 +114,32 @@ 总金额: - {{ NumberDiv(chartData.paymentAllPrice,10000) }} + {{ NumberDiv(chartData.paymentAllPrice, 10000) }} {{ chartData.paymentAllPrice }} - 万元 + 万元
+ +
+ + {{ + Math.floor((chartData.paymentSuccessPrice / chartData.paymentAllPrice) * 100) }}% + 0% + +
+
- - + + - 万元 + 万元
@@ -205,11 +234,9 @@ export default { let title; if (this.chartData.collectionSuccessOrderNum) { title = Math.floor((this.chartData.collectionSuccessOrderNum / this.chartData.collectionTotalOrder) * 100) + '%' - console.log(Math.floor((this.chartData.collectionSuccessOrderNum / this.chartData.collectionTotalOrder) * 100)) } else { title = 0 + '%' } - this.myChart = echarts.init(document.getElementById('myChart1')) this.myChart.setOption({ title: { @@ -266,68 +293,40 @@ export default { silent: 'true', data: [ { - name: '', - value: Math.floor((this.chartData.collectionSuccessOrderNum / this.chartData.collectionTotalOrder) * 100), - itemStyle: { - normal: { - color: { - // 完成的圆环的颜色 - colorStops: [ - { - offset: 0, - color: "#46F2BC" // 0% 处的颜色 - }, - { - offset: 0.5, - color: "#2ED383" // 0% 处的颜色 - }, - { - offset: 0.7, - color: "#2ED383" // 0% 处的颜色 - }, - { - offset: 1, - color: "#46F2BC" // 100% 处的颜色 - } - ] + name: '', + value: Math.floor((this.chartData.collectionSuccessOrderNum / this.chartData.collectionTotalOrder) * 100), + itemStyle: { + normal: { + color: { + // 完成的圆环的颜色 + colorStops: [ + { + offset: 0, + color: "#46F2BC" // 0% 处的颜色 + }, + { + offset: 0.5, + color: "#2ED383" // 0% 处的颜色 + }, + { + offset: 0.7, + color: "#2ED383" // 0% 处的颜色 + }, + { + offset: 1, + color: "#46F2BC" // 100% 处的颜色 + } + ] + }, }, }, - }, - }], + }], coordinateSystem: 'polar', roundCap: true, barWidth: 15, barGap: '-100%', // 两环重叠 z: 2, }, - // { - // type: 'bar', - // silent: 'true', - // data: [ - // { - // name: '', - // value: Math.floor((this.chartData.collectionSuccessOrderNum / this.chartData.collectionTotalOrder) * 100), - // itemStyle: { - // normal: { - // color: { - // // 完成的圆环的颜色 - // colorStops: [ - // { - // offset: 1, - // color: "red" // 0% 处的颜色 - // }, - // ] - // }, - // }, - // }, - // }, - // ], - // coordinateSystem: 'polar', - // roundCap: true, - // barWidth: 1, - // barGap: '-100%', // 两环重叠 - // z: 3, - // }, { // 灰色环 type: 'bar', silent: 'true', @@ -702,27 +701,29 @@ export default { } \ No newline at end of file +} \ No newline at end of file diff --git a/src/views/dashboard/demo.vue b/src/views/dashboard/demo.vue index 1ed1b28..95aff89 100644 --- a/src/views/dashboard/demo.vue +++ b/src/views/dashboard/demo.vue @@ -44,7 +44,8 @@ let obj = Object.assign({}, this.defaultConfig, this.config); let rotate = `rotate(${360 * rate}deg)`; let chartRotate = obj.clockwise ? "rotateY(0deg)" : "rotateY(180deg)"; - let showEyes = obj.showEyes ? 1 : 0; + // obj.showEyes ? + let showEyes = isNaN(this.rate)!=true&&Math.floor(this.rate * 100)>=1 ? 1 : 0; return { "--background-image": `conic-gradient(${obj.startColor} 0%, ${obj.endColor} ${endPos}, transparent ${endPos})`, "--border-width": obj.borderWidth, @@ -52,7 +53,7 @@ "--pointer-rotate": rotate, "--background-color": obj.borderBackground, "--center-gap-bg": obj.centerCircleBg, - "--circle-color": obj.circleColor, + "--circle-color": this.circleColor, "--clockwise-wise": chartRotate, "--show-eyes": showEyes, "--eyes-size": obj.eyesSize, @@ -82,8 +83,8 @@