雷达图 新增综合风险排名 数据接入配置

zmc

2023-09-05 c2f95b0b9090a2394b5b068582b932a5e57b86aa

 src/views/line_graph/components/DustRadarChart.vue

@@ -32,6 +32,7 @@
  },
  mounted() {
    this.initRadarChart();
    window.addEventListener('resize', this.resizeChart);
  },
  methods: {
    initRadarChart() {
@@ -45,14 +46,6 @@
        },
        tooltip: {},
        radar: {
          // 轴
          //         axisLine: {
          //           show:true,
          //           lineStyle: {
          //             color: '#F53F3F' ,// 设置边框线的颜色为黑色
          //             type:'dashed',
          //           }
          // },

          // 边框颜色
          splitLine: {
@@ -61,7 +54,7 @@
              color: ['#ddd', '#aaa']
            }
          },
          // shape: 'circle',

          indicator: [
            { name: this.name[0], max: 1 },
            { name: this.name[1], max: 1 },
@@ -69,13 +62,7 @@
            { name: this.name[3], max: 1 },
            { name: this.name[4], max: 1 }
          ],
          //     splitArea: {
          //   areaStyle: {
          //     // color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
          //     shadowColor: 'rgba(0, 0, 0, 0.2)',
          //     shadowBlur: 10
          //   }
          // },

          axisName: {
            color: '#428BD4'
          },
@@ -89,26 +76,43 @@
            data: [
              {
                value: [
                  (this.yData[0] / 100).toFixed(4),
                  (1 - (this.yData[0] / 100).toFixed(4)),
                  this.yData[1],
                  this.yData[2],
                  (this.yData[3] / 100).toFixed(4),
                  (this.yData[4] / 100).toFixed(4)
                 (this.yData[3] / 100).toFixed(4),
                  1-((this.yData[4] / 100).toFixed(4))
                ],
                // value: [
                //   this.yData[0],
                //   this.yData[1],
                //   this.yData[2],
                //   this.yData[3] ,
                //   this.yData[4] 
                // ],
                name: '异常分析'
              }
            ],
            label: {
              show: true,
              formatter: function (params) {
                return params.value;
                
                return params.value*100+'%';
              }
            }
          }
        ]
      };
      this.chart.setOption(option);
    }
    },
        // 跟页面响应式变化
        resizeChart() {
          // this.chart.resize();
          this.$nextTick(() => {
            if (this.chart) {
              this.chart.resize();
            }
          });
      }
  }
};
</script>