diff --git a/src/views/modules/visual/communityGovern/resiPieOption.js b/src/views/modules/visual/communityGovern/resiPieOption.js index 58d04e13..6562f888 100644 --- a/src/views/modules/visual/communityGovern/resiPieOption.js +++ b/src/views/modules/visual/communityGovern/resiPieOption.js @@ -1,5 +1,5 @@ -export function pieOption () { +export function pieOption (_charts) { const center= ['50%', '250px'] return { title: { @@ -47,25 +47,19 @@ const center= ['50%', '250px'] center: center, radius: ['55%', '55.3%'], label: { - normal: { - show: false - } + show: false }, labelLine: { - normal: { - show: false - } + show: false }, data: [{ value: 360, itemStyle: { - normal: { - color: 'rgba(40, 101, 250, 0)', - width:0, - borderColor: 'rgba(40, 101, 250, 0.5)', - borderWidth: 1, - borderType: 'dotted' - } + color: 'rgba(40, 101, 250, 0)', + width:0, + borderColor: 'rgba(40, 101, 250, 0.5)', + borderWidth: 1, + borderType: 'dotted' } } ] @@ -85,33 +79,55 @@ const center= ['50%', '250px'] left: 'center', width: 400, label: { - position: 'outer', - // alignTo: 'edge', - formatter: '{a|{c}}\n\n{name|{b}}', - // minMargin: 100, - // edgeDistance: 0, - // lineHeight: 20, + // show: false, + position: 'outside', + alignTo: 'edge', + // formatter: '{a|{c}}\n\n{name|{b}}', + formatter: '{a|{c}}\n{r|}\n{name|{b}}', + minMargin: 5, + edgeDistance: 1, + lineHeight: 15, color: '#fff', fontSize: 12, - distanceToLabelLine: -60, + // distanceToLabelLine: -60, rich: { + name: { + padding: [0, 6, 0, 6] + }, a: { - fontSize: '30px', - color: ' #00F5FE', - + fontSize: 30, + color: '#fff', + padding: [0, 6, 6, 6] }, - b: { - lineHeight: 0, - fontSize: '20px', - color: ' #FFFFFF' - + r: { + backgroundColor: 'auto', + borderRadius: 6, + width: 6, + height: 6, + // padding: [3, 3, 0, -12] } } }, labelLine: { + show: false, smooth: 0.2, length: 30, - length2: 90 + length2: 0, + maxSurfaceAngle: 80 + }, + labelLayout: function (params) { + const isLeft = params.labelRect.x < _charts.getWidth() / 2; + const points = params.labelLinePoints; + // Update the end point. + if (points) { + points[2][0] = isLeft + ? params.labelRect.x + : params.labelRect.x + params.labelRect.width; + } + + return { + labelLinePoints: points + }; }, // itemStyle: { // normal:{ diff --git a/src/views/modules/visual/communityGovern/resibuzz.vue b/src/views/modules/visual/communityGovern/resibuzz.vue index c286a396..efe639c0 100644 --- a/src/views/modules/visual/communityGovern/resibuzz.vue +++ b/src/views/modules/visual/communityGovern/resibuzz.vue @@ -116,6 +116,7 @@ export default { pageSize: 10, pageNo: 1, total: 0, + pieChartS: null }, }; }, @@ -159,8 +160,9 @@ export default { }, methods: { - pieInitOk () { - console.log('pie准备好了') + pieInitOk (dom) { + console.log('pie准备好了', dom) + this.pieChartS = dom this.pieInitState = true }, @@ -180,12 +182,13 @@ export default { // const res = await getMonthPieChart(this.shibeiAId) // 获取pieChart配置 - this.pieOption = pieOption() + this.pieOption = pieOption(this.pieChartS) + this.pieOption.title.text = this.pieTotal + this.pieOption.series[1].data = this.pieData this.clickPie(0) - this.pieOption.title.text = this.pieTotal - this.pieOption.series[1].data = this.pieData + this.$refs.pieChart.setOption(this.pieOption) @@ -212,6 +215,19 @@ export default { } }; + console.log('zhilma') + // element.labelLayout = (params) => { + // const isLeft = params.labelRect.x < this.pieChartS.getWidth() / 2; + // const points = params.labelLinePoints; + // console.log('isLeft', isLeft, points) + // // Update the end point. + // points[2][0] = isLeft + // ? params.labelRect.x + // : params.labelRect.x + params.labelRect.width; + // return { + // labelLinePoints: points + // }; + // } } else { element.label = {