Skip to content

R
risk-monitor
提交 836577e5 authored 作者: huhuiqing's avatar huhuiqing
浏览文件
操作

概览首页样式完善

上级 0feee6c8
隐藏空白字符变更
内嵌 并排
正在显示 包含 241 行增加 和 167 行删除
src/views/overView/component/ResourceSupport.vue
浏览文件 @ 836577e5
......@@ -3,9 +3,9 @@
<div class="resource-box">
<DivideHeader class="divide1" :titleText="'中美博弈资源支撑'"></DivideHeader>
<div style="margin-top: 20px;height: 450px;display: flex;">
<div class="resource-content" style="width: 47.5%; display: block;">
<div class="resource-content" style="width: 49.25%; display: block;">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<img class="item-header-icon" src="@/assets/images/icon/resource-icon-1.png"></img>
<div class="item-header-text">中美博弈资源新闻动态</div>
<div class="item-header-right"> 更多 +</div>
</div>
......@@ -24,9 +24,9 @@
</el-timeline>
</div>
</div>
<div class="resource-content" style="width: 47.5%;margin-left: 5%;">
<div class="resource-content" style="width: 49.25%;margin-left: 1.5%;">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<img class="item-header-icon" src="@/assets/images/icon/resource-icon-2.png"></img>
<div class="item-header-text" style="width: 130px;">创新主体排名</div>
<el-radio-group v-model="InnovationRankingBtn" size="small" @change="handleInnovationRankingBtn">
<el-radio-button value="enterprise" border>科技企业
......@@ -72,7 +72,7 @@
</div>
</div>
<div style="margin-top: 20px;height: 450px;display: flex;">
<div class="resource-content" style="width: 47.5%; display: block;">
<div class="resource-content" style="width: 49.25%; display: block;">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">研发投入情况</div>
......@@ -86,9 +86,9 @@
<div style="display: flex;height: calc(100% - 60px);" id="char3">
</div>
</div>
<div class="resource-content" style="width: 47.5%;margin-left: 5%;">
<div class="resource-content" style="width: 49.25%;margin-left: 1.5%;">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<img class="item-header-icon" src="@/assets/images/icon/thematic-icon-3.png"></img>
<div class="item-header-text">研发投入领域</div>
<div class="item-header-right"> 查看数据源> </div>
</div>
......@@ -102,20 +102,22 @@
</div>
</div>
<div style="margin-top: 20px;height: 450px;display: flex;">
<div class="resource-content" style="width: 47.5%; display: block;">
<div class="resource-content" style="width: 49.25%; display: block;">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">专利申请情况</div>
</div>
<div class="item-header-divider"></div>
<el-select v-model="patentSelect" placeholder="" style="width: 100px;float: right;margin-right: 20px;"
size="small">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<div style="display: flex;height: calc(100% - 60px);" id="char5">
<div style="display: flex;height: calc(100% - 60px);width: 100%;" id="char5">
</div>
</div>
<div class="resource-content" style="width: 47.5%;margin-left: 5%;">
<div class="resource-content" style="width: 49.25%;margin-left: 1.5%;">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">论文发表情况</div>
......@@ -126,7 +128,7 @@
size="small">
<el-option v-for="item in timeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<div style="display: flex;height: calc(100% - 60px);" id="char6">
<div style="display: flex;height: calc(100% - 60px);width: 100%;" id="char6">
</div>
</div>
</div>
......@@ -318,7 +320,7 @@ onMounted(() => {
<style lang="scss" scoped>
.divide1 {
margin-top: 64px;
margin-top: 30px;
margin-bottom: 36px;
}
......
src/views/overView/component/Thematicanalysis.vue
浏览文件 @ 836577e5
<!-- 打压遏制ts分析 -->
<template>
<div class="thematic-box">
<div class="title-text">中美博弈专题分析</div>
<DivideHeader class="divide" :titleText="'打压遏制态势分析'"></DivideHeader>
<div class="thematic-content">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">对华打压历程</div>
<div class="item-header-right"> <img class="item-header-right-icon" src="@/assets/images/icon/tips.png"></img>
数据来源：美国某某局</div>
</div>
<div class="item-header-divider"></div>
<div style="display: flex;height: calc(100% - 60px);">
<Timeline :data="course" text-key="title" id-key="seq" />
</div>
</div>
<div class="thematic-content" style="margin-top: 20px;height: 350px;">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">打压遏制手段分布</div>
</div>
<div class="item-header-divider"></div>
<div style="display: flex; justify-content: space-between; width: 100%; height: calc(100% - 60px);">
<div class="thematic-btn-left" @click="changeBtn('left')">
<img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-left.png"></img>
</div>
<div class="cup-box" style="display: flex;">
<div v-for="item in distributionColor" class="cup-item-box" :style="{
color: `hsla(${item.color[0]}, ${item.color[1]}%, ${item.color[2]}%, ${1})`
}"
@click="handleClickItem(item)"
>
<div class="cup-title">
{{ item.titlle }}
</div>
<WaveBall :percent="item.value" :data="item" :color="item.color" :size="128" />
<div style="margin-top: 20px;">
{{ item.change }}
</div>
</div>
</div>
<div class="thematic-btn-right" @click="changeBtn('right')">
<img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-right.png"></img>
</div>
</div>
</div>
<div style="margin-top: 20px;height: 450px;display: flex;">
<div class="thematic-content" style="width: 47.5%; display: block;">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">打压遏制强度变化</div>
<div class="item-header-right"> <img class="item-header-right-icon" src="@/assets/images/icon/tips.png"></img>
数据来源：美国某某局</div>
</div>
<div class="item-header-divider"></div>
<div style="display: flex;">
<el-radio-group v-model="strengthBtn" size="small" @change="handleStrengthBtn">
<el-radio-button value="all" border>全部领域
</el-radio-button>
<el-radio-button value="integratedCircuits" border>集成电路</el-radio-button>
<el-radio-button value="energy" border>能源
</el-radio-button>
<el-radio-button value="biotechnology" border>生物科技</el-radio-button>
<el-radio-button value="quantum" border>量子科技</el-radio-button>
<el-radio-button value="ai" border>人工智能</el-radio-button>
<el-radio-button value="network" border>通信网络</el-radio-button>
</el-radio-group>
<el-select v-model="strengthSelect" placeholder="" style="width: 100px;" size="small">
<el-option v-for="item in strengthTimeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div style="display: flex;height: calc(100% - 60px);" id="chart1">
</div>
</div>
<div class="thematic-content" style="width: 47.5%;margin-left: 5%;">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">打压遏制领域分布</div>
<div class="item-header-right"> <img class="item-header-right-icon" src="@/assets/images/icon/tips.png"></img>
数据来源：美国某某局</div>
</div>
<div class="item-header-divider"></div>
<el-select v-model="areaSelect" placeholder="" style="width: 100px;float: right;" size="small">
<el-option v-for="item in areaTimeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<div style="display: flex;height: calc(100% - 60px);" id="char2">
</div>
</div>
</div>
</div>
<div class="thematic-box">
<div class="title-text">中美博弈专题分析</div>
<DivideHeader class="divide" :titleText="'打压遏制态势分析'"></DivideHeader>
<div class="thematic-content">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">对华打压历程</div>
<div class="item-header-right"> <img class="item-header-right-icon" src="@/assets/images/icon/tips.png"></img>
数据来源：美国某某局</div>
</div>
<div class="item-header-divider"></div>
<div style="display: flex;height: calc(100% - 60px);">
<Timeline :data="course" text-key="title" id-key="seq" />
</div>
</div>
<div class="thematic-content" style="margin-top: 20px;height: 350px;">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-icon-2.png"></img>
<div class="item-header-text">打压遏制手段分布</div>
</div>
<div class="item-header-divider"></div>
<div style="display: flex; justify-content: space-between; width: 100%; height: calc(100% - 60px);">
<div class="thematic-btn-left" @click="changeBtn('left')">
<img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-left.png"></img>
</div>
<div class="cup-box" style="display: flex;">
<div v-for="item in distributionColor" class="cup-item-box" :style="{
color: `hsla(${item.color[0]}, ${item.color[1]}%, ${item.color[2]}%, ${1})`
}" @click="handleClickItem(item)">
<div class="cup-title">
{{ item.titlle }}
</div>
<WaveBall :percent="item.value" :data="item" :color="item.color" :size="128" />
<div style="margin-top: 20px;">
{{ item.change }}
</div>
</div>
</div>
<div class="thematic-btn-right" @click="changeBtn('right')">
<img class="thematic-btn-icon" src="@/assets/images/icon/card-btn-right.png"></img>
</div>
</div>
</div>
<div style="margin-top: 20px;height: 450px;display: flex;">
<div class="thematic-content" style="width: 49.25%;; display: block;">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-card-header-time.png"></img>
<div class="item-header-text">打压遏制强度变化</div>
<div class="item-header-right"> <img class="item-header-right-icon" src="@/assets/images/icon/tips.png"></img>
数据来源：美国某某局</div>
</div>
<div class="item-header-divider"></div>
<div style="display: flex;">
<el-radio-group v-model="strengthBtn" size="small" @change="handleStrengthBtn">
<el-radio-button value="all" border>全部领域
</el-radio-button>
<el-radio-button value="integratedCircuits" border>集成电路</el-radio-button>
<el-radio-button value="energy" border>能源
</el-radio-button>
<el-radio-button value="biotechnology" border>生物科技</el-radio-button>
<el-radio-button value="quantum" border>量子科技</el-radio-button>
<el-radio-button value="ai" border>人工智能</el-radio-button>
<el-radio-button value="network" border>通信网络</el-radio-button>
</el-radio-group>
<el-select v-model="strengthSelect" placeholder="" style="width: 100px;" size="small">
<el-option v-for="item in strengthTimeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</div>
<div style="display: flex;height: calc(100% - 60px);" id="chart1">
</div>
</div>
<div class="thematic-content" style="width: 49.25%;margin-left: 1.5%;">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/thematic-icon-3.png"></img>
<div class="item-header-text">打压遏制领域分布</div>
<div class="item-header-right"> <img class="item-header-right-icon" src="@/assets/images/icon/tips.png"></img>
数据来源：美国某某局</div>
</div>
<div class="item-header-divider"></div>
<el-select v-model="areaSelect" placeholder="" style="width: 100px;float: right;" size="small">
<el-option v-for="item in areaTimeList" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<div style="display: flex;height: calc(100% - 60px);" id="char2">
</div>
</div>
</div>
</div>
</template>
......@@ -167,7 +166,7 @@ const distribution = ref([
text: "1626",
unit: "个",
change: "较上个月+3",
path: '/billHome'
path: '/billHome'
},
{
titlle: "行政令",
......@@ -175,7 +174,7 @@ const distribution = ref([
text: "1626",
unit: "个",
change: "较上个月+1",
path: '/decree'
path: '/decree'
},
{
titlle: "科技智库",
......@@ -183,7 +182,7 @@ const distribution = ref([
text: "66",
unit: "次",
change: "较上个月+2",
path: '/thinkTank'
path: '/thinkTank'
},
{
titlle: "出口管制",
......@@ -191,7 +190,7 @@ const distribution = ref([
text: "66",
unit: "次",
change: "较上个月+1",
path: '/exportControl'
path: '/exportControl'
},
{
titlle: "投融资限制",
......@@ -199,7 +198,7 @@ const distribution = ref([
text: "119",
unit: "次",
change: "较上个月+1",
path: '/finance'
path: '/finance'
},
{
titlle: "市场准入",
......@@ -207,7 +206,7 @@ const distribution = ref([
text: "223",
unit: "次",
change: "较上个月+1",
path: '/marketAccessRestrictions'
path: '/marketAccessRestrictions'
}
]);
......@@ -242,7 +241,7 @@ const chart1Data = ref({
});
const strengthBtn = ref("all");
function handleStrengthBtn() {}
function handleStrengthBtn() { }
//打压遏制强度变化时间选择器
const strengthSelect = ref("近一年");
const strengthTimeList = ref([
......@@ -296,9 +295,9 @@ const setChart = (option, chartId) => {
// 点击打压遏制手段分布 跳转到各个页面
const handleClickItem = (item) => {
router.push({
path: item.path
})
router.push({
path: item.path
})
}
onMounted(() => {
......@@ -314,6 +313,7 @@ onMounted(() => {
<style lang="scss" scoped>
.cup-box {
overflow-x: auto;
.cup-item-box {
width: 240px;
text-align: center;
......@@ -347,8 +347,9 @@ onMounted(() => {
}
.thematic-box {
// margin: 0 auto;
// width: 1600px;
// margin: 0 auto;
// width: 1600px;
height: 1500px;
.divide {
......@@ -363,8 +364,15 @@ onMounted(() => {
font-size: 32px;
font-weight: 700;
line-height: 42px;
margin: 40px;
margin: 0 270px;
margin-top: 100px;
text-align: center;
// display: inline-block;
/* 让边框只撑满文字宽度 */
padding-bottom: 4px;
/* 文字与边框间距 */
border-bottom: 4px solid;
border-image: linear-gradient(to right, #dc2626 0% 50%, #2563eb 50% 100%) 1;
}
.title-img {
......
src/views/overView/component/strengthComparison.vue
浏览文件 @ 836577e5
......@@ -6,19 +6,26 @@
<div style="margin-top: 20px;display: flex;">
<div class="resource-content" style="width:100%">
<el-radio-group v-model="strengthBtn" size="small" @change="handlestrengthBtn" style="margin-left: 15%;">
<el-radio-button value="potential" border>竞争潜力
</el-radio-button>
<el-radio-button value="potency" border>竞争效力</el-radio-button>
<el-radio-button value="strength" border>竞争实力
</el-radio-button>
</el-radio-group>
<div style="display: flex;height: 350px;">
<div style="width: 50%;height: 100%;" id="char7">
<div style="display: flex;height: 500px;">
<div style="width: 50%;height: 500px">
<div style="padding: 20px;width: 100%;text-align: center;">
<el-radio-group v-model="strengthBtn" size="small" @change="handlestrengthBtn">
<el-radio-button value="potential" border>竞争潜力
</el-radio-button>
<el-radio-button value="potency" border>竞争效力</el-radio-button>
<el-radio-button value="strength" border>竞争实力
</el-radio-button>
</el-radio-group>
</div>
<div style="width: 100%;height: 450px;" id="char7">
</div>
</div>
<div style="width: 50%;height: 100%;text-align: center;padding:0 15px ;position: relative;">
<div style="width: 50%;height: 550px;text-align: center;padding:0 15px ;position: relative;">
<div class="title-box">
<div style="display: flex;width: 100%;">
<div style="display: flex;width: 100%">
<div class="unite">
<img class="unite-icon" src="@/assets/images/icon/united_USA.png" alt="" />
<div class="unite-title">
......@@ -41,7 +48,7 @@
<el-progress :percentage="data[0].value[0]" :stroke-width="20" class="left-progress"
:show-text="false" />
<span class="inner-text" style="font-size: 24px;line-height: 40px;top: 20px;">{{ data[0].value[0]
}}%</span>
}}%</span>
</div>
<!-- 右侧进度条 -->
......@@ -49,7 +56,7 @@
<el-progress :percentage="data[0].value[1]" :stroke-width="20" class="right-progress"
:show-text="false" />
<span class="inner-text" style="font-size: 24px;line-height: 40px;top: 20px;">{{ data[0].value[0]
}}%</span>
}}%</span>
</div>
</div>
</div>
......@@ -138,15 +145,31 @@ const data = ref([
}
])
onMounted(() => {
let char7 = radarChart3()
setChart(char7, "char7");
// let char7 = radarChart3()
// 2. 传入容器，生成配置
// 1. 初始化容器
const dom = document.getElementById('char7');
const myChart = echarts.init(dom);
// 2. 传入容器，生成配置
const option = radarChart3(
['研究人员总数', '每万人研究人员数', '每万研究人员研发经费投入额',
'每万人研发经费投入额', '研发经费占GDP的比重', '研发经费投入总额'],
[4200, 3000, 20000, 35000, 50000, 18000],
false,
dom
);
myChart.setOption(option);
// setChart(option, "char7");
});
</script>
<style lang="scss" scoped>
.divide1 {
margin-top: 64px;
margin-top: 30px;
margin-bottom: 36px;
}
......@@ -231,6 +254,7 @@ onMounted(() => {
.title-box {
height: 100px;
width: 100%;
margin-top: 20px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 4px;
......
src/views/overView/index.vue
浏览文件 @ 836577e5
......@@ -31,7 +31,8 @@
{{ organizationNews[organizationNewsShow].title }}
</div>
<div class="item-card-content-title-small">
{{ organizationNews[organizationNewsShow].time + ' ' + organizationNews[organizationNewsShow].adress }}
{{ organizationNews[organizationNewsShow].time + ' ' +
organizationNews[organizationNewsShow].adress }}
</div>
</div>
<img class="item-card-content-title-image" :src="organizationNews[organizationNewsShow].image" alt="">
......@@ -41,8 +42,8 @@
{{ organizationNews[organizationNewsShow].content }}
</div>
<div style="display: flex">
<div class="item-card-content-tag" v-for="tag,index in organizationNews[organizationNewsShow].tag" :key="index"
:style="{ color: tag.textColor, background: tag.color, borderColor: tag.color }">
<div class="item-card-content-tag" v-for="tag, index in organizationNews[organizationNewsShow].tag"
:key="index" :style="{ color: tag.textColor, background: tag.color, borderColor: tag.color }">
{{ tag.text }}
</div>
</div>
......@@ -54,7 +55,7 @@
</div>
<div class="item-card-right ">
<div class="item-list">
<div v-for="organizationItem,index in organizationList" :key="index" style="height: 40px">
<div v-for="organizationItem, index in organizationList" :key="index" style="height: 40px">
<div style="display: flex;margin: 10px">
<div class="item-list-punblier">
{{ organizationItem.punblier }}
......@@ -112,7 +113,7 @@
</div>
<div class="item-header-divider"></div>
<div class="news-box">
<div v-for="item,index in newsList" :key="index" class="news-box-item">
<div v-for="item, index in newsList" :key="index" class="news-box-item">
<div style=" display: flex;">
<img :src="item.image" />
<div style="padding: 0 10px ;">
......@@ -136,7 +137,7 @@
</div>
<div class="item-header-divider"></div>
<div class="character-box">
<div class="character-item" v-for="item,index in characterDynamics" :key="index">
<div class="character-item" v-for="item, index in characterDynamics" :key="index">
<img :src="item.image" class="character-image" />
<div class="talk-box">
<div style="display: flex;">
......@@ -368,7 +369,7 @@ function changeOrganizationNews(type) {
: (organizationNewsShow.value = organizationNewsShow.value + 1);
}
}
onMounted(() => {});
onMounted(() => { });
</script>
<style lang="scss" scoped>
......@@ -427,7 +428,7 @@ onMounted(() => {});
/* 子级：仅上色居中，方便观察 */
.item {
height: 450px;
height: 500px;
justify-content: center;
box-sizing: border-box;
border: 1px solid var(--主色/白色主色, rgba(255, 255, 255, 1));
......
src/views/overView/js/radarChart3.js
浏览文件 @ 836577e5
import * as echarts from "echarts";
import * as echarts from 'echarts';
const getBarChart = (nameList, valueList, isPer) => {
/**
* 计算雷达图最外圈半径（px）
* @param {HTMLDivElement} dom 图表容器
* @param {number} radarRadius 配置项里 radar.radius，默认 75%
*/
function getOuterRadius(dom, radarRadius = 75) {
// 容器短边的一半 * 百分比
const minSide = Math.min(dom.offsetWidth, dom.offsetHeight);
return (minSide / 2) * (radarRadius / 100);
}
/**
* 生成“文字被环穿过”的雷达图配置
* @param {string[]} nameList 指标名称（与 indicator 顺序保持一致）
* @param {number[]} valueList 数据值
* @param {boolean} isPer 是否百分比（示例里未用到，可留扩展）
* @param {HTMLDivElement} dom 图表容器（用于计算半径，必须传）
*/
const getBarChart = (nameList, valueList, isPer, dom) => {
// 1. 基础雷达图配置
const option = {
title: { text: '' },
legend: {
......@@ -13,7 +32,8 @@ const getBarChart = (nameList, valueList, isPer) => {
data: ['法案', '行政令', '科技智库', '出口管制', '投融资限制', '市场准入']
},
radar: {
shape: 'circle', // ① 参考线变弧线
shape: 'circle',
radius: '75%', // 雷达图本身占容器 75%
indicator: [
{ name: '研究人员总数', max: 6500 },
{ name: '每万人研究人员数', max: 16000 },
......@@ -23,25 +43,26 @@ const getBarChart = (nameList, valueList, isPer) => {
{ name: '研发经费投入总额', max: 25000 }
],
axisName: {
// ② 文字在线上方 + 自动换两行
// 1. 富文本颜色
color: '#3B414B',
fontSize: 14,
fontWeight: 600,
// 2. 白色矩形背景
backgroundColor: '#fff', // 背景色
borderRadius: 4, // 圆角
padding: [4, 8], // 上下 4px，左右 8px
// 3. 自动换两行（你原来的逻辑）
formatter: function (txt) {
// 按字数 10 左右自动断行
const len = txt.length;
if (len <= 5) return txt;
const br = Math.ceil(len / 2);
return txt.substring(0, br) + '\n' + txt.substring(br);
},
rich: {
a: { lineHeight: 20 } // 行高
},
color: 'rgba(59, 65, 75, 1)',
fontSize: 14,
fontWeight: 600
}
},
splitLine: {
lineStyle: {
color: 'rgba(200,200,200,.6)'
}
lineStyle: { color: 'rgba(200,200,200,.6)' }
},
splitArea: { show: false },
axisLine: { show: false }
......@@ -57,18 +78,36 @@ const getBarChart = (nameList, valueList, isPer) => {
{ value: [4000, 14000, 18000, 21000, 32000, 10000], name: '投融资限制', areaStyle: { color: 'rgba(120, 100, 200, 0.2)' } },
{ value: [4000, 14000, 18000, 21000, 32000, 10000], name: '市场准入', areaStyle: { color: 'rgba(255, 100, 150, 0.2)' } }
]
}],
// ③ 最外层弧线加粗：用 graphic 画一个圆环覆盖在最外层
graphic: [{
type: 'circle',
shape: { cx: 300, cy: 300, r: '65%' },
style: { stroke: '#333', lineWidth: 30, fill: 'transparent' },
z: 1000
}]
};
return option
}
// 2. 计算文字所在圆半径（单位 px）
const textRadius = getRadarTextRadius(dom, 75) + 30; // 75 与 radar.radius 保持一致
export default getBarChart
\ No newline at end of file
// 3. 用“单圈描边”实现「粗线 + 文字在线上」
option.graphic = [{
type: 'circle',
shape: {
cx: dom.offsetWidth / 2,
cy: dom.offsetHeight / 2,
r: textRadius
},
style: {
stroke: '#EBECEE', // 线的颜色
lineWidth: 6, // 线的粗细（想要再粗就继续加大）
fill: 'transparent'
},
// z: 1000 // 保证压在最上层
}];
return option;
};
// 1. 先准备一个“半径换算”小工具
function getRadarTextRadius(dom, radiusPercent = 75) {
// 雷达图中心永远在容器中心
const minSide = Math.min(dom.offsetWidth, dom.offsetHeight);
return (minSide / 2) * (radiusPercent / 100);
}
export default getBarChart;
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论