登陆页换了背景，加了风险排名

zmc

2023-09-27 eeef5d4039d2b3fee6854ddc2789aa23232b2cfb

 src/views/line_graph/components/DustRadarChart.vue

@@ -16,7 +16,7 @@
    yData: {
      type: Array,
      default: () => {
        return [];
        return [100,0,0,0,100];
      }
    }
  },
@@ -34,19 +34,34 @@
    this.initRadarChart();
    window.addEventListener('resize', this.resizeChart);
  },
  computed:{
    valid(){
      return (100-this.yData[0]).toFixed(2)
    },
    exceptionRecurrence(){
      return this.yData[1]*100
    },
    exceptionTypeAggregation(){
      return this.yData[2]*100
    },
    exceeding(){
      return  this.yData[3]
    },
    online(){
      return   (100-this.yData[4]).toFixed(2)
    }
  },
  methods: {
    initRadarChart() {
      this.chart = echarts.init(document.getElementById('main'));
    },
    set() {
      // this.data[0] = this.data[0]*0.01
      let option = {
        title: {
          text: '综合风险'
        },
        tooltip: {},
        radar: {

          // 边框颜色
          splitLine: {
            lineStyle: {
@@ -54,18 +69,19 @@
              color: ['#ddd', '#aaa']
            }
          },

      
          indicator: [
            { name: this.name[0], max: 1 },
            { name: this.name[1], max: 1 },
            { name: this.name[2], max: 1 },
            { name: this.name[3], max: 1 },
            { name: this.name[4], max: 1 }
            { name: this.name[0] +' '+ this.valid+'%', max: 1 },
            { name: this.name[1] +' '+ this.exceptionRecurrence+'%', max: 1 },
            { name: this.name[2] +' '+ this.exceptionTypeAggregation+'%', max: 1 },
            { name: this.name[3] +' '+ this.exceeding+'%', max: 1 },
            { name: this.name[4] +' '+ this.online+'%', max: 1 }

          ],

          axisName: {
            color: '#428BD4'
          },
            color: '#428BD4',
            },
          legend: {
            borderColor: '#428BD4'
          }
@@ -76,28 +92,22 @@
            data: [
              {
                value: [
                  (1 - (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),
                  1-((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*100+'%';
              }
              show: false,
            position: 'bottom',
            formatter: function(params) {
              return params.value*100+'%'
            }
            }
          }
        ]
@@ -106,12 +116,12 @@
    },
        // 跟页面响应式变化
        resizeChart() {
          // this.chart.resize();
          this.$nextTick(() => {
            if (this.chart) {
              this.chart.resize();
            }
          });
          this.chart.resize();
          // this.$nextTick(() => {
          //   if (this.chart) {
          //     this.chart.resize();
          //   }
          // });
      }
  }
};
@@ -123,7 +133,7 @@

<style scoped>
.chart {
  width: 100%;
  width: 650px;
  height: 500px;
}
</style>