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>
|