兴蜀大屏调整
This commit is contained in:
130
src/views/recruitment/components/jyknryzjy/juzhudi.vue
Normal file
130
src/views/recruitment/components/jyknryzjy/juzhudi.vue
Normal file
@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<div class="tableBox">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
style="width: 100%; height: 19.5vw; overflow: auto"
|
||||
>
|
||||
<el-table-column label="序号" width="80">
|
||||
<template #default="scope">
|
||||
{{ scope.$index + 1 }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="人员所属街道分布" />
|
||||
<el-table-column prop="count" label="人员数量" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
const tableData = ref([
|
||||
{
|
||||
name: "重阳街道",
|
||||
count: "130人"
|
||||
},
|
||||
{
|
||||
name: "崇庆街道",
|
||||
count: "37人"
|
||||
},
|
||||
{
|
||||
name: "积马街道",
|
||||
count: "41人"
|
||||
},
|
||||
{
|
||||
name: "大划街道",
|
||||
count: "22人"
|
||||
},
|
||||
{
|
||||
name: "三江街道",
|
||||
count: "39人"
|
||||
},
|
||||
{
|
||||
name: "江源街道",
|
||||
count: "22人"
|
||||
},
|
||||
{
|
||||
name: "白头镇",
|
||||
count: "40人"
|
||||
},
|
||||
{
|
||||
name: "隆兴镇",
|
||||
count: "31人"
|
||||
},
|
||||
{
|
||||
name: "道明镇",
|
||||
count: "30人"
|
||||
},
|
||||
{
|
||||
name: "街子镇",
|
||||
count: "37人"
|
||||
},
|
||||
{
|
||||
name: "文井江镇",
|
||||
count: "4人"
|
||||
},
|
||||
{
|
||||
name: "怀远镇",
|
||||
count: "54人"
|
||||
},
|
||||
{
|
||||
name: "元通镇",
|
||||
count: "20人"
|
||||
},
|
||||
{
|
||||
name: "廖家镇",
|
||||
count: "29人"
|
||||
},
|
||||
{
|
||||
name: "观胜镇",
|
||||
count: "24人"
|
||||
},
|
||||
{
|
||||
name: "待核实",
|
||||
count: "95人"
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tableBox {
|
||||
margin: 0 2vw;
|
||||
}
|
||||
.el-table {
|
||||
background-color: transparent;
|
||||
--el-table-border-color: rgba(22, 65, 85, 0.9);
|
||||
}
|
||||
::v-deep .el-table__header-wrapper {
|
||||
margin: 0 0 1px 0;
|
||||
}
|
||||
::v-deep .el-table .el-table__cell {
|
||||
padding: 0.6vw 0;
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell {
|
||||
background-color: #164155 !important;
|
||||
color: #c4f3fe;
|
||||
margin: 0 0 2px 0;
|
||||
font-size: 0.7vw;
|
||||
}
|
||||
::v-deep .el-table tr {
|
||||
background-color: rgba(22, 65, 85, 0.5);
|
||||
}
|
||||
::v-deep .el-table tr:nth-child(even) {
|
||||
background-color: rgba(22, 65, 85, 0.9);
|
||||
}
|
||||
::v-deep .el-table td.el-table__cell,
|
||||
.el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid rgba(22, 65, 85, 0.5);
|
||||
font-size: 0.7vw;
|
||||
}
|
||||
::v-deep .el-table th.el-table__cell.is-leaf {
|
||||
border-bottom: 1px solid rgba(22, 65, 85, 0.9);
|
||||
}
|
||||
::v-deep
|
||||
.el-table--enable-row-hover
|
||||
.el-table__body
|
||||
tr:hover
|
||||
> td.el-table__cell {
|
||||
background-color: rgb(16, 104, 171);
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
174
src/views/recruitment/components/jyknryzjy/kunnan.vue
Normal file
174
src/views/recruitment/components/jyknryzjy/kunnan.vue
Normal file
@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<div class="pieBigBox">
|
||||
<div class="pieMain">
|
||||
<div class="pieBox" ref="pieRef"></div>
|
||||
<div class="pieTitle">
|
||||
<span style="font-size: 30px">20</span>人<br />困难大学生
|
||||
</div>
|
||||
</div>
|
||||
<ul class="pieLsit">
|
||||
<li>
|
||||
<div><span class="blockOne"></span><span>脱贫家庭</span></div>
|
||||
<div>
|
||||
<span class="numb">14人</span>
|
||||
<!-- <span class="proportion">49.2%</span> -->
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><span class="blockTwo"></span><span>低保家庭</span></div>
|
||||
<div>
|
||||
<span class="numb">4人</span>
|
||||
<!-- <span class="proportion">36.8%</span> -->
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><span class="blockThree"></span><span>残疾毕业生</span></div>
|
||||
<div>
|
||||
<span class="numb">2人</span>
|
||||
<!-- <span class="proportion">7.33%</span> -->
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
const pieRef = ref(null);
|
||||
const optionPie = {
|
||||
// 设置图形位置
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: "困难大学生",
|
||||
type: "pie",
|
||||
radius: ["65%", "80%"],
|
||||
avoidLabelOverlap: false,
|
||||
padAngle: 5,
|
||||
itemStyle: {
|
||||
borderRadius: 1
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: "center"
|
||||
},
|
||||
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 14, name: "脱贫家庭", itemStyle: { color: "#58A8FF" } },
|
||||
{
|
||||
value: 4,
|
||||
name: "低保家庭",
|
||||
itemStyle: { color: "#30DCFF" }
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
name: "残疾毕业生",
|
||||
itemStyle: { color: "#ffffff" }
|
||||
}
|
||||
// {
|
||||
// value: 44,
|
||||
// name: "博士研究生学历",
|
||||
// itemStyle: { color: "#dd7d4d" }
|
||||
// }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
if (pieRef.value) {
|
||||
const chart = echarts.init(pieRef.value);
|
||||
// 设置option
|
||||
chart.setOption(optionPie);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pieBigBox {
|
||||
width: 40vw;
|
||||
// margin: 0.5vw auto 0;
|
||||
// height: 274px;
|
||||
.pieMain {
|
||||
position: relative;
|
||||
border: 1px solid transparent;
|
||||
float: left;
|
||||
.pieBox {
|
||||
margin: 0 auto;
|
||||
margin-top: 1.5vw;
|
||||
width: 15vw;
|
||||
height: 15vw;
|
||||
background: url("~@/assets/images/recruitment/pie-bg@2x.png") no-repeat
|
||||
center;
|
||||
background-size: 100%;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.pieTitle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
margin-top: -1vw;
|
||||
font-size: 1vw;
|
||||
}
|
||||
}
|
||||
ul.pieLsit {
|
||||
float: left;
|
||||
margin: 0vw 0 0 2vw;
|
||||
border: 1px solid transparent;
|
||||
padding: 2.5vw 0 0 0;
|
||||
width: 20vw;
|
||||
li {
|
||||
// font-size: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 3vw;
|
||||
padding: 0 1vw;
|
||||
background: rgba(203, 242, 250, 0.2);
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
border: 1px solid rgba(203, 242, 250, 0.2);
|
||||
margin-top: 1vw;
|
||||
font-size: 0.7vw;
|
||||
> div {
|
||||
height: 100%;
|
||||
line-height: 3vw;
|
||||
}
|
||||
.blockOne,
|
||||
.blockTwo,
|
||||
.blockThree,
|
||||
.blockFour {
|
||||
display: inline-block;
|
||||
width: 0.8vw;
|
||||
height: 0.8vw;
|
||||
margin-right: 1vw;
|
||||
}
|
||||
.blockOne {
|
||||
background-color: #58a8ff;
|
||||
}
|
||||
.blockTwo {
|
||||
background-color: #30dcff;
|
||||
}
|
||||
.blockThree {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.blockFour {
|
||||
background-color: #dd7d4d;
|
||||
}
|
||||
.proportion {
|
||||
display: inline-block;
|
||||
width: 4.5vw;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
163
src/views/recruitment/components/jyknryzjy/xingbie.vue
Normal file
163
src/views/recruitment/components/jyknryzjy/xingbie.vue
Normal file
@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<div class="pieBigBox">
|
||||
<div class="pieMain">
|
||||
<div class="pieBox" ref="pieRef"></div>
|
||||
<div class="pieTitle">性别占比</div>
|
||||
</div>
|
||||
<ul class="pieLsit">
|
||||
<li>
|
||||
<div><span class="blockOne"></span><span>男性</span></div>
|
||||
<div>
|
||||
<span class="numb">349人</span><span class="proportion">53.3%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><span class="blockTwo"></span><span>女性</span></div>
|
||||
<div>
|
||||
<span class="numb">306人</span><span class="proportion">46.7%</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
const pieRef = ref(null);
|
||||
const optionPie = {
|
||||
// 设置图形位置
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: "性别占比",
|
||||
type: "pie",
|
||||
radius: ["65%", "80%"],
|
||||
avoidLabelOverlap: false,
|
||||
padAngle: 5,
|
||||
itemStyle: {
|
||||
borderRadius: 1
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: "center"
|
||||
},
|
||||
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 349, name: "男性", itemStyle: { color: "#58A8FF" } },
|
||||
{
|
||||
value: 306,
|
||||
name: "女性",
|
||||
itemStyle: { color: "#30DCFF" }
|
||||
}
|
||||
// {
|
||||
// value: 48,
|
||||
// name: "硕士研究生学历",
|
||||
// itemStyle: { color: "#ffffff" }
|
||||
// },
|
||||
// {
|
||||
// value: 44,
|
||||
// name: "博士研究生学历",
|
||||
// itemStyle: { color: "#dd7d4d" }
|
||||
// }
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
if (pieRef.value) {
|
||||
const chart = echarts.init(pieRef.value);
|
||||
// 设置option
|
||||
chart.setOption(optionPie);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pieBigBox {
|
||||
width: 40vw;
|
||||
// margin: 0.5vw auto 0;
|
||||
// height: 274px;
|
||||
.pieMain {
|
||||
position: relative;
|
||||
border: 1px solid transparent;
|
||||
float: left;
|
||||
.pieBox {
|
||||
margin: 0 auto;
|
||||
margin-top: 1.5vw;
|
||||
width: 15vw;
|
||||
height: 15vw;
|
||||
background: url("~@/assets/images/recruitment/pie-bg@2x.png") no-repeat
|
||||
center;
|
||||
background-size: 100%;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.pieTitle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
margin-top: 0vw;
|
||||
font-size: 1vw;
|
||||
}
|
||||
}
|
||||
ul.pieLsit {
|
||||
float: left;
|
||||
margin: 4vw 0 0 2vw;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.5vw 0 0 0;
|
||||
width: 20vw;
|
||||
li {
|
||||
// font-size: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 3vw;
|
||||
padding: 0 1vw;
|
||||
background: rgba(203, 242, 250, 0.2);
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
border: 1px solid rgba(203, 242, 250, 0.2);
|
||||
margin-top: 1vw;
|
||||
font-size: 0.7vw;
|
||||
> div {
|
||||
height: 100%;
|
||||
line-height: 3vw;
|
||||
}
|
||||
.blockOne,
|
||||
.blockTwo,
|
||||
.blockThree,
|
||||
.blockFour {
|
||||
display: inline-block;
|
||||
width: 0.8vw;
|
||||
height: 0.8vw;
|
||||
margin-right: 1vw;
|
||||
}
|
||||
.blockOne {
|
||||
background-color: #58a8ff;
|
||||
}
|
||||
.blockTwo {
|
||||
background-color: #30dcff;
|
||||
}
|
||||
.blockThree {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.blockFour {
|
||||
background-color: #dd7d4d;
|
||||
}
|
||||
.proportion {
|
||||
display: inline-block;
|
||||
width: 4.5vw;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
176
src/views/recruitment/components/jyknryzjy/xueli.vue
Normal file
176
src/views/recruitment/components/jyknryzjy/xueli.vue
Normal file
@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<div class="pieBigBox">
|
||||
<div class="pieMain">
|
||||
<div class="pieBox" ref="pieRef"></div>
|
||||
<div class="pieTitle">学历占比</div>
|
||||
</div>
|
||||
<ul class="pieLsit">
|
||||
<li>
|
||||
<div><span class="blockOne"></span><span>大学学历</span></div>
|
||||
<div>
|
||||
<span class="numb">322人</span><span class="proportion">49.2%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><span class="blockTwo"></span><span>大专学历</span></div>
|
||||
<div>
|
||||
<span class="numb">241人</span><span class="proportion">36.8%</span>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div><span class="blockThree"></span><span>硕士研究生学历</span></div>
|
||||
<div>
|
||||
<span class="numb">48人</span><span class="proportion">7.33%</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<div><span class="blockFour"></span><span>博士研究生学历</span></div>
|
||||
<div>
|
||||
<span class="numb">44人</span><span class="proportion">6.72%</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
const pieRef = ref(null);
|
||||
const optionPie = {
|
||||
// 设置图形位置
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: "学历占比",
|
||||
type: "pie",
|
||||
radius: ["65%", "80%"],
|
||||
avoidLabelOverlap: false,
|
||||
padAngle: 5,
|
||||
itemStyle: {
|
||||
borderRadius: 1
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: "center"
|
||||
},
|
||||
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{ value: 322, name: "大学学历", itemStyle: { color: "#58A8FF" } },
|
||||
{
|
||||
value: 241,
|
||||
name: "大专学历",
|
||||
itemStyle: { color: "#30DCFF" }
|
||||
},
|
||||
{
|
||||
value: 48,
|
||||
name: "硕士研究生学历",
|
||||
itemStyle: { color: "#ffffff" }
|
||||
},
|
||||
{
|
||||
value: 44,
|
||||
name: "博士研究生学历",
|
||||
itemStyle: { color: "#dd7d4d" }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
if (pieRef.value) {
|
||||
const chart = echarts.init(pieRef.value);
|
||||
// 设置option
|
||||
chart.setOption(optionPie);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pieBigBox {
|
||||
width: 40vw;
|
||||
// margin: 0.5vw auto 0;
|
||||
// height: 274px;
|
||||
.pieMain {
|
||||
position: relative;
|
||||
border: 1px solid transparent;
|
||||
float: left;
|
||||
.pieBox {
|
||||
margin: 0 auto;
|
||||
margin-top: 1.5vw;
|
||||
width: 15vw;
|
||||
height: 15vw;
|
||||
background: url("~@/assets/images/recruitment/pie-bg@2x.png") no-repeat
|
||||
center;
|
||||
background-size: 100%;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
.pieTitle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
margin-top: 0vw;
|
||||
font-size: 1vw;
|
||||
}
|
||||
}
|
||||
ul.pieLsit {
|
||||
float: left;
|
||||
margin: 0vw 0 0 2vw;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.5vw 0 0 0;
|
||||
width: 20vw;
|
||||
li {
|
||||
// font-size: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 3vw;
|
||||
padding: 0 1vw;
|
||||
background: rgba(203, 242, 250, 0.2);
|
||||
border-radius: 4px 4px 4px 4px;
|
||||
border: 1px solid rgba(203, 242, 250, 0.2);
|
||||
margin-top: 1vw;
|
||||
font-size: 0.7vw;
|
||||
> div {
|
||||
height: 100%;
|
||||
line-height: 3vw;
|
||||
}
|
||||
.blockOne,
|
||||
.blockTwo,
|
||||
.blockThree,
|
||||
.blockFour {
|
||||
display: inline-block;
|
||||
width: 0.8vw;
|
||||
height: 0.8vw;
|
||||
margin-right: 1vw;
|
||||
}
|
||||
.blockOne {
|
||||
background-color: #58a8ff;
|
||||
}
|
||||
.blockTwo {
|
||||
background-color: #30dcff;
|
||||
}
|
||||
.blockThree {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
.blockFour {
|
||||
background-color: #dd7d4d;
|
||||
}
|
||||
.proportion {
|
||||
display: inline-block;
|
||||
width: 4.5vw;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
115
src/views/recruitment/components/jyknryzjy/zhuanye.vue
Normal file
115
src/views/recruitment/components/jyknryzjy/zhuanye.vue
Normal file
@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div class="barBox" ref="enterpriseTwoRef"></div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
const enterpriseTwoRef = ref(null);
|
||||
const option = {
|
||||
// 设置图形位置
|
||||
grid: {
|
||||
top: "10%",
|
||||
left: "8%",
|
||||
right: "5%",
|
||||
bottom: "11%"
|
||||
},
|
||||
// 设置图例
|
||||
// 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" // 文字颜色
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 22, // 设置 x 轴文字大小
|
||||
color: "#CBF2FA" // 可以同时设置文字颜色
|
||||
},
|
||||
type: "category",
|
||||
data: [
|
||||
"护理专业",
|
||||
"语言及法学类专业",
|
||||
"工程类专业",
|
||||
"管理及新媒体类专业",
|
||||
"其他"
|
||||
]
|
||||
},
|
||||
yAxis: {
|
||||
//网格线
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: ["#A1C7CD"], // 线颜色
|
||||
opacity: 0.2 // 透明度
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#CBF2FA" // 文字颜色
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
fontSize: 20, // 设置 x 轴文字大小
|
||||
color: "#CBF2FA" // 可以同时设置文字颜色
|
||||
},
|
||||
type: "value"
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "专业人数",
|
||||
type: "bar",
|
||||
showBackground: true,
|
||||
barWidth: 20,
|
||||
data: [56, 41, 39, 25, 494],
|
||||
// 设置柱状图的数值
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
color: "#30DCFF",
|
||||
|
||||
fontSize: 22
|
||||
},
|
||||
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)" }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
if (enterpriseTwoRef.value) {
|
||||
const chart = echarts.init(enterpriseTwoRef.value);
|
||||
// 设置option
|
||||
chart.setOption(option);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.barBox {
|
||||
width: 40vw;
|
||||
height: 20vw;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user