<template>
  <div class="screen-card">
    <div class="panel-title">高风险设备 TOP</div>
    <div ref="chart" class="chart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  props: { data: Array },
  mounted() {
    this.chart = echarts.init(this.$refs.chart)
    this.render()
  },
  watch: {
    data() {
      this.render()
    }
  },
  methods: {
    render() {
      if (!this.data.length) return

      this.chart.clear()   // ⭐关键
      this.chart.setOption({
        radar: {
          indicator: this.data.map(d => ({
            name: d.deviceName,
            max: Math.max(d.totalCount, 10)
          })),
          axisName: { color: '#fff' }
        },
        series: [{
          type: 'radar',
          data: [{
            value: this.data.map(d => d.totalCount),
            areaStyle: { color: 'rgba(255,77,79,.4)' },
            lineStyle: { color: '#ff4d4f' }
          }]
        }]
      })
    }
  }
}
</script>

<style scoped>
.chart {
  height: 220px;
}
</style>
