Skip to content

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

研发投入

上级 7f64a15a
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 501 行增加 和 3 行删除
src/views/companyPages/component/Capability.vue
浏览文件 @ d28bc11c
<template>
<div class="box-content">
<div class="tab-box">
<div v-for="(tab, index) in tabList" :class="activeTab === tab ? 'tab-active' : 'tab'" @click="activeTab = tab">
{{ tab }}
<div class="arrow-active">
</div>
</div>
</div>
<!--/*头部总览 */-->
<div class="total">
<div v-for="(item) in totalData" class="total-box">
<div class="line">
</div>
<div class="total-label">
{{ item.label }}
</div>
<div class="total-content">
<div class="total-value">
{{ item.value }}
</div>
<div class="total-unit">
{{ item.unit }}
</div>
</div>
</div>
</div>
<!--/*图表 */-->
<div class="chart">
<div class="chart-content">
<div class="section-header" style=" margin-top: 24px;">
<div style="display: flex;">
<div class="section-icon"></div>
<h3 class="section-title">年度研发投入对比</h3>
</div>
<div class="action-icons">
<img src="@/assets/icons/download.png" alt="下载" class="action-icon">
<img src="@/assets/icons/shoucang.png" alt="收藏" class="action-icon">
</div>
</div>
<div id="chart1" class="chart-box">
</div>
<div class="chart-text">
<img src="@/assets/icons/model.png" style="width: 19px;height: 20px;">
<div>
近五年来，华为的研发投入在绝对金额和投入强度上均持续攀升。尤其是在收入因外部制裁而经历波动时，研发投入依然保持强劲增长，使其投入强度达到了历史高位。
</div>
<div class="arrow-2">
→
</div>
</div>
</div>
<div class="chart-content">
<div class="section-header" style=" margin-top: 24px;">
<div style="display: flex;">
<div class="section-icon"></div>
<h3 class="section-title">研发投入增长对比</h3>
</div>
<div class="action-icons">
<img src="@/assets/icons/download.png" alt="下载" class="action-icon">
<img src="@/assets/icons/shoucang.png" alt="收藏" class="action-icon">
</div>
</div>
<div id="chart2" class="chart-box">
</div>
<div class="chart-text">
<img src="@/assets/icons/model.png" style="width: 19px;height: 20px;">
<div>
华为在巨大的外部压力下，研发投入不仅在绝对金额上持续增长，其占收入的比重更是大幅提升，特别是2021年后形成的“剪刀差”，体现了公司最高优先级的战略抉择。 </div>
<div class="arrow-2">
→
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import getBarChart from "../js/barChart.js";
import * as echarts from "echarts";
import getLineChart from "../js/lineChart.js";
const tabList = ref(['研发投入', '研究人员', '专利情况'])
const activeTab = ref('研发投入')
const totalData = ref([
{
"label": "累计研发投入",
"value": 9854,
"unit": "亿元"
},
{
"label": "年度研发投入",
"value": 2153.9,
"unit": "亿元"
},
{
"label": "研发强度",
"value": 22.9,
"unit": "%"
},
{
"label": "研发投入排名",
"value": "Top",
"unit": ""
}
])
//年度研发投入对比
const chart1Data = ref({
name: ['2020', '2021', '2022', '2023', '2024', '2025'],
value: [50, 100, 150, 200, 250, 300, 350, 400]
});
//研发投入增长对比
const chart2Data = {
dataX: ["2025-01", "2025-02", "2025-03", "2025-04", "2025-05", "2025-06", "2025-07", "2025-08"],
dataY: [1.2, 1.5, 1.4, 1.8, 1.3, 1.5, 1.6, 1.4]
};
// 绘制echarts图表
const setChart = (option, chartId) => {
let chartDom = document.getElementById(chartId);
console.log(chartDom, "chartDomchartDomchartDom");
chartDom.removeAttribute("_echarts_instance_");
let chart = echarts.init(chartDom);
chart.setOption(option);
return chart;
};
onMounted(() => {
let char1 = getBarChart(chart1Data.value.name, chart1Data.value.value, true);
setChart(char1, "chart1");
let chart2 = getLineChart(chart2Data.dataX, chart2Data.dataY);
setChart(chart2, "chart2");
// let char2 = radarChart();
// setChart(char2, "char2");
});
</script>
<style scoped>
.box-content {
width: 100%;
height: calc(100vh - 220px);
overflow: auto;
}
.tab-box {
/* 左侧导航 */
width: 112px;
height: 128px;
position: absolute;
left: 0;
margin: 20px;
/* 自动布局 */
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 16;
.tab {
color: rgba(59, 65, 75, 1);
height: 48px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
box-sizing: border-box;
border-bottom: 0px solid rgba(5, 95, 194, 1);
margin: 6px 30px 0 0;
}
.tab-active {
/* 容器 7 */
width: 104px;
height: 32px;
display: flex;
align-items: center;
box-sizing: border-box;
border-bottom: 2px solid rgba(5, 95, 194, 1);
margin: 6px 30px 0 0;
border-radius: 16px;
background: rgba(5, 95, 194, 1);
color: rgba(255, 255, 255, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
padding: 4px 12px;
}
.arrow-active {
width: 0;
height: 0;
border-style: solid;
border-width: 4px 0 4px 6px;
margin-left: 5px;
/* 上 右 下 左 */
border-color: transparent transparent transparent #ffffff;
/* 只给左边上色 */
/* background: rgba(255, 255, 255, 1); */
}
}
/*头部总览 */
.total {
height: 80px;
display: flex;
gap: 16px;
}
.total-box {
border-radius: 4px;
background: rgba(255, 255, 255, 1);
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
.line {
/* 矩形 214 */
width: 4px;
height: 49px;
background: rgba(5, 95, 194, 1);
}
.total-label {
color: rgba(59, 65, 75, 1);
margin: 0px 30px;
font-size: 16px;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
.total-content {
display: flex;
margin-right: 35px;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
letter-spacing: 0px;
text-align: right;
.total-value {
font-size: 24px;
font-weight: 700;
line-height: 24px;
}
.total-unit {
font-size: 16px;
font-weight: 500;
line-height: 16px;
margin-top: 8px;
}
}
}
.chart {
margin-top: 16px;
height: calc(100vh - 320px);
display: flex;
gap: 16px;
.chart-content {
border-radius: 4px;
background: rgba(255, 255, 255, 1);
flex: 1;
justify-content: space-between;
.section-header {
display: flex;
width: 100%;
justify-content: space-between;
}
.section-icon {
width: 7px;
height: 18px;
border-radius: 0 4px 4px 0;
background: rgba(5, 95, 194, 1);
margin-right: 17px;
}
.section-title {
font-size: 18px;
color: #1d2129;
margin: 0;
color: rgba(5, 95, 194, 1);
font-family: Microsoft YaHei;
font-weight: 700;
line-height: 24px;
letter-spacing: 1px;
text-align: left;
}
}
.action-icons {
display: flex;
margin-left: auto;
}
.action-icon {
/* 收藏按钮 */
width: 28px;
height: 28px;
cursor: pointer;
margin-right: 12px;
}
.chart-box {
width: 100%;
height: calc(100% - 130px);
}
.chart-text {
/* 大模型对话结果 */
height: 52px;
margin: 12px 20px;
/* 自动布局 */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10;
padding: 0px 12px 0px 12px;
box-sizing: border-box;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 4px;
background: rgba(246, 251, 255, 1);
color: rgba(5, 95, 194, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: justify;
gap: 13px;
}
.arrow-2 {
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 24px;
background: rgba(231, 243, 255, 1);
}
}
</style>
\ No newline at end of file
src/views/companyPages/js/barChart.js 0 → 100644
浏览文件 @ d28bc11c
import * as echarts from "echarts";
const getColumnChart = (nameList, valueList, isPer) => {
const colorList = ['rgb(46, 165, 255)']
return {
tooltip: {},
grid: { top: '10%', right: '3%', bottom: '15%', left: '3%', containLabel: true },
color: colorList,
xAxis: {
type: 'category',
data: nameList,
axisLine: { show: false },
axisTick: { show: false },
axisLabel: {
show: true,
color: '#666',
fontSize: 14
}
},
yAxis: {
type: 'value',
axisLine: { show: false },
axisTick: { show: false },
axisLabel: { show: true, color: '#666' }, // ② Y 轴文字
splitLine: {
show: true, lineStyle: {
type: "dashed",
color: "#E7F3FF"
}
}
},
series: [{
type: 'bar',
data: valueList.map((v, i) => ({
value: v,
label: { show: false, position: 'top', color: 'rgb(46, 165, 255)' }
})),
barWidth: 16,
itemStyle: {
borderRadius: [8, 8, 0, 0],
color: params => {
const colors = ['rgb(46, 165, 255)', 'rgba(255,255,255,0)']
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: colors[0] },
{ offset: 1, color: colors[1] }
])
}
},
label: {
show: true,
position: 'top',
formatter: v => (isPer ? v.value + '%' : v.value)
}
}]
}
}
export default getColumnChart
\ No newline at end of file
src/views/companyPages/js/lineChart.js 0 → 100644
浏览文件 @ d28bc11c
import * as echarts from 'echarts'
const getLineChart = (dataX, dataY) => {
return {
grid: {
left: '2%',
top: '8%',
right: '2%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
splitLine: {
show: false
},
axisLine: {
show: false
},
data: dataX
},
yAxis: {
type: 'value',
splitLine: {
show: true, lineStyle: {
type: "dashed",
color: "#E7F3FF"
}
},
axisLine: {
show: false
},
},
color: ['rgb(255, 172, 77)'],
series: [
{
data: dataY,
type: 'line',
emphasis: {
focus: 'series'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 172, 77, 0.5)' // 起始颜色：深色
}, {
offset: 1,
color: 'rgba(255, 172, 77,0)' // 结束颜色：浅色且透明度降低
}])
},
}
]
}
}
export default getLineChart;
\ No newline at end of file
src/views/overView/js/barChart.js
浏览文件 @ d28bc11c
...@@ -22,9 +22,11 @@ const getColumnChart = (nameList, valueList, isPer) => { ...@@ -22,9 +22,11 @@ const getColumnChart = (nameList, valueList, isPer) => {
axisLine: { show: false }, axisLine: { show: false },
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { show: true, color: '#666' }, // ② Y 轴文字 axisLabel: { show: true, color: '#666' }, // ② Y 轴文字
splitLine: { // ③ 横向参考线 splitLine: {
show: true, show: true, lineStyle: {
lineStyle: { color: '#ebebeb', width: 1 } type: "dashed",
color: "#E7F3FF"
}
} }
}, },
series: [{ series: [{
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论