118 lines
2.3 KiB
Vue
118 lines
2.3 KiB
Vue
<template>
|
|
<div>
|
|
<div class="carcTitle">服务求职者变化趋势</div>
|
|
<div ref="laborSystemFourRef" 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 laborSystemFourRef = ref(null);
|
|
const option = {
|
|
// 设置图形位置
|
|
grid: {
|
|
top: "17%",
|
|
left: "15%",
|
|
right: "5%",
|
|
bottom: "10%"
|
|
},
|
|
tooltip: {
|
|
trigger: "axis"
|
|
},
|
|
xAxis: {
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#CBF2FA" // 文字颜色
|
|
}
|
|
},
|
|
|
|
type: "category",
|
|
data: [
|
|
"1月",
|
|
"2月",
|
|
"3月",
|
|
"4月",
|
|
"5月",
|
|
"6月",
|
|
"7月",
|
|
"8月",
|
|
"9月",
|
|
"10月",
|
|
"11月",
|
|
"12月"
|
|
]
|
|
},
|
|
yAxis: {
|
|
//网格线
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: ["#A1C7CD"], // 线颜色
|
|
opacity: 0.2 // 透明度
|
|
}
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#CBF2FA" // 文字颜色
|
|
}
|
|
},
|
|
type: "value"
|
|
},
|
|
series: [
|
|
{
|
|
name: "求职者",
|
|
type: "line",
|
|
showBackground: true,
|
|
barWidth: 8,
|
|
data: [38, 62, 52, 41, 37, 62, 52, 41, 67, 62, 52, 41],
|
|
// 设置柱状图的数值
|
|
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)" }
|
|
]
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
// 生命周期钩子
|
|
onMounted(() => {
|
|
if (laborSystemFourRef.value) {
|
|
const chart = echarts.init(laborSystemFourRef.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>
|