118 lines
2.9 KiB
Vue
118 lines
2.9 KiB
Vue
<template>
|
|
<!-- 供需技能匹配分析 -->
|
|
<div id="gjgrzmydEcharts" 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("gjgrzmydEcharts"));
|
|
var option = {
|
|
// legend: {
|
|
// show: true,
|
|
// right: 10,
|
|
// top: 10,
|
|
// textStyle: { color: "#fff" },
|
|
// data: ["总岗位数量", "需求技能岗位数量"]
|
|
// },
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: { type: "shadow" }
|
|
},
|
|
grid: {
|
|
top: "20%",
|
|
right: "10%",
|
|
left: "14%",
|
|
bottom: "12%"
|
|
},
|
|
yAxis: [
|
|
{
|
|
type: "category",
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisPointer: {
|
|
type: "shadow"
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#fff"
|
|
},
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
rotate: 40,
|
|
fontSize: 10,
|
|
interval: 0
|
|
},
|
|
data: ["装备制造业", "电子信息产业",'航空航天产业','新能源产业','生物科技与医疗健康产业'],
|
|
}
|
|
],
|
|
xAxis: [
|
|
{
|
|
type: "value",
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#fff"
|
|
}
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "rgb(15,36,90)",
|
|
type: "solid"
|
|
}
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: "总岗位数量",
|
|
type: "bar",
|
|
stack:'total',
|
|
data: [10000, 6500, 3000,2500,1500],
|
|
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
|
|
},
|
|
},
|
|
},
|
|
]
|
|
};
|
|
option && myChart.setOption(option);
|
|
myChart.on("click", function (params) {});
|
|
window.onresize = function () {
|
|
myChart.resize();
|
|
};
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
</style> |