| | |
| | | <!-- 任务事件统计 --> |
| | | <!-- 任务数量统计 --> |
| | | <template> |
| | | <!-- <common-title title="任务时间统计"></common-title> --> |
| | | <div class="task-time"> |
| | | <div class="title">任务数量统计</div> |
| | | <div class="chart" ref="chartRef"></div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import CommonTitle from '@/components/CommonTitle.vue'; |
| | | import * as echarts from 'echarts'; |
| | | import { jobNumBar } from '@/api/home/task'; |
| | | import dayjs from 'dayjs'; |
| | |
| | | trigger: 'axis', |
| | | axisPointer: { |
| | | type: 'shadow' |
| | | }, |
| | | formatter: '{b}: {c} 件' |
| | | }, |
| | | legend: { |
| | | top: '2%', |
| | | textStyle: { |
| | | color: '#6B90B5', |
| | | fontSize: 12, |
| | | } |
| | | }, |
| | | grid: { |
| | | top: '15%', |
| | | left: '3%', |
| | | right: '4%', |
| | | bottom: '3%', |
| | | bottom: '2%', |
| | | containLabel: true |
| | | }, |
| | | xAxis: { |
| | |
| | | }, |
| | | yAxis: { |
| | | type: 'value', |
| | | name: '单位:件', |
| | | nameTextStyle: { |
| | | color: '#E6F7FF', |
| | | fontSize: 12, |
| | | padding: [0, 0, 0, 0] // 调整单位文字位置 |
| | | }, |
| | | axisLine: { |
| | | lineStyle: { |
| | | color: '#fff' |
| | |
| | | }, |
| | | series: [ |
| | | { |
| | | name: '任务数量', |
| | | type: 'bar', |
| | | barWidth: '40%', |
| | | barWidth: '6px', |
| | | itemStyle: { |
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
| | | { offset: 0, color: '#1EE7E7' }, |
| | | { offset: 1, color: 'rgba(30, 231, 231, 0.1)' } |
| | | { offset: 0, color: '#0EECE4' }, |
| | | { offset: 1, color: '#058FE7' } |
| | | ]) |
| | | } |
| | | } |
| | |
| | | <style lang="scss" scoped> |
| | | .task-time { |
| | | font-family: YouSheBiaoTiHei, YouSheBiaoTiHei; |
| | | // margin-left: 29px; |
| | | // padding: 16px 16px; |
| | | width: 340px; |
| | | height: 200px; |
| | | background: linear-gradient( |
| | | 270deg, |
| | | rgba(31, 62, 122, 0) 0%, |
| | | rgba(31, 62, 122, 0.35) 21%, |
| | | #1f3e7a 100% |
| | | ); |
| | | border-radius: 0px 0px 0px 0px; |
| | | opacity: 0.85; |
| | | width: 502px; |
| | | height: 100%; |
| | | margin-left: 14px; |
| | | .title { |
| | | margin-top: 10px; |
| | | width: 502px; |
| | | height: 28.6px; |
| | | background: url('@/assets/images/task/task-num-total.png') no-repeat center / 100% 100%; |
| | | color: #CFEAFF; |
| | | padding-left: 44px; |
| | | line-height: 8px; |
| | | } |
| | | .chart { |
| | | width: 100%; |
| | | height: 100%; |
| | | height: 200px; |
| | | } |
| | | } |
| | | </style> |