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>