Skip to content

R
risk-monitor
提交 aa3d6b16 authored 作者: yanpeng's avatar yanpeng
浏览文件
操作

format

上级 18829f75
隐藏空白字符变更
内嵌 并排
正在显示 包含 113 行增加 和 88 行删除
src/views/overView/js/radarChart3.js
浏览文件 @ aa3d6b16
import * as echarts from 'echarts';
import * as echarts from "echarts";
/**
* 计算雷达图最外圈半径（px）
......@@ -6,9 +6,9 @@ import * as echarts from 'echarts';
* @param {number} radarRadius 配置项里 radar.radius，默认 75%
*/
function getOuterRadius(dom, radarRadius = 75) {
// 容器短边的一半 * 百分比
const minSide = Math.min(dom.offsetWidth, dom.offsetHeight);
return (minSide / 2) * (radarRadius / 100);
// 容器短边的一半 * 百分比
const minSide = Math.min(dom.offsetWidth, dom.offsetHeight);
return (minSide / 2) * (radarRadius / 100);
}
/**
......@@ -19,95 +19,121 @@ function getOuterRadius(dom, radarRadius = 75) {
* @param {HTMLDivElement} dom 图表容器（用于计算半径，必须传）
*/
const getBarChart = (nameList, valueList, isPer, dom) => {
// 1. 基础雷达图配置
const option = {
title: { text: '' },
legend: {
show: false,
icon: 'circle',
orient: 'vertical',
right: 0,
top: 'center',
align: 'left',
data: ['法案', '行政令', '科技智库', '出口管制', '投融资限制', '市场准入']
},
radar: {
shape: 'circle',
radius: '75%', // 雷达图本身占容器 75%
indicator: [
{ name: '研究人员总数', max: 6500 },
{ name: '每万人研究人员数', max: 16000 },
{ name: '每万研究人员研发经费投入额', max: 30000 },
{ name: '每万人研发经费投入额', max: 38000 },
{ name: '研发经费占GDP的比重', max: 52000 },
{ name: '研发经费投入总额', max: 25000 }
],
axisName: {
// 1. 富文本颜色
color: '#3B414B',
fontSize: 14,
fontWeight: 600,
// 1. 基础雷达图配置
const option = {
title: { text: "" },
legend: {
show: false,
icon: "circle",
orient: "vertical",
right: 0,
top: "center",
align: "left",
data: ["法案", "行政令", "科技智库", "出口管制", "投融资限制", "市场准入"]
},
radar: {
shape: "circle",
radius: "75%", // 雷达图本身占容器 75%
indicator: [
{ name: "研究人员总数", max: 6500 },
{ name: "每万人研究人员数", max: 16000 },
{ name: "每万研究人员研发经费投入额", max: 30000 },
{ name: "每万人研发经费投入额", max: 38000 },
{ name: "研发经费占GDP的比重", max: 52000 },
{ name: "研发经费投入总额", max: 25000 }
],
axisName: {
// 1. 富文本颜色
color: "#3B414B",
fontSize: 14,
fontWeight: 600,
// 2. 白色矩形背景
backgroundColor: '#fff', // 背景色
borderRadius: 4, // 圆角
padding: [4, 8], // 上下 4px，左右 8px
// 2. 白色矩形背景
backgroundColor: "#fff", // 背景色
borderRadius: 4, // 圆角
padding: [4, 8], // 上下 4px，左右 8px
// 3. 自动换两行（你原来的逻辑）
formatter: function (txt) {
const len = txt.length;
if (len <= 5) return txt;
const br = Math.ceil(len / 2);
return txt.substring(0, br) + '\n' + txt.substring(br);
}
},
splitLine: {
lineStyle: { color: 'rgba(200,200,200,.6)' }
},
splitArea: { show: false },
axisLine: { show: false }
},
series: [{
name: 'Budget vs spending',
type: 'radar',
data: [
{ value: [4200, 3000, 20000, 35000, 50000, 18000], name: '法案', areaStyle: { color: 'rgba(10, 87, 166, 0.2)' } },
{ value: [5000, 14000, 28000, 26000, 42000, 21000], name: '行政令', areaStyle: { color: 'rgba(206, 79, 81, 0.2)' } },
{ value: [4000, 14000, 18000, 21000, 32000, 10000], name: '科技智库', areaStyle: { color: 'rgba(250, 140, 22, 0.2)' } },
{ value: [4000, 14000, 18000, 21000, 32000, 10000], name: '出口管制', areaStyle: { color: 'rgba(22, 180, 120, 0.2)' } },
{ 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)' } }
]
}]
};
// 3. 自动换两行（你原来的逻辑）
formatter: function (txt) {
const len = txt.length;
if (len <= 5) return txt;
const br = Math.ceil(len / 2);
return txt.substring(0, br) + "\n" + txt.substring(br);
}
},
splitLine: {
lineStyle: { color: "rgba(200,200,200,.6)" }
},
splitArea: { show: false },
axisLine: { show: false }
},
series: [
{
name: "Budget vs spending",
type: "radar",
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: "法案",
areaStyle: { color: "rgba(10, 87, 166, 0.2)" }
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: "行政令",
areaStyle: { color: "rgba(206, 79, 81, 0.2)" }
},
{
value: [4000, 14000, 18000, 21000, 32000, 10000],
name: "科技智库",
areaStyle: { color: "rgba(250, 140, 22, 0.2)" }
},
{
value: [4000, 14000, 18000, 21000, 32000, 10000],
name: "出口管制",
areaStyle: { color: "rgba(22, 180, 120, 0.2)" }
},
{
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)" }
}
]
}
]
};
// 2. 计算文字所在圆半径（单位 px）
const textRadius = getRadarTextRadius(dom, 75) + 30; // 75 与 radar.radius 保持一致
// 2. 计算文字所在圆半径（单位 px）
const textRadius = getRadarTextRadius(dom, 75) + 30; // 75 与 radar.radius 保持一致
// 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;
// 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);
// 雷达图中心永远在容器中心
const minSide = Math.min(dom.offsetWidth, dom.offsetHeight);
return (minSide / 2) * (radiusPercent / 100);
}
export default getBarChart;
\ No newline at end of file
export default getBarChart;
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论