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） * 计算雷达图最外圈半径（px）
...@@ -6,9 +6,9 @@ import * as echarts from 'echarts'; ...@@ -6,9 +6,9 @@ import * as echarts from 'echarts';
* @param {number} radarRadius 配置项里 radar.radius，默认 75% * @param {number} radarRadius 配置项里 radar.radius，默认 75%
*/ */
function getOuterRadius(dom, radarRadius = 75) { function getOuterRadius(dom, radarRadius = 75) {
// 容器短边的一半 * 百分比 // 容器短边的一半 * 百分比
const minSide = Math.min(dom.offsetWidth, dom.offsetHeight); const minSide = Math.min(dom.offsetWidth, dom.offsetHeight);
return (minSide / 2) * (radarRadius / 100); return (minSide / 2) * (radarRadius / 100);
} }
/** /**
...@@ -19,95 +19,121 @@ function getOuterRadius(dom, radarRadius = 75) { ...@@ -19,95 +19,121 @@ function getOuterRadius(dom, radarRadius = 75) {
* @param {HTMLDivElement} dom 图表容器（用于计算半径，必须传） * @param {HTMLDivElement} dom 图表容器（用于计算半径，必须传）
*/ */
const getBarChart = (nameList, valueList, isPer, dom) => { const getBarChart = (nameList, valueList, isPer, dom) => {
// 1. 基础雷达图配置 // 1. 基础雷达图配置
const option = { const option = {
title: { text: '' }, title: { text: "" },
legend: { legend: {
show: false, show: false,
icon: 'circle', icon: "circle",
orient: 'vertical', orient: "vertical",
right: 0, right: 0,
top: 'center', top: "center",
align: 'left', align: "left",
data: ['法案', '行政令', '科技智库', '出口管制', '投融资限制', '市场准入'] data: ["法案", "行政令", "科技智库", "出口管制", "投融资限制", "市场准入"]
}, },
radar: { radar: {
shape: 'circle', shape: "circle",
radius: '75%', // 雷达图本身占容器 75% radius: "75%", // 雷达图本身占容器 75%
indicator: [ indicator: [
{ name: '研究人员总数', max: 6500 }, { name: "研究人员总数", max: 6500 },
{ name: '每万人研究人员数', max: 16000 }, { name: "每万人研究人员数", max: 16000 },
{ name: '每万研究人员研发经费投入额', max: 30000 }, { name: "每万研究人员研发经费投入额", max: 30000 },
{ name: '每万人研发经费投入额', max: 38000 }, { name: "每万人研发经费投入额", max: 38000 },
{ name: '研发经费占GDP的比重', max: 52000 }, { name: "研发经费占GDP的比重", max: 52000 },
{ name: '研发经费投入总额', max: 25000 } { name: "研发经费投入总额", max: 25000 }
], ],
axisName: { axisName: {
// 1. 富文本颜色 // 1. 富文本颜色
color: '#3B414B', color: "#3B414B",
fontSize: 14, fontSize: 14,
fontWeight: 600, fontWeight: 600,
// 2. 白色矩形背景 // 2. 白色矩形背景
backgroundColor: '#fff', // 背景色 backgroundColor: "#fff", // 背景色
borderRadius: 4, // 圆角 borderRadius: 4, // 圆角
padding: [4, 8], // 上下 4px，左右 8px padding: [4, 8], // 上下 4px，左右 8px
// 3. 自动换两行（你原来的逻辑） // 3. 自动换两行（你原来的逻辑）
formatter: function (txt) { formatter: function (txt) {
const len = txt.length; const len = txt.length;
if (len <= 5) return txt; if (len <= 5) return txt;
const br = Math.ceil(len / 2); const br = Math.ceil(len / 2);
return txt.substring(0, br) + '\n' + txt.substring(br); return txt.substring(0, br) + "\n" + txt.substring(br);
} }
}, },
splitLine: { splitLine: {
lineStyle: { color: 'rgba(200,200,200,.6)' } lineStyle: { color: "rgba(200,200,200,.6)" }
}, },
splitArea: { show: false }, splitArea: { show: false },
axisLine: { show: false } axisLine: { show: false }
}, },
series: [{ series: [
name: 'Budget vs spending', {
type: 'radar', name: "Budget vs spending",
data: [ type: "radar",
{ value: [4200, 3000, 20000, 35000, 50000, 18000], name: '法案', areaStyle: { color: 'rgba(10, 87, 166, 0.2)' } }, data: [
{ 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: [4200, 3000, 20000, 35000, 50000, 18000],
{ value: [4000, 14000, 18000, 21000, 32000, 10000], name: '出口管制', areaStyle: { color: 'rgba(22, 180, 120, 0.2)' } }, name: "法案",
{ value: [4000, 14000, 18000, 21000, 32000, 10000], name: '投融资限制', areaStyle: { color: 'rgba(120, 100, 200, 0.2)' } }, areaStyle: { color: "rgba(10, 87, 166, 0.2)" }
{ value: [4000, 14000, 18000, 21000, 32000, 10000], name: '市场准入', areaStyle: { color: 'rgba(255, 100, 150, 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） // 3. 用“单圈描边”实现「粗线 + 文字在线上」
const textRadius = getRadarTextRadius(dom, 75) + 30; // 75 与 radar.radius 保持一致 option.graphic = [
{
// 3. 用“单圈描边”实现「粗线 + 文字在线上」 type: "circle",
option.graphic = [{ shape: {
type: 'circle', cx: dom.offsetWidth / 2,
shape: { cy: dom.offsetHeight / 2,
cx: dom.offsetWidth / 2, r: textRadius
cy: dom.offsetHeight / 2, },
r: textRadius style: {
}, stroke: "#EBECEE", // 线的颜色
style: { lineWidth: 6, // 线的粗细（想要再粗就继续加大）
stroke: '#EBECEE', // 线的颜色 fill: "transparent"
lineWidth: 6, // 线的粗细（想要再粗就继续加大） }
fill: 'transparent' // z: 1000 // 保证压在最上层
}, }
// z: 1000 // 保证压在最上层 ];
}]; return option;
return option;
}; };
// 1. 先准备一个“半径换算”小工具 // 1. 先准备一个“半径换算”小工具
function getRadarTextRadius(dom, radiusPercent = 75) { function getRadarTextRadius(dom, radiusPercent = 75) {
// 雷达图中心永远在容器中心 // 雷达图中心永远在容器中心
const minSide = Math.min(dom.offsetWidth, dom.offsetHeight); const minSide = Math.min(dom.offsetWidth, dom.offsetHeight);
return (minSide / 2) * (radiusPercent / 100); return (minSide / 2) * (radiusPercent / 100);
} }
export default getBarChart; export default getBarChart;
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论