142 lines
3.3 KiB
Vue
142 lines
3.3 KiB
Vue
<template>
|
|
<!-- 重点企业技能短缺招聘难度 -->
|
|
<div id="jnzpndEcharts" 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, nextTick } from "vue";
|
|
|
|
onMounted(() => {
|
|
lineChartFn();
|
|
});
|
|
|
|
const lineChartFn = (val) => {
|
|
var myChart = echarts.init(document.getElementById("jnzpndEcharts"));
|
|
var option = {
|
|
legend: {
|
|
show: true,
|
|
right: 10,
|
|
top: 10,
|
|
textStyle: { color: "#fff" },
|
|
data: ["无技能要求", "技能要求"]
|
|
},
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: { type: "shadow" }
|
|
},
|
|
grid: {
|
|
top: "14%",
|
|
right: "4%",
|
|
left: "10%",
|
|
bottom: "12%"
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisPointer: {
|
|
type: "shadow"
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#fff"
|
|
},
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
// rotate: 50,
|
|
fontSize: 10,
|
|
interval: 0
|
|
},
|
|
data: ["A企业", "B企业",'C企业','D企业','E企业'],
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#fff"
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "rgb(15,36,90)",
|
|
type: "solid"
|
|
}
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: "无技能要求",
|
|
type: "bar",
|
|
stack:'total',
|
|
data: [12, 50, 20,10,10],
|
|
barWidth: 10,
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0,0,0,1,
|
|
[
|
|
{ offset: 0, color: "#072133" },
|
|
{ offset: 0.5, color: "#7d792e" },
|
|
{ offset: 1, color: "#f1c515" }
|
|
],false),
|
|
borderColor:new echarts.graphic.LinearGradient(0,0,0,1,
|
|
[
|
|
{ offset:1,color:'#f1c515'},
|
|
{ offset:1, color:'#f1c515'}
|
|
],false),
|
|
shadowColor: "#f1c515",
|
|
shadowBlur: 2
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: "技能要求",
|
|
type: "bar",
|
|
stack:'total',
|
|
data: [ 20, 30, 40,10,10],
|
|
barWidth: 10,
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(0,0,0,1,
|
|
[
|
|
{ offset: 0, color: "#072133" },
|
|
{ offset: 0.5, color: "#0488cf" },
|
|
{ offset: 1, color: "#01a3f7" }
|
|
],false),
|
|
borderColor:new echarts.graphic.LinearGradient(0,0,0,1,
|
|
[
|
|
{ offset:1, color:'#01a3f7' },
|
|
{ offset:0.8, color:'#01a3f7'}
|
|
],false),
|
|
shadowColor: "#01a3f7",
|
|
shadowBlur: 2
|
|
},
|
|
},
|
|
},
|
|
]
|
|
};
|
|
option && myChart.setOption(option);
|
|
myChart.on("click", function (params) {});
|
|
window.onresize = function () {
|
|
myChart.resize();
|
|
};
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
</style> |