Skip to content

R
risk-monitor
提交 51f07374 authored 作者: coderBryanFu's avatar coderBryanFu
浏览文件
操作

update

上级 1d682771
隐藏空白字符变更
内嵌 并排
正在显示 包含 2249 行增加 和 39 行删除
src/App.vue
浏览文件 @ 51f07374
......@@ -166,7 +166,7 @@ body {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
position: relative;
box-sizing: border-box;
height: 64px;
height: 96px;
}
.main-container {
......@@ -181,7 +181,7 @@ body {
align-items: center;
gap: 12px;
position: absolute;
left: 13px;
left: 160px;
.brand-icon {
width: 48px;
height: 48px;
......@@ -204,7 +204,7 @@ body {
height: 37px;
color: rgba(10, 18, 30, 1);
font-family: Microsoft YaHei;
font-size: 28px;
font-size: 32px;
font-weight: 700;
line-height: 37px;
}
......@@ -341,14 +341,14 @@ body {
.el-header {
padding: 0;
height: 64px;
height: 96px;
position: relative;
z-index: 1;
}
.el-main {
padding: 0;
height: calc(100vh - 64px);
height: calc(100vh - 96px);
overflow: hidden;
overflow-y: auto;
background-color: rgba(246, 251, 255, 1);
......
src/components/Container/index.vue
浏览文件 @ 51f07374
......@@ -133,7 +133,8 @@ const headerTitleClasses = computed(() => [
.header-icon {
width: 20px;
height: 20px;
margin-right: 14px;
margin-left: 5px;
margin-right: 19px;
}
.blue-title-block {
......@@ -152,6 +153,7 @@ const headerTitleClasses = computed(() => [
color: $base-color;
line-height: 48px;
padding: 0 12px;
font-size: 20px;
}
.header-title-primary {
......
src/router/modules/technologyFigures.js 0 → 100644
浏览文件 @ 51f07374
//科技人物观点
import TechnologyFigures from "@/views/technologyFigures/index.vue";
const technologyFiguresRoutes = [
//创新主体
{
path: "/technologyFigures",
name: "TechnologyFigures",
component: TechnologyFigures,
meta: {
title: "主要创新主体"
}
}
]
export default technologyFiguresRoutes
\ No newline at end of file
src/styles/scrollbar.css
浏览文件 @ 51f07374
/* 全局滚动条样式 */
* {
scrollbar-width: thin;
scrollbar-color: #c1c1c1 #f1f1f1;
}
/* Webkit 浏览器 */
::-webkit-scrollbar {
width: 10px;
height: 10px;
width: 4px;
height: 8px;
}
::-webkit-scrollbar-track {
......@@ -16,17 +12,17 @@
}
::-webkit-scrollbar-thumb {
background: #6c757d;
border-radius: 6px;
border: 2px solid #f8f9fa;
background: #c5c7c9;
border-radius: 2px;
/* border: 1px solid #f8f9fa; */
}
::-webkit-scrollbar-thumb:hover {
background: #495057;
background: #505357;
}
::-webkit-scrollbar-thumb:active {
background: #343a40;
background: #505357;
}
::-webkit-scrollbar-corner {
......@@ -40,16 +36,16 @@
/* Element UI 组件滚动条优化 */
.el-table__body-wrapper::-webkit-scrollbar {
width: 8px;
width: 4px;
height: 8px;
}
.el-table__body-wrapper::-webkit-scrollbar-thumb {
background: #909399;
border-radius: 4px;
background: #505357;
border-radius: 2px;
}
.el-select-dropdown .el-scrollbar__wrap {
scrollbar-width: thin;
scrollbar-color: #c1c1c1 #f1f1f1;
}
\ No newline at end of file
}
\ No newline at end of file
src/views/exportControl/components/title.vue
浏览文件 @ 51f07374
......@@ -41,7 +41,9 @@ defineProps({
}
.title-text {
font-size: 20px;
color: rgba(10, 18, 30, 1);
font-size: 32px;
font-family: Microsoft YaHei;
font-weight: bold;
margin-left: 20px;
white-space: nowrap;
......
src/views/overView/index.vue
浏览文件 @ 51f07374
......@@ -2,7 +2,22 @@
<template>
<div class="content-main">
<!-- 面包屑 -->
<div class="content-title"><span>国家科技安全</span>> <span>中美博弈概览 </span></div>
<div class="content-title">
<span>国家科技安全</span>> <span>中美博弈概览 </span>
<div class="header-search-box">
<div class="header-search-left">
<div class="input-box">
<el-input v-model="searchText" style="width: 324px" />
</div>
<div class="icon">
<img src="./assets/images/search-icon.png" alt="" />
</div>
</div>
<div class="header-search-right" @click="handleToSearch">
<div class="header-img-box"><img src="./assets/images/search-btn.png" alt="" /></div>
</div>
</div>
</div>
<!-- 中美博弈最新动态内容-->
<div class="content-box">
<div class="title-text">中美博弈最新动态</div>
......@@ -14,7 +29,7 @@
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/overview-card-header-icon.png" />
<div class="item-header-text">机构动态</div>
<div class="item-header-more">更多 +</div>
<!-- <div class="item-header-more">更多 +</div> -->
</div>
<div class="item-header-divider"></div>
<div class="item-content">
......@@ -127,12 +142,7 @@
<div class="item right">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/news-card-header-icon.png" />
<div
class="item-header-text-1"
style="color: #055fc2"
>
新闻资讯
</div>
<div class="item-header-text-1" style="color: #055fc2">新闻资讯</div>
<div class="item-header-more" style="color: #055fc2; cursor: pointer" @click="handleToMoreNews">
更多 +
</div>
......@@ -158,12 +168,7 @@
<div class="item right">
<div class="item-header">
<img class="item-header-icon" src="@/assets/images/icon/people-card-header-icon.png" />
<div
class="item-header-text-1"
style="color: #055fc2"
>
人物动态
</div>
<div class="item-header-text-1" style="color: #055fc2">人物动态</div>
</div>
<div class="item-header-divider"></div>
<div class="character-box">
......@@ -199,7 +204,14 @@ import Thematicanalysis from "./component/Thematicanalysis.vue";
import ResourceSupport from "./component/ResourceSupport.vue";
import strengthComparison from "./component/strengthComparison.vue";
import router from "@/router";
import { color } from "echarts";
const searchText = ref("");
// 跳转到综合检索页面
const handleToSearch = () => {
const route = router.resolve("/comprehensiveSearch");
window.open(route.href, "_blank");
};
// 查看更多风险信号
const handleToMoreRiskSignal = () => {
......@@ -437,6 +449,52 @@ onMounted(() => {});
background: url("../../assets/images/bg//header-bg.png");
box-sizing: border-box;
padding-left: 160px;
position: relative;
.header-search-box {
position: absolute;
top: 14px;
right: 160px;
display: flex;
gap: 12px;
justify-content: flex-end;
.header-search-left {
width: 360px;
height: 36px;
line-height: 36px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.3);
display: flex;
.input-box {
width: 324px;
}
.icon {
width: 36px;
height: 36px;
img {
width: 100%;
height: 100%;
}
}
}
.header-search-right {
width: 36px;
height: 36px;
line-height: 36px;
// box-sizing: border-box;
border-radius: 4px;
background: rgba(255, 255, 255, 0.3);
cursor: pointer;
.header-img-box {
width: 19px;
height: 24px;
margin: 6px auto;
img {
width: 100%;
height: 100%;
}
}
}
}
}
.content-box {
......@@ -940,4 +998,30 @@ onMounted(() => {});
}
}
}
:deep(.el-input__wrapper) {
box-shadow: none;
background: none;
}
:deep(.el-input__wrapper:hover) {
box-shadow: none !important;
}
:deep(.el-input__wrapper.is-focus) {
box-shadow: none !important;
}
:deep(.el-input__inner::placeholder) {
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
:deep(.el-input__inner) {
color: #fff;
font-family: Microsoft YaHei;
font-size: 18px;
font-weight: 400;
line-height: 34px;
}
</style>
src/views/technologyFigures/index.vue 0 → 100644
浏览文件 @ 51f07374
<template>
<div class="home-wrapper">
<div class="home-main">
<div class="home-main-header">
<div class="home-main-header-top">
<div class="header-item">国家科技安全</div>
<div class="header-item">></div>
<div class="header-item back-item" @click="handleBackHome">中美博弈概览</div>
<div class="header-item">></div>
<div class="header-item">市场准入限制</div>
</div>
<div class="home-main-header-center">
<el-input v-model="input" style="width: 838px; height: 100%" placeholder="搜索科技人物及观点" />
<div class="search">
<div class="search-icon">
<img src="./assets/images/search-icon.png" alt="" />
</div>
<div class="search-text">搜索</div>
</div>
</div>
<div class="home-main-header-footer">
<div class="home-main-header-footer-item">
<div class="item-top">843</div>
<div class="item-footer">政府官员</div>
</div>
<div class="home-main-header-footer-item">
<div class="item-top">131</div>
<div class="item-footer">科技企业领袖</div>
</div>
<div class="home-main-header-footer-item">
<div class="item-top">633</div>
<div class="item-footer">顶级科学家</div>
</div>
<div class="home-main-header-footer-item">
<div class="item-top">312</div>
<div class="item-footer">国会议员</div>
</div>
</div>
<div class="home-main-header-btn-box">
<div class="btn" @click="scrollToTop('position1')">
<div class="btn-text">{{ "最新动态" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
<div class="btn" @click="scrollToTop('position2')">
<div class="btn-text">{{ "资讯要闻" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
<div class="btn" @click="scrollToTop('position3')">
<div class="btn-text">{{ "统计概览" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
<div class="btn" @click="scrollToTop('position4')">
<div class="btn-text">{{ "资源库" }}</div>
<div class="btn-icon">{{ ">" }}</div>
</div>
</div>
</div>
<div class="home-main-center">
<DivideHeader id="position1" class="divide-header" :titleText="'最新动态'"></DivideHeader>
<div class="center-top">
<div class="box1">
<div class="box1-left">
<img src="./assets/images/box1-left.png" alt="" />
</div>
<div class="box1-right">
<img src="./assets/images/box1-right.png" alt="" />
</div>
<div class="box1-header">
<div class="box1-header-left">
<div class="icon">
<img src="./assets/images/box1-header-icon.png" alt="" />
</div>
<div class="title">{{ "人物新闻动态" }}</div>
</div>
<div class="box1-header-right" @click="handleClickToDetail('337')">
{{ "查看详情 >" }}
</div>
</div>
<div class="box1-main"></div>
</div>
<div class="box2">
<div class="box2-header">
<div class="icon">
<img src="./assets/images/box2-header-icon.png" alt="" />
</div>
<div class="title">
<div class="text">{{ "风险信号" }}</div>
<div class="num">{{ warningList.length }}</div>
</div>
</div>
<div class="box2-main">
<div class="box2-main-item" v-for="(item, index) in warningList" :key="index">
<div
class="item-left"
:class="{
itemLeftStatus1: item.status === '一般风险',
itemLeftStatus2: item.status === '重大风险'
}"
>
{{ item.status }}
</div>
<div class="item-right">
<div class="text">
{{ item.title }}
</div>
<div class="time">{{ item.time }}</div>
</div>
</div>
</div>
<div class="box2-footer" @click="handleToMoreRiskSignal">
<div class="icon">
<img src="./assets/images/box2-footer-icon.png" alt="" />
</div>
<div class="text">{{ "查看更多" }}</div>
</div>
</div>
</div>
<DivideHeader id="position2" class="divide-header" :titleText="'言论动态'"></DivideHeader>
<div class="center-center">
<div class="box3">
<div class="box3-header">
<div class="box3-header-left">
<div class="box3-header-icon">
<img src="./assets/images/header-news.png" alt="" />
</div>
<div class="box3-header-title">{{ "人物动向" }}</div>
</div>
</div>
<div class="box3-main"></div>
</div>
<div class="box4">
<div class="box4-header">
<div class="header-icon">
<img src="./assets/images/header-message.png" alt="" />
</div>
<div class="header-title">{{ "重要人物言论及立场" }}</div>
</div>
<div class="box4-main"></div>
</div>
</div>
<DivideHeader id="position3" class="divide-header" :titleText="'数据总览'"></DivideHeader>
<div class="center-footer">
<div class="box5">
<div class="box5-header">
<div class="box5-header-left">
<div class="box5-header-icon">
<img src="./assets/images/box3-header-icon.png" alt="" />
</div>
<div class="box5-header-title">{{ "科技人物观点词云" }}</div>
</div>
</div>
<div class="box5-main" id="box5Chart"></div>
</div>
<div class="box6">
<div class="box6-header">
<div class="header-icon">
<img src="./assets/images/box6-header-icon.png" alt="" />
</div>
<div class="header-title">{{ "科技人物观点涉及领域变化趋势" }}</div>
</div>
<div class="box6-main" id="box6Chart"></div>
</div>
</div>
<div class="center-footer1">
<div class="box7">
<div class="box7-header">
<div class="box7-header-left">
<div class="box7-header-icon">
<img src="./assets/images/box3-header-icon.png" alt="" />
</div>
<div class="box7-header-title">{{ "科技人物类型" }}</div>
</div>
</div>
<div class="box7-main" id="box7Chart"></div>
</div>
<div class="box8">
<div class="box8-header">
<div class="box8-header-left">
<div class="box8-header-icon">
<img src="./assets/images/box6-header-icon.png" alt="" />
</div>
<div class="box8-header-title">{{ "主要人物涉华观点统计" }}</div>
</div>
</div>
<div class="box8-main"></div>
</div>
</div>
</div>
<div class="home-main-footer">
<DivideHeader id="position4" class="divide-header" :titleText="'资源库'"></DivideHeader>
<div class="home-main-footer-header">
<div class="btn-box">
<div
class="btn"
:class="{ btnActive: activeCate === cate }"
v-for="(cate, index) in categoryList"
:key="index"
@click="handleClickCate(cate)"
>
{{ cate }}
</div>
</div>
</div>
<div class="home-main-footer-main"></div>
</div>
</div>
</div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import scrollToTop from "@/utils/scrollToTop";
import router from "@/router";
import DivideHeader from "@/components/DivideHeader.vue";
import setChart from "@/utils/setChart";
import getMultiLineChart from "./utils/multiLineChart";
import getPieChart from "./utils/piechart";
import getRadarChart from "./utils/radarChart";
import getMapChart from "./utils/mapChart";
import getBarChart from "./utils/barChart";
// 返回首页
const handleBackHome = () => {
router.push({
path: "/overview"
});
};
const handleClickToDetail = id => {
const route = router.resolve({
path: "/marketAccessLayout",
query: {
id: id
}
});
window.open(route.href, "_blank");
};
// 风险信号
const warningList = ref([
{
title: "关于对中华人民共和国合成阿片类药物供应链...",
time: "一天前",
status: "特别重大"
},
{
title: "关于调整汽车及汽车零部件进口的公告",
time: "一天前",
status: "特别重大"
},
{
title: "关于调整钢铁进口的公告",
time: "一天前",
status: "重大风险"
},
{
title: "关于使用互惠关税规范进口以纠正导致大规模...",
time: "一天前",
status: "重大风险"
},
{
title: "关于修订对中华人民共和国低价值进口商品适...",
time: "一天前",
status: "一般风险"
}
]);
const categoryList = ref(["全部人物", "国会议员", "行政主官", "科技领袖", "顶尖科学家"]);
const activeCate = ref("全部人物");
const activeHylyId = ref("");
const handleClickCate = cate => {
console.log(cate);
activeCate.value = cate.hylymc;
activeHylyId.value = cate.hylyid;
handleGetBillsByType();
};
const chart1Data = ref({
title: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025"],
data: [
{
name: "337调查",
value: [73, 32, 42, 48, 38, 49, 63, 75, 70, 86, 95, 87]
},
{
name: "301调查",
value: [8, 3, 2, 8, 9, 10, 12, 18, 16, 18, 20, 22]
},
{
name: "232调查",
value: [1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 2, 3]
}
]
});
// 查看更多风险信号
const handleToMoreRiskSignal = () => {
const route = router.resolve("/riskSignal");
window.open(route.href, "_blank");
};
const box7Chart1Data = ref([
{
name: "337调查",
data: [
{ name: "北京", value: 10, coord: [115.46, 39.92] },
{ name: "上海", value: 9, coord: [120.48, 31.22] },
{ name: "广东", value: 15, coord: [114.23, 23.16] },
{ name: "江苏", value: 30, coord: [117.78, 32.04] },
{ name: "浙江", value: 20, coord: [121.19, 30.26] },
{ name: "四川", value: 4, coord: [105.06, 30.67] },
{ name: "陕西", value: 1, coord: [106.95, 34.27] },
{ name: "辽宁", value: 3, coord: [122.38, 41.8] }
]
},
{
name: "301调查",
data: [
{ name: "北京", value: 10, coord: [112.48, 38.95] },
{ name: "上海", value: 9, coord: [121.5, 33.25] },
{ name: "广东", value: 15, coord: [118.25, 21.18] },
{ name: "江苏", value: 30, coord: [115.8, 34.06] },
{ name: "浙江", value: 20, coord: [124.21, 31.28] },
{ name: "四川", value: 4, coord: [114.08, 32.69] },
{ name: "陕西", value: 1, coord: [109.97, 30.29] },
{ name: "辽宁", value: 3, coord: [113.4, 40.82] }
]
},
{
name: "232调查",
data: [
{ name: "北京", value: 10, coord: [116.44, 39.9] },
{ name: "上海", value: 9, coord: [121.46, 31.2] },
{ name: "广东", value: 15, coord: [113.21, 23.14] },
{ name: "江苏", value: 30, coord: [118.76, 32.02] },
{ name: "浙江", value: 20, coord: [120.19, 30.24] },
{ name: "四川", value: 4, coord: [104.04, 30.67] },
{ name: "陕西", value: 1, coord: [108.95, 34.25] },
{ name: "辽宁", value: 3, coord: [123.36, 41.8] }
]
}
]);
const box7Chart2Data = ref([
{
name: "广东省",
value: 42
},
{
name: "上海市",
value: 35
},
{
name: "浙江省",
value: 28
},
{
name: "江苏省",
value: 19
},
{
name: "北京市",
value: 15
},
{
name: "四川省",
value: 12
},
{
name: "山东省",
value: 11
},
{
name: "福建省",
value: 8
}
]);
onMounted(async () => {
let chart1 = getMultiLineChart(
chart1Data.value.title,
chart1Data.value.data[0].value,
chart1Data.value.data[1].value,
chart1Data.value.data[2].value
);
setChart(chart1, "chart1");
let chart2 = getRadarChart();
setChart(chart2, "chart2");
let box7Chart1 = getMapChart(box7Chart1Data.value);
setChart(box7Chart1, "box7Chart1");
let box7Chart2 = getBarChart(box7Chart2Data.value);
setChart(box7Chart2, "box7Chart2");
});
</script>
<style lang="scss" scoped>
:deep(.el-input__wrapper) {
box-shadow: none;
}
.home-wrapper {
.home-main {
width: 1920px;
margin: 0 auto;
background: url("./assets/images/background.png");
background-size: 100% 100%;
.home-main-header {
display: flex;
flex-direction: column;
align-items: center;
.home-main-header-top {
box-sizing: border-box;
width: 100%;
height: 64px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 64px;
background: url("./assets/images/header-bg.png");
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
color: #fff;
padding-left: 160px;
display: flex;
.header-item {
margin: 0 3px;
}
.back-item {
cursor: pointer;
&:hover {
color: #ccc;
}
}
}
.home-main-header-center {
margin-top: 48px;
width: 960px;
height: 48px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
box-sizing: border-box;
padding: 1px;
position: relative;
border: 1px solid transparent;
&:hover {
border: 1px solid var(--color-main-active);
}
.search {
position: absolute;
right: -1px;
top: 0px;
width: 120px;
height: 46px;
border-radius: 10px;
background: var(--color-main-active);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
.search-icon {
width: 18px;
height: 18px;
img {
width: 100%;
height: 100%;
}
}
.search-text {
margin-left: 8px;
height: 22px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
}
}
.home-main-header-footer {
margin-top: 38px;
width: 688px;
height: 64px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
.home-main-header-footer-item {
padding: 0 10px;
text-align: center;
.item-top {
height: 22px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 36px;
font-weight: 700;
line-height: 22px;
}
.item-footer {
margin-top: 10px;
height: 30px;
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 30px;
}
}
}
.home-main-header-btn-box {
width: 688px;
margin: 0 auto;
margin-top: 39px;
display: flex;
justify-content: space-between;
.btn {
display: flex;
width: 140px;
height: 36px;
border: 1px solid #aed6ff;
box-sizing: border-box;
border-radius: 18px;
justify-content: center;
background: #e7f3ff;
position: relative;
cursor: pointer;
&:hover {
background: #cae3fc;
}
.btn-text {
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 400;
line-height: 34px;
margin-left: 5px;
}
.btn-icon {
height: 20px;
line-height: 20px;
position: absolute;
top: 6px;
right: 8px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 400;
}
}
}
}
.home-main-center {
margin-top: 34px;
.center-top {
height: 450px;
display: flex;
justify-content: center;
gap: 20px;
.box1 {
width: 1064px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: #fff;
box-sizing: border-box;
position: relative;
.box1-left {
position: absolute;
left: 0;
top: 220px;
width: 24px;
height: 48px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.box1-right {
position: absolute;
right: 0;
top: 220px;
width: 24px;
height: 48px;
cursor: pointer;
img {
width: 100%;
height: 100%;
}
}
.box1-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
justify-content: space-between;
padding-left: 31px;
padding-right: 41px;
.box1-header-left {
display: flex;
.icon {
width: 18px;
height: 18px;
margin-top: 19px;
img {
width: 100%;
height: 100%;
}
}
.title {
width: 152px;
height: 53px;
margin-left: 18px;
color: #fff;
background: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 53px;
text-align: center;
}
}
.box1-header-right {
margin-top: 19px;
height: 16px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 16px;
cursor: pointer;
}
}
.box1-main {
width: 1064px;
height: 354px;
margin-top: 22px;
margin-left: 31px;
}
}
.box2 {
width: 521px;
height: 450px;
box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
background: rgba(255, 255, 255, 1);
position: relative;
.box2-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
.icon {
width: 24px;
height: 22px;
margin-left: 33px;
margin-top: 13px;
img {
width: 100%;
height: 100%;
}
}
.title {
display: flex;
width: 148px;
height: 48px;
background: rgba(206, 79, 81, 1);
margin-left: 25px;
.text {
margin-left: 15px;
margin-top: 13px;
height: 22px;
color: #fff;
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 22px;
}
.num {
width: 24px;
height: 20px;
line-height: 20px;
text-align: center;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 12px;
margin-left: 15px;
margin-top: 14px;
border-radius: 100px;
background: rgba(255, 255, 255, 0.3);
}
}
.more {
margin-top: 16px;
margin-left: 200px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 16px;
cursor: pointer;
}
}
.box2-main {
margin-top: 2px;
height: 330px;
overflow-y: auto;
.box2-main-item {
margin-left: 23px;
height: 47px;
width: 464px;
display: flex;
cursor: pointer;
&:hover {
background: var(--color-bg-hover);
}
.itemLeftStatus1 {
color: rgba(82, 196, 26, 1) !important;
background: rgba(246, 255, 237, 1) !important;
}
.itemLeftStatus2 {
color: rgba(250, 140, 22, 1) !important;
background: rgba(255, 247, 230, 1) !important;
}
.item-left {
margin-top: 4px;
margin-left: 2px;
width: 40px;
height: 40px;
border-radius: 20px;
background: rgba(255, 241, 240);
color: rgba(245, 34, 45, 1);
font-family: Microsoft YaHei;
font-size: 12px;
font-weight: 400;
line-height: 14px;
box-sizing: border-box;
padding: 6px 4px;
text-align: center;
}
.item-right {
margin-left: 13px;
width: 408px;
height: 47px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
.text {
width: 348px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 47px;
}
.time {
margin-left: 10px;
line-height: 47px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
}
}
}
}
.box2-footer {
position: absolute;
left: 30px;
bottom: 20px;
width: 460px;
height: 42px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border-radius: 6px;
background: var(--color-main-active);
gap: 8px;
cursor: pointer;
.icon {
width: 16px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
}
}
}
.center-center {
width: 1600px;
margin: 0 auto;
margin-top: 21px;
.box3 {
width: 1600px;
height: 640px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
background: rgba(255, 255, 255, 1);
.box3-header {
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin: 0 auto;
display: flex;
justify-content: space-between;
padding: 0 20px;
position: relative;
.box3-header-left {
display: flex;
.box3-header-icon {
margin-top: 16px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box3-header-title {
margin-top: 16px;
margin-left: 19px;
height: 22px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 22px;
}
.more {
width: 49px;
height: 24px;
position: absolute;
top: 14px;
right: 27px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
}
}
}
.box3-main {
height: 402px;
overflow-y: auto;
overflow-x: hidden;
padding-top: 6px;
}
}
.box4 {
margin-top: 16px;
width: 1600px;
height: 460px;
border-radius: 10px;
box-shadow: 0px 0px 15px 0px rgba(25, 69, 130, 0.2);
background: rgba(255, 255, 255, 1);
.box4-header {
width: 792px;
height: 48px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
box-sizing: border-box;
padding-left: 22px;
position: relative;
.header-icon {
margin-top: 15px;
width: 20px;
height: 20px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
margin-top: 16px;
margin-left: 18px;
height: 22px;
color: var(--color-main-active);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 22px;
}
.more {
width: 49px;
height: 24px;
position: absolute;
top: 14px;
right: 27px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
cursor: pointer;
}
}
.box4-main {
height: 402px;
overflow-y: auto;
box-sizing: border-box;
padding-top: 8px;
}
}
}
.center-footer {
margin-top: 21px;
height: 460px;
display: flex;
justify-content: center;
gap: 15px;
.box5 {
width: 1064px;
height: 460px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box5-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin: 0 auto;
display: flex;
justify-content: space-between;
padding: 0 20px;
position: relative;
.box5-header-left {
display: flex;
.box5-header-icon {
margin-top: 15px;
margin-left: 2px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box5-header-title {
margin-top: 12px;
margin-left: 19px;
height: 26px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
}
.box-header-right {
position: absolute;
height: 24px;
top: 12px;
right: 17px;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8px;
.icon {
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 24px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
}
}
.box5-main {
height: 397px;
}
}
.box6 {
width: 521px;
height: 460px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box6-header {
width: 521px;
height: 53px;
box-sizing: border-box;
padding: 0 20px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
display: flex;
position: relative;
.header-icon {
margin-top: 18px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.header-title {
margin-top: 16px;
margin-left: 15px;
height: 22px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 22px;
}
.box-header-right {
position: absolute;
height: 24px;
top: 12px;
right: 17px;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8px;
.icon {
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 24px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
}
}
.box6-main {
height: 360px;
}
}
}
.center-footer1 {
margin-top: 16px;
display: flex;
justify-content: center;
gap: 15px;
.box7 {
width: 1064px;
height: 460px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box7-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin: 0 auto;
display: flex;
justify-content: space-between;
padding: 0 20px;
position: relative;
.box7-header-left {
display: flex;
.box7-header-icon {
margin-top: 15px;
margin-left: 2px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box7-header-title {
margin-top: 12px;
margin-left: 19px;
height: 26px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
}
.box-header-right {
position: absolute;
height: 24px;
top: 12px;
right: 17px;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8px;
.icon {
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 24px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
}
}
.box7-main {
height: 412px;
}
}
.box8 {
width: 521px;
height: 460px;
box-sizing: border-box;
border: 1px solid rgba(234, 236, 238, 1);
border-radius: 10px;
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
background: rgba(255, 255, 255, 1);
.box8-header {
height: 53px;
border-bottom: 1px solid rgba(240, 242, 244, 1);
margin: 0 auto;
display: flex;
justify-content: space-between;
padding: 0 20px;
position: relative;
.box8-header-left {
display: flex;
.box8-header-icon {
margin-top: 15px;
margin-left: 2px;
width: 19px;
height: 19px;
img {
width: 100%;
height: 100%;
}
}
.box8-header-title {
margin-top: 12px;
margin-left: 19px;
height: 26px;
color: rgba(20, 89, 187, 1);
font-family: Microsoft YaHei;
font-size: 20px;
font-weight: 700;
line-height: 26px;
}
}
.box-header-right {
position: absolute;
height: 24px;
top: 12px;
right: 17px;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 8px;
.icon {
width: 14px;
height: 16px;
img {
width: 100%;
height: 100%;
}
}
.text {
height: 24px;
color: rgba(132, 136, 142, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
letter-spacing: 0px;
text-align: left;
}
}
}
.box8-main {
width: 469px;
height: 360px;
}
}
}
}
.home-main-footer {
height: 1149px;
overflow: hidden;
.home-main-footer-header {
width: 1600px;
height: 42px;
margin: 36px auto;
// background: orange;
display: flex;
justify-content: space-between;
.btn-box {
width: 1000px;
display: flex;
.btn {
color: rgba(95, 101, 108, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 42px;
padding: 0 24px;
border-radius: 21px;
background: rgba(20, 89, 187, 0);
margin-right: 20px;
cursor: pointer;
&:hover {
background: rgba(20, 89, 187, 0.1);
}
}
.btnActive {
padding: 0 24px;
border-radius: 21px;
background: rgba(20, 89, 187, 1);
color: #fff;
&:hover {
color: #fff;
background: rgba(20, 89, 187, 1);
}
}
}
.select-box {
height: 42px;
box-sizing: border-box;
padding: 5px 0;
}
}
.home-main-footer-main {
width: 1600px;
margin-bottom: 20px;
height: 985px;
// box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
// background: rgba(255, 255, 255, 1);
margin: 0 auto;
box-sizing: border-box;
// padding: 20px;
display: flex;
.left {
width: 300px;
height: 560px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.left-box1 {
margin-top: 17px;
height: 260px;
.left-box1-header {
display: flex;
.icon {
width: 8px;
height: 16px;
margin-top: 4px;
border-radius: 2px 2px 0 0;
background: rgba(10, 87, 166, 1);
}
.title {
height: 2px;
margin-left: 17px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
}
.left-box1-main {
margin-top: 10px;
.time-label {
height: 35px;
margin-left: 25px;
}
}
}
.left-box2 {
margin-top: 17px;
height: 260px;
.left-box2-header {
display: flex;
.icon {
width: 8px;
height: 16px;
margin-top: 4px;
border-radius: 2px 2px 0 0;
background: rgba(10, 87, 166, 1);
}
.title {
height: 2px;
margin-left: 17px;
color: rgba(10, 87, 166, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
}
}
.left-box2-main {
margin-top: 10px;
.area-label {
height: 35px;
margin-left: 25px;
}
}
}
}
.right {
margin-left: 16px;
width: 1284px;
height: 899px;
border-radius: 4px;
box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
background: rgba(255, 255, 255, 1);
.right-header {
height: 54px;
background: rgba(59, 65, 75, 1);
display: flex;
.header-item1 {
width: 500px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 80px;
box-sizing: border-box;
}
.header-item2 {
width: 196px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 20px;
box-sizing: border-box;
}
.header-item3 {
width: 196px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 20px;
box-sizing: border-box;
}
.header-item4 {
width: 196px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 20px;
box-sizing: border-box;
}
.header-item5 {
width: 196px;
color: rgba(255, 255, 255, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 54px;
padding-left: 20px;
box-sizing: border-box;
}
}
.right-main {
height: 780px;
// background: orange;
.item {
display: flex;
padding: 16px 0;
// height: 56px;
&:nth-child(2n) {
background: rgba(247, 248, 249, 1);
}
.item-box1 {
width: 500px;
display: flex;
.name {
height: 22px;
padding: 0 8px;
box-sizing: border-box;
border-radius: 4px;
margin-left: 32px;
margin-top: 10px;
// display: flex;
// align-items: center;
}
.name1 {
color: rgba(250, 140, 22, 1);
border: 1px solid rgba(255, 213, 145, 1);
background: rgba(255, 247, 230, 1);
}
.name2 {
color: rgba(10, 87, 166, 1);
border: 1px solid rgba(145, 202, 255, 1);
background: rgba(230, 244, 255, 1);
}
.name3 {
color: rgba(114, 46, 209, 1);
border: 1px solid rgba(211, 173, 247, 1);
background: rgba(249, 240, 255, 1);
}
.title {
margin-left: 12px;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 700;
line-height: 24px;
display: flex;
align-items: center;
}
}
.item-box2 {
width: 196px;
padding-left: 20px;
box-sizing: border-box;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
.item-box3 {
width: 196px;
padding-left: 20px;
box-sizing: border-box;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
.item-box4 {
width: 196px;
padding-left: 20px;
box-sizing: border-box;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
.item-box5 {
width: 196px;
padding-left: 20px;
box-sizing: border-box;
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 16px;
font-weight: 400;
line-height: 24px;
display: flex;
align-items: center;
}
}
}
.right-footer {
display: flex;
// height: 60px;
// background: orange;
justify-content: space-between;
.footer-left {
color: rgba(59, 65, 75, 1);
font-family: Microsoft YaHei;
font-size: 14px;
font-weight: 400;
line-height: 18px;
margin-left: 24px;
margin-top: 6px;
}
.footer-right {
margin-right: 24px;
}
}
}
}
}
}
}
.divide-header {
margin: 0 auto;
margin-top: 52px;
margin-bottom: 36px;
}
:deep(.el-input__wrapper) {
box-shadow: none;
border-radius: 10px;
}
:deep(.el-input__wrapper:hover) {
box-shadow: none !important;
}
:deep(.el-input__wrapper.is-focus) {
box-shadow: none !important;
}
</style>
src/views/technologyFigures/utils/barChart.js 0 → 100644
浏览文件 @ 51f07374
import { reverse } from "d3";
import * as echarts from "echarts";
const getBarChart = (originalData) => {
// 按 value 从大到小排序
const sortedData = [...originalData].sort((a, b) => b.value - a.value);
const option = {
tooltip: {},
grid: {
top: '3%',
right: '3%',
bottom: '1%',
left: '1%',
containLabel: true
},
xAxis: {
type: 'value',
splitLine: {
show: false
},
show: false
},
yAxis: {
type: 'category',
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: true,
formatter: function (value, index) {
// index 是从 0 开始的
const rank = index + 1;
// 基础版本
// return `${rank}. ${value}`;
// 带样式的版本
return `{rank|${rank}} {name|${value}}`;
},
// 启用富文本
rich: {
rank: {
color: 'rgba(5, 95, 194, 1)', // 序号颜色
fontFamily: 'Microsoft YaHei',
fontSize: 12, // 字体大小
width: 24,
height: 24,
align: 'center',
verticalAlign: 'middle',
backgroundColor: 'rgba(231, 243, 255, 1)',
borderRadius: 12,
padding: [0, 0]
},
name: {
color: '#333', // 名称颜色
fontSize: 12
}
}
},
data: sortedData.map(item => item.name),
inverse: true, // Y轴反向，使第一个在顶部
},
series: [{
type: 'bar',
data: sortedData.map(item => item.value),
label: {
show: true,
position: [300, 0],
formatter: function (params) {
return params.value + ' 次'
}
},
barWidth: 8,
itemStyle: {
color: function (params) {
if (params.dataIndex === 0) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: 'rgba(206, 79, 81, 0)'
},
{
offset: 1,
color: 'rgba(206, 79, 81, 1)'
}
]);
} else if (params.dataIndex < 3) {
return new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: 'rgba(255, 172, 77, 0)'
},
{
offset: 1,
color: 'rgba(255, 172, 77, 1)'
}
]);
} else {
return new echarts.graphic.LinearGradient(0, 0, 1, 0,
[{
offset: 0,
color: 'rgba(5, 95, 194, 0)'
},
{
offset: 1,
color: 'rgba(5, 95, 194, 1)'
}
]);
}
},
barBorderRadius: 4,
}
}]
}
return option
}
export default getBarChart
\ No newline at end of file
src/views/technologyFigures/utils/mapChart.js 0 → 100644
浏览文件 @ 51f07374
import * as echarts from 'echarts'
import chinaJson from '@/assets/json/China.json'
const getMapChart = (mapData) => {
echarts.registerMap('china', chinaJson);
const option = {
legend: {
show: true,
top: 15
},
tooltip: {
trigger: 'item',
formatter: (params) => {
if (params.componentType === 'series') {
if (params.seriesType === 'scatter') {
return `${params.data.name}<br/>数值: ${params.data.value[2]}`;
} else {
return `${params.name}<br/>数值: ${params.value[2] || 0}`;
}
}
return params.name;
}
},
geo: {
map: 'china',
roam: true,
zoom: 1,
label: {
emphasis: {
show: true,
color: '#fff'
}
},
itemStyle: {
areaColor: '#F9FAFC',
borderColor: '#E7F1FF',
borderWidth: 1
},
emphasis: {
itemStyle: {
areaColor: '#ffd700'
},
label: {
show: true,
color: '#fff',
fontSize: 12
}
}
},
series: [
// 地图系列 - 用于省份高亮
{
name: '',
type: 'map',
map: 'china',
geoIndex: 0,
data: mapData.map(item => ({
name: item.name,
value: item.value,
itemStyle: {
// color: getColorByValue(item.value, colorRanges),
areaColor: '#E7F1FF'
}
})),
emphasis: {
itemStyle: {
areaColor: '#ffd700',
borderColor: '#333',
borderWidth: 2
},
label: {
show: true,
fontSize: 14,
fontWeight: 'bold',
color: '#333'
}
}
},
// 散点系列 - 用于显示圆点数字标记
{
name: mapData[0].name,
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'circle',
symbolSize: 10,
itemStyle: {
color: 'rgba(5, 95, 194, 1)',
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
data: mapData[0].data.map(item => ({
name: item.name,
value: [item.coord[0], item.coord[1], item.value],
itemStyle: {
color: 'rgba(5, 95, 194, 1)'
}
})),
// data: mapData[0].data,
emphasis: {
label: {
show: true,
fontSize: 14,
fontWeight: 'bold'
},
itemStyle: {
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.8)'
}
}
},
{
name: mapData[1].name,
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'circle',
symbolSize: 10,
itemStyle: {
color: 'rgba(250, 140, 22, 1)',
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
data: mapData[1].data.map(item => ({
name: item.name,
value: [item.coord[0], item.coord[1], item.value],
itemStyle: {
color: 'rgba(250, 140, 22, 1)'
}
})),
emphasis: {
label: {
show: true,
fontSize: 14,
fontWeight: 'bold'
},
itemStyle: {
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.8)'
}
}
},
{
name: mapData[2].name,
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'circle',
symbolSize: 10,
itemStyle: {
color: 'rgba(114, 46, 209, 1)',
shadowBlur: 10,
shadowColor: 'rgba(0, 0, 0, 0.5)'
},
data: mapData[2].data.map(item => ({
name: item.name,
value: [item.coord[0], item.coord[1], item.value],
itemStyle: {
color: 'rgba(114, 46, 209, 1)'
}
})),
emphasis: {
label: {
show: true,
fontSize: 14,
fontWeight: 'bold'
},
itemStyle: {
shadowBlur: 20,
shadowColor: 'rgba(0, 0, 0, 0.8)'
}
}
}
]
};
return option
}
export default getMapChart
\ No newline at end of file
src/views/technologyFigures/utils/multiLineChart.js 0 → 100644
浏览文件 @ 51f07374
import * as echarts from 'echarts'
const getMultiLineChart = (dataX, dataY1, dataY2, dataY3) => {
return {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
grid: {
top: '15%',
right: '5%',
bottom: '5%',
left: '5%',
containLabel: true
},
legend: {
show: true,
top: 10,
left:'5%'
},
color: ['#0A57A6', '#FA8C16','#722ED1'],
xAxis: [
{
type: 'category',
boundaryGap: false,
data: dataX
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '337调查',
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(10, 87, 166, 0.7)' // 起始颜色
}, {
offset: 1,
color: 'rgba(10, 87, 166, 0)' // 结束颜色
}])
},
emphasis: {
focus: 'series'
},
data: dataY1
},
{
name: '301调查',
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(255, 172, 77, 0.7)' // 起始颜色
}, {
offset: 1,
color: 'rgba(255, 172, 77, 0)' // 结束颜色
}])
},
emphasis: {
focus: 'series'
},
data: dataY2
},
{
name: '232调查',
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(114, 46, 209, 0.7)' // 起始颜色
}, {
offset: 1,
color: 'rgba(114, 46, 209, 0)' // 结束颜色
}])
},
emphasis: {
focus: 'series'
},
data: dataY3
}
]
}
}
export default getMultiLineChart
\ No newline at end of file
src/views/technologyFigures/utils/piechart.js 0 → 100644
浏览文件 @ 51f07374
const getPieChart = (data,colorList) => {
let option = {
color: colorList,
series: [
{
type: 'pie',
radius: [70, 100],
height: '100%',
left: 'center',
width: '100%',
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
label: {
alignTo: 'edge',
formatter: '{name|{b}}\n{time|{c} 条 {d}%}',
minMargin: 5,
edgeDistance: 10,
lineHeight: 15,
rich: {
time: {
fontSize: 10,
color: '#999'
}
}
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80
},
labelLayout: function (params) {
const isLeft = params.labelRect.x < 556 / 2;
const points = params.labelLinePoints;
// Update the end point.
points[2][0] = isLeft
? params.labelRect.x
: params.labelRect.x + params.labelRect.width;
return {
labelLinePoints: points
};
},
data: data
}]
}
return option
}
export default getPieChart;
\ No newline at end of file
src/views/technologyFigures/utils/radarChart.js 0 → 100644
浏览文件 @ 51f07374
const getRadarChart = () => {
const indicators = [
{ name: "集成电路", max: 10 },
{ name: "能源领域", max: 10 },
{ name: "量子科技", max: 10 },
{ name: "通信网络", max: 10 },
{ name: "人工智能", max: 10 },
{ name: "生物科技", max: 10 }
];
const data337 = [9, 6, 6, 6, 9, 7];
const data301 = [5, 3, 7, 8, 7, 9];
const data232 = [4, 10, 3, 4, 2, 5];
const option = {
color: ["rgba(5, 95, 194, 1)", "rgba(250, 140, 22, 1)", "rgba(146, 84, 222, 1)"],
legend: {
top: 8,
left: 30,
icon: "circle",
itemWidth: 12,
itemHeight: 12,
itemGap: 24,
textStyle: {
color: "rgb(95, 101, 108)",
fontSize: 16,
fontFamily: "Microsoft YaHei",
fontWeight: 400,
lineHeight: 24
},
data: ["337调查", "301调查", "232调查"]
},
radar: {
shape: "polygon",
splitNumber: 5,
indicator: indicators,
center: ["50%", "56%"],
radius: "58%",
startAngle: 90,
clockwise: false,
axisName: {
color: "rgba(59, 65, 75, 1)",
fontSize: 16,
fontFamily: "Microsoft YaHei",
fontWeight: 700,
lineHeight: 24,
padding: [0, 5]
},
splitLine: {
lineStyle: {
color: "#d0d0d0",
width: 1
}
},
axisLine: {
lineStyle: {
color: "#d0d0d0",
width: 1
}
},
splitArea: {
show: true,
areaStyle: {
color: ["#fff", "rgb(247, 248, 249)", "#fff", "rgb(247, 248, 249)", "#fff"]
}
}
},
series: [
{
name: "337调查",
type: "radar",
data: [{ value: data337 }],
lineStyle: {
width: 2,
color: "rgba(5, 95, 194,1)"
},
symbol: "none",
areaStyle: {
color: "rgba(5, 95, 194,0.15)"
}
},
{
name: "301调查",
type: "radar",
data: [{ value: data301 }],
lineStyle: {
width: 2,
color: "rgba(250, 140, 22, 1)"
},
symbol: "none",
areaStyle: {
color: "rgba(250, 140, 22, 0.15)"
}
},
{
name: "232调查",
type: "radar",
data: [{ value: data232 }],
lineStyle: {
width: 2,
color: "rgba(146, 84, 222, 1)"
},
symbol: "none",
areaStyle: {
color: "rgba(146, 84, 222, 0.15)"
}
},
]
};
return option
}
export default getRadarChart
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论