116 lines
2.5 KiB
Vue
116 lines
2.5 KiB
Vue
|
<template>
|
|||
|
|
<div class="barBox" ref="enterpriseTwoRef"></div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, reactive, onMounted } from "vue";
|
|||
|
|
import * as echarts from "echarts";
|
|||
|
|
const enterpriseTwoRef = ref(null);
|
|||
|
|
const option = {
|
|||
|
|
// 设置图形位置
|
|||
|
|
grid: {
|
|||
|
|
top: "10%",
|
|||
|
|
left: "8%",
|
|||
|
|
right: "5%",
|
|||
|
|
bottom: "11%"
|
|||
|
|
},
|
|||
|
|
// 设置图例
|
|||
|
|
// 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" // 文字颜色
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
fontSize: 22, // 设置 x 轴文字大小
|
|||
|
|
color: "#CBF2FA" // 可以同时设置文字颜色
|
|||
|
|
},
|
|||
|
|
type: "category",
|
|||
|
|
data: [
|
|||
|
|
"护理专业",
|
|||
|
|
"语言及法学类专业",
|
|||
|
|
"工程类专业",
|
|||
|
|
"管理及新媒体类专业",
|
|||
|
|
"其他"
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
yAxis: {
|
|||
|
|
//网格线
|
|||
|
|
splitLine: {
|
|||
|
|
show: true,
|
|||
|
|
lineStyle: {
|
|||
|
|
color: ["#A1C7CD"], // 线颜色
|
|||
|
|
opacity: 0.2 // 透明度
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLine: {
|
|||
|
|
lineStyle: {
|
|||
|
|
color: "#CBF2FA" // 文字颜色
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
axisLabel: {
|
|||
|
|
fontSize: 20, // 设置 x 轴文字大小
|
|||
|
|
color: "#CBF2FA" // 可以同时设置文字颜色
|
|||
|
|
},
|
|||
|
|
type: "value"
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: "专业人数",
|
|||
|
|
type: "bar",
|
|||
|
|
showBackground: true,
|
|||
|
|
barWidth: 20,
|
|||
|
|
data: [56, 41, 39, 25, 494],
|
|||
|
|
// 设置柱状图的数值
|
|||
|
|
label: {
|
|||
|
|
show: true,
|
|||
|
|
position: "top",
|
|||
|
|
color: "#30DCFF",
|
|||
|
|
|
|||
|
|
fontSize: 22
|
|||
|
|
},
|
|||
|
|
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 (enterpriseTwoRef.value) {
|
|||
|
|
const chart = echarts.init(enterpriseTwoRef.value);
|
|||
|
|
// 设置option
|
|||
|
|
chart.setOption(option);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.barBox {
|
|||
|
|
width: 40vw;
|
|||
|
|
height: 20vw;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
</style>
|