140 lines
3.1 KiB
Vue
140 lines
3.1 KiB
Vue
<template>
|
||
<div>
|
||
<div class="carcTitle">促就业⼈数清单</div>
|
||
<div ref="collageTalentsThreeRef" style="width: 17vw; height: 14.5vw"></div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
// Vue 3 Composition API 的 setup 语法糖
|
||
// 在这里直接编写响应式数据和方法，无需返回
|
||
import { ref, reactive, computed, onMounted } from "vue";
|
||
import * as echarts from "echarts";
|
||
const collageTalentsThreeRef = ref(null);
|
||
const option = {
|
||
// 设置图形位置
|
||
grid: {
|
||
top: "15%",
|
||
left: "15%",
|
||
right: "5%",
|
||
bottom: "10%"
|
||
},
|
||
// 设置图例
|
||
legend: {
|
||
itemWidth: 10, // 方块宽度
|
||
itemHeight: 10, // 方块高度
|
||
textStyle: {
|
||
color: "#B2D9DF" // 文字颜色
|
||
},
|
||
x: "center", // 图例在左（left）、右（right）、居中（center）、100px
|
||
y: "top", // 图例在上（top）、下（bottom）、居中（center、100px）、100px
|
||
padding: [15, 50, 0, 0] // 图例[距上右下左方距离
|
||
},
|
||
xAxis: {
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#CBF2FA" // 文字颜色
|
||
}
|
||
},
|
||
|
||
type: "category",
|
||
data: ["专业A", "专业B", "专业C", "专业D"]
|
||
},
|
||
yAxis: {
|
||
//网格线
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: ["#A1C7CD"], // 线颜色
|
||
opacity: 0.2 // 透明度
|
||
}
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: "#CBF2FA" // 文字颜色
|
||
}
|
||
},
|
||
type: "value"
|
||
},
|
||
series: [
|
||
{
|
||
name: "高校数",
|
||
type: "bar",
|
||
showBackground: true,
|
||
barWidth: 8,
|
||
data: [76, 32, 87, 65],
|
||
// 设置柱状图的数值
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
color: "#30DCFF"
|
||
},
|
||
itemStyle: {
|
||
//渐变色
|
||
color: {
|
||
type: "linear",
|
||
x: 1,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: "rgba(48, 220, 255, 1)" },
|
||
{ offset: 1, color: "rgba(48, 220, 255, 0.06)" }
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: "促就业人数",
|
||
type: "bar",
|
||
showBackground: true,
|
||
barWidth: 8,
|
||
data: [34, 15, 45, 24],
|
||
// 设置柱状图的数值
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
color: "#CBF2FA"
|
||
},
|
||
itemStyle: {
|
||
//渐变色
|
||
color: {
|
||
type: "linear",
|
||
x: 1,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: "rgba(203, 242, 250, 1)" },
|
||
{ offset: 1, color: "rgba(203, 242, 250, 0.08)" }
|
||
]
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
// 生命周期钩子
|
||
onMounted(() => {
|
||
if (collageTalentsThreeRef.value) {
|
||
const chart = echarts.init(collageTalentsThreeRef.value);
|
||
// 设置option
|
||
chart.setOption(option);
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.carcTitle {
|
||
height: 1.4vw;
|
||
line-height: 1.4vw;
|
||
font-size: 0.8vw;
|
||
text-align: center;
|
||
color: #c4f3fe;
|
||
background: url("~@/assets/images/recruitment/card-title@2x.png") no-repeat
|
||
center;
|
||
background-size: auto 100%;
|
||
margin-top: 0.7vw;
|
||
}
|
||
</style>
|