cxyy-web/src/views/brain/two/echarts4.vue

<template>
  <div ref="echarts4" class="echarts4"></div>
</template>
<style scoped lang="scss">
.echarts4 {
  height: 65%;
  width: 100%;
}
</style>
<script setup>
import * as echarts from 'echarts'
const echarts4 = ref()
onMounted(() => {
  echarts4View()
})
function echarts4View() {
  const myChart4 = echarts.init(echarts4.value)
  const option4 = {
    color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
    radar: [
      {
        indicator: [{ text: '总利润(亿)' }, { text: '总营收(亿)' }, { text: '员工数' }, { text: '投入研发(亿)' }, { text: '总利税(亿)' }],
        center: ['50%', '50%'],
        radius: '80%',
        startAngle: 90,
        splitNumber: 4,
        shape: 'circle',
        axisName: {
          formatter: '【{value}】',
          color: '#fff'
        },
        splitArea: {
          areaStyle: {
            color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
            shadowColor: 'rgba(0, 0, 0, 0.2)',
            shadowBlur: 10
          }
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(211, 253, 250, 0.8)'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(211, 253, 250, 0.8)'
          }
        }
      }
    ],
    series: [
      {
        type: 'radar',
        emphasis: {
          lineStyle: {
            width: 4
          }
        },
        data: [
          {
            value: [100, 8, 0.4, -80, 2000],
            name: 'Data A'
          }
        ]
      }
    ]
  }
  myChart4.setOption(option4)
  window.addEventListener('resize', function () {
    myChart4.resize()
  })
}
</script>