125 lines
2.8 KiB
Vue
125 lines
2.8 KiB
Vue
<template>
|
||
<div ref="enterpriseThreeRef" 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 enterpriseThreeRef = ref(null);
|
||
const option = {
|
||
// 设置图形位置
|
||
grid: {
|
||
top: "17%",
|
||
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: "line",
|
||
showBackground: true,
|
||
barWidth: 8,
|
||
data: [70, 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)" }
|
||
]
|
||
}
|
||
}
|
||
},
|
||
{
|
||
name: "岗位人员数",
|
||
type: "line",
|
||
showBackground: true,
|
||
barWidth: 8,
|
||
data: [54, 32, 45, 18],
|
||
// 设置柱状图的数值
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
color: "#CBF2FA"
|
||
},
|
||
itemStyle: {
|
||
//渐变色
|
||
color: {
|
||
type: "linear",
|
||
x: 1,
|
||
y: 0,
|
||
x2: 0,
|
||
y2: 1,
|
||
colorStops: [
|
||
{ offset: 0, color: "rgba(178, 217, 223, 1)" }
|
||
// { offset: 1, color: "rgba(203, 242, 250, 0.08)" }
|
||
]
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
// 生命周期钩子
|
||
onMounted(() => {
|
||
if (enterpriseThreeRef.value) {
|
||
const chart = echarts.init(enterpriseThreeRef.value);
|
||
// 设置option
|
||
chart.setOption(option);
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped></style>
|