扬尘前端页面

zmc

2023-10-12 ef10dea2a96d68a00a9a316f8594e0636103a6ab

 src/views/line_graph/components/DustRadarChart.vue

@@ -4,17 +4,19 @@
<script>
import * as echarts from 'echarts';
export default {
  props:{
    name:{
        type:Array,
        default:()=>{
          return []
        }
      },
    data:{
      type:Array,
      default:()=>{
        return []
  props: {
    // 属性
    name: {
      type: Array,
      default: () => {
        return [];
      }
    },
    // 数据
    yData: {
      type: Array,
      default: () => {
        return [100,0,0,0,100];
      }
    }
  },
@@ -23,49 +25,104 @@
      chart: null
    };
  },
  watch:{
    data(){
      this.set()
  watch: {
    yData() {
      this.set();
    }
  },
  mounted() {
    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(){
    set() {
      let option = {
        title: {
          text: '综合风险'
        },
        tooltip: {},
        radar: {
          // shape: 'circle',
          // 边框颜色
          splitLine: {
            lineStyle: {
              // 使用深浅的间隔色
              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',
            },
          legend: {
            borderColor: '#428BD4'
          }
        },
        series: [
          {
            name: 'Budget vs spending',
            type: 'radar',
            data: [
              {
                value: [this.data[0]*0.01,this.data[1]*0.01, this.data[2]*0.01,this.data[3]*0.01,this.data[4]*0.01],
                value: [
                  (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)
                ],
   
                name: '异常分析'
              },
            ]
              }
            ],
            label: {
              show: false,
            position: 'bottom',
            formatter: function(params) {
              return params.value*100+'%'
            }
            }
          }
        ]
      };
      this.chart.setOption(option);
    }
    },
        // 跟页面响应式变化
        resizeChart() {
          this.chart.resize();
          // this.$nextTick(() => {
          //   if (this.chart) {
          //     this.chart.resize();
          //   }
          // });
      }
  }
};
</script>
@@ -76,7 +133,7 @@

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