lcw
This commit is contained in:
@ -9,114 +9,94 @@ import { ref, reactive, computed, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
const enterpriseTwoRef = ref(null);
|
||||
const option = {
|
||||
// 添加标题
|
||||
title: {
|
||||
text: '重点保供企业分布',
|
||||
left: 'center',
|
||||
top: '5%',
|
||||
textStyle: {
|
||||
color: '#30DCFF',
|
||||
fontSize: 16,
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
},
|
||||
// 设置图形位置
|
||||
grid: {
|
||||
top: "15%",
|
||||
left: "15%",
|
||||
right: "5%",
|
||||
bottom: "20%"
|
||||
},
|
||||
// 设置图例
|
||||
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] // 图例[距上右下左方距离
|
||||
top: '20%',
|
||||
left: '15%',
|
||||
right: '5%',
|
||||
bottom: '25%'
|
||||
},
|
||||
xAxis: {
|
||||
show: true,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#CBF2FA" // 文字颜色
|
||||
color: '#CBF2FA',
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#CBF2FA'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 22, // 设置 x 轴文字大小
|
||||
color: "#CBF2FA", // 可以同时设置文字颜色
|
||||
rotate: 20, // 文字倾斜45度
|
||||
margin: 20 // 增加文字与轴线的距离
|
||||
fontSize: 14,
|
||||
color: '#CBF2FA',
|
||||
rotate: 0,
|
||||
margin: 15
|
||||
},
|
||||
type: "category",
|
||||
data: ["微型企业", "小型企业", "中型企业", "大型企业"]
|
||||
data: ["第一产业", "第二产业", "第三产业"]
|
||||
},
|
||||
yAxis: {
|
||||
//网格线
|
||||
//确保所有网格线都显示
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: ["#A1C7CD"], // 线颜色
|
||||
opacity: 0.2 // 透明度
|
||||
color: '#A1C7CD',
|
||||
opacity: 0.3,
|
||||
type: 'solid',
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
//设置y轴范围和间隔以显示更多网格线
|
||||
min: 0,
|
||||
max: 600, //根据数据最大值设置合适的范围
|
||||
interval: 100, //设置固定间隔以确保显示足够的网格线
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#CBF2FA" // 文字颜色
|
||||
}
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 20, // 设置 x 轴文字大小
|
||||
color: "#CBF2FA" // 可以同时设置文字颜色
|
||||
show: false
|
||||
},
|
||||
type: "value"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "岗位种类数",
|
||||
name: "企业数",
|
||||
type: "bar",
|
||||
showBackground: true,
|
||||
barWidth: 8,
|
||||
data: [93, 231, 413, 451],
|
||||
showBackground: false,
|
||||
barWidth: 25,
|
||||
data: [6, 581, 41],
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#30DCFF",
|
||||
fontSize: 22
|
||||
color: '#30DCFF',
|
||||
fontSize: 14,
|
||||
formatter: function(params) {
|
||||
return params.value + '家';
|
||||
}
|
||||
},
|
||||
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: [451, 2110, 19356, 57083],
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#CBF2FA",
|
||||
fontSize: 22
|
||||
},
|
||||
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)" }
|
||||
]
|
||||
}
|
||||
//纯色
|
||||
color: '#30DCFF'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
@ -37,8 +37,80 @@ const initialPoints = [
|
||||
name: "成华",
|
||||
value: [104.108719, 30.665854, 0],
|
||||
count: 0
|
||||
},
|
||||
{
|
||||
name: "攀枝花",
|
||||
value: [101.716007,26.580446, 0],
|
||||
count: 0
|
||||
},
|
||||
{
|
||||
name: "雅安",
|
||||
value: [103.001033,29.987722, 0],
|
||||
count: 0
|
||||
},
|
||||
{
|
||||
name: "眉山",
|
||||
value: [103.831788,30.048318, 0],
|
||||
count: 0
|
||||
},
|
||||
{
|
||||
name: "自贡",
|
||||
value: [104.773447,29.352765, 0],
|
||||
count: 0
|
||||
},
|
||||
{
|
||||
name: "资阳",
|
||||
value: [104.641917,30.122211, 0],
|
||||
count: 0
|
||||
},
|
||||
{
|
||||
name: "泸州",
|
||||
value: [105.443348,28.889138, 0],
|
||||
count: 0
|
||||
},
|
||||
{
|
||||
name: "遂宁",
|
||||
value: [105.571331,30.513311, 0],
|
||||
count: 0
|
||||
},
|
||||
{
|
||||
name: "广安",
|
||||
value: [106.633369,30.456398, 0],
|
||||
count: 0
|
||||
},
|
||||
{
|
||||
name: "德阳",
|
||||
value: [104.398651,31.127991, 0],
|
||||
count: 0
|
||||
},
|
||||
{
|
||||
name: "绵阳",
|
||||
value: [104.741722,31.46402, 0],
|
||||
count: 0
|
||||
},
|
||||
{
|
||||
name: "广元",
|
||||
value: [105.829757,32.433668, 0],
|
||||
count: 0
|
||||
},
|
||||
{
|
||||
name: "达州",
|
||||
value: [107.502262,31.209484, 0],
|
||||
count: 0
|
||||
},
|
||||
{
|
||||
name: "南充",
|
||||
value: [106.082974,30.795281, 0],
|
||||
count: 0
|
||||
},
|
||||
{
|
||||
name: "巴中",
|
||||
value: [106.753669,31.858809, 0],
|
||||
count: 0
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
// 地图参数设置
|
||||
let option = {
|
||||
tooltip: {
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
>
|
||||
<el-carousel-item><EnterpriseEmploymentOne /></el-carousel-item>
|
||||
<el-carousel-item><EnterpriseEmploymentTwo /></el-carousel-item>
|
||||
<el-carousel-item><EnterpriseEmploymentThree /></el-carousel-item>
|
||||
<!-- <el-carousel-item><EnterpriseEmploymentThree /></el-carousel-item> -->
|
||||
</el-carousel>
|
||||
</enterprise-employment-card>
|
||||
<!-- 左2 -->
|
||||
@ -135,8 +135,8 @@ const asideMeun = reactive({
|
||||
]
|
||||
});
|
||||
const cardOneInfo = {
|
||||
title: "企业用工结构分布",
|
||||
description: "7万家企业(含个体工商户)",
|
||||
title: "服务企业用工机构分布",
|
||||
description: "",
|
||||
type1: {
|
||||
title: "岗位种类数",
|
||||
count: "765个",
|
||||
|
||||
Reference in New Issue
Block a user