125 lines
2.7 KiB
Vue
125 lines
2.7 KiB
Vue
|
<template>
|
|||
|
|
<div ref="enterpriseTwoRef" style="width: 17vw; height: 17vw"></div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
// Vue 3 Composition API 的 setup 语法糖
|
|||
|
|
// 在这里直接编写响应式数据和方法，无需返回
|
|||
|
|
import { ref, reactive, computed, onMounted } from "vue";
|
|||
|
|
import * as echarts from "echarts";
|
|||
|
|
const enterpriseTwoRef = 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: ["微型企业", "小型企业", "中型企业", "大型企业"]
|
|||
|
|
},
|
|||
|
|
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 (enterpriseTwoRef.value) {
|
|||
|
|
const chart = echarts.init(enterpriseTwoRef.value);
|
|||
|
|
// 设置option
|
|||
|
|
chart.setOption(option);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped></style>
|