Skip to content

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

暂存

上级 71d717e6
隐藏空白字符变更
内嵌 并排
正在显示 包含 2124 行增加 和 146 行删除
src/assets/json/world.json 0 → 100644
浏览文件 @ 15963586
This source diff could not be displayed because it is too large. You can view the blob instead.
src/views/exportControl/utils/charts.js
浏览文件 @ 15963586
...@@ -397,116 +397,6 @@ export function getMapOption() { ...@@ -397,116 +397,6 @@ export function getMapOption() {
color: 'rgba(255, 77, 79, 1)' color: 'rgba(255, 77, 79, 1)'
} }
} }
}, {
name: '个人会员数量',
type: 'map',
geoIndex: 0,
tooltip: {
show: false
},
data: [{
name: '北京',
value: 2256
}, {
name: '天津',
value: 744
}, {
name: '上海',
value: 578
}, {
name: '重庆',
value: 806
}, {
name: '河北',
value: 432
}, {
name: '河南',
value: 590
}, {
name: '云南',
value: 132
}, {
name: '辽宁',
value: 487
}, {
name: '黑龙江',
value: 336
}, {
name: '湖南',
value: 295
}, {
name: '安徽',
value: 398
}, {
name: '山东',
value: 1055
}, {
name: '新疆',
value: 201
}, {
name: '江苏',
value: 795
}, {
name: '浙江',
value: 655
}, {
name: '江西',
value: 311
}, {
name: '湖北',
value: 993
}, {
name: '广西',
value: 261
}, {
name: '甘肃',
value: 349
}, {
name: '山西',
value: 273
}, {
name: '内蒙古',
value: 343
}, {
name: '陕西',
value: 319
}, {
name: '吉林',
value: 325
}, {
name: '福建',
value: 317
}, {
name: '贵州',
value: 275
}, {
name: '广东',
value: 1000
}, {
name: '青海',
value: 97
}, {
name: '西藏',
value: 18
}, {
name: '四川',
value: 601
}, {
name: '宁夏',
value: 126
}, {
name: '海南',
value: 186
}, {
name: '台湾',
value: 0
}, {
name: '香港',
value: 11
}, {
name: '澳门',
value: 0
}]
}] }]
}; };
return option return option
......
src/views/portals/portal/index.vue
浏览文件 @ 15963586
...@@ -10,6 +10,26 @@ ...@@ -10,6 +10,26 @@
<template #icon> <template #icon>
<div class="icon icon1"></div> <div class="icon icon1"></div>
</template> </template>
<template #right>
<div class="panel1Header">
<div class="item" v-for="(item, index) in levelMapList.slice(1, levelMapList.length)" :key="index">
<div class="itemIcon" :style="{ backgroundColor: item.color[0], borderColor: item.color[1] }"></div>
<div class="itemName">
{{ item.name }}
</div>
</div>
</div>
</template>
<div class="panel1Body">
<Echarts :option="mapOption" height="100%" @chart-ready="echarsReady"></Echarts>
<div class="countryWrap">
<div class="item" v-for="(item, index) in mapData" :key="index">
<img :src="item.flag" alt="" class="itemIcon" />
<div class="itemName">{{ item.name }}</div>
<div class="itemNumber">{{ item.children.length }}个</div>
</div>
</div>
</div>
</CardCustom> </CardCustom>
<CardCustom <CardCustom
@more-click="moreClick" @more-click="moreClick"
...@@ -20,13 +40,15 @@ ...@@ -20,13 +40,15 @@
<template #icon> <template #icon>
<div class="icon icon1"></div> <div class="icon icon1"></div>
</template> </template>
<div class="item" v-for="(item, index) in securityExpressList" :key="index"> <div class="panel2">
<span class="itemLevel" :class="levelMap[item.level].class"> <div class="item" v-for="(item, index) in securityExpressList" :key="index">
{{ levelMap[item.level].text }} <span class="itemLevel" :class="levelMap[item.level].class">
</span> {{ levelMap[item.level].text }}
<div class="itemText">{{ item.title }}</div> </span>
<span class="itemTime">{{ item.time }}</span> <div class="itemText">{{ item.title }}</div>
<span class="itemFlag" :style="{ backgroundImage: 'url(' + item.flag + ')' }"></span> <span class="itemTime">{{ item.time }}</span>
<span class="itemFlag" :style="{ backgroundImage: 'url(' + item.flag + ')' }"></span>
</div>
</div> </div>
</CardCustom> </CardCustom>
</el-row> </el-row>
...@@ -150,16 +172,561 @@ ...@@ -150,16 +172,561 @@
<script setup> <script setup>
import CardCustom from "../components/CardCustom.vue"; import CardCustom from "../components/CardCustom.vue";
import PieProgress from "../components/PieProgress.vue"; import PieProgress from "../components/PieProgress.vue";
import Echarts from "@/components/Chart/index.vue";
import { getMapOption } from "../utils/charts";
import flag1 from "../assets/img/flag1.png"; import flag1 from "../assets/img/flag1.png";
import flag2 from "../assets/img/flag2.png"; import flag2 from "../assets/img/flag2.png";
import flag3 from "../assets/img/flag3.png"; import flag3 from "../assets/img/flag3.png";
import mapFlag1 from "../assets/img/mapFlag1.png";
import mapFlag2 from "../assets/img/mapFlag2.png";
import mapFlag3 from "../assets/img/mapFlag3.png";
import mapFlag4 from "../assets/img/mapFlag4.png";
import mapFlag5 from "../assets/img/mapFlag5.png";
import mapFlag6 from "../assets/img/mapFlag6.png";
import { ref } from "vue"; import { ref } from "vue";
const levelMap = { const levelMap = {
L1: { text: "特别重大", class: "level1" }, L1: { text: "特别重大", class: "level1" },
L2: { text: "重大风险", class: "level2" }, L2: { text: "重大风险", class: "level2" },
L3: { text: "一般风险", class: "level3" } L3: { text: "一般风险", class: "level3" }
}; };
const echarsReady = mycharts => {
mycharts.on("click", function (params) {
// 1. 判断点击的是否是geo组件
if (params.componentType === "geo") {
console.log("点击了地图区域:", params.name); // 可获取地区名称[citation:1]
// 2. 获取鼠标点击的像素坐标
// 注意：高版本ECharts中，event可能挂载在不同位置，建议用 params.event 获取[citation:5]
const pixelPoint = [params.event.offsetX, params.event.offsetY];
// 3. 关键：将像素坐标转换为地理坐标 (经度, 纬度)
// 第一个参数 'geo' 指定坐标系，第二个参数是像素坐标数组[citation:9]
const geoCoords = mycharts.convertFromPixel("geo", pixelPoint);
console.log("对应的经纬度坐标:", geoCoords); // 输出格式如 [116.40, 39.90]
}
});
};
let mapData = [
{
name: "加拿大",
flag: mapFlag1,
children: [
{
value: 12,
level: 1,
name: "加拿大1",
text: "",
position: [-114.92625574436123, 60.97139707757613]
},
{
value: 12,
level: 1,
name: "加拿大2",
text: "",
position: [-122.66033268519817, 64.94019971826877]
},
{
value: 12,
level: 1,
name: "加拿大3",
text: "",
position: [-95.38753505172055, 65.24549222909128]
}
]
},
{
name: "英国",
flag: mapFlag2,
children: [
{
value: 12,
level: 1,
name: "英国1",
text: "",
position: [-1.5492917852477053, 52.764489718498275]
},
{
value: 12,
level: 1,
name: "英国2",
text: "",
position: [-2.698117404891553, 54.74388521180356]
},
{
value: 12,
level: 1,
name: "英国3",
text: "",
position: [-0.6799102352469557, 53.90555300287426]
},
{
value: 12,
level: 1,
name: "英国4",
text: "",
position: [0.46891538439689207, 52.83435073590905]
},
{
value: 12,
level: 1,
name: "英国5",
text: "",
position: [-3.722745660249581, 53.13708181135574]
},
{
value: 12,
level: 1,
name: "英国6",
text: "",
position: [-4.095337753107044, 51.99601852697975]
}
]
},
{
name: "欧盟",
flag: mapFlag3,
children: [
{
value: 12,
level: 1,
name: "欧盟1",
text: "",
position: [11.724105556570102, 48.58464196103773]
},
{
value: 12,
level: 1,
name: "欧盟2",
text: "",
position: [-0.7100210266255225, 44.00223755214452]
},
{
value: 12,
level: 1,
name: "欧盟3",
text: "",
position: [-0.7100210266255225, 45.12774038941654]
},
{
value: 12,
level: 1,
name: "欧盟4",
text: "",
position: [-0.8172117730323798, 47.459139123765716]
},
{
value: 12,
level: 5,
name: "欧盟5",
text: "",
position: [0.14750494462934682, 49.147393379673744]
},
{
value: 12,
level: 5,
name: "欧盟6",
text: "",
position: [2.3985106191733827, 50.3532892767509]
},
{
value: 12,
level: 5,
name: "欧盟7",
text: "",
position: [4.542325547310561, 49.870930917920035]
},
{
value: 12,
level: 5,
name: "欧盟8",
text: "",
position: [6.793331221854594, 48.906214200258304]
},
{
value: 12,
level: 1,
name: "欧盟9",
text: "",
position: [9.901862867653499, 45.36891956883197]
},
{
value: 13,
level: 3,
name: "欧盟10",
text: "",
position: [8.937146149991769, 46.97678076493485]
},
{
value: 13,
level: 3,
name: "欧盟11",
text: "",
position: [10.545007346094657, 49.468965618894316]
},
{
value: 13,
level: 3,
name: "欧盟12",
text: "",
position: [14.296683470334713, 49.468965618894316]
},
{
value: 13,
level: 3,
name: "欧盟13",
text: "",
position: [12.79601302063869, 47.217959944350284]
},
{
value: 13,
level: 3,
name: "欧盟14",
text: "",
position: [10.437816599687793, 48.58464196103773]
},
{
value: 13,
level: 3,
name: "欧盟15",
text: "",
position: [10.652198092501514, 51.719971293438356]
},
{
value: 13,
level: 3,
name: "欧盟16",
text: "",
position: [15.047018695182722, 49.79053785811488]
},
{
value: 13,
level: 3,
name: "欧盟17",
text: "",
position: [10.759388838908372, 53.40822554934638]
},
{
value: 13,
level: 3,
name: "欧盟18",
text: "",
position: [14.832637202369007, 48.42385584142743]
}
]
},
{
name: "韩国",
flag: mapFlag4,
children: [
{
value: 40,
level: 1,
name: "韩国1",
text: "",
position: [127.6671802588885, 35.6152933447435]
},
{
value: 40,
level: 1,
name: "韩国2",
text: "",
position: [127.6671802588885, 37.49854900651488]
},
{
value: 40,
level: 1,
name: "韩国3",
text: "",
position: [128.92268403340273, 37.14543856993275]
},
{
value: 40,
level: 3,
name: "韩国4",
text: "",
position: [128.92268403340273, 36.43921769676848]
},
{
value: 40,
level: 1,
name: "韩国5",
text: "",
position: [128.13799417433134, 35.49758986588279]
},
{
value: 40,
level: 3,
name: "韩国6",
text: "",
position: [127.10764322693156, 35.25464166802588]
}
]
},
{
name: "日本",
flag: mapFlag5,
children: [
{
value: 40,
level: 1,
name: "日本1",
text: "",
position: [142.8374359085882, 43.947802361746696]
},
{
value: 40,
level: 1,
name: "日本2",
text: "",
position: [141.18555679600132, 42.96971604508341]
},
{
value: 40,
level: 2,
name: "日本3",
text: "",
position: [141.09861579007568, 41.14395492064528]
},
{
value: 40,
level: 2,
name: "日本4",
text: "",
position: [141.09861579007568, 39.709428322872455]
},
{
value: 40,
level: 1,
name: "日本5",
text: "",
position: [140.05532371896817, 38.7965477606534]
},
{
value: 40,
level: 5,
name: "日本6",
text: "",
position: [139.96838271304256, 37.36202116288057]
},
{
value: 40,
level: 1,
name: "日本7",
text: "",
position: [138.0556805826788, 36.44914060066151]
},
{
value: 40,
level: 5,
name: "日本8",
text: "",
position: [136.49074247601754, 35.01461400288869]
}
]
},
{
name: "美国",
flag: mapFlag6,
children: [
{
value: 40,
level: 1,
name: "美国1",
text: "",
position: [-120.95330892639737, 46.048538366525065]
},
{
value: 40,
level: 5,
name: "美国2",
text: "",
position: [-117.06095626240344, 45.00594390295526]
},
{
value: 40,
level: 1,
name: "美国3",
text: "",
position: [-119.56318297497097, 42.08667940495981]
},
{
value: 40,
level: 1,
name: "美国4",
text: "",
position: [-119.56318297497097, 39.375933799678315]
},
{
value: 40,
level: 3,
name: "美国5",
text: "",
position: [-118.72910740411513, 37.49926376525268]
},
{
value: 40,
level: 3,
name: "美国6",
text: "",
position: [-115.67083031097702, 35.414074838113066]
},
{
value: 40,
level: 3,
name: "美国7",
text: "",
position: [-109.55427612470085, 35.20555594539911]
},
{
value: 40,
level: 3,
name: "美国8",
text: "",
position: [-104.2717975092805, 34.162961481829306]
},
{
value: 40,
level: 3,
name: "美国9",
text: "",
position: [-101.21352041614242, 32.49481034011762]
},
{
value: 40,
level: 3,
name: "美国10",
text: "",
position: [-98.71129370357488, 29.99258362755009]
},
{
value: 40,
level: 3,
name: "美国11",
text: "",
position: [-96.48709218129264, 31.24369698383387]
},
{
value: 40,
level: 5,
name: "美国12",
text: "",
position: [-92.31671432701341, 32.91184812554555]
},
{
value: 40,
level: 3,
name: "美国13",
text: "",
position: [-95.93104180072207, 38.124820443394576]
},
{
value: 40,
level: 5,
name: "美国14",
text: "",
position: [-100.93549522585714, 37.70778265796665]
},
{
value: 40,
level: 3,
name: "美国15",
text: "",
position: [-105.38389827042164, 45.00594390295528]
},
{
value: 40,
level: 1,
name: "美国16",
text: "",
position: [-92.87276470758401, 43.963349439385496]
},
{
value: 40,
level: 3,
name: "美国17",
text: "",
position: [-89.53646242416063, 41.04408494139004]
},
{
value: 40,
level: 1,
name: "美国18",
text: "",
position: [-81.75175709617281, 37.49926376525271]
},
{
value: 40,
level: 1,
name: "美国19",
text: "",
position: [-83.4199082378845, 35.622593730827056]
},
{
value: 40,
level: 1,
name: "美国20",
text: "",
position: [-88.70238685330483, 33.32888591097349]
},
{
value: 40,
level: 2,
name: "美国21",
text: "",
position: [-75.63520290989662, 42.29519829767381]
},
{
value: 40,
level: 2,
name: "美国22",
text: "",
position: [-74.80112733904078, 43.546311653957574]
},
{
value: 40,
level: 2,
name: "美国23",
text: "",
position: [-72.85495100704381, 44.17186833209945]
},
{
value: 40,
level: 2,
name: "美国24",
text: "",
position: [-69.79667391390572, 45.214462795669256]
}
]
}
];
const levelMapList = [
{},
{
name: "特别重大风险",
color: ["rgba(255, 77, 79, 1)", "rgba(255, 163, 158, 1)"]
},
{
name: "重大风险",
color: ["rgba(255, 169, 64, 1)", "rgba(255, 213, 145, 1)"]
},
{
name: "较大风险",
color: ["rgba(250, 219, 20, 1)", "rgba(255, 251, 143, 1)"]
},
{
name: "一般风险",
color: ["rgba(64, 150, 255, 1)", "rgba(145, 202, 255, 1)"]
},
{
name: "几乎无风险",
color: ["rgba(54, 207, 201, 1)", "rgba(135, 232, 222, 1)"]
}
];
const mapOption = getMapOption(mapData, levelMapList);
const securityExpressList = ref([ const securityExpressList = ref([
{ {
title: "美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实", title: "美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实",
...@@ -478,34 +1045,103 @@ function moreClick(n) { ...@@ -478,34 +1045,103 @@ function moreClick(n) {
.icon4 { .icon4 {
background-image: url("../assets/img/icon4.png"); background-image: url("../assets/img/icon4.png");
} }
.item { .panel1Header {
display: flex; display: flex;
flex-direction: row;
align-items: center; align-items: center;
margin-bottom: 7px; gap: 20px;
} padding-right: 27px;
.itemLevel { .item {
width: 40px; display: flex;
height: 40px; align-items: center;
border-radius: 20px; gap: 12px;
font-family: Microsoft YaHei; .itemIcon {
font-size: 12px; width: 12px;
font-weight: 400; height: 12px;
line-height: 14px; border-radius: 6px;
padding: 6px 4px; border-width: 2px;
text-align: center; border-style: solid;
margin-right: 5px; }
.itemName {
color: rgba(59, 65, 75, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
} }
.itemTime { .panel1Body {
color: rgba(132, 136, 142, 1); position: relative;
height: 100%;
.countryWrap {
position: absolute;
bottom: 8px;
left: 0;
right: 0;
width: 782px;
margin: 0 auto;
display: flex;
gap: 10px;
overflow-x: auto;
.item {
display: flex;
align-items: center;
height: 42px;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 21px;
background: rgba(255, 255, 255, 0.8);
color: rgba(5, 95, 194, 1);
font-size: 16px;
font-weight: 700;
line-height: 24px;
padding-left: 12px;
padding-right: 12px;
flex-shrink: 0;
.itemIcon {
width: 24px;
height: 24px;
margin-right: 10px;
}
.itemName {
}
.itemNumber {
}
}
}
} }
.itemFlag { .panel2 {
width: 20px; height: 100%;
height: 20px; display: flex;
background-size: cover; flex-direction: column;
background-repeat: no-repeat; .item {
margin-left: 10px; display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 7px;
.itemLevel {
width: 40px;
height: 40px;
border-radius: 20px;
font-family: Microsoft YaHei;
font-size: 12px;
font-weight: 400;
line-height: 14px;
padding: 6px 4px;
text-align: center;
margin-right: 5px;
}
.itemTime {
color: rgba(132, 136, 142, 1);
}
.itemFlag {
width: 20px;
height: 20px;
background-size: cover;
background-repeat: no-repeat;
margin-left: 10px;
}
}
} }
.itemTrends { .itemTrends {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
......
src/views/portals/portal1/index.vue 0 → 100644
浏览文件 @ 15963586
<template>
<div class="wrap">
<el-row>
<CardCustom
@more-click="moreClick"
title="风险信号"
:style="{ width: '986px', height: '540px' }"
title-background-color="rgba(206, 79, 81, 1)"
>
<template #icon>
<div class="icon icon1"></div>
</template>
<template #right>
<div class="panel1Header">
<div class="item" v-for="(item, index) in levelMapList.slice(1, levelMapList.length)" :key="index">
<div class="itemIcon" :style="{ backgroundColor: item.color[0], borderColor: item.color[1] }"></div>
<div class="itemName">
{{ item.name }}
</div>
</div>
</div>
</template>
<div class="panel1Body">
<Echarts :option="mapOption" height="100%" @chart-ready="echarsReady"></Echarts>
<div class="countryWrap">
<div class="item" v-for="(item, index) in mapData" :key="index">
<img :src="item.flag" alt="" class="itemIcon" />
<div class="itemName">{{ item.name }}</div>
<div class="itemNumber">{{ item.children.length }}个</div>
</div>
</div>
</div>
</CardCustom>
<CardCustom
@more-click="moreClick"
title="安全速递"
:style="{ width: '600px', height: '540px', marginLeft: '14px' }"
title-background-color="rgba(206, 79, 81, 1)"
>
<template #icon>
<div class="icon icon1"></div>
</template>
<div class="panel2">
<div class="item" v-for="(item, index) in securityExpressList" :key="index">
<span class="itemLevel" :class="levelMap[item.level].class">
{{ levelMap[item.level].text }}
</span>
<div class="itemText">{{ item.title }}</div>
<span class="itemTime">{{ item.time }}</span>
<span class="itemFlag" :style="{ backgroundImage: 'url(' + item.flag + ')' }"></span>
</div>
</div>
</CardCustom>
</el-row>
<el-card class="gap">
<el-row>
<PieProgress v-for="item in List" :data="item" />
</el-row>
</el-card>
<el-row class="gap">
<CardCustom
@more-click="moreClick"
title="科技动态"
:style="{ width: '792px', height: '360px' }"
title-background-color="rgba(10, 87, 166, 1)"
line-color="rgba(10, 87, 166, 1)"
>
<template #icon>
<div class="icon icon2"></div>
</template>
<div class="itemTrends" v-for="(item, index) in trendsList" :key="index">
<span class="itemTrendsIcon"> </span>
<div class="itemTrendsText">{{ item.title }}</div>
<span class="itemTrendsTime">{{ item.time }}</span>
</div>
</CardCustom>
<CardCustom
@more-click="moreClick"
title="科技政策"
:style="{ width: '792px', height: '360px', marginLeft: '16px' }"
title-background-color="rgba(10, 87, 166, 1)"
line-color="rgba(10, 87, 166, 1)"
>
<template #icon>
<div class="icon icon3"></div>
</template>
<div class="itemTrends" v-for="(item, index) in policyList" :key="index">
<span class="itemTrendsIcon"> </span>
<div class="itemTrendsText">{{ item.title }}</div>
<span class="itemTrendsTime">{{ item.time }}</span>
</div>
</CardCustom>
</el-row>
<div class="gap">
<el-row class="cardContainer">
<div class="itemCard">
<span class="itemCardIcon itemCardIcon1"></span>
<div class="itemCardTitle">业务协同</div>
</div>
<div class="itemCard">
<span class="itemCardIcon itemCardIcon2"></span>
<div class="itemCardTitle">专题研判</div>
</div>
<div class="itemCard">
<span class="itemCardIcon itemCardIcon3"></span>
<div class="itemCardTitle">数据直报</div>
</div>
<div class="itemCard">
<span class="itemCardIcon itemCardIcon4"></span>
<div class="itemCardTitle">专家库</div>
</div>
</el-row>
</div>
<el-row class="gap">
<CardCustom
@more-click="moreClick"
title="最新报告"
:style="{ width: '1600px', height: '360px' }"
title-background-color="rgba(10, 87, 166, 1)"
line-color="rgba(10, 87, 166, 1)"
>
<template #icon>
<div class="icon icon4"></div>
</template>
<template #right>
<div class="moreWrap">
<el-button text @click="moreClick" :style="{ marginLeft: '515px' }">
<span class="moreText">更多</span>
<el-icon :size="14"> <Plus /> </el-icon>
</el-button>
<el-button text @click="moreClick">
<span class="moreText">换一批</span>
<span class="shuaxinIcon"></span>
</el-button>
</div>
</template>
<el-row>
<div :style="{ width: '750px' }">
<div class="itemTrends" v-for="(item, index) in policyList" :key="index">
<span class="itemTrendsIcon"> </span>
<div class="itemTrendsText">{{ item.title }}</div>
<span class="itemTrendsTime">{{ item.time }}</span>
</div>
</div>
<div class="CardCustomRight">
<div class="itemCard1" v-for="item in 3">
<div class="itemCard1Img">
<div class="itemCard1Footer">国内外技术创新合作模式探索与实践</div>
</div>
</div>
</div>
</el-row>
</CardCustom>
</el-row>
<el-row class="gap spaceBetween">
<el-card v-for="(item, index) in catdList" class="itemCard2" :key="index">
<div class="itemCard2Line" :style="{ backgroundColor: item.bgColor }"></div>
<div class="itemCard2Container">
<div class="itemCard2BigTextWrap" :style="{ color: item.bgColor }">
{{ item.title }}
</div>
<div class="itemCard2TextWrap" v-for="(itemText, inde) in item.list" :key="index">
<div class="temCard2Title">{{ itemText.title }}</div>
<div class="temCard2Text">{{ itemText.text }}</div>
</div>
</div>
</el-card>
</el-row>
</div>
</template>
<script setup>
import CardCustom from "../components/CardCustom.vue";
import PieProgress from "../components/PieProgress.vue";
import Echarts from "@/components/Chart/index.vue";
import { getMapOption } from "../utils/charts";
import flag1 from "../assets/img/flag1.png";
import flag2 from "../assets/img/flag2.png";
import flag3 from "../assets/img/flag3.png";
import mapFlag1 from "../assets/img/mapFlag1.png";
import mapFlag2 from "../assets/img/mapFlag2.png";
import mapFlag3 from "../assets/img/mapFlag3.png";
import mapFlag4 from "../assets/img/mapFlag4.png";
import mapFlag5 from "../assets/img/mapFlag5.png";
import mapFlag6 from "../assets/img/mapFlag6.png";
import { ref } from "vue";
const levelMap = {
L1: { text: "特别重大", class: "level1" },
L2: { text: "重大风险", class: "level2" },
L3: { text: "一般风险", class: "level3" }
};
const echarsReady = mycharts => {
mycharts.on("click", function (params) {
// 1. 判断点击的是否是geo组件
if (params.componentType === "geo") {
console.log("点击了地图区域:", params.name); // 可获取地区名称[citation:1]
// 2. 获取鼠标点击的像素坐标
// 注意：高版本ECharts中，event可能挂载在不同位置，建议用 params.event 获取[citation:5]
const pixelPoint = [params.event.offsetX, params.event.offsetY];
// 3. 关键：将像素坐标转换为地理坐标 (经度, 纬度)
// 第一个参数 'geo' 指定坐标系，第二个参数是像素坐标数组[citation:9]
const geoCoords = mycharts.convertFromPixel("geo", pixelPoint);
console.log("对应的经纬度坐标:", geoCoords); // 输出格式如 [116.40, 39.90]
}
});
};
let mapData = [
{
name: "加拿大",
flag: mapFlag1,
children: [
{
value: 12,
level: 1,
name: "加拿大1",
text: "",
position: [-114.92625574436123, 60.97139707757613]
},
{
value: 12,
level: 1,
name: "加拿大2",
text: "",
position: [-122.66033268519817, 64.94019971826877]
},
{
value: 12,
level: 1,
name: "加拿大3",
text: "",
position: [-95.38753505172055, 65.24549222909128]
}
]
},
{
name: "英国",
flag: mapFlag2,
children: [
{
value: 12,
level: 1,
name: "英国1",
text: "",
position: [-1.5492917852477053, 52.764489718498275]
},
{
value: 12,
level: 1,
name: "英国2",
text: "",
position: [-2.698117404891553, 54.74388521180356]
},
{
value: 12,
level: 1,
name: "英国3",
text: "",
position: [-0.6799102352469557, 53.90555300287426]
},
{
value: 12,
level: 1,
name: "英国4",
text: "",
position: [0.46891538439689207, 52.83435073590905]
},
{
value: 12,
level: 1,
name: "英国5",
text: "",
position: [-3.722745660249581, 53.13708181135574]
},
{
value: 12,
level: 1,
name: "英国6",
text: "",
position: [-4.095337753107044, 51.99601852697975]
}
]
},
{
name: "欧盟",
flag: mapFlag3,
children: [
{
value: 12,
level: 1,
name: "欧盟1",
text: "",
position: [11.724105556570102, 48.58464196103773]
},
{
value: 12,
level: 1,
name: "欧盟2",
text: "",
position: [-0.7100210266255225, 44.00223755214452]
},
{
value: 12,
level: 1,
name: "欧盟3",
text: "",
position: [-0.7100210266255225, 45.12774038941654]
},
{
value: 12,
level: 1,
name: "欧盟4",
text: "",
position: [-0.8172117730323798, 47.459139123765716]
},
{
value: 12,
level: 5,
name: "欧盟5",
text: "",
position: [0.14750494462934682, 49.147393379673744]
},
{
value: 12,
level: 5,
name: "欧盟6",
text: "",
position: [2.3985106191733827, 50.3532892767509]
},
{
value: 12,
level: 5,
name: "欧盟7",
text: "",
position: [4.542325547310561, 49.870930917920035]
},
{
value: 12,
level: 5,
name: "欧盟8",
text: "",
position: [6.793331221854594, 48.906214200258304]
},
{
value: 12,
level: 1,
name: "欧盟9",
text: "",
position: [9.901862867653499, 45.36891956883197]
},
{
value: 13,
level: 3,
name: "欧盟10",
text: "",
position: [8.937146149991769, 46.97678076493485]
},
{
value: 13,
level: 3,
name: "欧盟11",
text: "",
position: [10.545007346094657, 49.468965618894316]
},
{
value: 13,
level: 3,
name: "欧盟12",
text: "",
position: [14.296683470334713, 49.468965618894316]
},
{
value: 13,
level: 3,
name: "欧盟13",
text: "",
position: [12.79601302063869, 47.217959944350284]
},
{
value: 13,
level: 3,
name: "欧盟14",
text: "",
position: [10.437816599687793, 48.58464196103773]
},
{
value: 13,
level: 3,
name: "欧盟15",
text: "",
position: [10.652198092501514, 51.719971293438356]
},
{
value: 13,
level: 3,
name: "欧盟16",
text: "",
position: [15.047018695182722, 49.79053785811488]
},
{
value: 13,
level: 3,
name: "欧盟17",
text: "",
position: [10.759388838908372, 53.40822554934638]
},
{
value: 13,
level: 3,
name: "欧盟18",
text: "",
position: [14.832637202369007, 48.42385584142743]
}
]
},
{
name: "韩国",
flag: mapFlag4,
children: [
{
value: 40,
level: 1,
name: "韩国1",
text: "",
position: [127.6671802588885, 35.6152933447435]
},
{
value: 40,
level: 1,
name: "韩国2",
text: "",
position: [127.6671802588885, 37.49854900651488]
},
{
value: 40,
level: 1,
name: "韩国3",
text: "",
position: [128.92268403340273, 37.14543856993275]
},
{
value: 40,
level: 3,
name: "韩国4",
text: "",
position: [128.92268403340273, 36.43921769676848]
},
{
value: 40,
level: 1,
name: "韩国5",
text: "",
position: [128.13799417433134, 35.49758986588279]
},
{
value: 40,
level: 3,
name: "韩国6",
text: "",
position: [127.10764322693156, 35.25464166802588]
}
]
},
{
name: "日本",
flag: mapFlag5,
children: [
{
value: 40,
level: 1,
name: "日本1",
text: "",
position: [142.8374359085882, 43.947802361746696]
},
{
value: 40,
level: 1,
name: "日本2",
text: "",
position: [141.18555679600132, 42.96971604508341]
},
{
value: 40,
level: 2,
name: "日本3",
text: "",
position: [141.09861579007568, 41.14395492064528]
},
{
value: 40,
level: 2,
name: "日本4",
text: "",
position: [141.09861579007568, 39.709428322872455]
},
{
value: 40,
level: 1,
name: "日本5",
text: "",
position: [140.05532371896817, 38.7965477606534]
},
{
value: 40,
level: 5,
name: "日本6",
text: "",
position: [139.96838271304256, 37.36202116288057]
},
{
value: 40,
level: 1,
name: "日本7",
text: "",
position: [138.0556805826788, 36.44914060066151]
},
{
value: 40,
level: 5,
name: "日本8",
text: "",
position: [136.49074247601754, 35.01461400288869]
}
]
},
{
name: "美国",
flag: mapFlag6,
children: [
{
value: 40,
level: 1,
name: "美国1",
text: "",
position: [-120.95330892639737, 46.048538366525065]
},
{
value: 40,
level: 5,
name: "美国2",
text: "",
position: [-117.06095626240344, 45.00594390295526]
},
{
value: 40,
level: 1,
name: "美国3",
text: "",
position: [-119.56318297497097, 42.08667940495981]
},
{
value: 40,
level: 1,
name: "美国4",
text: "",
position: [-119.56318297497097, 39.375933799678315]
},
{
value: 40,
level: 3,
name: "美国5",
text: "",
position: [-118.72910740411513, 37.49926376525268]
},
{
value: 40,
level: 3,
name: "美国6",
text: "",
position: [-115.67083031097702, 35.414074838113066]
},
{
value: 40,
level: 3,
name: "美国7",
text: "",
position: [-109.55427612470085, 35.20555594539911]
},
{
value: 40,
level: 3,
name: "美国8",
text: "",
position: [-104.2717975092805, 34.162961481829306]
},
{
value: 40,
level: 3,
name: "美国9",
text: "",
position: [-101.21352041614242, 32.49481034011762]
},
{
value: 40,
level: 3,
name: "美国10",
text: "",
position: [-98.71129370357488, 29.99258362755009]
},
{
value: 40,
level: 3,
name: "美国11",
text: "",
position: [-96.48709218129264, 31.24369698383387]
},
{
value: 40,
level: 5,
name: "美国12",
text: "",
position: [-92.31671432701341, 32.91184812554555]
},
{
value: 40,
level: 3,
name: "美国13",
text: "",
position: [-95.93104180072207, 38.124820443394576]
},
{
value: 40,
level: 5,
name: "美国14",
text: "",
position: [-100.93549522585714, 37.70778265796665]
},
{
value: 40,
level: 3,
name: "美国15",
text: "",
position: [-105.38389827042164, 45.00594390295528]
},
{
value: 40,
level: 1,
name: "美国16",
text: "",
position: [-92.87276470758401, 43.963349439385496]
},
{
value: 40,
level: 3,
name: "美国17",
text: "",
position: [-89.53646242416063, 41.04408494139004]
},
{
value: 40,
level: 1,
name: "美国18",
text: "",
position: [-81.75175709617281, 37.49926376525271]
},
{
value: 40,
level: 1,
name: "美国19",
text: "",
position: [-83.4199082378845, 35.622593730827056]
},
{
value: 40,
level: 1,
name: "美国20",
text: "",
position: [-88.70238685330483, 33.32888591097349]
},
{
value: 40,
level: 2,
name: "美国21",
text: "",
position: [-75.63520290989662, 42.29519829767381]
},
{
value: 40,
level: 2,
name: "美国22",
text: "",
position: [-74.80112733904078, 43.546311653957574]
},
{
value: 40,
level: 2,
name: "美国23",
text: "",
position: [-72.85495100704381, 44.17186833209945]
},
{
value: 40,
level: 2,
name: "美国24",
text: "",
position: [-69.79667391390572, 45.214462795669256]
}
]
}
];
const levelMapList = [
{},
{
name: "特别重大风险",
color: ["rgba(255, 77, 79, 1)", "rgba(255, 163, 158, 1)"]
},
{
name: "重大风险",
color: ["rgba(255, 169, 64, 1)", "rgba(255, 213, 145, 1)"]
},
{
name: "较大风险",
color: ["rgba(250, 219, 20, 1)", "rgba(255, 251, 143, 1)"]
},
{
name: "一般风险",
color: ["rgba(64, 150, 255, 1)", "rgba(145, 202, 255, 1)"]
},
{
name: "几乎无风险",
color: ["rgba(54, 207, 201, 1)", "rgba(135, 232, 222, 1)"]
}
];
const mapOption = getMapOption(mapData, levelMapList);
const securityExpressList = ref([
{
title: "美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实",
level: "L1",
time: "一天前",
flag: flag1
},
{
title: "美国加强对华AI芯片出口限制，考虑制...",
level: "L1",
time: "一天前",
flag: flag1
},
{
title: "日本出台《半导体材料出口管制令》...",
level: "L1",
time: "一天前",
flag: flag2
},
{
title: "日本对GAAFET技术、EUV光刻设备等...",
level: "L1",
time: "一天前",
flag: flag2
},
{
title: "欧盟签署协议限制高端AI芯片对华出口",
level: "L2",
time: "一天前",
flag: flag3
},
{
title: "欧盟第18轮制裁中首次将3家中资企业...",
level: "L2",
time: "一天前",
flag: flag3
},
{
title: "美国发布《保障信息和通信技术与服务...",
level: "L2",
time: "一天前",
flag: flag1
},
{
title: "日本将42家中国实体列入出口管制“...",
level: "L3",
time: "一天前",
flag: flag2
},
{
title: "美国政府放慢向英伟达和超威等芯片...",
level: "L3",
time: "一天前",
flag: flag1
},
{
title: "七国集团成员国就人工智能发表了以...",
level: "L3",
time: "一天前",
flag: flag3
}
]);
const trendsList = ref([
{
title: "韩研制用于存内计算的小型低功耗神经形态模块",
time: "08-16"
},
{
title: "中国科学院大学等在有机太阳能电池领域取得重要突破",
time: "08-16"
},
{
title: "德国于利希研究中心成功制造并实验验证全球首个二维半金属材料",
time: "08-16"
},
{
title: "浙江大学开发“女娲”AI模型，精准预测基因组调控序列",
time: "08-16"
},
{
title: "我国基于碳量子点材料制备出高效低成本有机太阳能电池",
time: "08-16"
},
{
title: "谷歌Gemini 2.5系列模型更新，实现高速推理与极致性价比",
time: "08-16"
},
{
title: "上海理工大学联合杜克大学在AI赋能仿生视觉技术领域实现突破",
time: "08-16"
}
]);
const policyList = ref([
{
title: "美国发布《2025财年国防授权法案》，拨款替换华为、中兴设备；禁止国防...",
time: "08-16"
},
{
title: "美国发布对华投资限制新规，限制美资在半导体、AI、量子技术等领域的对...",
time: "08-16"
},
{
title: "欧盟发布《网络弹性法案》（CRA），要求数字产品全生命周期安全合规，...",
time: "08-16"
},
{
title: "欧盟发布对外投资审查建议，要求成员国审查在半导体、AI、量子技术等领...",
time: "08-16"
},
{
title: "日本出台《半导体出口管制修正》加强对十余种半导体相关物项的出口管制...",
time: "08-16"
},
{
title: "日本拟出台“许可制”，限制外国留学生（特别提及中国）学习半导体、机...",
time: "08-16"
},
{
title: "日本通过并实施《经济安全保障推进法案》相关措施",
time: "08-16"
}
]);
const List = ref([
{
title: "当月/总数",
titleSub: "较上月+4",
progress: 90,
slope: "add",
total: 8,
current: 7
},
{
title: "人工智能",
titleSub: "较上月+4",
progress: 50,
slope: "add",
total: 26,
current: 3
},
{
title: "生物技术",
titleSub: "较上月+4",
progress: 60,
slope: "add",
total: 13,
current: 3
},
{
title: "航空航天",
titleSub: "较上月+4",
progress: 40,
slope: "add",
total: 15,
current: 3
},
{
title: "新一代信息技术",
titleSub: "较上月+4",
progress: 50,
slope: "add",
total: 12,
current: 3
},
{
title: "量子科技",
titleSub: "较上月+4",
progress: 20,
slope: "add",
total: 8,
current: 3
},
{
title: "新能源",
titleSub: "较上月+4",
progress: 90,
slope: "add",
total: 18,
current: 3
},
{
title: "集成电路",
titleSub: "较上月+4",
progress: 20,
slope: "add",
total: 16,
current: 3
},
{
title: "海洋",
titleSub: "较上月+4",
progress: 50,
slope: "add",
total: 8,
current: 3
},
{
title: "先进制造",
titleSub: "较上月+4",
progress: 50,
slope: "add",
total: 15,
current: 3
},
{
title: "新材料",
titleSub: "较上月+4",
progress: 50,
slope: "add",
total: 8,
current: 3
}
]);
const catdList = ref([
{
title: "数据资源管理",
bgColor: "rgba(206, 79, 81, 1)",
list: [
{
title: "数据资源目录",
text: "平台各类数据资源汇总导航"
},
{
title: "数据统计分析",
text: "查看资源发布量、各部门资源注册情况"
},
{
title: "信息空间",
text: "对数据资源的全生命周期进行管理"
}
]
},
{
title: "信息发布与管理",
bgColor: "rgba(19, 168, 168, 1)",
list: [
{
title: "信息编辑",
text: "信息的内容导入、格式编辑"
},
{
title: "信息审核",
text: "发布前内容自动审核、词库屏蔽"
},
{
title: "信息发布",
text: "提供点到点以及点到面的消息发送"
}
]
},
{
title: "应用支撑平台",
bgColor: "rgba(250, 140, 22, 1)",
list: [
{
title: "应用功能目录",
text: "快速访问和使用系统功能"
},
{
title: "应用工具目录",
text: "各项应用工具的使用方法和应用场景"
},
{
title: "应用功能与工具管理",
text: "实现功能及工具快捷访问配置入口"
}
]
},
{
title: "后台服务管理",
bgColor: "rgba(10, 87, 166, 1)",
list: [
{
title: "界面配置管理",
text: "支持界面布局、样式定制化修改"
},
{
title: "数据接口管理",
text: "实现数据接口的访问调用、权限控制等"
},
{
title: "系统配置管理",
text: "支持各分系统配置的定制与调整"
}
]
}
]);
function moreClick(n) {
alert(n);
}
</script>
<style lang="scss" scoped>
.wrap {
width: 1600px;
margin: 30px auto;
}
.gap {
margin-top: 24px;
}
.icon {
width: 24px;
height: 22px;
background-size: contain;
background-repeat: no-repeat;
}
.icon1 {
background-image: url("../assets/img/icon1.png");
}
.icon2 {
background-image: url("../assets/img/icon2.png");
}
.icon3 {
background-image: url("../assets/img/icon3.png");
}
.icon4 {
background-image: url("../assets/img/icon4.png");
}
.panel1Header {
display: flex;
align-items: center;
gap: 20px;
padding-right: 27px;
.item {
display: flex;
align-items: center;
gap: 12px;
.itemIcon {
width: 12px;
height: 12px;
border-radius: 6px;
border-width: 2px;
border-style: solid;
}
.itemName {
color: rgba(59, 65, 75, 1);
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
}
}
.panel1Body {
position: relative;
height: 100%;
.countryWrap {
position: absolute;
bottom: 8px;
left: 0;
right: 0;
width: 782px;
margin: 0 auto;
display: flex;
gap: 10px;
overflow-x: auto;
.item {
display: flex;
align-items: center;
height: 42px;
border: 1px solid rgba(231, 243, 255, 1);
border-radius: 21px;
background: rgba(255, 255, 255, 0.8);
color: rgba(5, 95, 194, 1);
font-size: 16px;
font-weight: 700;
line-height: 24px;
padding-left: 12px;
padding-right: 12px;
flex-shrink: 0;
.itemIcon {
width: 24px;
height: 24px;
margin-right: 10px;
}
.itemName {
}
.itemNumber {
}
}
}
}
.panel2 {
height: 100%;
display: flex;
flex-direction: column;
.item {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 7px;
.itemLevel {
width: 40px;
height: 40px;
border-radius: 20px;
font-family: Microsoft YaHei;
font-size: 12px;
font-weight: 400;
line-height: 14px;
padding: 6px 4px;
text-align: center;
margin-right: 5px;
}
.itemTime {
color: rgba(132, 136, 142, 1);
}
.itemFlag {
width: 20px;
height: 20px;
background-size: cover;
background-repeat: no-repeat;
margin-left: 10px;
}
}
}
.itemTrends {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 20px;
}
.itemTrendsIcon {
width: 4px;
height: 4px;
background-color: rgba(206, 79, 81, 1);
border-radius: 50%;
margin-right: 14px;
margin-left: 20px;
}
.itemTrendsText {
flex: 1;
}
.itemTrendsTime {
margin-right: 6px;
}
.level1 {
background: rgb(255, 241, 240);
color: rgb(245, 34, 45);
}
.level2 {
color: rgb(250, 140, 22);
background: rgb(255, 247, 230);
}
.level3 {
color: rgb(82, 196, 26);
background: rgb(246, 255, 237);
}
.itemText {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cardContainer {
justify-content: space-between;
}
.itemCardWrap {
width: 400px;
display: flex;
flex-direction: row;
justify-content: center;
}
.itemCard {
width: 388px;
height: 80px;
border-radius: 4px;
background-image: url("../assets/img/cardBg.png");
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
.itemCardIcon {
width: 30px;
height: 30px;
background-size: contain;
margin-right: 7px;
}
.itemCardIcon1 {
background-image: url("../assets/img/cardIcon1.png");
}
.itemCardIcon2 {
background-image: url("../assets/img/cardIcon2.png");
}
.itemCardIcon3 {
background-image: url("../assets/img/cardIcon3.png");
}
.itemCardIcon4 {
background-image: url("../assets/img/cardIcon4.png");
}
.itemCardTitle {
font-size: 24px;
font-weight: 700;
color: #ffffff;
}
}
.moreWrap {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
height: 100%;
padding-left: 10px;
padding-right: 10px;
flex: 1;
.moreText {
margin-right: 3px;
}
.shuaxinIcon {
width: 16px;
height: 16px;
background-image: url("../assets/img/shuaxin.png");
background-size: contain;
}
}
.CardCustomRight {
flex: 1;
padding-left: 50px;
padding-right: 50px;
margin-left: 30px;
display: flex;
justify-content: space-between;
}
.itemCard1 {
.itemCard1Img {
position: relative;
width: 204px;
height: 266px;
background-image: url("../assets/img/book.png");
background-size: contain;
.itemCard1Footer {
position: absolute;
left: 0;
bottom: 0;
width: 204px;
height: 64px;
padding: 10px;
background-color: #000;
color: #fff;
}
}
}
.spaceBetween {
justify-content: space-between;
}
.itemCard2 {
width: 388px;
height: 360px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
:deep(.el-card__body) {
padding-top: 0;
}
.itemCard2Line {
/* 矩形 214 */
width: 320px;
height: 4px;
background-color: rgba(206, 79, 81, 1);
position: absolute;
top: 0;
left: 34px;
}
.itemCard2Container {
width: 320px;
height: 360px;
.itemCard2BigTextWrap {
color: rgba(206, 79, 81, 1);
font-size: 24px;
font-weight: 700;
height: 83px;
display: flex;
flex-direction: column;
justify-content: center;
border-bottom: 1px solid #ddd;
}
.itemCard2TextWrap {
height: 83px;
display: flex;
flex-direction: column;
justify-content: center;
border-bottom: 1px solid #ddd;
}
.temCard2Title {
color: rgba(59, 65, 75, 1);
font-size: 20px;
font-weight: 700;
}
.temCard2Text {
color: rgba(95, 101, 108, 1);
font-size: 16px;
font-weight: 400;
}
}
}
</style>
src/views/portals/utils/charts.js
浏览文件 @ 15963586
import * as echarts from "echarts"; import * as echarts from "echarts";
const getPieChart = (number, current, total) => { import worldJson from '@/assets/json/world.json'
import _ from "lodash";
export function getPieChart(number, current, total) {
const option = { const option = {
// 图表标题可置于中心，模拟居中文字的一部分 // 图表标题可置于中心，模拟居中文字的一部分
title: { title: {
...@@ -67,12 +69,136 @@ const getPieChart = (number, current, total) => { ...@@ -67,12 +69,136 @@ const getPieChart = (number, current, total) => {
}; };
return option return option
} }
const setChart = (option, chartDom) => { export function setChart(option, chartDom) {
let chart = echarts.init(chartDom); let chart = echarts.init(chartDom);
chart.setOption(option); chart.setOption(option);
return chart; return chart;
}; };
export { export function getMapOption(data,levelMap) {
getPieChart, echarts.registerMap('world', worldJson);
setChart function convertData(data) {
let res = [];
_.each(data, (item1) => {
_.each(item1.children, (item) => {
res.push({
name: item1.name,
value: item.position.concat(item.level),
itemStyle: {
color: levelMap[item.level].color[0],
borderColor: levelMap[item.level].color[1]
}
});
})
})
return res;
}
let option = {
tooltip: {
show: false
},
// visualMap: {
// type: 'piecewise', // 可选：'continuous' (连续型) 或 'piecewise' (分段型)[citation:2]
// dimension: 2, // 指定使用数据的第3个维度（即上面数据中的等级值）进行映射
// min: 1, // 映射范围最小值
// max: 5, // 映射范围最大值
// // 定义分段区间和颜色
// show: false,
// pieces: [
// {
// min: 1,
// max: 1,
// label: '特别重大风险',
// color: 'rgba(255, 77, 79, 1)'
// }, // 绿色
// {
// min: 2,
// max: 2,
// label: '重大风险',
// color: 'rgba(255, 169, 64, 1)'
// },
// {
// min: 3,
// max: 3,
// label: '较大风险',
// color: 'rgba(250, 219, 20, 1)'
// },
// {
// min: 4,
// max: 4,
// label: '一般风险',
// color: 'rgba(64, 150, 255, 1)'
// },
// {
// min: 5,
// max: 5,
// label: '几乎无风险',
// color: 'rgba(54, 207, 201, 1)'
// },
// ],
// orient: 'horizontal',
// left: 'center',
// top: 0
// },
geo: {
map: 'world',
roam: true,
// 地图尺寸为容器宽高较小值的80%
zoom: 1.5,
center: [31.614149450443932, 20.978078159827206],
// scaleLimit:{
// max:'1.2',
// min:'0.7'
// },
label: {
normal: {
show: false,
textStyle: {
color: 'rgba(0,0,0,0.6)'
}
}
},
itemStyle: {
areaColor: 'rgba(231, 243, 255, 1)', // 设置所有区域的默认填充色[citation:8]
borderColor: 'rgb(5, 95, 194)', // 设置边界线颜色[citation:8]
borderWidth: 1 // 设置边界线宽度[citation:8]
},
},
// backgroundColor: 'rgba(0,51,102, 1)',
series: [{
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: 10,
symbolRotate: 0,
symbolOffset: ['50%', '-100%'],
tooltip: {
show: true
},
label: {
normal: {
formatter: '{a}',
position: 'top',
show: false,
textStyle: {
color: '#000000',
fontSize: 16
}
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
borderWidth: 4,
borderColor: 'rgba(255, 163, 158, 1)',
color: 'rgba(255, 77, 79, 1)'
}
}
}]
};
return option
} }
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论