| | |
|---|
| | | |
|---|
| | | <!-- 设备健康状态可视化 --> |
|---|
| | | <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6"> |
|---|
| | | <Card title="设备健康度分布" > |
|---|
| | | <Card title="设备健康度评分" > |
|---|
| | | <!-- 这里将放置健康度分布图表 --> |
|---|
| | | <div ref="chartRef" class="h-64 w-full"></div> |
|---|
| | | </Card> |
|---|
| | |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | data: ['90%-100%', '80%-90%', '70%-80%', '60%-70%', '50%-60%', '40%-50%', '30%-40%', '20%-30%', '10%-20%', '0%-10%'], |
|---|
| | | axisLabel: { |
|---|
| | | rotate: 45 |
|---|
| | | } |
|---|
| | | data: ['10分', '9分', '8分', '7分', '6分', '5分', '4分', '3分', '2分', '1分'], |
|---|
| | | |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'value', |
|---|
| | |
|---|
| | | { value: 21, itemStyle: { color: '#52c41a' } }, |
|---|
| | | { value: 8, itemStyle: { color: '#faad14' } }, |
|---|
| | | { value: 5, itemStyle: { color: '#faad14' } }, |
|---|
| | | { value: 3, itemStyle: { color: '#faad14' } }, |
|---|
| | | { value: 1, itemStyle: { color: '#ff4d4f' } }, |
|---|
| | | { value: 1, itemStyle: { color: '#ff4d4f' } } |
|---|
| | | |
|---|
| | | ], |
|---|
| | | label: { |
|---|
| | | show: true, |
|---|
| | | position: 'top' |
|---|
| | | position: 'top', |
|---|
| | | formatter: '{c}台' |
|---|
| | | } |
|---|
| | | } |
|---|
| | | ] |
|---|
