<template>
|
<div class="charts-container">
|
<div class="top">
|
共计<span>41515152</span>人/次
|
</div>
|
<el-select v-model="lineQuery.companyId" :teleported="false" placeholder="Select" size="small">
|
<el-option :key="1" label="公司一" :value="1"/>
|
</el-select>
|
<div id="main"></div>
|
</div>
|
</template>
|
<script setup>
|
import * as echarts from 'echarts';
|
import {onMounted} from "vue";
|
|
onMounted(() => {
|
initChart()
|
})
|
const lineQuery = {
|
companyId: 1
|
}
|
const initChart = () => {
|
var chartDom = document.getElementById('main');
|
var myChart = echarts.init(chartDom);
|
var option;
|
|
option = {
|
title: [
|
{
|
text: '领用统计（人/次）',
|
left: '0',
|
top: '2%',
|
textStyle: {
|
fontSize: 12,
|
color: 'rgba(255,255,255,.6)',
|
fontWeight: 'normal'
|
}
|
}
|
],
|
xAxis: {
|
type: 'category',
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
axisLabel: {
|
color: '#fff'
|
},
|
axisTick: {
|
show: false
|
}
|
},
|
yAxis: {
|
type: 'value',
|
splitLine: {
|
lineStyle: {
|
color: 'rgba(255,255,255,.1)',
|
type: 'dashed'
|
}
|
},
|
axisLabel: {
|
color: 'rgba(255,255,255,.6)'
|
}
|
},
|
grid: [
|
{
|
top: '15%',
|
right: '2%',
|
bottom: '10%'
|
}
|
],
|
series: [
|
{
|
data: [150, 230, 224, 218, 135, 147, 260],
|
type: 'line',
|
label: {
|
show: true,
|
color: '#fff',
|
textBorderColor: 'transparent',
|
fontSize: 8
|
},
|
// showSymbol: false,
|
lineStyle: {
|
color: '#54d5ff'
|
},
|
itemStyle: {
|
color: '#54d5ff',
|
}
|
}
|
]
|
};
|
|
option && myChart.setOption(option);
|
}
|
|
</script>
|
|
<style lang="postcss" scoped>
|
@font-face {
|
font-family: "LKJH";
|
src: url("@/assets/styles/LKJH.ttf");
|
font-style: normal;
|
font-weight: normal;
|
}
|
|
.charts-container {
|
width: 100%;
|
height: 100%;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.top {
|
width: 100%;
|
font-size: 14px;
|
height: 50px;
|
line-height: 50px;
|
text-align: center;
|
margin: 10px 0 20px;
|
|
span {
|
display: inline-block;
|
font-family: "LKJH";
|
vertical-align: middle;
|
font-size: 28px;
|
color: yellow;
|
margin: 0 5px;
|
padding: 5px 10px;
|
letter-spacing: 4px;
|
border-top: 1px solid #155285;
|
border-bottom: 1px solid #155285;
|
background: url('../../../../assets/bigScreen/numberBg.png') left center no-repeat,
|
url('../../../../assets/bigScreen/numberBg.png') right center no-repeat;
|
background-size: 1px 100%;
|
}
|
}
|
|
#main {
|
flex: 1;
|
width: 100%;
|
}
|
:deep(.el-input__wrapper){
|
height: 24px;
|
box-shadow: none;
|
border: 1px solid #11FEEE;
|
background: rgba(6,24,88,.6);
|
color: #fff;
|
|
:deep(.el-input__inner){
|
font-size: 10px;
|
color: red !important
|
}
|
.el-icon{
|
display: none;
|
color: #fff;
|
}
|
}
|
.el-select {
|
width: 100%;
|
height: 24px;
|
}
|
|
:v-deep(.el-popper) {
|
background-color: rgba(10, 31, 92, 1);
|
border: 1px solid rgba(17, 254, 238, .4);
|
color: #11FEEE;
|
|
.el-icon {
|
color: #11FEEE;
|
}
|
|
.el-select-dropdown__item {
|
color: #11FEEE;
|
}
|
|
.el-select-dropdown__item.hover {
|
background: #0049af;
|
}
|
}
|
|
:v-deep(.el-popper__arrow) {
|
&::before {
|
background-color: rgba(10, 31, 92, .6) !important;
|
border: 1px solid rgba(17, 254, 238, .4);
|
}
|
}
|
</style>
|
<style lang="scss">
|
.charts-container{
|
:deep(.el-input__wrapper){
|
height: 24px;
|
box-shadow: none;
|
border: 1px solid #11FEEE;
|
background: rgba(6,24,88,.6);
|
color: #fff;
|
|
:deep(.el-input__inner){
|
font-size: 10px;
|
color: #fff !important
|
}
|
.el-icon{
|
display: none;
|
color: #fff;
|
}
|
}
|
.el-select {
|
width: 100%;
|
height: 24px;
|
}
|
|
:deep(.el-popper) {
|
background-color: rgba(10, 31, 92, 1);
|
border: 1px solid rgba(17, 254, 238, .4);
|
color: #11FEEE;
|
|
.el-icon {
|
color: #11FEEE;
|
}
|
|
.el-select-dropdown__item {
|
color: #11FEEE;
|
}
|
|
.el-select-dropdown__item.hover {
|
background: #0049af;
|
}
|
}
|
|
:v-deep(.el-popper__arrow) {
|
&::before {
|
background-color: rgba(10, 31, 92, .6) !important;
|
border: 1px solid rgba(17, 254, 238, .4);
|
}
|
}
|
}
|
</style>
|
