Skip to content

M
mes-ui
Commit 04c9b2b8 authored by kangzhenfei's avatar kangzhenfei
Browse files
Options

mnc-echarts

parent 26234a35
Hide whitespace changes
Inline Side-by-side
Showing with 652 additions and 136 deletions
pages/dncmnc/mnc/compose/echart3.vue
View file @ 04c9b2b8
<template> <template>
<div> <div>
<div id="myChart03" style="width:865px;height:316px;top: 0px;"></div> <div id="myChart03" style="width:895px;height:316px;top: 0px;"></div>
</div> </div>
</template> </template>
<script> <script>
......
pages/dncmnc/mnc/compose/echart4.vue
View file @ 04c9b2b8
<template> <template>
<div> <div>
<div id="gauge01" style="width:200px;height:150px;top: 0px;"></div> <div id="myChart04" style="width:100%;height:340px;margin:20px auto;top: 0px;"></div>
</div> </div>
</template> </template>
<script> <script>
...@@ -17,141 +17,61 @@ export default { ...@@ -17,141 +17,61 @@ export default {
}, },
loadEchart() { loadEchart() {
// 基于准备好的dom，初始化echarts实例 // 基于准备好的dom，初始化echarts实例
var gauge01 = this.$echarts.init(document.getElementById('gauge01')) var myChart04 = this.$echarts.init(document.getElementById('myChart04'))
var score = 78;
var name = '名称';
var option = { var option = {
title: {
series: [ text: ''
},
legend: {
data: ['开机', '关机', '故障', '运行'],
right: 55,
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日',
'14日', '15日', '16日', '17日', '18日']
},
yAxis: {
type: 'value'
},
series: [
{ {
type: 'gauge', name: '开机',
min: 0, type: 'bar',
max: 100, barWidth: 8,
radius: '80%', data: [120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134, 90, 230, 210,120, 132, 101, 134]
startAngle: 180,
endAngle: 0,
axisLine: {
show: false,
lineStyle: {
opacity: 0,
width: 12
}
},
splitLine: {
show: false
},
pointer: {
show: false
},
axisTick: {
splitNumber: 10,
length: 12,
lineStyle: {
color: '#004fb0'
}
},
title: {
show: true,
fontSize: 16,
color: '#5faeff',
offsetCenter: [0, '-115%']
},
detail: {
formatter: function (value) {
return '{a|' + value + '} {b|分}'
},
offsetCenter: [0,-20],
rich: {
a: {
fontSize: 32,
color: '#15e198'
},
b: {
fontSize: 14,
color: '#15e198',
padding: [0, 0, 5, 0]
}
}
},
data: [{value: [score], name: name}]
}, },
{ {
name: 'score', name: '关机',
type: 'pie', type: 'bar',
startAngle: 180, barWidth: 8,
hoverAnimation: false, data: [220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310]
radius: [105, 115],
label: {
normal: {
show: false
}
},
data: [
{
value: 0.4,
name: 0.4,
itemStyle: {
normal: {
color: '#fff'
}
}
},
{
value: 0.4,
itemStyle: {
normal: {
color: 'transparent'
}
}
}
]
}, },
{ {
name: 'score', name: '故障',
type: 'pie', type: 'bar',
startAngle: 180, barWidth: 8,
hoverAnimation: false, data: [150, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330, 410,150, 232, 201, 154, 190, 330, 410]
radius: [105, 115], },
label: { {
normal: { name: '运行',
show: false type: 'bar',
} barWidth: 8,
}, data: [320, 332, 301, 334, 390, 330, 320,320, 332, 301, 334, 390, 330, 320,320, 332, 301, 334, 390, 330, 320]
data: [
{
value: [(score * 0.5 /100).toFixed(2)],
name: [(score * 0.5 /100).toFixed(2)],
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#15e198'
}, {
offset: 1, color: '#409eff'
}]
}
}
}
},
{
value: [1- (score * 0.5 /100).toFixed(2)],
itemStyle: {
normal: {
color: 'transparent'
}
}
}
]
} }
] ]
} }
// 绘制图表 // 绘制图表
gauge01.setOption(option) myChart04.setOption(option)
} }
}, },
mounted() { mounted() {
......
pages/dncmnc/mnc/compose/echart5.vue 0 → 100644
View file @ 04c9b2b8
<template>
<div class="pan_box">
<div class="pan01">
<div id="gauge01" class="pan_echarts"></div>
<div id="gauge02" class="pan_echarts"></div>
</div>
<div class="pan02">
<div id="gauge03" class="pan_echarts"></div>
<div id="gauge04" class="pan_echarts"></div>
</div>
</div>
</template>
<script>
export default {
name: 'Echart4',
data() {
return {
disabled: false
}
},
methods: {
handleClose() {
this.$emit('on-close')
},
loadEchart() {
// 基于准备好的dom，初始化echarts实例
var gauge01 = this.$echarts.init(document.getElementById('gauge01'))
var gauge02 = this.$echarts.init(document.getElementById('gauge02'))
var gauge03 = this.$echarts.init(document.getElementById('gauge03'))
var gauge04 = this.$echarts.init(document.getElementById('gauge04'))
var score = 78;
var score02 = 58;
var score03 = 68;
var score04 = 58;
var name = '速率值';
var name02 = '实际值';
var name03 = '进给率';
var name04 = '实际值';
var option = {
series: [
{
type: 'gauge',
min: 0,
max: 100,
radius: '70%',
startAngle: 180,
endAngle: 0,
axisLine: {
show: false,
lineStyle: {
opacity: 0,
width: 5
}
},
splitLine: {
show: false
},
pointer: {
show: false
},
axisTick: {
splitNumber: 10,
length: 6,
radius: '60%',
lineStyle: {
color: '#004fb0'
}
},
title: {
show: true,
fontSize: 16,
color: '#5faeff',
offsetCenter: [0, '-115%']
},
detail: {
formatter: function (value) {
return '{a|' + value + '} {b|%}'
},
offsetCenter: [0,-10],
rich: {
a: {
fontSize: 28,
color: '#15e198'
},
b: {
fontSize: 28,
color: '#15e198',
padding: [0, 0, 0, 0]
}
}
},
data: [{value: [score], name: name}]
},
{
name: 'score',
type: 'pie',
startAngle: 180,
hoverAnimation: false,
radius: [80, 90],
label: {
normal: {
show: false
}
},
data: [
{
value: 0.4,
name: 0.4,
itemStyle: {
normal: {
color: '#ccc'
}
}
},
{
value: 0.4,
itemStyle: {
normal: {
color: 'transparent'
}
}
}
]
},
{
name: 'score',
type: 'pie',
startAngle: 180,
hoverAnimation: false,
radius: [80, 90],
label: {
normal: {
show: false
}
},
data: [
{
value: [(score * 0.5 /100).toFixed(2)],
name: [(score * 0.5 /100).toFixed(2)],
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#15e198'
}, {
offset: 1, color: '#409eff'
}]
}
}
}
},
{
value: [1- (score * 0.5 /100).toFixed(2)],
itemStyle: {
normal: {
color: 'transparent'
}
}
}
]
}
]
}
var option02 = {
series: [
{
type: 'gauge',
min: 0,
max: 100,
radius: '70%',
startAngle: 180,
endAngle: 0,
axisLine: {
show: false,
lineStyle: {
opacity: 0,
width: 5
}
},
splitLine: {
show: false
},
pointer: {
show: false
},
axisTick: {
splitNumber: 10,
length: 6,
radius: '60%',
lineStyle: {
color: '#004fb0'
}
},
title: {
show: true,
fontSize: 16,
color: '#5faeff',
offsetCenter: [0, '-115%']
},
detail: {
formatter: function (value) {
return '{a|' + value + '} {b|%}'
},
offsetCenter: [0,-10],
rich: {
a: {
fontSize: 28,
color: '#15e198'
},
b: {
fontSize: 28,
color: '#15e198',
padding: [0, 0, 0, 0]
}
}
},
data: [{value: [score02], name: name02}]
},
{
name: 'score',
type: 'pie',
startAngle: 180,
hoverAnimation: false,
radius: [80, 90],
label: {
normal: {
show: false
}
},
data: [
{
value: 0.4,
name: 0.4,
itemStyle: {
normal: {
color: '#ccc'
}
}
},
{
value: 0.4,
itemStyle: {
normal: {
color: 'transparent'
}
}
}
]
},
{
name: 'score',
type: 'pie',
startAngle: 180,
hoverAnimation: false,
radius: [80, 90],
label: {
normal: {
show: false
}
},
data: [
{
value: [(score02 * 0.5 /100).toFixed(2)],
name: [(score02 * 0.5 /100).toFixed(2)],
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#15e198'
}, {
offset: 1, color: '#409eff'
}]
}
}
}
},
{
value: [1- (score02 * 0.5 /100).toFixed(2)],
itemStyle: {
normal: {
color: 'transparent'
}
}
}
]
}
]
}
var option03 = {
series: [
{
type: 'gauge',
min: 0,
max: 100,
radius: '70%',
startAngle: 180,
endAngle: 0,
axisLine: {
show: false,
lineStyle: {
opacity: 0,
width: 5
}
},
splitLine: {
show: false
},
pointer: {
show: false
},
axisTick: {
splitNumber: 10,
length: 6,
radius: '60%',
lineStyle: {
color: '#004fb0'
}
},
title: {
show: true,
fontSize: 16,
color: '#5faeff',
offsetCenter: [0, '-115%']
},
detail: {
formatter: function (value) {
return '{a|' + value + '} {b|%}'
},
offsetCenter: [0,-10],
rich: {
a: {
fontSize: 28,
color: '#15e198'
},
b: {
fontSize: 28,
color: '#15e198',
padding: [0, 0, 0, 0]
}
}
},
data: [{value: [score03], name: name03}]
},
{
name: 'score',
type: 'pie',
startAngle: 180,
hoverAnimation: false,
radius: [80, 90],
label: {
normal: {
show: false
}
},
data: [
{
value: 0.4,
name: 0.4,
itemStyle: {
normal: {
color: '#ccc'
}
}
},
{
value: 0.4,
itemStyle: {
normal: {
color: 'transparent'
}
}
}
]
},
{
name: 'score',
type: 'pie',
startAngle: 180,
hoverAnimation: false,
radius: [80, 90],
label: {
normal: {
show: false
}
},
data: [
{
value: [(score03 * 0.5 /100).toFixed(2)],
name: [(score03 * 0.5 /100).toFixed(2)],
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#15e198'
}, {
offset: 1, color: '#409eff'
}]
}
}
}
},
{
value: [1- (score03 * 0.5 /100).toFixed(2)],
itemStyle: {
normal: {
color: 'transparent'
}
}
}
]
}
]
}
var option04 = {
series: [
{
type: 'gauge',
min: 0,
max: 100,
radius: '70%',
startAngle: 180,
endAngle: 0,
axisLine: {
show: false,
lineStyle: {
opacity: 0,
width: 5
}
},
splitLine: {
show: false
},
pointer: {
show: false
},
axisTick: {
splitNumber: 10,
length: 6,
radius: '60%',
lineStyle: {
color: '#004fb0'
}
},
title: {
show: true,
fontSize: 16,
color: '#5faeff',
offsetCenter: [0, '-115%']
},
detail: {
formatter: function (value) {
return '{a|' + value + '} {b|%}'
},
offsetCenter: [0,-10],
rich: {
a: {
fontSize: 28,
color: '#15e198'
},
b: {
fontSize: 28,
color: '#15e198',
padding: [0, 0, 0, 0]
}
}
},
data: [{value: [score04], name: name04}]
},
{
name: 'score',
type: 'pie',
startAngle: 180,
hoverAnimation: false,
radius: [80, 90],
label: {
normal: {
show: false
}
},
data: [
{
value: 0.4,
name: 0.4,
itemStyle: {
normal: {
color: '#ccc'
}
}
},
{
value: 0.4,
itemStyle: {
normal: {
color: 'transparent'
}
}
}
]
},
{
name: 'score',
type: 'pie',
startAngle: 180,
hoverAnimation: false,
radius: [80, 90],
label: {
normal: {
show: false
}
},
data: [
{
value: [(score04 * 0.5 /100).toFixed(2)],
name: [(score04 * 0.5 /100).toFixed(2)],
itemStyle: {
normal: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#15e198'
}, {
offset: 1, color: '#409eff'
}]
}
}
}
},
{
value: [1- (score04 * 0.5 /100).toFixed(2)],
itemStyle: {
normal: {
color: 'transparent'
}
}
}
]
}
]
}
// 绘制图表
gauge01.setOption(option)
gauge02.setOption(option02)
gauge03.setOption(option03)
gauge04.setOption(option04)
}
},
mounted() {
this.loadEchart()
}
}
</script>
<style lang="less" scoped>
.pan_box{
.pan_echarts{
width:450px;
height:450px;
top: 20px;
float:left;
}
.pan01{
width: 100%;
height: 250px;
overflow: hidden;
}
.pan02{
width: 100%;
height: 250px;
overflow: hidden;
}
}
</style>
pages/dncmnc/mnc/mnc.less
View file @ 04c9b2b8
...@@ -42,24 +42,30 @@ ...@@ -42,24 +42,30 @@
border-radius: 3px; border-radius: 3px;
} }
} }
.set_masage02{
line-height: 35px;
}
} }
} }
} }
#echarts{ #echarts{
.set_echarts{ .set_echarts{
.echart3{
height: 800px;
}
.tips{ .tips{
// padding: 20px; // padding: 20px;
.tips_item{ .tips_item{
background: #eff1f7; background: #eff1f7;
margin: 20px; margin: 20px;
line-height: 36px; line-height: 38px;
padding: 0 20px; padding: 0 20px;
.item_top{ .item_top{
border-bottom: 1px solid #b1b1b1; border-bottom: 1px solid #b1b1b1;
} }
.item_center{ .item_center{
text-align: center; text-align: center;
line-height: 32px; // line-height: 32px;
} }
.item_right{ .item_right{
float: right; float: right;
......
pages/dncmnc/mnc/monitoring.vue
View file @ 04c9b2b8
...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
</div> </div>
</Col> </Col>
<Col span="15"> <Col span="15">
<div class="set_masage"> <div class="set_masage set_masage02">
<p>当前状态开始时间：</p> <p>当前状态开始时间：</p>
<p class="time_bg">11:45:05</p> <p class="time_bg">11:45:05</p>
<p>当前状态持续时间：</p> <p>当前状态持续时间：</p>
...@@ -102,13 +102,13 @@ ...@@ -102,13 +102,13 @@
<p class="set_top">加工状态实时信息</p> <p class="set_top">加工状态实时信息</p>
<div class="set_echarts"> <div class="set_echarts">
<Row> <Row>
<Col span="16"> <Col span="17">
<div class="echart3"> <div class="echart3">
<Echart3 ></Echart3> <Echart3 ></Echart3>
<Echart4 ></Echart4> <Echart5 ></Echart5>
</div> </div>
</Col> </Col>
<Col span="8"> <Col span="7">
<div class="tips"> <div class="tips">
<div class="tips_item"> <div class="tips_item">
<Row class="item_top"> <Row class="item_top">
...@@ -164,12 +164,12 @@ ...@@ -164,12 +164,12 @@
<script> <script>
import Echart2 from './compose/echart2' import Echart2 from './compose/echart2'
import Echart3 from './compose/echart3' import Echart3 from './compose/echart3'
import Echart4 from './compose/echart4' import Echart5 from './compose/echart5'
export default { export default {
components: { components: {
Echart2, Echart2,
Echart3, Echart3,
Echart4, Echart5,
}, },
data(){ data(){
return{ return{
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment