error提示
This commit is contained in:
@@ -40,7 +40,7 @@
|
||||
<div class="item_title fl">成品</div>
|
||||
<div class="right_1_up_left" style="backgroundImage: none;">
|
||||
<div class="echart_d3_wrap">
|
||||
<div id="echart_02" style="width: 130%; height: 130%; top: -10px;"></div>
|
||||
<div id="echart_02" style="width: 130%; height: 130%; top: -12px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right_1_up_right">
|
||||
@@ -126,6 +126,288 @@ export default {
|
||||
this.setEchart06()
|
||||
},
|
||||
methods: {
|
||||
setEchart01 () {
|
||||
let value = Number(this.finishRate1)
|
||||
let title = '%'
|
||||
let text = '完成率'
|
||||
let option = {
|
||||
title: [
|
||||
{
|
||||
text: '{a|' + value + '}{b|' + title + '}\n{c|' + text + '}',
|
||||
x: 'center',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 26,
|
||||
color: '#00D9FF',
|
||||
fontFamily: 'SourceHanSansCN',
|
||||
foontWeight: '700'
|
||||
},
|
||||
b: {
|
||||
fontSize: 16,
|
||||
color: '#ffffff',
|
||||
fontFamily: 'SourceHanSansCN',
|
||||
foontWeight: '700',
|
||||
padding: [10, 0, 0, 3]
|
||||
},
|
||||
c: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 13,
|
||||
fontWeight: '700',
|
||||
fontFamily: 'SourceHanSansCN',
|
||||
padding: [10, 0, 0, 0]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
polar: {
|
||||
radius: ['75%', '83%'],
|
||||
center: ['50%', '50%']
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100,
|
||||
show: false
|
||||
},
|
||||
radiusAxis: {
|
||||
type: 'category',
|
||||
show: true,
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{name: '',
|
||||
type: 'bar',
|
||||
roundCap: true,
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: '#0a2543'
|
||||
},
|
||||
data: [value],
|
||||
coordinateSystem: 'polar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#00dfff'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
let echart = document.getElementById('echart_d01')
|
||||
// if (this.myCharts01 !== '') {
|
||||
// this.myCharts01.dispose()
|
||||
// }
|
||||
if (echart !== null) {
|
||||
this.myCharts01 = this.$echarts.init(echart)
|
||||
this.myCharts01.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.myCharts01.resize()
|
||||
})
|
||||
}
|
||||
},
|
||||
setEchart02 () {
|
||||
var color = ['#fb734e', '#e32f46', '#94d96c', '#0bbcb7', '#1a9bfc', '#7049f0', '#e2bb0e', '#B68845']
|
||||
var dataStyle = {
|
||||
normal: {
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
shadowBlur: 40,
|
||||
borderWidth: 10,
|
||||
shadowColor: 'rgba(0, 0, 0, 0)' // 边框阴影
|
||||
}
|
||||
}
|
||||
var placeHolderStyle = {
|
||||
normal: {
|
||||
color: '#393d50',
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
emphasis: {
|
||||
color: '#393d50'
|
||||
}
|
||||
}
|
||||
let option = {
|
||||
// backgroundColor: '#142058',
|
||||
title: {
|
||||
text: '库存数',
|
||||
x: 'center',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
fontWeight: 'normal',
|
||||
fontSize: 14,
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
show: true,
|
||||
formatter: '{b} : <br/>{d}%',
|
||||
backgroundColor: 'rgba(0,0,0,0.7)', // 背景
|
||||
padding: [8, 10], // 内边距
|
||||
extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', // 添加阴影
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
},
|
||||
// legend: {
|
||||
// orient: 'horizontal',
|
||||
// icon: 'circle',
|
||||
// position: 'top',
|
||||
// top: '0',
|
||||
// itemGap: 12,
|
||||
// data: ['入库数', '出库数', '库存数', '04', '05', '06'],
|
||||
// textStyle: {
|
||||
// color: '#fff',
|
||||
// }
|
||||
// },
|
||||
series: [
|
||||
{
|
||||
name: 'Line 1',
|
||||
type: 'pie',
|
||||
clockWise: true,
|
||||
radius: [55, 65],
|
||||
center: ['50%', '50%'],
|
||||
itemStyle: dataStyle,
|
||||
hoverAnimation: false,
|
||||
startAngle: 90,
|
||||
label: {
|
||||
borderRadius: '10'
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 70,
|
||||
name: '入库数',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: color[4]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: color[5]
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
name: '',
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: placeHolderStyle
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Line 2',
|
||||
type: 'pie',
|
||||
clockWise: true,
|
||||
radius: [45, 55],
|
||||
center: ['50%', '50%'],
|
||||
itemStyle: dataStyle,
|
||||
hoverAnimation: false,
|
||||
startAngle: 90,
|
||||
data: [
|
||||
{
|
||||
value: 80,
|
||||
name: '出库数',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: color[2]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: color[3]
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 20,
|
||||
name: '',
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: placeHolderStyle
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Line 3',
|
||||
type: 'pie',
|
||||
clockWise: true,
|
||||
radius: [35, 45],
|
||||
center: ['50%', '50%'],
|
||||
itemStyle: dataStyle,
|
||||
hoverAnimation: false,
|
||||
startAngle: 90,
|
||||
data: [
|
||||
{
|
||||
value: 100,
|
||||
name: '库存数',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: color[6]
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: color[7]
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
name: '',
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: placeHolderStyle
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
let echart = document.getElementById('echart_02')
|
||||
// if (this.myCharts02 !== '') {
|
||||
// this.myCharts02.dispose()
|
||||
// }
|
||||
if (echart !== null) {
|
||||
this.myCharts02 = this.$echarts.init(echart)
|
||||
this.myCharts02.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.myCharts02.resize()
|
||||
})
|
||||
}
|
||||
},
|
||||
setEchart03 () {
|
||||
let data1 = []
|
||||
let data2 = []
|
||||
@@ -833,288 +1115,6 @@ export default {
|
||||
window.addEventListener('resize', () => {
|
||||
this.myCharts10.resize()
|
||||
})
|
||||
},
|
||||
setEchart01 () {
|
||||
let value = Number(this.finishRate1)
|
||||
let title = '%'
|
||||
let text = '完成率'
|
||||
let option = {
|
||||
title: [
|
||||
{
|
||||
text: '{a|' + value + '}{b|' + title + '}\n{c|' + text + '}',
|
||||
x: 'center',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 26,
|
||||
color: '#00D9FF',
|
||||
fontFamily: 'SourceHanSansCN',
|
||||
foontWeight: '700'
|
||||
},
|
||||
b: {
|
||||
fontSize: 16,
|
||||
color: '#ffffff',
|
||||
fontFamily: 'SourceHanSansCN',
|
||||
foontWeight: '700',
|
||||
padding: [10, 0, 0, 3]
|
||||
},
|
||||
c: {
|
||||
color: '#FFFFFF',
|
||||
fontSize: 13,
|
||||
fontWeight: '700',
|
||||
fontFamily: 'SourceHanSansCN',
|
||||
padding: [10, 0, 0, 0]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
polar: {
|
||||
radius: ['75%', '83%'],
|
||||
center: ['50%', '50%']
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100,
|
||||
show: false
|
||||
},
|
||||
radiusAxis: {
|
||||
type: 'category',
|
||||
show: true,
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{name: '',
|
||||
type: 'bar',
|
||||
roundCap: true,
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: '#0a2543'
|
||||
},
|
||||
data: [value],
|
||||
coordinateSystem: 'polar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#00dfff'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
let echart = document.getElementById('echart_d01')
|
||||
// if (this.myCharts01 !== '') {
|
||||
// this.myCharts01.dispose()
|
||||
// }
|
||||
if (echart !== null) {
|
||||
this.myCharts01 = this.$echarts.init(echart)
|
||||
this.myCharts01.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.myCharts01.resize()
|
||||
})
|
||||
}
|
||||
},
|
||||
setEchart02 () {
|
||||
var color = ["#fb734e", "#e32f46", "#94d96c", "#0bbcb7", "#1a9bfc", "#7049f0", "#e2bb0e", "#B68845"];
|
||||
var dataStyle = {
|
||||
normal: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
shadowBlur: 40,
|
||||
borderWidth: 10,
|
||||
shadowColor: "rgba(0, 0, 0, 0)", //边框阴影
|
||||
},
|
||||
};
|
||||
var placeHolderStyle = {
|
||||
normal: {
|
||||
color: "#393d50",
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
emphasis: {
|
||||
color: "#393d50",
|
||||
},
|
||||
};
|
||||
let option = {
|
||||
// backgroundColor: "#142058",
|
||||
title: {
|
||||
text: "库存数",
|
||||
x: "center",
|
||||
y: "center",
|
||||
textStyle: {
|
||||
fontWeight: "normal",
|
||||
fontSize: 14,
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
show: true,
|
||||
formatter: "{b} : <br/>{d}%",
|
||||
backgroundColor: "rgba(0,0,0,0.7)", // 背景
|
||||
padding: [8, 10], //内边距
|
||||
extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
|
||||
textStyle: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
// legend: {
|
||||
// orient: "horizontal",
|
||||
// icon: 'circle',
|
||||
// position: 'top',
|
||||
// top: "0",
|
||||
// itemGap: 12,
|
||||
// data: ["入库数", "出库数", "库存数", "04", "05", "06"],
|
||||
// textStyle: {
|
||||
// color: "#fff",
|
||||
// },
|
||||
// },
|
||||
series: [
|
||||
{
|
||||
name: "Line 1",
|
||||
type: "pie",
|
||||
clockWise: true,
|
||||
radius: [50, 60],
|
||||
center: ["50%", "50%"],
|
||||
itemStyle: dataStyle,
|
||||
hoverAnimation: false,
|
||||
startAngle: 90,
|
||||
label: {
|
||||
borderRadius: "10",
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 70,
|
||||
name: "入库数",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: color[4],
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: color[5],
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 30,
|
||||
name: "",
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: placeHolderStyle,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Line 2",
|
||||
type: "pie",
|
||||
clockWise: true,
|
||||
radius: [40, 50],
|
||||
center: ["50%", "50%"],
|
||||
itemStyle: dataStyle,
|
||||
hoverAnimation: false,
|
||||
startAngle: 90,
|
||||
data: [
|
||||
{
|
||||
value: 80,
|
||||
name: "出库数",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: color[2],
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: color[3],
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 20,
|
||||
name: "",
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: placeHolderStyle,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Line 3",
|
||||
type: "pie",
|
||||
clockWise: true,
|
||||
radius: [30, 40],
|
||||
center: ["50%", "50%"],
|
||||
itemStyle: dataStyle,
|
||||
hoverAnimation: false,
|
||||
startAngle: 90,
|
||||
data: [
|
||||
{
|
||||
value: 100,
|
||||
name: "库存数",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: color[6],
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: color[7],
|
||||
},
|
||||
]),
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 0,
|
||||
name: "",
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
itemStyle: placeHolderStyle,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
let echart = document.getElementById('echart_02')
|
||||
// if (this.myCharts02 !== '') {
|
||||
// this.myCharts02.dispose()
|
||||
// }
|
||||
if (echart !== null) {
|
||||
this.myCharts02 = this.$echarts.init(echart)
|
||||
this.myCharts02.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
this.myCharts02.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1135,7 +1135,8 @@ export default {
|
||||
padding-left 3px
|
||||
.n_body_container
|
||||
_wh(100%, calc(100% - 84px))
|
||||
padding 40px 0 20px 54px
|
||||
// padding 40px 0 20px 54px
|
||||
padding 40px 40px 20px 14px
|
||||
.n_body_container_wraper
|
||||
_wh(100%, 100%)
|
||||
.box1
|
||||
|
||||
Reference in New Issue
Block a user