vue 可视化大屏 项目开发时，需要Echarts雷达图效果，当雷达图的数据数量变化时，雷达也会倾斜，可以通过

startAngle来调整雷达图，来获取自己需要的角度。

echarts版本

"echarts": "^5.5.0",

组件代码

<template>
  <div class="echarts1" ref="echarts">

  </div>
</template>

<script>

import * as echarts from "echarts"

export default {
  name: 'echarts1',
  components: {},
  props: {
    list: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {}
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine() {
      var that = this
      var indicator = [
        {
          name: '位置好',
          max: 100
        },
        {
          name: '房间宽散',
          max: 100
        },
        {
          name: '性价比高',
          max: 100
        },
        {
          name: '干净整洁',
          max: 100
        },
        {
          name: '服务热情',
          max: 100
        },
        {
          name: '设施周到',
          max: 100
        }]
      var dataValue = [50, 60, 70, 80, 50, 70]
      window.addEventListener('resize', this.drawLine)
      let myChart = echarts.init(this.$refs.echarts)

      function contains(arr, obj) {
        var i = arr.length;
        while (i--) {
          if (arr[i].name === obj) {
            return i;
          }
        }
        return false;
      }

      var option = {
        radar: {
          radius: '75%',
          center: ['50%', '50%'],
          startAngle: 90,
          triggerEvent: true,
          name: {
            textStyle: {
              rich: {
                a: {
                  color: '#fff',
                  fontSize: 14,
                  padding: [5, 5],
                },
                b: {
                  color: '#7BDEFF',
                  fontSize: 14,
                  padding: [0, 0, 0, 0],
                }
              },
            },
            formatter: (value) => {
              let i = contains(indicator, value); // 处理对应要显示的样式
              return '{a|' + value + '}'
            },
          },
          nameGap: '1',
          indicator: indicator,
          splitArea: {
            areaStyle: {
              color: ['rgba(0,0,0,0)', 'rgba(22, 80, 113, 1.00)', 'rgba(0,0,0,0)', 'rgba(22, 80, 113, 1.00)', 'rgba(0,0,0,0)'],
              shadowColor: 'rgba(9,107,166, 0)',
              shadowBlur: 0,
              shadowOffsetX: 10,
              shadowOffsetY: 10
            }
          },
          axisLine: {lineStyle: {color: 'rgba(9,107,166, 0)'}},
          splitLine: {
            lineStyle: {
              width: 1,
              color: ['rgba(61, 145, 188, 1.00)', 'rgba(61, 145, 188, 1.00)',
                'rgba(61, 145, 188, 1.00)', 'rgba(61, 145, 188, 1.00)', 'rgba(61, 145, 188, 1.00)']
            }
          }
        },
        series: [{
          name: '酒店印象',
          type: 'radar',
          areaStyle: {color: 'rgba(246, 220, 148, 0.8)'},
          symbol: 'circle',
          symbolSize: 0,
          itemStyle: {color: 'rgba(246, 220, 148, 1.00)', borderColor: 'rgba(246, 220, 148, 0.8)', borderWidth: 20},
          lineStyle: {color: 'rgba(246, 220, 148, 1.00)', width: 2},
          label: {show: false},
          data: [dataValue]
        }
        ]
      };
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
  }
}
</script>

<style lang="scss" scoped>
.echarts1 {
  position: relative;
  width: 100%;
  height: calc(100% - 10px);
}
</style>

项目实例

酒店数据可视化大屏