<template>
  <div ref="chatRef" class="chat-box"></div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import * as echarts from "echarts";
const chatRef = ref(null);
let myChart = null;

// 初始化图表
const initChart = () => {
  myChart = echarts.init(chatRef.value);

  let option = {
    gird: {
      show: true,
      top: 50,
      left: 50,
      right: 50,
    },
    color: ["#4681FF"],
    radar: {
      // shape: 'circle',
      startAngle: 90,
      indicator: [
        { name: "资本市场相关", max: 100 },
        { name: "潜在信号", max: 100 },
        { name: "产业政策", max: 100 },
        { name: "地缘影响", max: 100 },
        { name: "风险性", max: 100 },
        { name: "话题性", max: 100 },
        { name: "历史溯洄", max: 100 },
        { name: "行业导向", max: 100 },
        { name: "媒体影响力", max: 100 },
        { name: "资讯质量", max: 100 },
      ],
      axisName: {
        color: "#666666",
        fontSize: 12,
        fontWeight: 400,
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(234, 234, 236, 1)",
        },
      },
      splitNumber: 5
    },
    series: [
      {
        type: "radar",
        areaStyle: { color: "rgba(62, 122, 252, 0.20)" },
        data: [
          {
            value: [90, 75, 72, 98, 70, 75, 80, 95, 90, 60],
            name: "AI追踪海外资讯",
          },
        ],
      },
    ],
  };
  //使用配置
  myChart.setOption(option);
};

watch(
  () => chatRef.value,
  () => {
    if (!chatRef.value) return;
    initChart();
  },
  { immediate: true },
);
</script>

<style scoped lang="scss">
.chat-box {
  width: 100%;
  height: 400rpx;
  margin-top: 30rpx;
}
</style>
