ContestPortal/src/views/personalReport/components/randerChart.vue

<template>
  <div id="rander-chart"></div>
</template>

<script lang="ts" setup>
import echarts from '@/utils/echarts'

import { onMounted, nextTick } from 'vue'
const props = defineProps({
  data: {
    type: Array,
    default: [
      {
        text: '前言探索',
        value: 0,
      },
      {
        capacityName: '奠定基础',
        value: 0,
      },
      {
        capacityName: '知识分析',
        value: 0,
      },
      {
        capacityName: '社会责任',
        value: 0,
      },
      {
        capacityName: '独立思考',
        value: 0,
      },
      {
        capacityName: '拓宽视野',
        value: 0,
      },
      {
        capacityName: '激发兴趣',
        value: 0,
      },
      {
        capacityName: '沟通协调',
        value: 0,
      },
      {
        capacityName: '设计开发',
        value: 0,
      },
      {
        capacityName: '研判分析',
        value: 0,
      },
      {
        capacityName: '创新能力',
        value: 0,
      },
      {
        capacityName: '团队协作',
        value: 0,
      },
    ],
  },
})

const throttle = (fn: any) => {
  let timer: any
  return function () {
    if (timer) {
      return
    }
    timer = setTimeout(() => {
      fn()
      clearTimeout(timer)
      timer = null
    }, 1000)
  }
}
let Data = props.data
console.log(Data, props.data)

nextTick(() => {
  // @ts-ignore
  const myChart = echarts.init(document.getElementById('rander-chart'))
  console.log(Data, 1111)

  // var legendData = ['车辆数']; //图例
  var indicator = Data.map((item) => {
    return { name: item.capacityName, max: 100 }
  })
  var dataArr = [
    {
      value: Data.map((item) => item.value),
      name: '年度维度分析',
      itemStyle: {
        normal: {
          lineStyle: {
            color: '#55d7f2',
          },
          shadowColor: '#4A99FF',
          shadowBlur: 10,
        },
      },
      areaStyle: {
        normal: {
          // 单项区域填充样式
          color: {
            type: 'linear',
            x: 1, //右
            y: 0, //下
            x2: 1, //左
            y2: 1, //上
            colorStops: [
              {
                offset: 0,
                color: '#1890ff',
              },
              {
                offset: 1,
                color: '#1890ff',
              },
            ],
            globalCoord: false,
          },
          opacity: 1, // 区域透明度
        },
      },
    },
  ]
  var colorArr = ['#fff', '#fff'] //颜色
  const option: any = {
    backgroundColor: 'transparent',
    color: colorArr,
    // legend: {
    //   orient: "vertical",
    //   // icon: 'circle', //图例形状
    //   // data: legendData,
    //   top: 0,
    //   left: 20,
    //   itemWidth: 8, // 图例标记的图形宽度。[ default: 25 ]
    //   itemHeight: 8, // 图例标记的图形高度。[ default: 14 ]
    //   itemGap: 22, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
    //   textStyle: {
    //     fontSize: 12,
    //     fontWeight: "bold",
    //     color: "#00E4FF",
    //   },
    // },
    tooltip: {
      trigger: 'item',
    },
    radar: {
      radius: '60%',
      // shape: 'circle',
      name: {
        textStyle: {
          color: '#9ca4a6',
          fontSize: 12,
        },
      },
      indicator: indicator,
      splitArea: {
        // 坐标轴在 grid 区域中的分隔区域，默认不显示。
        show: true,
        areaStyle: {
          // 分隔区域的样式设置。
          color: ['rgba(255,255,255,0)', 'rgba(255,255,255,0)'], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
        },
      },
      axisLine: {
        //指向外圈文本的分隔线样式
        lineStyle: {
          color: '#2a5f61',
        },
      },
      splitLine: {
        lineStyle: {
          color: '#2a5f61', // 分隔线颜色
          width: 1, // 分隔线线宽
        },
      },
    },
    series: [
      {
        type: 'radar',
        symbolSize: 6,
        symbol: 'circle',
        data: dataArr,
      },
    ],
  }
  myChart.setOption(option)
  let resize = throttle(() => {
    myChart.resize()
  })
  window.addEventListener('resize', resize)
})
onMounted(() => {})
</script>

<style lang="scss" scoped>
#rander-chart {
  width: 100%;
  height: 450px;
}
</style>