|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <div ref="chart" class="item" style="width: 220px; height: 200px" />
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <div ref="chart" class="item" style="width: 220px; height: 200px" />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
@@ -44,7 +44,7 @@ export default {
|
|
|
const option = {
|
|
|
title: [
|
|
|
{
|
|
|
- text: this.allNum ,
|
|
|
+ text: this.allNum,
|
|
|
top: "40%",
|
|
|
textAlign: "center",
|
|
|
left: "49%",
|
|
@@ -77,7 +77,12 @@ export default {
|
|
|
// },
|
|
|
tooltip: {
|
|
|
show: true,
|
|
|
- extraCssText: "z-index: 1000;"
|
|
|
+ extraCssText: "z-index: 1000;",
|
|
|
+ backgroundColor: "rgba(0,224,255,0.46)",
|
|
|
+ borderColor: "rgba(0,213,255, .6)",
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
},
|
|
|
series: [
|
|
|
// 最外层圆
|
|
@@ -87,12 +92,11 @@ export default {
|
|
|
center: ["50%", "50%"],
|
|
|
hoverAnimation: false,
|
|
|
data: [
|
|
|
-
|
|
|
{
|
|
|
value: data.map((item) => {
|
|
|
return item.gyjz;
|
|
|
}),
|
|
|
- name: '居民建筑',
|
|
|
+ name: "居民建筑",
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: {
|
|
@@ -115,7 +119,7 @@ export default {
|
|
|
value: data.map((item) => {
|
|
|
return item.ggjz;
|
|
|
}),
|
|
|
- name: '公共建筑',
|
|
|
+ name: "公共建筑",
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: {
|
|
@@ -138,7 +142,7 @@ export default {
|
|
|
value: data.map((item) => {
|
|
|
return item.zzjz;
|
|
|
}),
|
|
|
- name: '工业建筑',
|
|
|
+ name: "工业建筑",
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: {
|
|
@@ -161,7 +165,10 @@ export default {
|
|
|
label: {
|
|
|
show: true,
|
|
|
position: "outside",
|
|
|
- formatter: "{d}%",
|
|
|
+ // formatter: "{d}%",
|
|
|
+ formatter: (params) => {
|
|
|
+ return `${params.value}\n ${params.percent}%`;
|
|
|
+ },
|
|
|
color: "#FFFFFF",
|
|
|
},
|
|
|
labelLine: {
|