-
设备故障原因分布
-
+
+
+
+
+
@@ -12,31 +16,35 @@ export default {
name: 'RoseChart',
data () {
return {
- option: {
- series: [
- {
- type: 'pie',
- radius: '50%',
- roseSort: false,
- data: [],
- insideLabel: {
- show: false
- },
- outsideLabel: {
- formatter: '{name} {percent}%',
- labelLineEndLength: 20,
- style: {
- fill: '#fff'
- },
- labelLineStyle: {
- stroke: '#fff'
- }
- },
- roseType: true
- }
- ],
- color: ['#da2f00', '#fa3600', '#ff4411', '#ff724c', '#541200', '#801b00', '#a02200', '#5d1400', '#b72700']
- }
+ config: {
+ data: [],
+ rowNum: 10
+ }
+ // option: {
+ // series: [
+ // {
+ // type: 'pie',
+ // radius: '50%',
+ // roseSort: false,
+ // data: [],
+ // insideLabel: {
+ // show: false
+ // },
+ // outsideLabel: {
+ // formatter: '{name} {percent}%',
+ // labelLineEndLength: 20,
+ // style: {
+ // fill: '#fff'
+ // },
+ // labelLineStyle: {
+ // stroke: '#fff'
+ // }
+ // },
+ // roseType: true
+ // }
+ // ],
+ // color: ['#da2f00', '#fa3600', '#ff4411', '#ff724c', '#541200', '#801b00', '#a02200', '#5d1400', '#b72700']
+ // }
}
},
methods: {
@@ -49,29 +57,32 @@ export default {
// 步骤1:数据格式转换
const processedData = response.data.map(item => ({
name: item.name || '未知故障', // 处理空名称
- value: Number(item.value) || 0 // 确保数值类型
+ value: Number(item.count_num) || 0 // 确保数值类型
}));
-
- // 步骤2:深度更新配置(关键)
- this.option = {
- ...this.option, // 保留原有配置
- series: [{
- ...this.option.series, // 继承其他配置
- data: processedData, // 降序排列
- // 保持原有样式配置
- type: 'pie',
- radius: '50%',
- roseSort: false,
- insideLabel: { show: false },
- outsideLabel: {
- formatter: '{name} {percent}%',
- labelLineEndLength: 20,
- style: { fill: '#fff' },
- labelLineStyle: { stroke: '#fff' }
- },
- roseType: true
- }]
+ this.config = {
+ ...this.config, // 保留其他配置项
+ data: processedData // 降序排列
};
+ // 步骤2:深度更新配置(关键)
+ // this.option = {
+ // ...this.option, // 保留原有配置
+ // series: [{
+ // ...this.option.series, // 继承其他配置
+ // data: processedData, // 降序排列
+ // // 保持原有样式配置
+ // type: 'pie',
+ // radius: '50%',
+ // roseSort: false,
+ // insideLabel: { show: false },
+ // outsideLabel: {
+ // formatter: '{name} {percent}%',
+ // labelLineEndLength: 20,
+ // style: { fill: '#fff' },
+ // labelLineStyle: { stroke: '#fff' }
+ // },
+ // roseType: true
+ // }]
+ // };
// 步骤3:强制刷新图表(如果使用原生 ECharts)
// this.myChart.setOption(this.option, true);
@@ -114,4 +125,27 @@ export default {
height: calc(~"100% - 50px");
}
}
+
+#ranking-board {
+ width: 20%;
+ box-shadow: 0 0 3px blue;
+ display: flex;
+ flex-direction: column;
+ background-color: rgba(6, 30, 93, 0.5);
+ border-top: 2px solid rgba(1, 153, 209, .5);
+ box-sizing: border-box;
+ padding: 0px 30px;
+ margin-left: 20px;
+ .ranking-board-title {
+ font-weight: bold;
+ height: 50px;
+ display: flex;
+ align-items: center;
+ font-size: 20px;
+ }
+
+ .dv-scroll-ranking-board {
+ flex: 1;
+ }
+}
diff --git a/src/views/cs/index5/scrollBoard.vue b/src/views/cs/index5/scrollBoard.vue
index abb6cfc..f38da3f 100644
--- a/src/views/cs/index5/scrollBoard.vue
+++ b/src/views/cs/index5/scrollBoard.vue
@@ -10,7 +10,7 @@