460 lines
10 KiB
Vue
460 lines
10 KiB
Vue
<template>
|
||
<ContentWrap>
|
||
<div class="top-box">
|
||
<div class="top-box-left"> 统计视图 </div>
|
||
<div class="top-box-right">
|
||
<div class="top-box-right-title"> 统计方式 </div>
|
||
<el-select v-model="type" placeholder="请选择" style="width: 100px; margin-left: 10px">
|
||
<el-option :label="'天'" :value="1" />
|
||
<el-option :label="'周'" :value="2" />
|
||
<el-option :label="'月'" :value="3" />
|
||
</el-select>
|
||
<el-button style="margin-left: 16px">看板管理</el-button>
|
||
</div>
|
||
</div>
|
||
</ContentWrap>
|
||
|
||
<div class="">
|
||
<el-row :gutter="16">
|
||
<el-col :span="12">
|
||
<el-card style="width: 100%">
|
||
<div class="charts-title"> 任务总览 </div>
|
||
<div ref="chartDom" style="width: 100%; height: 400px"></div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-card style="width: 100%">
|
||
<div class="charts-title"> 任务完成率 </div>
|
||
<div ref="chartDomFinish" style="width: 100%; height: 400px"></div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
<el-row :gutter="16" style="margin-top: 12px">
|
||
<el-col :span="12">
|
||
<el-card style="width: 100%">
|
||
<div class="charts-title"> AGV工作利用率统计 </div>
|
||
<div ref="chartDomAgv" style="width: 100%; height: 400px"></div>
|
||
</el-card>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-card style="width: 100%">
|
||
<div class="charts-title"> 任务异常数 </div>
|
||
<div ref="chartDomError" style="width: 100%; height: 400px"></div>
|
||
</el-card>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, onUnmounted, nextTick, reactive } from 'vue'
|
||
import * as echarts from 'echarts'
|
||
|
||
|
||
// 创建一个响应式引用来保存DOM元素
|
||
const chartDom = ref(null)
|
||
const chartDomFinish = ref(null)
|
||
const chartDomError = ref(null)
|
||
const chartDomAgv = ref(null)
|
||
|
||
// 初始化ECharts实例并设置配置项（这里以折线图为例，但可灵活替换）
|
||
onMounted(async () => {
|
||
await nextTick() // 确保DOM已经渲染完成
|
||
initEcharts()
|
||
})
|
||
|
||
const initEcharts = () => {
|
||
initOne()
|
||
initTwo()
|
||
initFour()
|
||
}
|
||
|
||
const chartInstance = ref(null)
|
||
const initOne = () => {
|
||
chartInstance.value = echarts.init(chartDom.value)
|
||
let ydata = [
|
||
{
|
||
name: '执行中',
|
||
value: 18
|
||
},
|
||
{
|
||
name: '已完成',
|
||
value: 16
|
||
},
|
||
{
|
||
name: '已取消',
|
||
value: 15
|
||
},
|
||
{
|
||
name: '未开始',
|
||
value: 14
|
||
},
|
||
{
|
||
name: '异常',
|
||
value: 10
|
||
}
|
||
]
|
||
let color = ['#0147EB', '#01BCEB', '#C800FF', '#F1CD0B', '#EB0000']
|
||
let xdata = ['执行中', '已完成', '已取消', '未开始', '异常']
|
||
const option = {
|
||
backgroundColor: 'rgba(255,255,255,1)',
|
||
color: color,
|
||
// tooltip: {
|
||
// trigger: 'item',
|
||
// // formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||
// },
|
||
legend: {
|
||
orient: 'vartical',
|
||
x: 'left',
|
||
top: 'center',
|
||
left: '60%',
|
||
bottom: '0%',
|
||
data: xdata,
|
||
itemWidth: 10,
|
||
itemHeight: 10,
|
||
itemGap: 16,
|
||
formatter: function (name) {
|
||
let str = ''
|
||
ydata.forEach((item) => {
|
||
if (item.name == name) {
|
||
str = `{c|${item.name}} {a|${item.value}}`
|
||
}
|
||
})
|
||
return str
|
||
},
|
||
textStyle: {
|
||
rich: {
|
||
a: {
|
||
color: '#0D162A',
|
||
fontSize: 18
|
||
},
|
||
c: {
|
||
color: '#536387',
|
||
fontSize: 12
|
||
}
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
clockwise: false, //饼图的扇区是否是顺时针排布
|
||
minAngle: 2, //最小的扇区角度（0 ~ 360）
|
||
radius: ['50%', '65%'],
|
||
center: ['30%', '50%'],
|
||
avoidLabelOverlap: false,
|
||
itemStyle: {
|
||
//图形样式
|
||
normal: {
|
||
borderColor: '#ffffff',
|
||
borderWidth: 6
|
||
}
|
||
},
|
||
label: {
|
||
// '{text|{b}}\n{c} ({d}%)'
|
||
normal: {
|
||
show: true,
|
||
position: 'center',
|
||
formatter: '{c|234,12} \n {a|任务总数}',
|
||
rich: {
|
||
c: {
|
||
color: '#0D162A',
|
||
fontSize: 15,
|
||
fontWeight: 'bold',
|
||
height: 30
|
||
},
|
||
|
||
a: {
|
||
align: 'center',
|
||
color: '#727272',
|
||
fontSize: 12
|
||
}
|
||
}
|
||
}
|
||
},
|
||
labelLine: {
|
||
length: 15,
|
||
length2: 0,
|
||
maxSurfaceAngle: 80
|
||
},
|
||
data: ydata
|
||
}
|
||
]
|
||
}
|
||
chartInstance.value.setOption(option)
|
||
}
|
||
|
||
const chartInstanceTwo = ref(null)
|
||
const initTwo = () => {
|
||
chartInstanceTwo.value = echarts.init(chartDomFinish.value)
|
||
let option = {
|
||
backgroundColor: '#fff',
|
||
grid: {
|
||
top: '9%',
|
||
bottom: '19%',
|
||
left: '6%',
|
||
right: '4%'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
label: {
|
||
show: true
|
||
}
|
||
},
|
||
xAxis: {
|
||
boundaryGap: true, //默认，坐标轴留白策略
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
alignWithLabel: true
|
||
},
|
||
data: [
|
||
'武汉',
|
||
'襄阳',
|
||
'黄冈',
|
||
'荆门',
|
||
'十堰',
|
||
'随州',
|
||
'鄂州',
|
||
'恩施',
|
||
'宜昌',
|
||
'孝感',
|
||
'咸宁',
|
||
'仙桃',
|
||
'潜江',
|
||
'天门',
|
||
'黄石',
|
||
'荆州',
|
||
'神农架'
|
||
]
|
||
},
|
||
yAxis: {
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'solid',
|
||
color: '#E2E7F5'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitArea: {
|
||
show: true,
|
||
areaStyle: {
|
||
color: 'rgb(245,250,254)'
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
type: 'line',
|
||
symbol: 'circle',
|
||
symbolSize: 1,
|
||
lineStyle: {
|
||
color: '#0147EB'
|
||
},
|
||
|
||
label: {
|
||
show: false,
|
||
distance: 1,
|
||
emphasis: {
|
||
show: true,
|
||
offset: [25, -2],
|
||
backgroundColor: 'rgba(0,0,0,0.7)',
|
||
color: '#FFF',
|
||
padding: [8, 20, 8, 6],
|
||
//width:60,
|
||
height: 36,
|
||
formatter: function (params) {
|
||
var name = params.name
|
||
var value = params.data
|
||
var str = name + '\n数据量：' + value
|
||
return str
|
||
},
|
||
rich: {
|
||
bg: {
|
||
width: 78,
|
||
//height:42,
|
||
color: '#FFF',
|
||
padding: [20, 0, 20, 10]
|
||
},
|
||
br: {
|
||
width: '100%',
|
||
height: '100%'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
data: [
|
||
2000, 1800, 2800, 900, 1600, 2000, 3000, 2030, 1356, 1900, 4000, 3000, 2000, 3000, 4200,
|
||
3200, 3800
|
||
]
|
||
}
|
||
]
|
||
}
|
||
chartInstanceTwo.value.setOption(option)
|
||
}
|
||
|
||
const chartInstanceFour = ref(null)
|
||
const initFour = () => {
|
||
chartInstanceFour.value = echarts.init(chartDomError.value)
|
||
let option = {
|
||
backgroundColor: '#fff',
|
||
grid: {
|
||
top: '9%',
|
||
bottom: '19%',
|
||
left: '6%',
|
||
right: '4%'
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
label: {
|
||
show: true
|
||
}
|
||
},
|
||
xAxis: {
|
||
boundaryGap: true, //默认，坐标轴留白策略
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false,
|
||
alignWithLabel: true
|
||
},
|
||
data: [
|
||
'武汉',
|
||
'襄阳',
|
||
'黄冈',
|
||
'荆门',
|
||
'十堰',
|
||
'随州',
|
||
'鄂州',
|
||
'恩施',
|
||
'宜昌',
|
||
'孝感',
|
||
'咸宁',
|
||
'仙桃',
|
||
'潜江',
|
||
'天门',
|
||
'黄石',
|
||
'荆州',
|
||
'神农架'
|
||
]
|
||
},
|
||
yAxis: {
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: 'solid',
|
||
color: '#E2E7F5'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitArea: {
|
||
show: true,
|
||
areaStyle: {
|
||
color: 'rgb(245,250,254)'
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
type: 'line',
|
||
symbol: 'circle',
|
||
symbolSize: 1,
|
||
lineStyle: {
|
||
color: '#0147EB'
|
||
},
|
||
|
||
label: {
|
||
show: false,
|
||
distance: 1,
|
||
emphasis: {
|
||
show: true,
|
||
offset: [25, -2],
|
||
backgroundColor: 'rgba(0,0,0,0.7)',
|
||
color: '#FFF',
|
||
padding: [8, 20, 8, 6],
|
||
//width:60,
|
||
height: 36,
|
||
formatter: function (params) {
|
||
var name = params.name
|
||
var value = params.data
|
||
var str = name + '\n数据量：' + value
|
||
return str
|
||
},
|
||
rich: {
|
||
bg: {
|
||
width: 78,
|
||
//height:42,
|
||
color: '#FFF',
|
||
padding: [20, 0, 20, 10]
|
||
},
|
||
br: {
|
||
width: '100%',
|
||
height: '100%'
|
||
}
|
||
}
|
||
}
|
||
},
|
||
data: [
|
||
2000, 1800, 2800, 900, 1600, 2000, 3000, 2030, 1356, 1900, 4000, 3000, 2000, 3000, 4200,
|
||
3200, 3800
|
||
]
|
||
}
|
||
]
|
||
}
|
||
chartInstanceFour.value.setOption(option)
|
||
}
|
||
// 销毁ECharts实例
|
||
onUnmounted(() => {
|
||
if (chartInstance.value != null && chartInstance.value.dispose) {
|
||
chartInstance.value.dispose()
|
||
}
|
||
})
|
||
|
||
const type = ref(1)
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.top-box {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.top-box-left {
|
||
color: #0d162a;
|
||
font-size: 18px;
|
||
}
|
||
.top-box-right {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.top-box-right-title {
|
||
font-family:
|
||
PingFangSC,
|
||
PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #0d162a;
|
||
}
|
||
</style>
|