85 lines
1.7 KiB
Vue
85 lines
1.7 KiB
Vue
<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>
|