| | |
| | | const dotKey = `dot${(params?.dataIndex || 0) % landColors.length}` |
| | | const dot = `{${dotKey}|} ` |
| | | if (!children.length) return `${dot}{parent|${parentName} ${parentValue}}` |
| | | // 用 marker 显示与扇区同色的小圆点,再显示父级名称,后面列出 children 的 name + value |
| | | // 小圆点 + 父级 name + 父级 value,换行展示 children 的 name + value |
| | | return [ |
| | | `${dot}{parent|${parentName} ${parentValue}}`, |
| | | ...children.map((c) => `{child|${c.name} ${c.value || 0}}`), |
| | | ...children.map((c) => `{child|${c.name}}`), |
| | | ].join('\n') |
| | | }, |
| | | }, |
| | | labelLine: { |
| | | show: true, |
| | | length: 40, |
| | | length2: 40, |
| | | length: 20, |
| | | length2: 20, |
| | | lineStyle: { |
| | | color: '#B8C8E0', |
| | | }, |
| | |
| | | return landColors[params.dataIndex % landColors.length] |
| | | }, |
| | | }, |
| | | // 初始绑定为响应式数据源,后续通过接口填充 |
| | | data: dataList.value, |
| | | }, |
| | | { |
| | |
| | | padding: 18px; |
| | | width: 100%; |
| | | height: 420px; |
| | | } |
| | | |
| | | .quality-cards { |
| | | display: flex; |
| | | gap: 12px; |
| | | width: 100%; |
| | | height: 54px; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | } |
| | | |
| | | .quality-cardSec { |
| | | display: flex; |
| | | } |
| | | |
| | | .quality-cardTitle { |
| | | font-weight: 400; |
| | | font-size: 14px; |
| | | color: #ffffff; |
| | | display: flex; |
| | | align-items: flex-start; |
| | | flex-direction: column; |
| | | } |
| | | |
| | | .quality-card { |
| | | width: 80px; |
| | | height: 60px; |
| | | background-size: cover; |
| | | background-position: center; |
| | | background-repeat: no-repeat; |
| | | } |
| | | |
| | | .quality-card.one { |
| | | background-image: url('@/assets/BI/yuancailiaoyijianicon@2x.png'); |
| | | } |
| | | |
| | | .quality-card.two { |
| | | background-image: url('@/assets/BI/guochengyijianicon@2x.png'); |
| | | } |
| | | |
| | | .quality-card.three { |
| | | background-image: url('@/assets/BI/chuchangyijianicon@2x.png'); |
| | | } |
| | | </style> |