109 lines
2.5 KiB
Vue
109 lines
2.5 KiB
Vue
<template>
|
|
<!-- 短缺技能岗位TOP -->
|
|
<div ref="jngwtopEcharts" style="width: 100%; height: 100%"></div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import * as echarts from "echarts";
|
|
import { qcckPost, qcckGet } from "@/api/qcckApi.js";
|
|
import emitter from "@/utils/eventBus.js";
|
|
import { onMounted, ref, nextTick } from "vue";
|
|
const jngwtopEcharts = ref();
|
|
onMounted(() => {
|
|
lineChartFn();
|
|
});
|
|
|
|
//初始化统计图
|
|
const lineChartFn = () => {
|
|
let option = {
|
|
legend: {
|
|
show: true
|
|
},
|
|
grid: {
|
|
left: "10px",
|
|
right: "30px",
|
|
bottom: "10px",
|
|
top: "20px",
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: "value",
|
|
axisLine: { lineStyle: { color: "#c3c5c8" } },
|
|
splitLine: { show: false }
|
|
},
|
|
yAxis : {
|
|
type: "category",
|
|
data: ["A岗位","B岗位",'C岗位','D岗位','E岗位'],
|
|
axisLine: { show: false, lineStyle: { color: "#c3c5c8" } },
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: { color: "#21343e" }
|
|
},
|
|
axisLabel: {
|
|
rotate: 20,
|
|
fontSize: 10,
|
|
interval: 0
|
|
},
|
|
axisTick: { show: false }
|
|
},
|
|
series: [
|
|
{
|
|
data: [10, 20,30,40,50],
|
|
type: "bar",
|
|
barWidth: "14px",
|
|
label: {
|
|
show: true,
|
|
position: "right",
|
|
color: "#fff"
|
|
},
|
|
itemStyle: {
|
|
type: "bar",
|
|
color: function (params) {
|
|
switch (params.dataIndex) {
|
|
case 0:
|
|
return new echarts.graphic.LinearGradient(
|
|
1,
|
|
0,
|
|
0,
|
|
0,
|
|
|
|
[
|
|
{ offset: 0, color: "#eb2b2b" },
|
|
{ offset: 0.9, color: "#041A33" }
|
|
],
|
|
false
|
|
);
|
|
break;
|
|
case 1:
|
|
case 2:
|
|
case 3:
|
|
case 4:
|
|
return new echarts.graphic.LinearGradient(
|
|
1,
|
|
0,
|
|
0,
|
|
0,
|
|
[
|
|
{ offset: 0, color: "#ff9500" },
|
|
{ offset: 0.9, color: "#041A33" }
|
|
],
|
|
false
|
|
);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
]
|
|
};
|
|
nextTick(() => {
|
|
var myChart = echarts.init(jngwtopEcharts.value);
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", () => {
|
|
myChart.resize();
|
|
});
|
|
});
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
</style> |