| | |
| | | // 颜色列表 |
| | | const landColors = ['#26FFCB', '#24CBFF', '#35FBF4', '#2651FF', '#D1E4F5', '#5782F7', '#2F67EF', '#82BAFF'] |
| | | |
| | | // label 富文本:为每个颜色生成一个小圆点样式(确保在 label 中可见) |
| | | const dotRich = landColors.reduce((acc, color, idx) => { |
| | | acc[`dot${idx}`] = { |
| | | width: 8, |
| | | height: 8, |
| | | borderRadius: 8, |
| | | backgroundColor: color, |
| | | align: 'center', |
| | | } |
| | | return acc |
| | | }, {}) |
| | | |
| | | // 图例配置(右侧竖排) |
| | | const landLegend = { |
| | | show: false, |
| | |
| | | center: ['50%', '50%'], |
| | | label: { |
| | | show: true, |
| | | position: 'outside', |
| | | color: '#fff', |
| | | fontSize: 12, |
| | | lineHeight: 18, |
| | | rich: { |
| | | ...dotRich, |
| | | parent: { fontSize: 14, fontWeight: 600, color: '#fff', lineHeight: 20 }, |
| | | child: { fontSize: 12, color: '#fff', lineHeight: 18 }, |
| | | }, |
| | | formatter: function (params) { |
| | | const children = params?.data?.children || [] |
| | | if (!children.length) return '' |
| | | // label 展示 children 的 name + value |
| | | return children.map((c) => `${c.name} ${c.value}`).join('\n') |
| | | const parentName = params?.data?.name || '' |
| | | const parentValue = params?.data?.value ?? 0 |
| | | const dotKey = `dot${(params?.dataIndex || 0) % landColors.length}` |
| | | const dot = `{${dotKey}|} ` |
| | | if (!children.length) return `${dot}{parent|${parentName} ${parentValue}}` |
| | | // 用 marker 显示与扇区同色的小圆点,再显示父级名称,后面列出 children 的 name + value |
| | | return [ |
| | | `${dot}{parent|${parentName} ${parentValue}}`, |
| | | ...children.map((c) => `{child|${c.name} ${c.value || 0}}`), |
| | | ].join('\n') |
| | | }, |
| | | }, |
| | | labelLine: { |
| | |
| | | |
| | | <!-- 顶部标题栏 --> |
| | | <div class="dashboard-header"> |
| | | <div class="factory-name">{{ userStore.currentFactoryName }}</div> |
| | | <div class="factory-name">基础数据</div> |
| | | </div> |
| | | |
| | | <!-- 主要内容区域 --> |