实现简易的人才画像功能
yzw
parent
c866c076f6
commit
871697de7b
|
|
@ -17,6 +17,7 @@
|
|||
"axios": "0.18.1",
|
||||
"core-js": "3.6.5",
|
||||
"echarts": "^5.3.3",
|
||||
"echarts-wordcloud": "^2.0.0",
|
||||
"element-ui": "^2.13.2",
|
||||
"js-cookie": "2.2.0",
|
||||
"jsmind": "^0.4.8",
|
||||
|
|
|
|||
|
|
@ -6,4 +6,12 @@ export function getPersonData(params) {
|
|||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
export function getPersonTag(params) {
|
||||
return request({
|
||||
url: '/person/person_tag',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
|
@ -152,7 +152,7 @@ export const constantRoutes = [
|
|||
{
|
||||
path: '/priority',
|
||||
component: Layout,
|
||||
|
||||
|
||||
children: [{
|
||||
path: 'priority',
|
||||
name: 'priority',
|
||||
|
|
@ -178,6 +178,7 @@ export const constantRoutes = [
|
|||
path: 'show',
|
||||
name: 'JobShow',
|
||||
component: () => import('@/views/job/show'),
|
||||
// component: () => import('@/views/job/job'),
|
||||
meta: { title: '岗位总览' }
|
||||
},
|
||||
{
|
||||
|
|
@ -192,30 +193,47 @@ export const constantRoutes = [
|
|||
{
|
||||
path: '/person',
|
||||
component: Layout,
|
||||
children: [{
|
||||
path: 'person',
|
||||
name: 'person',
|
||||
component: () => import('@/views/person/person'),
|
||||
meta: {
|
||||
title: '人员',
|
||||
icon: '人员'
|
||||
}
|
||||
}]
|
||||
redirect: '/person/person',
|
||||
name: 'Person',
|
||||
meta: {
|
||||
title: '人员',
|
||||
icon: '人员'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'person',
|
||||
name: 'PersonAll',
|
||||
component: () => import('@/views/person/person'),
|
||||
meta: { title: '人员' }
|
||||
},
|
||||
{
|
||||
path: 'person_pic_test',
|
||||
name: 'PersonPicTest',
|
||||
component: () => import('@/views/person/person_pic'),
|
||||
meta: { title: '人员画像' }
|
||||
},
|
||||
{
|
||||
path: 'person_review',
|
||||
name: 'PersonReview',
|
||||
component: () => import('@/views/person/person_review'),
|
||||
meta: { title: '人员盘点' }
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: '/person_review',
|
||||
component: Layout,
|
||||
children: [{
|
||||
path: 'person_review',
|
||||
name: 'person_review',
|
||||
component: () => import('@/views/person_review/person_review'),
|
||||
meta: {
|
||||
title: '人才盘点',
|
||||
icon: '人员'
|
||||
}
|
||||
}]
|
||||
},
|
||||
// {
|
||||
// path: '/person_review',
|
||||
// component: Layout,
|
||||
// children: [{
|
||||
// path: 'person_review',
|
||||
// name: 'person_review',
|
||||
// component: () => import('@/views/person_review/person_review'),
|
||||
// meta: {
|
||||
// title: '人才盘点',
|
||||
// icon: '人员'
|
||||
// }
|
||||
// }]
|
||||
// },
|
||||
|
||||
{
|
||||
path: '/event',
|
||||
|
|
|
|||
|
|
@ -21,9 +21,9 @@ export default {
|
|||
var config = {
|
||||
containerId: "viz",
|
||||
neo4j: {
|
||||
serverUrl: "bolt://localhost:7687",
|
||||
serverUser: "neo4j",
|
||||
serverPassword: "neo4j123",
|
||||
serverUrl: "bolt://222.20.95.239:7687",
|
||||
serverUser: "yzw",
|
||||
serverPassword: "yzw1234567",
|
||||
},
|
||||
labels: {
|
||||
Character: {
|
||||
|
|
@ -37,7 +37,7 @@ export default {
|
|||
value: "weight",
|
||||
},
|
||||
},
|
||||
initialCypher: "MATCH (n)-[r:INTERACTS]->(m) RETURN n,r,m limit 100",
|
||||
initialCypher: "MATCH (n:Person) RETURN n LIMIT 25",
|
||||
};
|
||||
this.neoViz = new NeoVis(config);
|
||||
this.neoViz.render();
|
||||
|
|
|
|||
|
|
@ -150,6 +150,7 @@ export default {
|
|||
console.log(err);
|
||||
this.loading = false;
|
||||
});
|
||||
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
<template>
|
||||
<div class="content-body">
|
||||
<div class="content-side">培训推荐</div>
|
||||
|
||||
<div class="content-main">
|
||||
<div>
|
||||
<div class="pp-block1-left">
|
||||
<div>
|
||||
<div class="pp-block1-left" id="wordcloud_chart">
|
||||
<!-- <div>
|
||||
{{ personData["最高专业技术资格名称"] }}
|
||||
{{ personData["最高专业技术资格等级"] }}
|
||||
</div>
|
||||
|
|
@ -12,7 +13,8 @@
|
|||
{{ personData["最高职业技能等级名称"] }}
|
||||
{{ personData["最高职业技能等级级别"] }}
|
||||
</div>
|
||||
<div>待修改</div>
|
||||
<div>待修改</div> -->
|
||||
关键词云
|
||||
</div>
|
||||
<div class="pp-block1-right" id="radar_chart">人才评价</div>
|
||||
</div>
|
||||
|
|
@ -33,15 +35,39 @@
|
|||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import "echarts-wordcloud";
|
||||
|
||||
export default {
|
||||
props: ["data"],
|
||||
data() {
|
||||
return {
|
||||
personData: this.data,
|
||||
wordcloudData: [
|
||||
{ name: "女", value: 1 },
|
||||
{ name: "三连优秀", value: 90 },
|
||||
{ name: "学士", value: 40 },
|
||||
{ name: "大学", value: 40 },
|
||||
{ name: "90后", value: 1 },
|
||||
{ name: "兴趣盎然", value: 24 },
|
||||
{ name: "初出茅庐", value: 10 },
|
||||
{ name: "中共党员", value: 25 },
|
||||
{ name: "本省人", value: 1 },
|
||||
{ name: "三次优秀", value: 90 },
|
||||
{ name: "文思敏捷", value: 70 },
|
||||
{ name: "新党员", value: 25 },
|
||||
{ name: "运动达人", value: 24 },
|
||||
{ name: "初来乍到", value: 20 },
|
||||
{ name: "四级电工", value: 80 },
|
||||
{ name: "优秀员工", value: 90 },
|
||||
{ name: "积极踊跃", value: 8 },
|
||||
{ name: "创新达人", value: 90 },
|
||||
{ name: "初级助理工程师", value: 80 },
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.showRadarChart();
|
||||
this.showWordCloud();
|
||||
},
|
||||
methods: {
|
||||
showRadarChart() {
|
||||
|
|
@ -51,34 +77,34 @@ export default {
|
|||
|
||||
option = {
|
||||
title: {
|
||||
text: "Basic Radar Chart",
|
||||
text: "",
|
||||
},
|
||||
legend: {
|
||||
data: ["Allocated Budget", "Actual Spending"],
|
||||
data: ["个人", "全员平均"],
|
||||
},
|
||||
radar: {
|
||||
shape: 'circle',
|
||||
shape: "circle",
|
||||
indicator: [
|
||||
{ name: "Sales", max: 6500 },
|
||||
{ name: "Administration", max: 16000 },
|
||||
{ name: "Information Technology", max: 30000 },
|
||||
{ name: "Customer Support", max: 38000 },
|
||||
{ name: "Development", max: 52000 },
|
||||
{ name: "Marketing", max: 25000 },
|
||||
// { name: "工作态度", max: 100 },
|
||||
{ name: "工作能力", max: 100 },
|
||||
{ name: "工作经验", max: 100 },
|
||||
{ name: "个人品质", max: 100 },
|
||||
{ name: "团队合作", max: 100 },
|
||||
{ name: "绩效", max: 100 },
|
||||
],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "Budget vs spending",
|
||||
name: "员工表现雷达图",
|
||||
type: "radar",
|
||||
data: [
|
||||
{
|
||||
value: [4200, 3000, 20000, 35000, 50000, 18000],
|
||||
name: "Allocated Budget",
|
||||
value: [49, 45, 34, 20, 78],
|
||||
name: "个人",
|
||||
},
|
||||
{
|
||||
value: [5000, 14000, 28000, 26000, 42000, 21000],
|
||||
name: "Actual Spending",
|
||||
value: [33, 73, 21, 22, 57],
|
||||
name: "全员平均",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -86,6 +112,52 @@ export default {
|
|||
};
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
showWordCloud() {
|
||||
let myChart = echarts.init(document.getElementById("wordcloud_chart"));
|
||||
myChart.setOption({
|
||||
series: [
|
||||
{
|
||||
type: "wordCloud",
|
||||
shape: "circle", // 形状
|
||||
left: "center", // X轴偏移量
|
||||
top: "center", // Y轴偏移量
|
||||
width: "100%", // canvas宽度大小
|
||||
height: "100%", // canvas高度大小
|
||||
sizeRange: [12, 50], // 词典字体大小范围配置
|
||||
rotationRange: [0, 0], // 词典字体旋转角度配置，默认不旋转
|
||||
gridSize: 25, // 词典字体间距配置
|
||||
layoutAnimation: true, // 为false词典过度会阻塞
|
||||
drawOutOfBound: false,
|
||||
textStyle: {
|
||||
fontFamily: "sans-serif",
|
||||
fontWeight: "bold",
|
||||
// Color can be a callback function or a color string
|
||||
color: function () {
|
||||
// Random color
|
||||
return (
|
||||
"rgb(" +
|
||||
[
|
||||
Math.round(Math.random() * 160),
|
||||
Math.round(Math.random() * 160),
|
||||
Math.round(Math.random() * 160),
|
||||
].join(",") +
|
||||
")"
|
||||
);
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
focus: "self",
|
||||
textStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: "#333",
|
||||
},
|
||||
},
|
||||
// 渲染词典数据
|
||||
data: this.wordcloudData,
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,186 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="search-bar">
|
||||
<el-row type="flex" justify="space-between" >
|
||||
<el-col :span="18"
|
||||
><el-input
|
||||
placeholder="请输入内容"
|
||||
v-model="query"
|
||||
clearable
|
||||
></el-input
|
||||
></el-col>
|
||||
<el-col :span="4"
|
||||
><el-button type="primary" icon="el-icon-search"
|
||||
@click="searchPersonPic"
|
||||
>搜索</el-button
|
||||
></el-col
|
||||
>
|
||||
</el-row>
|
||||
</div>
|
||||
<div id="wordcloud_chart" class="pic"></div>
|
||||
<div id="radar_chart" class="pic"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import "echarts-wordcloud";
|
||||
import * as personApi from "@/api/person";
|
||||
export default {
|
||||
name: "person_review",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
query: '',
|
||||
wordcloudData: [
|
||||
{ name: "女", value: 1, rarity: 0.01},
|
||||
{ name: "三连优秀", value: 90 },
|
||||
{ name: "学士", value: 40 },
|
||||
{ name: "大学", value: 40 },
|
||||
{ name: "90后", value: 1 },
|
||||
{ name: "兴趣盎然", value: 24 },
|
||||
{ name: "初出茅庐", value: 10 },
|
||||
{ name: "中共党员", value: 25 },
|
||||
{ name: "本省人", value: 1 },
|
||||
{ name: "三次优秀", value: 90 },
|
||||
{ name: "文思敏捷", value: 70 },
|
||||
{ name: "新党员", value: 25 },
|
||||
{ name: "运动达人", value: 24 },
|
||||
{ name: "初来乍到", value: 20 },
|
||||
{ name: "四级电工", value: 80 },
|
||||
{ name: "优秀员工", value: 90 },
|
||||
{ name: "积极踊跃", value: 8 },
|
||||
{ name: "创新达人", value: 90 },
|
||||
{ name: "初级助理工程师", value: 80 },
|
||||
],
|
||||
radarData: [
|
||||
{
|
||||
value: [49, 45, 34, 20, 78],
|
||||
name: "个人",
|
||||
},
|
||||
{
|
||||
value: [33, 73, 21, 22, 57],
|
||||
name: "全员平均",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.showWordCloud();
|
||||
this.showRadarChart();
|
||||
},
|
||||
methods: {
|
||||
showRadarChart() {
|
||||
let chartDom = document.getElementById("radar_chart");
|
||||
let myChart = echarts.init(chartDom);
|
||||
let option;
|
||||
option = {
|
||||
title: {
|
||||
text: "员工表现雷达图",
|
||||
},
|
||||
legend: {
|
||||
data: ["个人", "全员平均"],
|
||||
},
|
||||
radar: {
|
||||
shape: "circle",
|
||||
indicator: [
|
||||
// { name: "工作态度", max: 100 },
|
||||
{ name: "工作能力", max: 100 },
|
||||
{ name: "工作经验", max: 100 },
|
||||
{ name: "个人品质", max: 100 },
|
||||
{ name: "团队合作", max: 100 },
|
||||
{ name: "绩效", max: 100 },
|
||||
],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "员工表现雷达图",
|
||||
type: "radar",
|
||||
data: this.radarData,
|
||||
},
|
||||
],
|
||||
};
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
showWordCloud() {
|
||||
let myChart = echarts.init(document.getElementById("wordcloud_chart"));
|
||||
myChart.setOption({
|
||||
title: {
|
||||
text: "员工标签词云",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "wordCloud",
|
||||
shape: "circle", // 形状
|
||||
left: "center", // X轴偏移量
|
||||
top: "center", // Y轴偏移量
|
||||
width: "100%", // canvas宽度大小
|
||||
height: "100%", // canvas高度大小
|
||||
sizeRange: [12, 50], // 词典字体大小范围配置
|
||||
rotationRange: [0, 0], // 词典字体旋转角度配置，默认不旋转
|
||||
gridSize: 25, // 词典字体间距配置
|
||||
layoutAnimation: true, // 为false词典过度会阻塞
|
||||
drawOutOfBound: false,
|
||||
textStyle: {
|
||||
fontFamily: "sans-serif",
|
||||
fontWeight: "bold",
|
||||
// Color can be a callback function or a color string
|
||||
color: function () {
|
||||
// Random color
|
||||
return (
|
||||
"rgb(" +
|
||||
[
|
||||
Math.round(Math.random() * 160),
|
||||
Math.round(Math.random() * 160),
|
||||
Math.round(Math.random() * 160),
|
||||
].join(",") +
|
||||
")"
|
||||
);
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
focus: "self",
|
||||
textStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: "#333",
|
||||
},
|
||||
},
|
||||
// 渲染词典数据
|
||||
data: this.wordcloudData,
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
searchPersonPic() {
|
||||
personApi.getPersonTag({
|
||||
"query": this.query
|
||||
}).then(
|
||||
(res) => {
|
||||
this.wordcloudData = res.data.wordcloud;
|
||||
this.radarData = res.data.radar;
|
||||
this.showWordCloud();
|
||||
this.showRadarChart();
|
||||
},
|
||||
(err) => {
|
||||
console.log('err:', err)
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.pic {
|
||||
height: 600px;
|
||||
width: 600px;
|
||||
border: 1px solid black;
|
||||
margin: 10px auto 20px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
width: 600px;
|
||||
margin: 20px auto 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,411 @@
|
|||
<template>
|
||||
<div>
|
||||
<div id="pic1" class="pic"></div>
|
||||
<div id="pic2" class="pic"></div>
|
||||
<div id="pic3" class="pic"></div>
|
||||
<div id="pic4" class="pic"></div>
|
||||
<div id="pic5" class="pic"></div>
|
||||
<div id="pic6" class="pic"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import "echarts-wordcloud";
|
||||
export default {
|
||||
name: "person_review",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
genderData: [
|
||||
{ value: 588, name: "男" },
|
||||
{ value: 177, name: "女" },
|
||||
],
|
||||
ageData: {
|
||||
xAxis: [
|
||||
"21~25",
|
||||
"26~30",
|
||||
"31~35",
|
||||
"36~40",
|
||||
"41~45",
|
||||
"46~50",
|
||||
"51~55",
|
||||
"56~60",
|
||||
"61~65",
|
||||
],
|
||||
yAxis: [58, 170, 39, 23, 68, 109, 180, 116, 2],
|
||||
},
|
||||
nationData: [
|
||||
{ value: 423, name: "汉族" },
|
||||
{ value: 265, name: "土家族" },
|
||||
{ value: 62, name: "苗族" },
|
||||
{ value: 2, name: "白族" },
|
||||
{ value: 2, name: "回族" },
|
||||
{ value: 2, name: "满族" },
|
||||
{ value: 2, name: "畲族" },
|
||||
{ value: 2, name: "侗族" },
|
||||
{ value: 2, name: "蒙古族" },
|
||||
{ value: 1, name: "藏族" },
|
||||
{ value: 1, name: "瑶族" },
|
||||
{ value: 1, name: "壮族" },
|
||||
],
|
||||
politicsData: [
|
||||
{ value: 314, name: "群众" },
|
||||
{ value: 243, name: "中共党员" },
|
||||
{ value: 199, name: "共青团员" },
|
||||
{ value: 9, name: "中共预备党员" },
|
||||
],
|
||||
partyAgeData: {
|
||||
xAxis: [
|
||||
"1~5",
|
||||
"6~10",
|
||||
"11~15",
|
||||
"16~20",
|
||||
"21~25",
|
||||
"26~30",
|
||||
"31~35",
|
||||
"36~40",
|
||||
"41~100",
|
||||
],
|
||||
yAxis: [52, 35, 27, 41, 53, 34, 6, 5, 0],
|
||||
},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.showGenderPie();
|
||||
this.showAgeBar();
|
||||
this.showNationPie();
|
||||
this.showPoliticsPie();
|
||||
this.showPartyAgeBar();
|
||||
this.showWordCloud();
|
||||
},
|
||||
methods: {
|
||||
showGenderPie() {
|
||||
let chartDom = document.getElementById("pic1");
|
||||
let myChart = echarts.init(chartDom);
|
||||
let option;
|
||||
|
||||
option = {
|
||||
title: {
|
||||
text: "恩施卷烟厂员工性别分布饼图",
|
||||
// subtext: "",
|
||||
left: "center",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
left: "left",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// name: "Access From",
|
||||
type: "pie",
|
||||
radius: "50%",
|
||||
data: this.genderData,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
showAgeBar() {
|
||||
let chartDom = document.getElementById("pic2");
|
||||
let myChart = echarts.init(chartDom);
|
||||
let option;
|
||||
|
||||
option = {
|
||||
title: {
|
||||
text: "恩施卷烟厂员工年龄分布直方图",
|
||||
left: "center",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: this.ageData.xAxis,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: this.ageData.yAxis,
|
||||
type: "bar",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
showNationPie() {
|
||||
let chartDom = document.getElementById("pic3");
|
||||
let myChart = echarts.init(chartDom);
|
||||
let option;
|
||||
|
||||
option = {
|
||||
title: {
|
||||
text: "恩施卷烟厂员工民族分布饼图",
|
||||
// subtext: "",
|
||||
left: "center",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
left: "left",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// name: "Access From",
|
||||
type: "pie",
|
||||
radius: "50%",
|
||||
data: this.nationData,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
showPoliticsPie() {
|
||||
let chartDom = document.getElementById("pic4");
|
||||
let myChart = echarts.init(chartDom);
|
||||
let option;
|
||||
|
||||
option = {
|
||||
title: {
|
||||
text: "恩施卷烟厂员工民族分布饼图",
|
||||
// subtext: "",
|
||||
left: "center",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
legend: {
|
||||
orient: "vertical",
|
||||
left: "left",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
// name: "Access From",
|
||||
type: "pie",
|
||||
radius: "50%",
|
||||
data: this.politicsData,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
showPartyAgeBar() {
|
||||
let chartDom = document.getElementById("pic5");
|
||||
let myChart = echarts.init(chartDom);
|
||||
let option;
|
||||
|
||||
option = {
|
||||
title: {
|
||||
text: "恩施卷烟厂员工党员年龄分布直方图",
|
||||
left: "center",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: this.partyAgeData.xAxis,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: this.partyAgeData.yAxis,
|
||||
type: "bar",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
showWordCloud() {
|
||||
const chart = echarts.init(document.getElementById("pic6"));
|
||||
|
||||
const originData = [
|
||||
{ name: "基因编辑", value: 1228 },
|
||||
{ name: "婴儿", value: 981 },
|
||||
{ name: "贺建奎", value: 363 },
|
||||
{ name: "首例", value: 361 },
|
||||
{ name: "免疫", value: 291 },
|
||||
{ name: "艾滋病", value: 289 },
|
||||
{ name: "伦理", value: 211 },
|
||||
{ name: "回应", value: 208 },
|
||||
{ name: "世界", value: 177 },
|
||||
{ name: "科学家", value: 135 },
|
||||
{ name: "深圳", value: 129 },
|
||||
{ name: "谴责", value: 107 },
|
||||
{ name: "南科大", value: 96 },
|
||||
{ name: "科技", value: 86 },
|
||||
{ name: "人类", value: 80 },
|
||||
{ name: "和美医院", value: 76 },
|
||||
{ name: "试验", value: 75 },
|
||||
{ name: "项目", value: 69 },
|
||||
{ name: "专家", value: 66 },
|
||||
{ name: "审查", value: 62 },
|
||||
{ name: "联合", value: 51 },
|
||||
{ name: "科创委", value: 49 },
|
||||
{ name: "资助", value: 44 },
|
||||
{ name: "委员会", value: 43 },
|
||||
{ name: "技术", value: 41 },
|
||||
{ name: "大学", value: 40 },
|
||||
{ name: "峰会", value: 38 },
|
||||
{ name: "实验", value: 38 },
|
||||
{ name: "医学", value: 36 },
|
||||
{ name: "背后", value: 36 },
|
||||
{ name: "监管", value: 34 },
|
||||
{ name: "医疗", value: 33 },
|
||||
{ name: "莆田", value: 31 },
|
||||
{ name: "临床", value: 31 },
|
||||
{ name: "团队", value: 30 },
|
||||
{ name: "疯狂", value: 29 },
|
||||
{ name: "科学", value: 29 },
|
||||
{ name: "国际", value: 29 },
|
||||
{ name: "创新", value: 28 },
|
||||
{ name: "停薪留职", value: 27 },
|
||||
{ name: "胚胎", value: 26 },
|
||||
{ name: "双胞胎", value: 25 },
|
||||
{ name: "科研", value: 22 },
|
||||
{ name: "科学界", value: 21 },
|
||||
{ name: "人体", value: 21 },
|
||||
{ name: "生物学", value: 20 },
|
||||
{ name: "涉嫌", value: 20 },
|
||||
{ name: "细胞", value: 19 },
|
||||
{ name: "经费", value: 19 },
|
||||
{ name: "卫计委", value: 18 },
|
||||
{ name: "属实", value: 18 },
|
||||
{ name: "签字", value: 18 },
|
||||
{ name: "官方", value: 18 },
|
||||
{ name: "学会", value: 18 },
|
||||
{ name: "疑问", value: 17 },
|
||||
{ name: "学术", value: 17 },
|
||||
{ name: "广东", value: 35 },
|
||||
{ name: "公开", value: 17 },
|
||||
{ name: "数据", value: 17 },
|
||||
{ name: "注册号", value: 16 },
|
||||
{ name: "深圳市", value: 16 },
|
||||
{ name: "探索", value: 16 },
|
||||
{ name: "香港", value: 16 },
|
||||
{ name: "历史", value: 16 },
|
||||
{ name: "组织", value: 16 },
|
||||
{ name: "疑点", value: 15 },
|
||||
{ name: "否认", value: 15 },
|
||||
{ name: "生物", value: 15 },
|
||||
{ name: "投资", value: 15 },
|
||||
{ name: "学校", value: 15 },
|
||||
{ name: "招募", value: 14 },
|
||||
{ name: "架构", value: 14 },
|
||||
{ name: "商人", value: 14 },
|
||||
{ name: "露露", value: 13 },
|
||||
{ name: "干细胞", value: 13 },
|
||||
{ name: "违背", value: 13 },
|
||||
{ name: "娜娜", value: 12 },
|
||||
{ name: "坚信", value: 13 },
|
||||
{ name: "真相", value: 13 },
|
||||
{ name: "签名", value: 13 },
|
||||
{ name: "美国", value: 13 },
|
||||
{ name: "合作", value: 13 },
|
||||
{ name: "环境", value: 13 },
|
||||
{ name: "股权", value: 12 },
|
||||
{ name: "助理", value: 12 },
|
||||
{ name: "志愿者", value: 12 },
|
||||
{ name: "不负责任", value: 12 },
|
||||
{ name: "旗下", value: 12 },
|
||||
{ name: "学者", value: 12 },
|
||||
{ name: "人生", value: 12 },
|
||||
{ name: "改写", value: 11 },
|
||||
{ name: "冒进", value: 11 },
|
||||
{ name: "抵抗", value: 11 },
|
||||
{ name: "副教授", value: 11 },
|
||||
{ name: "指责", value: 11 },
|
||||
{ name: "教授", value: 11 },
|
||||
{ name: "孩子", value: 11 },
|
||||
{ name: "瀚海基因", value: 10 },
|
||||
{ name: "伪造", value: 10 },
|
||||
{ name: "震惊", value: 10 },
|
||||
];
|
||||
|
||||
chart.setOption({
|
||||
series: [
|
||||
{
|
||||
type: "wordCloud",
|
||||
shape: "circle",
|
||||
left: "center",
|
||||
top: "center",
|
||||
width: "70%",
|
||||
height: "80%",
|
||||
right: null,
|
||||
bottom: null,
|
||||
sizeRange: [12, 60],
|
||||
rotationRange: [-90, 90],
|
||||
rotationStep: 45,
|
||||
gridSize: 8,
|
||||
drawOutOfBound: false,
|
||||
textStyle: {
|
||||
fontFamily: "sans-serif",
|
||||
fontWeight: "bold",
|
||||
// Color can be a callback function or a color string
|
||||
color: function () {
|
||||
// Random color
|
||||
return (
|
||||
"rgb(" +
|
||||
[
|
||||
Math.round(Math.random() * 160),
|
||||
Math.round(Math.random() * 160),
|
||||
Math.round(Math.random() * 160),
|
||||
].join(",") +
|
||||
")"
|
||||
);
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
focus: "self",
|
||||
textStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: "#333",
|
||||
},
|
||||
},
|
||||
|
||||
data: originData,
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.pic {
|
||||
height: 600px;
|
||||
width: 600px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -5,11 +5,13 @@
|
|||
<div id="pic3" class="pic"></div>
|
||||
<div id="pic4" class="pic"></div>
|
||||
<div id="pic5" class="pic"></div>
|
||||
<div id="pic6" class="pic"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from "echarts";
|
||||
import "echarts-wordcloud";
|
||||
export default {
|
||||
name: "person_review",
|
||||
components: {},
|
||||
|
|
@ -75,6 +77,7 @@ export default {
|
|||
this.showNationPie();
|
||||
this.showPoliticsPie();
|
||||
this.showPartyAgeBar();
|
||||
this.showWordCloud();
|
||||
},
|
||||
methods: {
|
||||
showGenderPie() {
|
||||
|
|
@ -242,6 +245,158 @@ export default {
|
|||
|
||||
option && myChart.setOption(option);
|
||||
},
|
||||
showWordCloud() {
|
||||
const chart = echarts.init(document.getElementById("pic6"));
|
||||
|
||||
const originData = [
|
||||
{ name: "基因编辑", value: 1228 },
|
||||
{ name: "婴儿", value: 981 },
|
||||
{ name: "贺建奎", value: 363 },
|
||||
{ name: "首例", value: 361 },
|
||||
{ name: "免疫", value: 291 },
|
||||
{ name: "艾滋病", value: 289 },
|
||||
{ name: "伦理", value: 211 },
|
||||
{ name: "回应", value: 208 },
|
||||
{ name: "世界", value: 177 },
|
||||
{ name: "科学家", value: 135 },
|
||||
{ name: "深圳", value: 129 },
|
||||
{ name: "谴责", value: 107 },
|
||||
{ name: "南科大", value: 96 },
|
||||
{ name: "科技", value: 86 },
|
||||
{ name: "人类", value: 80 },
|
||||
{ name: "和美医院", value: 76 },
|
||||
{ name: "试验", value: 75 },
|
||||
{ name: "项目", value: 69 },
|
||||
{ name: "专家", value: 66 },
|
||||
{ name: "审查", value: 62 },
|
||||
{ name: "联合", value: 51 },
|
||||
{ name: "科创委", value: 49 },
|
||||
{ name: "资助", value: 44 },
|
||||
{ name: "委员会", value: 43 },
|
||||
{ name: "技术", value: 41 },
|
||||
{ name: "大学", value: 40 },
|
||||
{ name: "峰会", value: 38 },
|
||||
{ name: "实验", value: 38 },
|
||||
{ name: "医学", value: 36 },
|
||||
{ name: "背后", value: 36 },
|
||||
{ name: "监管", value: 34 },
|
||||
{ name: "医疗", value: 33 },
|
||||
{ name: "莆田", value: 31 },
|
||||
{ name: "临床", value: 31 },
|
||||
{ name: "团队", value: 30 },
|
||||
{ name: "疯狂", value: 29 },
|
||||
{ name: "科学", value: 29 },
|
||||
{ name: "国际", value: 29 },
|
||||
{ name: "创新", value: 28 },
|
||||
{ name: "停薪留职", value: 27 },
|
||||
{ name: "胚胎", value: 26 },
|
||||
{ name: "双胞胎", value: 25 },
|
||||
{ name: "科研", value: 22 },
|
||||
{ name: "科学界", value: 21 },
|
||||
{ name: "人体", value: 21 },
|
||||
{ name: "生物学", value: 20 },
|
||||
{ name: "涉嫌", value: 20 },
|
||||
{ name: "细胞", value: 19 },
|
||||
{ name: "经费", value: 19 },
|
||||
{ name: "卫计委", value: 18 },
|
||||
{ name: "属实", value: 18 },
|
||||
{ name: "签字", value: 18 },
|
||||
{ name: "官方", value: 18 },
|
||||
{ name: "学会", value: 18 },
|
||||
{ name: "疑问", value: 17 },
|
||||
{ name: "学术", value: 17 },
|
||||
{ name: "广东", value: 35 },
|
||||
{ name: "公开", value: 17 },
|
||||
{ name: "数据", value: 17 },
|
||||
{ name: "注册号", value: 16 },
|
||||
{ name: "深圳市", value: 16 },
|
||||
{ name: "探索", value: 16 },
|
||||
{ name: "香港", value: 16 },
|
||||
{ name: "历史", value: 16 },
|
||||
{ name: "组织", value: 16 },
|
||||
{ name: "疑点", value: 15 },
|
||||
{ name: "否认", value: 15 },
|
||||
{ name: "生物", value: 15 },
|
||||
{ name: "投资", value: 15 },
|
||||
{ name: "学校", value: 15 },
|
||||
{ name: "招募", value: 14 },
|
||||
{ name: "架构", value: 14 },
|
||||
{ name: "商人", value: 14 },
|
||||
{ name: "露露", value: 13 },
|
||||
{ name: "干细胞", value: 13 },
|
||||
{ name: "违背", value: 13 },
|
||||
{ name: "娜娜", value: 12 },
|
||||
{ name: "坚信", value: 13 },
|
||||
{ name: "真相", value: 13 },
|
||||
{ name: "签名", value: 13 },
|
||||
{ name: "美国", value: 13 },
|
||||
{ name: "合作", value: 13 },
|
||||
{ name: "环境", value: 13 },
|
||||
{ name: "股权", value: 12 },
|
||||
{ name: "助理", value: 12 },
|
||||
{ name: "志愿者", value: 12 },
|
||||
{ name: "不负责任", value: 12 },
|
||||
{ name: "旗下", value: 12 },
|
||||
{ name: "学者", value: 12 },
|
||||
{ name: "人生", value: 12 },
|
||||
{ name: "改写", value: 11 },
|
||||
{ name: "冒进", value: 11 },
|
||||
{ name: "抵抗", value: 11 },
|
||||
{ name: "副教授", value: 11 },
|
||||
{ name: "指责", value: 11 },
|
||||
{ name: "教授", value: 11 },
|
||||
{ name: "孩子", value: 11 },
|
||||
{ name: "瀚海基因", value: 10 },
|
||||
{ name: "伪造", value: 10 },
|
||||
{ name: "震惊", value: 10 },
|
||||
];
|
||||
|
||||
chart.setOption({
|
||||
series: [
|
||||
{
|
||||
type: "wordCloud",
|
||||
shape: "circle",
|
||||
left: "center",
|
||||
top: "center",
|
||||
width: "70%",
|
||||
height: "80%",
|
||||
right: null,
|
||||
bottom: null,
|
||||
sizeRange: [12, 60],
|
||||
rotationRange: [-90, 90],
|
||||
rotationStep: 45,
|
||||
gridSize: 8,
|
||||
drawOutOfBound: false,
|
||||
textStyle: {
|
||||
fontFamily: "sans-serif",
|
||||
fontWeight: "bold",
|
||||
// Color can be a callback function or a color string
|
||||
color: function () {
|
||||
// Random color
|
||||
return (
|
||||
"rgb(" +
|
||||
[
|
||||
Math.round(Math.random() * 160),
|
||||
Math.round(Math.random() * 160),
|
||||
Math.round(Math.random() * 160),
|
||||
].join(",") +
|
||||
")"
|
||||
);
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
focus: "self",
|
||||
textStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: "#333",
|
||||
},
|
||||
},
|
||||
|
||||
data: originData,
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -251,5 +406,6 @@ export default {
|
|||
.pic {
|
||||
height: 600px;
|
||||
width: 600px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -38,7 +38,8 @@ module.exports = {
|
|||
},
|
||||
proxy: {
|
||||
'/': {
|
||||
target: 'http://127.0.0.1:4523/m1/1256020-0-default/',
|
||||
// target: 'http://127.0.0.1:4523/m1/1256020-0-default/',
|
||||
target: 'http://127.0.0.1:8000',
|
||||
// target: 'http://192.168.31.102:8000',
|
||||
// target: 'http://222.20.95.239:8000',
|
||||
changeOrigin: true,
|
||||
|
|
|
|||
Loading…
Reference in New Issue