Skip to content

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

update

上级 5e3760b4
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 143 行增加 和 77 行删除
src/views/ZMOverView/components/fourSuppress/components/allElement/uitls/worldCloudChart.js 0 → 100644
浏览文件 @ 4fe8aaf0
const getWordCloudChart = (data) => {
const option = {
grid: {
left: 0,
top: 0,
right: 0,
bottom: 0,
},
series: [
{
type: "wordCloud",
width: '80%',
height: '80%',
shape: "rect", //
// 其他形状你可以使用形状路径
// 或者自定义路径
// shape: 'circle' // 圆形（默认）
// shape: 'rect' // 矩形
// shape: 'roundRect' // 圆角矩形
// shape: 'triangle' // 三角形
// shape: 'diamond' // 菱形
// shape: 'pentagon' // 五边形
// shape: 'star' // 星形
// shape: 'cardioid' // 心形
gridSize: 15, // 网格大小，影响词间距。
sizeRange: [10, 30], // 定义词云中文字大小的范围
rotationRange: [0, 0],
rotationStep: 15,
drawOutOfBound: false, // 是否超出画布
// 字体
textStyle: {
// normal: {
// color: function () {
// return 'rgb(' + [
// Math.round(Math.random() * 160),
// Math.round(Math.random() * 160),
// Math.round(Math.random() * 160)
// ].join(',') + ')';
// }
// },
color: function () {
let colors = [
"rgba(189, 33, 33, 1)",
"rgba(232, 151, 21, 1)",
"rgba(220, 190, 68, 1)",
"rgba(96, 58, 186, 1)",
"rgba(32, 121, 69, 1)",
"rgba(22, 119, 255, 1)",
];
return colors[parseInt(Math.random() * colors.length)];
},
emphasis: {
shadowBlur: 5,
shadowColor: "#333",
},
},
// 设置词云数据
data: data,
},
],
}
return option
}
export default getWordCloudChart
\ No newline at end of file
src/views/ZMOverView/components/fourSuppress/index.vue
浏览文件 @ 4fe8aaf0
...@@ -2,18 +2,18 @@ ...@@ -2,18 +2,18 @@
<template> <template>
<div class="content-wrapper"> <div class="content-wrapper">
<div class="main-nav"> <div class="main-nav">
<div <div
v-for="item in navList" v-for="item in navList"
:key="item.name" :key="item.name"
class="nav-item" class="nav-item"
:class="{ active: activeNav === item.name }" :class="{ active: activeNav === item.name }"
@click="handleNavClick(item.name)" @click="handleNavClick(item.name)"
> >
<div class="item-content"> <div class="item-content">
<img v-if="activeNav === item.name" :src="right" class="active-icon" alt="" /> <img v-if="activeNav === item.name" :src="right" class="active-icon" alt="" />
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</div> </div>
<img v-if="activeNav === item.name" :src="background" class="active-bg" alt="" /> <img v-if="activeNav === item.name" :src="background" class="active-bg" alt="" />
</div> </div>
</div> </div>
<!-- 切换不同的组件 --> <!-- 切换不同的组件 -->
...@@ -35,88 +35,85 @@ import AddDomain from "./components/addDomain/index.vue"; ...@@ -35,88 +35,85 @@ import AddDomain from "./components/addDomain/index.vue";
import AllUnion from "./components/allUnion/index.vue"; import AllUnion from "./components/allUnion/index.vue";
import AllElement from "./components/allElement/index.vue"; import AllElement from "./components/allElement/index.vue";
const navList = ref([ const navList = ref([{ name: "全政府" }, { name: "全领域" }, { name: "全联盟" }, { name: "全要素" }]);
{ name: "全政府" },
{ name: "全领域" },
{ name: "全联盟" },
{ name: "全要素" }
]);
const activeNav = ref("全政府"); const activeNav = ref("全政府");
const handleNavClick = (name) => { const handleNavClick = name => {
activeNav.value = name; activeNav.value = name;
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.content-wrapper { .content-wrapper {
width: 1601px; // width: 1601px;
height: 2203px; width: 1666px;
margin: 0 auto; height: 2203px;
.main-nav { margin: 0 auto;
width: 100%; .main-nav {
height: 55px; width: 1601px;
height: 55px;
margin: 0 auto;
padding: 4px 5px; padding: 4px 5px;
display: flex; display: flex;
align-items: center; align-items: center;
border-radius: 10px; border-radius: 10px;
background-color: rgba(255, 255, 255, 0.65); background-color: rgba(255, 255, 255, 0.65);
box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1); box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
box-sizing: border-box; box-sizing: border-box;
gap: 8px; gap: 8px;
margin-bottom: 16px; margin-bottom: 16px;
.nav-item { .nav-item {
flex: 1; flex: 1;
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
// transition: all 0.3s; // transition: all 0.3s;
.item-content { .item-content {
display: flex; display: flex;
align-items: center; align-items: center;
z-index: 1; z-index: 1;
.active-icon { .active-icon {
width: 18px; width: 18px;
height: 18px; height: 18px;
margin-right: 8px; margin-right: 8px;
} }
span { span {
font-family: 'YouSheBiaoTiHei'; font-family: "YouSheBiaoTiHei";
font-size: 24px; font-size: 24px;
font-weight: 400; font-weight: 400;
line-height: 31px; line-height: 31px;
color: rgb(59, 65, 75); color: rgb(59, 65, 75);
} }
} }
.active-bg { .active-bg {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 400px; width: 400px;
height: 60px; height: 60px;
z-index: 0; z-index: 0;
} }
&.active { &.active {
background-color: rgba(246, 250, 255, 1); background-color: rgba(246, 250, 255, 1);
border: 1px solid rgba(174, 214, 255, 1); border: 1px solid rgba(174, 214, 255, 1);
border-radius: 10px; border-radius: 10px;
span { span {
color: rgb(5, 95, 194); color: rgb(5, 95, 194);
} }
} }
} }
} }
} }
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论