大屏修改
This commit is contained in:
@ -10,19 +10,22 @@
|
||||
<li>
|
||||
<div><span class="blockOne"></span><span>中职</span></div>
|
||||
<div>
|
||||
<span class="numb">5230</span><span class="proportion">50%</span>
|
||||
<!-- <span class="numb">5230</span> -->
|
||||
<span class="proportion">38%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><span class="blockTwo"></span><span>高职</span></div>
|
||||
<div>
|
||||
<span class="numb">4230</span><span class="proportion">30%</span>
|
||||
<!-- <span class="numb">4230</span> -->
|
||||
<span class="proportion">41%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><span class="blockThree"></span><span>高校</span></div>
|
||||
<div>
|
||||
<span class="numb">3230</span><span class="proportion">20%</span>
|
||||
<!-- <span class="numb">3230</span> -->
|
||||
<span class="proportion">21%</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
@ -36,7 +39,8 @@ const pieRef = ref(null);
|
||||
const option = {
|
||||
// 设置图形位置
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
trigger: "item",
|
||||
formatter: "{b} : ({c}%)"
|
||||
},
|
||||
|
||||
series: [
|
||||
@ -58,9 +62,9 @@ const option = {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 5230, name: "中职", itemStyle: { color: "#58A8FF" } },
|
||||
{ value: 4230, name: "高职", itemStyle: { color: "#30DCFF" } },
|
||||
{ value: 3230, name: "高校", itemStyle: { color: "#FFFFFF" } }
|
||||
{ value: 38, name: "中职", itemStyle: { color: "#58A8FF" } },
|
||||
{ value: 41, name: "高职", itemStyle: { color: "#30DCFF" } },
|
||||
{ value: 21, name: "高校", itemStyle: { color: "#FFFFFF" } }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
@ -4,24 +4,16 @@
|
||||
<div class="carcTitle">促就业⼈数清单</div>
|
||||
<ul class="schoolLsit">
|
||||
<li>
|
||||
<div class="name">学校名称</div>
|
||||
<div><span class="numb">71</span><span>人</span></div>
|
||||
<div class="name">四川矿产机电技师学院</div>
|
||||
<div><span class="numb">1593</span><span>人</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="name">学校名称</div>
|
||||
<div><span class="numb">71</span><span>人</span></div>
|
||||
<div class="name">四川科华高级技工学校</div>
|
||||
<div><span class="numb">705</span><span>人</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="name">学校名称</div>
|
||||
<div><span class="numb">71</span><span>人</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="name">学校名称</div>
|
||||
<div><span class="numb">71</span><span>人</span></div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="name">学校名称</div>
|
||||
<div><span class="numb">71</span><span>人</span></div>
|
||||
<div class="name">中国五冶高级学校崇州校区</div>
|
||||
<div><span class="numb">652</span><span>人</span></div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -7,11 +7,11 @@
|
||||
<div class="flex just-between align-center col">
|
||||
<div class="">
|
||||
<div class="title">岗位种类数</div>
|
||||
<div>480人</div>
|
||||
<div>9人</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="title">岗位人员数</div>
|
||||
<div>480人</div>
|
||||
<div>680人</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -22,11 +22,11 @@
|
||||
<div class="flex just-between align-center col">
|
||||
<div class="">
|
||||
<div class="title">岗位种类数</div>
|
||||
<div>480人</div>
|
||||
<div>34人</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="title">岗位人员数</div>
|
||||
<div>480人</div>
|
||||
<div>18920人</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -37,11 +37,11 @@
|
||||
<div class="flex just-between align-center col">
|
||||
<div class="">
|
||||
<div class="title">岗位种类数</div>
|
||||
<div>480人</div>
|
||||
<div>14人</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<div class="title">岗位人员数</div>
|
||||
<div>480人</div>
|
||||
<div>5037人</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -35,7 +35,7 @@ const option = {
|
||||
},
|
||||
|
||||
type: "category",
|
||||
data: ["制造业", "服务业", "建筑业", "批发和零售业"]
|
||||
data: ["制造业", "服务业", "建筑业"]
|
||||
},
|
||||
yAxis: {
|
||||
//网格线
|
||||
@ -59,7 +59,7 @@ const option = {
|
||||
type: "line",
|
||||
showBackground: true,
|
||||
barWidth: 8,
|
||||
data: [70, 62, 52, 41],
|
||||
data: [42, 7, 15],
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
@ -86,7 +86,7 @@ const option = {
|
||||
type: "line",
|
||||
showBackground: true,
|
||||
barWidth: 8,
|
||||
data: [54, 32, 45, 18],
|
||||
data: [10230, 4509, 3201],
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
|
||||
@ -59,7 +59,7 @@ const option = {
|
||||
type: "bar",
|
||||
showBackground: true,
|
||||
barWidth: 8,
|
||||
data: [76, 32, 87, 65],
|
||||
data: [31, 37, 45, 46],
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
@ -86,7 +86,7 @@ const option = {
|
||||
type: "bar",
|
||||
showBackground: true,
|
||||
barWidth: 8,
|
||||
data: [34, 15, 45, 24],
|
||||
data: [190, 2106, 8910, 13431],
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
|
||||
@ -78,7 +78,7 @@ const option = {
|
||||
]
|
||||
}
|
||||
},
|
||||
data: [123, 60, 125, 80],
|
||||
data: [0, 0, 0, 0],
|
||||
z: 10
|
||||
},
|
||||
{
|
||||
|
||||
@ -10,50 +10,54 @@ import { ref, reactive, computed, onMounted } from "vue";
|
||||
// 引入Echarts
|
||||
import * as echarts from "echarts";
|
||||
// 引入崇州市地图json数据
|
||||
import chongzhouJSON from "@/assets/json/510184.json";
|
||||
import sichuanJSON from "@/assets/json/sichuan.json";
|
||||
// 引入本地撒点图片
|
||||
import pointImage from "@/assets/images/recruitment/map-point1.png";
|
||||
// 获取地图DOM元素
|
||||
let map = ref();
|
||||
// 注册崇州地图
|
||||
echarts.registerMap("chongzhou", chongzhouJSON);
|
||||
echarts.registerMap("sichuan", sichuanJSON);
|
||||
const initialPoints = [
|
||||
{
|
||||
name: "崇州市政府",
|
||||
value: [103.679548, 30.63669, 150],
|
||||
address: "北京市朝阳区"
|
||||
name: "绵阳",
|
||||
value: [104.684185, 31.473263, 0],
|
||||
count: 0
|
||||
},
|
||||
{
|
||||
name: "万达广场",
|
||||
value: [103.692545, 30.629371, 200],
|
||||
address: "上海市浦东新区"
|
||||
name: "崇州",
|
||||
value: [103.68055, 30.634619, 0],
|
||||
count: 0
|
||||
},
|
||||
{
|
||||
name: "北溪湿地",
|
||||
value: [103.696859, 30.663888, 180],
|
||||
address: "广州市天河区"
|
||||
name: "武侯",
|
||||
value: [104.04777, 30.648289, 0],
|
||||
count: 0
|
||||
},
|
||||
{
|
||||
name: "白塔湖景区",
|
||||
value: [103.591696, 30.671858, 160],
|
||||
address: "深圳市南山区"
|
||||
},
|
||||
{
|
||||
name: "崇州市公安局",
|
||||
value: [103.674729, 30.649677, 140],
|
||||
address: "成都市锦江区"
|
||||
name: "成华",
|
||||
value: [104.108719, 30.665854, 0],
|
||||
count: 0
|
||||
}
|
||||
];
|
||||
// 地图参数设置
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
formatter: function (params) {
|
||||
if (params.seriesType === "scatter") {
|
||||
return `${params.name}<br/>合作社数量:${params.data.count}`;
|
||||
}
|
||||
return params.name;
|
||||
}
|
||||
},
|
||||
geo: [
|
||||
{
|
||||
type: "map",
|
||||
map: "chongzhou",
|
||||
map: "sichuan",
|
||||
roam: true,
|
||||
zoom: 1,
|
||||
label: {
|
||||
show: true,
|
||||
// show: true,
|
||||
color: "#fff",
|
||||
fontSize: 12,
|
||||
fontWeight: "bold",
|
||||
@ -86,7 +90,8 @@ let option = {
|
||||
data: initialPoints,
|
||||
symbolSize: function (val) {
|
||||
// 根据数值大小动态调整点的大小
|
||||
return val[2] / 6;
|
||||
// return val[2] / 6;
|
||||
return 30;
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
|
||||
Reference in New Issue
Block a user