1321 lines
35 KiB
Vue
1321 lines
35 KiB
Vue
<template>
|
||
<div class="n_container">
|
||
<div class="n_header">
|
||
<h1>晟华生产数</h1>
|
||
</div>
|
||
<div class="n_body_container">
|
||
<div class="n_body_container_wraper">
|
||
<div class="box1">
|
||
<div class="item_wrap">
|
||
<div class="item_tip">
|
||
<div class="item_tip_left">混料</div>
|
||
</div>
|
||
<div class="item_content_3">
|
||
<div class="right_1_up">
|
||
<div class="item_title">混料</div>
|
||
<div class="right_1_up_left">
|
||
<div class="echart_d3_wrap">
|
||
<div id="echart_01" style="width: 100%; height: 100%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="right_1_up_right">
|
||
<div class="right_1_up_right_item">
|
||
<p class="right_1_up_p1">当日计划生产：</p>
|
||
<p class="right_1_up_p2">100<span>吨</span></p>
|
||
</div>
|
||
<div class="right_1_up_right_item">
|
||
<p class="right_1_up_p1">当日实际生产：</p>
|
||
<p class="right_1_up_p2">80<span>吨</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="item_wrap">
|
||
<div class="item_tip">
|
||
<div class="item_tip_left">成型</div>
|
||
</div>
|
||
<div class="item_content_3">
|
||
<div class="right_1_up">
|
||
<div class="item_title">成型</div>
|
||
<div class="right_1_up_left">
|
||
<div class="echart_d3_wrap">
|
||
<div id="echart_02" style="width: 100%; height: 100%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="right_1_up_right">
|
||
<div class="right_1_up_right_item">
|
||
<p class="right_1_up_p1">当日计划生产：</p>
|
||
<p class="right_1_up_p2">100<span>万块</span></p>
|
||
</div>
|
||
<div class="right_1_up_right_item">
|
||
<p class="right_1_up_p1">当日实际生产：</p>
|
||
<p class="right_1_up_p2">80<span>万块</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="box2">
|
||
<div class="item_wrap">
|
||
<div class="item_tip">
|
||
<div class="item_tip_left">当日混料生产</div>
|
||
</div>
|
||
<div class="item_content item_content_3">
|
||
<div id="echart_03" style="width: 100%; height: 100%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="item_wrap">
|
||
<div class="item_tip">
|
||
<div class="item_tip_left">当日压制生产</div>
|
||
</div>
|
||
<div class="item_content item_content_3">
|
||
<div id="echart_04" style="width: 100%; height: 100%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="box2">
|
||
<div class="item_wrap">
|
||
<div class="item_tip">
|
||
<div class="item_tip_left">本周混料生产</div>
|
||
</div>
|
||
<div class="item_content item_content_3">
|
||
<div id="echart_05" style="width: 100%; height: 100%"></div>
|
||
</div>
|
||
</div>
|
||
<div class="item_wrap">
|
||
<div class="item_tip">
|
||
<div class="item_tip_left">本周压制生产</div>
|
||
</div>
|
||
<div class="item_content item_content_3">
|
||
<div id="echart_06" style="width: 100%; height: 100%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'one',
|
||
data () {
|
||
return {
|
||
finishRate1: 80,
|
||
finishRate2: 90,
|
||
echartData03: [{date: '碾机1', elbow_qty: '15'}, {date: '碾机2', elbow_qty: '25'}, {date: '碾机3', elbow_qty: '8'}],
|
||
echartData05: [{date: '碾机1', elbow_qty: '10'}, {date: '碾机2', elbow_qty: '20'}, {date: '碾机3', elbow_qty: '18'}],
|
||
echartData04: [{data1: '10', data2: '15', data3: '9', data4: '5', device: '压机1'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '压机2'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '压机3'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '压机4'}],
|
||
echartData06: [{data1: '30', data2: '20', data3: '9', data4: '5', device: '压机1'}, {data1: '20', data2: '15', data3: '9', data4: '5', device: '压机2'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '压机3'}, {data1: '10', data2: '15', data3: '9', data4: '5', device: '压机4'}],
|
||
myCharts01: '',
|
||
myCharts02: '',
|
||
myCharts03: '',
|
||
myCharts04: '',
|
||
myCharts05: '',
|
||
myCharts06: ''
|
||
}
|
||
},
|
||
mounted () {
|
||
this.setEchart01()
|
||
this.setEchart02()
|
||
this.setEchart03()
|
||
this.setEchart04()
|
||
this.setEchart05()
|
||
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_01')
|
||
// 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 () {
|
||
let value = Number(this.finishRate2)
|
||
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_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 date = []
|
||
let data1 = []
|
||
this.echartData03.map(e => {
|
||
date.push(e.date)
|
||
data1.push(e.elbow_qty)
|
||
})
|
||
let option = {
|
||
grid: {
|
||
top: 50,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
containLabel: true
|
||
},
|
||
legend: {
|
||
icon: 'rect',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 14,
|
||
lineHeight: 14
|
||
},
|
||
itemGap: 30.86,
|
||
itemWidth: 14.16,
|
||
itemHeight: 7.38,
|
||
data: [{name: '产量（kg）', itemStyle: {color: '#0E90FD'}}]
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: '#8FABBF'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 16
|
||
}
|
||
// rotate: 50
|
||
},
|
||
data: date
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitNumber: 2,
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: [8, 4],
|
||
dashOffset: 4,
|
||
color: '#8FABBF'
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '产量（kg）',
|
||
type: 'bar',
|
||
barWidth: '8',
|
||
itemStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(96,112,128,0.10)',
|
||
opacity: 1
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: '#0E90FD',
|
||
opacity: 0.1
|
||
}
|
||
])
|
||
}
|
||
},
|
||
data: data1
|
||
}
|
||
]
|
||
}
|
||
let echart = document.getElementById('echart_03')
|
||
if (this.myCharts03 !== '') {
|
||
this.myCharts03.dispose()
|
||
}
|
||
if (echart !== null) {
|
||
this.myCharts03 = this.$echarts.init(echart)
|
||
this.myCharts03.setOption(option)
|
||
window.addEventListener('resize', () => {
|
||
this.myCharts03.resize()
|
||
})
|
||
}
|
||
},
|
||
setEchart04 () {
|
||
let data1 = []
|
||
let data2 = []
|
||
let data3 = []
|
||
let data4 = []
|
||
let device = []
|
||
this.echartData04.map(e => {
|
||
data1.push(e.data1)
|
||
data2.push(e.data2)
|
||
data3.push(e.data3)
|
||
data4.push(e.data4)
|
||
device.push(e.device)
|
||
})
|
||
let option = {
|
||
grid: {
|
||
top: 50,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
containLabel: true
|
||
},
|
||
legend: {
|
||
icon: 'rect',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 14,
|
||
lineHeight: 14
|
||
},
|
||
itemGap: 30.86,
|
||
itemWidth: 14.16,
|
||
itemHeight: 7.38,
|
||
data: [{name: '合格数', itemStyle: {color: '#33CCCC'}}, {name: '不合格数', itemStyle: {color: '#EAAD24'}}]
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: '#8FABBF'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 16
|
||
}
|
||
},
|
||
data: device
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitNumber: 2,
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: [8, 4],
|
||
dashOffset: 4,
|
||
color: '#8FABBF'
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '合格数',
|
||
type: 'bar',
|
||
barWidth: '8',
|
||
itemStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#33CCCC',
|
||
opacity: 1
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(31,89,89,0.25)',
|
||
opacity: 0.25
|
||
}
|
||
])
|
||
}
|
||
},
|
||
data: data1
|
||
},
|
||
{
|
||
name: '不合格数',
|
||
type: 'bar',
|
||
barWidth: '8',
|
||
itemStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#B68845',
|
||
opacity: 1
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(134,98,45,0.25)',
|
||
opacity: 0.25
|
||
}
|
||
])
|
||
}
|
||
},
|
||
data: data2
|
||
}
|
||
]
|
||
}
|
||
let echart = document.getElementById('echart_04')
|
||
// if (this.myCharts04 !== '') {
|
||
// this.myCharts04.dispose()
|
||
// }
|
||
if (echart !== null) {
|
||
this.myCharts04 = this.$echarts.init(echart)
|
||
this.myCharts04.setOption(option)
|
||
window.addEventListener('resize', () => {
|
||
this.myCharts04.resize()
|
||
})
|
||
}
|
||
},
|
||
setEchart05 () {
|
||
let date = []
|
||
let data1 = []
|
||
this.echartData05.map(e => {
|
||
date.push(e.date)
|
||
data1.push(e.elbow_qty)
|
||
})
|
||
let option = {
|
||
grid: {
|
||
top: 50,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
containLabel: true
|
||
},
|
||
legend: {
|
||
icon: 'rect',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 14,
|
||
lineHeight: 14
|
||
},
|
||
itemGap: 30.86,
|
||
itemWidth: 14.16,
|
||
itemHeight: 7.38,
|
||
data: [{name: '产量（kg）', itemStyle: {color: '#0E90FD'}}]
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: '#8FABBF'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 16
|
||
}
|
||
// rotate: 50
|
||
},
|
||
data: date
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitNumber: 2,
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: [8, 4],
|
||
dashOffset: 4,
|
||
color: '#8FABBF'
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '产量（kg）',
|
||
type: 'bar',
|
||
barWidth: '8',
|
||
itemStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(96,112,128,0.10)',
|
||
opacity: 1
|
||
},
|
||
{
|
||
offset: 0,
|
||
color: '#0E90FD',
|
||
opacity: 0.1
|
||
}
|
||
])
|
||
}
|
||
},
|
||
data: data1
|
||
}
|
||
]
|
||
}
|
||
let echart = document.getElementById('echart_05')
|
||
if (this.myCharts05 !== '') {
|
||
this.myCharts05.dispose()
|
||
}
|
||
if (echart !== null) {
|
||
this.myCharts05 = this.$echarts.init(echart)
|
||
this.myCharts05.setOption(option)
|
||
window.addEventListener('resize', () => {
|
||
this.myCharts05.resize()
|
||
})
|
||
}
|
||
},
|
||
setEchart06 () {
|
||
let data1 = []
|
||
let data2 = []
|
||
let data3 = []
|
||
let data4 = []
|
||
let device = []
|
||
this.echartData06.map(e => {
|
||
data1.push(e.data1)
|
||
data2.push(e.data2)
|
||
data3.push(e.data3)
|
||
data4.push(e.data4)
|
||
device.push(e.device)
|
||
})
|
||
let option = {
|
||
grid: {
|
||
top: 50,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
containLabel: true
|
||
},
|
||
legend: {
|
||
icon: 'rect',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 14,
|
||
lineHeight: 14
|
||
},
|
||
itemGap: 30.86,
|
||
itemWidth: 14.16,
|
||
itemHeight: 7.38,
|
||
data: [{name: '合格数', itemStyle: {color: '#33CCCC'}}, {name: '不合格数', itemStyle: {color: '#EAAD24'}}]
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
width: 2,
|
||
color: '#8FABBF'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 16
|
||
}
|
||
},
|
||
data: device
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
splitNumber: 2,
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#8FABBF',
|
||
fontSize: 14
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
type: [8, 4],
|
||
dashOffset: 4,
|
||
color: '#8FABBF'
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '合格数',
|
||
type: 'bar',
|
||
barWidth: '8',
|
||
itemStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#33CCCC',
|
||
opacity: 1
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(31,89,89,0.25)',
|
||
opacity: 0.25
|
||
}
|
||
])
|
||
}
|
||
},
|
||
data: data1
|
||
},
|
||
{
|
||
name: '不合格数',
|
||
type: 'bar',
|
||
barWidth: '8',
|
||
itemStyle: {
|
||
normal: {
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#B68845',
|
||
opacity: 1
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(134,98,45,0.25)',
|
||
opacity: 0.25
|
||
}
|
||
])
|
||
}
|
||
},
|
||
data: data2
|
||
}
|
||
]
|
||
}
|
||
let echart = document.getElementById('echart_06')
|
||
// if (this.myCharts06 !== '') {
|
||
// this.myCharts06.dispose()
|
||
// }
|
||
if (echart !== null) {
|
||
this.myCharts06 = this.$echarts.init(echart)
|
||
this.myCharts06.setOption(option)
|
||
window.addEventListener('resize', () => {
|
||
this.myCharts06.resize()
|
||
})
|
||
}
|
||
},
|
||
setEchart10 () {
|
||
let total = [100, 200, 120, 133, 80, 155, 250]
|
||
let names = [10, 20, 30, 40, 50, 60, 70]
|
||
let max = 0
|
||
// this.chartData2.map(el => {
|
||
// total.push(el.err_times)
|
||
// names.push(el.devic_name)
|
||
// max = Math.max(max, Number(el.err_times))
|
||
// })
|
||
let option = {
|
||
dataZoom: [
|
||
{
|
||
show: false, // 为true滚动条出现
|
||
type: 'slider', // type:'inside'，滚动条在最下面，鼠标点击滚动
|
||
startValue: 0, // 从头开始。
|
||
endValue: 9 // end百分比显示范围，endValue具体显示几个数值
|
||
}
|
||
],
|
||
grid: {
|
||
top: 30,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
borderColor: '#ffffff',
|
||
containLabel: true
|
||
},
|
||
legend: {
|
||
icon: 'rect',
|
||
textStyle: {
|
||
color: '#fff',
|
||
fontSize: 18,
|
||
lineHeight: 18
|
||
},
|
||
itemGap: 30.86,
|
||
itemWidth: 14.16,
|
||
itemHeight: 7.38,
|
||
data: [{name: '产量', itemStyle: {color: '#0E90FD'}}]
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#8FABBF ',
|
||
fontSize: 14,
|
||
lineHeight: 14
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#8FABBF ',
|
||
rotate: 50
|
||
},
|
||
data: names
|
||
},
|
||
yAxis: {
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#909399'
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: '#909399'
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
lineStyle: {
|
||
type: [8, 4],
|
||
dashOffset: 4,
|
||
color: '#8FABBF',
|
||
opacity: 0.2
|
||
}
|
||
},
|
||
max: max
|
||
},
|
||
series: [
|
||
{
|
||
name: '产量',
|
||
type: 'bar',
|
||
barWidth: 38,
|
||
itemStyle: {
|
||
normal: {
|
||
show: true,
|
||
// color: '#67c23a',
|
||
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||
{
|
||
offset: 0,
|
||
color: '#0E90FD',
|
||
opacity: 1
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(96,112,128,0.10)',
|
||
opacity: 0.1
|
||
}
|
||
]),
|
||
borderWidth: 0
|
||
}
|
||
},
|
||
// data: [100, 51, 90, 41, 91, 61, 51]
|
||
data: total
|
||
}
|
||
]
|
||
}
|
||
let echart = document.getElementById('echart_10')
|
||
this.myCharts10 = this.$echarts.init(echart)
|
||
this.myCharts10.setOption(option)
|
||
// this.autoMove(option, 3)
|
||
window.addEventListener('resize', () => {
|
||
this.myCharts10.resize()
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
@import '~@css/mixin'
|
||
.n_container
|
||
_wh(100%, 100%)
|
||
.n_header
|
||
_wh(100%, 84px)
|
||
_bis('../../../images/top_left.png', auto,,right,,)
|
||
line-height 84px
|
||
h1
|
||
_font(36px, 56px, #fff,,right)
|
||
letter-spacing 6px
|
||
font-family "阿里妈妈数黑体" !important
|
||
margin-right -3px
|
||
.n_body_container
|
||
_wh(100%, calc(100% - 84px))
|
||
padding 40px 0 20px 54px
|
||
.n_body_container_wraper
|
||
_wh(100%, 100%)
|
||
padding-right 8px
|
||
// .box1
|
||
// // _wh(100%, 20%)
|
||
// width 100%
|
||
// _fj()
|
||
// flex-direction row
|
||
// .box2
|
||
// clear both
|
||
// _wh(100%, 37%)
|
||
// _fj()
|
||
// flex-direction row
|
||
// margin-bottom 1%
|
||
.box1
|
||
// _wh(100%, 20%)
|
||
width 100%
|
||
height 212px
|
||
_fj()
|
||
flex-direction row
|
||
margin-bottom 1%
|
||
.box2
|
||
clear both
|
||
_wh(100%, calc(48% - 106px))
|
||
_fj()
|
||
flex-direction row
|
||
+.box2
|
||
margin-top 1%
|
||
.item_title
|
||
_font(46px, 1, #fff,,,)
|
||
.bg
|
||
_wh(100%, 100%)
|
||
overflow hidden
|
||
.container
|
||
_wh(100%, calc(100% - 1.38rem))
|
||
padding .3rem .2509rem 0
|
||
overflow hidden
|
||
clear both
|
||
.bottom
|
||
_wh(100%, .38rem)
|
||
background center bottom / 19.06rem 100% url(../../..//images/screen1/bottom.png) no-repeat
|
||
.left_wrap
|
||
float left
|
||
_wh(4.0756rem, 100%)
|
||
.center_wrap
|
||
float left
|
||
_wh(9.96rem, 100%)
|
||
margin-left .2936rem
|
||
padding .4rem .16rem
|
||
background center bottom / 100% 100% url(../../..//images/screen1/item_2.png) no-repeat
|
||
.right_wrap
|
||
float right
|
||
_wh(4.0273rem, 100%)
|
||
.item_wrap
|
||
_wh(calc(50% - 8px), 100%)
|
||
.item_tip
|
||
clear both
|
||
_wh(100%, 32px)
|
||
line-height 32px
|
||
background center center / 100% 100% url(../../..//images/screen1/title_bg_2.png) no-repeat
|
||
.item_tip_2
|
||
background center center / 100% 100% url(../../..//images/screen1/title_bg_2.png) no-repeat
|
||
.item_tip_left
|
||
float left
|
||
_wh(60%, 100%)
|
||
font-family "SourceHanSansCN"
|
||
_font(18px, inherit, #fff, 700, left)
|
||
letter-spacing 2px
|
||
text-shadow 0 0 9px #159AFF
|
||
padding-left 40px
|
||
.item_tip_right
|
||
float right
|
||
_wh(39%, 100%)
|
||
line-height inherit
|
||
text-align right
|
||
padding-right .09rem
|
||
span
|
||
_font(.14rem, inherit, #FFCB00, lighter,)
|
||
.span1
|
||
font-size .12rem
|
||
color #84B0DA
|
||
.item_content
|
||
// _wh(100%, calc(100% - .32rem))
|
||
padding .17rem .17rem .24rem .17rem
|
||
background-color #011834
|
||
.item_content_1
|
||
_wh(100%, 100%)
|
||
_fj(space-around)
|
||
padding .17rem 0 .24rem
|
||
.item_content_1_inner
|
||
_wh(1.2rem, 100%)
|
||
background-color #011834
|
||
.item_content_1_inner_1
|
||
_wh(100%, .37rem)
|
||
font-family "SourceHanSansCN"
|
||
_font(.14rem, .37rem, #78B1DE, 700, center)
|
||
letter-spacing .02rem
|
||
background center center / 100% 100% url(../../..//images/screen1/item_1.png) no-repeat
|
||
.item_content_1_inner_2
|
||
_wh(100%, calc((100% - .37rem) / 3))
|
||
overflow hidden
|
||
_fj(space-evenly)
|
||
flex-direction column
|
||
padding-top .06rem
|
||
.item_content_1_inner_2_bg
|
||
background center bottom / 1.02rem .03rem url(../../..//images/screen1/line_1.png) no-repeat
|
||
.item_content_1_inner_2_p1
|
||
font-family "SourceHanSansCN"
|
||
_font(.18rem, .18rem, #fff, 700, center)
|
||
letter-spacing .0188rem
|
||
.item_content_1_inner_2_p2
|
||
font-family "SourceHanSansCN"
|
||
_font(.14rem, .14rem, #84B0DA, 700, center)
|
||
letter-spacing .02rem
|
||
.item_wrap_2
|
||
_wh(100%, calc((100% - .4rem) / 2))
|
||
.item_wrap_3
|
||
margin-top .4rem
|
||
.item_content_2
|
||
_wh(100%, calc(100% - .32rem))
|
||
margin-top .06rem
|
||
border .01rem solid rgba(8,205,248,0.3)
|
||
.scroll_wrap
|
||
_wh(100%, 100%)
|
||
.scroll_tab_1
|
||
_wh(100%, .4rem)
|
||
border-bottom .01rem solid rgba(8,205,248,0.3)
|
||
li
|
||
float left
|
||
width 12%
|
||
_font(.14rem,.4rem,#78B1DE,,center)
|
||
word-wrap break-word
|
||
word-break break-all
|
||
white-space nowrap
|
||
padding 0 .02rem
|
||
overflow hidden
|
||
box-sizing border-box
|
||
&:nth-child(8)
|
||
width 16%
|
||
.scroll_tab_2 li
|
||
width 17%
|
||
&:first-child
|
||
width 15%
|
||
.scroll_container_1
|
||
width 100%
|
||
height calc(100% - .4rem)
|
||
overflow hidden
|
||
.scroll-ul_1
|
||
li
|
||
_wh(100%, .44rem)
|
||
border-bottom .01rem solid rgba(8,205,248,0.3)
|
||
&:nth-child(even)
|
||
background rgba(1,24,52,0.60)
|
||
box-shadow inset 0px 1px 0px 0px rgba(13,89,115,0.3)
|
||
.scroll-ul_1_div
|
||
float left
|
||
_wh(12%, .44rem)
|
||
_fj(center)
|
||
_font(.14rem, .44rem, #fff,,center)
|
||
word-wrap break-word
|
||
word-break break-all
|
||
white-space nowrap
|
||
padding 0 .02rem
|
||
overflow hidden
|
||
&:nth-child(8)
|
||
width 16%
|
||
.scroll-ul_2 li .scroll-ul_1_div
|
||
width 17%
|
||
&:first-child
|
||
width 15%
|
||
.progress_line_wrap
|
||
position relative
|
||
_wh(1.35rem, .03rem)
|
||
background-image linear-gradient(270deg, #00EFFF 2%, #00527D 100%)
|
||
.progress_dot_wrap
|
||
position absolute
|
||
_wh(100%, .15rem)
|
||
top -.06rem
|
||
left -.05rem
|
||
.progress_dot
|
||
position absolute
|
||
top 0
|
||
left 0
|
||
_wh(.15rem, .15rem)
|
||
background center center / 100% 100% url(../../..//images/screen1/dot_1.png) no-repeat
|
||
// .item_content_3
|
||
// _wh(100%, 100%)
|
||
// padding-top .1rem
|
||
// _fj(flex-start)
|
||
// flex-direction column
|
||
.item_content_3
|
||
_wh(100%, 100%)
|
||
height calc(100% - 32px)
|
||
padding 20px 30px
|
||
_fj(center)
|
||
.right_1_up
|
||
clear both
|
||
_wh(100%, 100%)
|
||
_fj(row)
|
||
// background center bottom / 100% .03rem url(../../..//images/screen1/line_2.png) no-repeat
|
||
.right_1_up_left
|
||
_wh(140px, 140px)
|
||
background center bottom / 100% 100% url(../../..//images/screen1/item_3.png) no-repeat
|
||
_fj(row,center)
|
||
.echart_d3_wrap
|
||
_wh(82%, 82%)
|
||
margin 0 auto
|
||
.right_1_up_right
|
||
_wh(48%, 100%)
|
||
.right_1_up_right_item
|
||
_wh(100%, 60px)
|
||
background center bottom / 100% 100% url(../../..//images/screen1/item_4.png) no-repeat
|
||
_fj(space-evenly)
|
||
// flex-direction column
|
||
&:nth-child(2)
|
||
margin-top 20px
|
||
.right_1_up_p1
|
||
font-family "SourceHanSansCN"
|
||
_font(22px, 60px, #78B1DE, 700, center)
|
||
margin-left 24px
|
||
.right_1_up_p2
|
||
font-family "SourceHanSansCN"
|
||
_font(24px, 60px, $yellow, 700, center)
|
||
margin-right 20px
|
||
span
|
||
_font(18px, 60px, #fff, 700, center)
|
||
padding-left 6px
|
||
.right_1_down
|
||
_wh(100%, calc(100% - 1.6rem))
|
||
padding .05rem .3rem 0
|
||
.right_1_down_inner_1
|
||
_wh(100%, .28rem)
|
||
overflow hidden
|
||
_fj()
|
||
div
|
||
&:nth-child(1)
|
||
font-family "SourceHanSansCN"
|
||
_font(.12rem, .28rem, #84B0DA, 700,)
|
||
letter-spacing .0171rem
|
||
&:nth-child(2)
|
||
font-family "SourceHanSansCN"
|
||
_font(.16rem, .28rem, #fff, 700, right)
|
||
letter-spacing .02rem
|
||
.right_1_down_inner_2
|
||
_wh(100%, .1811rem)
|
||
background-color rgba(0,213,255,0.20)
|
||
_fj()
|
||
div
|
||
height .0805rem
|
||
&:nth-child(1)
|
||
background-color #07E083
|
||
&:nth-child(2)
|
||
background-color #B68845
|
||
.right_1_down_inner_3
|
||
_wh(100%, .3rem)
|
||
margin-top .1rem
|
||
_fj()
|
||
.right_1_down_inner_3_i
|
||
_wh(1.83rem, .3rem)
|
||
_fj()
|
||
background center bottom / 100% 100% url(../../..//images/screen1/item_5.png) no-repeat
|
||
.right_1_down_inner_3_l
|
||
_wh(50%, 100%)
|
||
overflow hidden
|
||
clear both
|
||
span
|
||
display block
|
||
float left
|
||
&:nth-child(1)
|
||
_wh(.0725rem, .3rem)
|
||
margin-left .15rem
|
||
_fj()
|
||
overflow hidden
|
||
i
|
||
display block
|
||
_wh(.0725rem, .0725rem)
|
||
border-radius 100%
|
||
&:nth-child(2)
|
||
_wh(calc(100% - 0.2825rem), .3rem)
|
||
font-family "SourceHanSansCN"
|
||
_font(.12rem, .3rem, #fff,400,)
|
||
margin-left .06rem
|
||
overflow hidden
|
||
text-overflow ellipsis
|
||
white-space nowrap
|
||
.right_1_down_inner_3_r
|
||
_wh(50%, 100%)
|
||
line-height .3rem
|
||
overflow hidden
|
||
text-align right
|
||
span
|
||
font-family "SourceHanSansCN"
|
||
_font(.12rem, .3rem, #fff,700,)
|
||
&:nth-child(1)
|
||
font-family "SourceHanSansCN"
|
||
_font(.18rem, .3rem, #00D5FF,700,)
|
||
overflow hidden
|
||
text-overflow ellipsis
|
||
white-space nowrap
|
||
.item_content_4
|
||
_wh(100%, calc(100% - .32rem))
|
||
padding .1rem 0 .2rem
|
||
overflow hidden
|
||
.scroll-ul_2
|
||
li
|
||
_wh(100%, .4rem)
|
||
clear both
|
||
margin-bottom .1rem
|
||
&:nth-child(-n+3)
|
||
background center center / 100% 100% url(../../..//images/screen1/item_6.png) no-repeat
|
||
&:nth-child(n+4)
|
||
background center center / 100% 100% url(../../..//images/screen1/item_7.png) no-repeat
|
||
&:nth-child(1) .scroll-ul_2_div_1
|
||
background center center / .24rem .27rem url(../../..//images/screen1/top_1.png) no-repeat
|
||
&:nth-child(2) .scroll-ul_2_div_1
|
||
background center center / .24rem .27rem url(../../..//images/screen1/top_2.png) no-repeat
|
||
&:nth-child(3) .scroll-ul_2_div_1
|
||
background center center / .24rem .27rem url(../../..//images/screen1/top_3.png) no-repeat
|
||
.scroll-ul_2_div_1
|
||
float left
|
||
_wh(.6rem, 100%)
|
||
_font(.16rem, .4rem, #fff, 700, center)
|
||
.scroll-ul_2_div_2
|
||
float left
|
||
_wh(calc(60% - .6rem), 100%)
|
||
font-family "SourceHanSansCN"
|
||
_font(.14rem, .4rem, #fff, 700,)
|
||
padding-left .1rem
|
||
letter-spacing .02rem
|
||
.scroll-ul_2_div_3
|
||
float right
|
||
_wh(30%, 100%)
|
||
font-family "SourceHanSansCN"
|
||
_font(.12rem, .4rem, #fff, 700, right)
|
||
padding-right .2rem
|
||
span
|
||
&:nth-child(1)
|
||
font-size .18rem
|
||
letter-spacing: .0125rem
|
||
.item_content_5
|
||
_wh(100%, calc(100% - .32rem))
|
||
padding-top .3rem
|
||
clear both
|
||
.item_5_l
|
||
float left
|
||
_wh(50%, 100%)
|
||
.item_5_r
|
||
float right
|
||
_wh(50%, 100%)
|
||
_fj()
|
||
flex-direction column
|
||
.item_5_l_1
|
||
_wh(100%, 60%)
|
||
background right center / .02rem 100% url(../../..//images/screen1/line_3.png) no-repeat
|
||
.item_5_l_2
|
||
_wh(100%, 40%)
|
||
_fj()
|
||
flex-direction column
|
||
// .right_1_down_inner_3_i
|
||
// &:nth-child(1), &:nth-child(2)
|
||
// margin-bottom 5%
|
||
.color1
|
||
background-color #07E083
|
||
.color2
|
||
background-color #B68845
|
||
.swiper_wrap
|
||
clear both
|
||
_wh(100%, calc(100% - .32rem))
|
||
padding .17rem 0 .24rem
|
||
overflow hidden
|
||
.swiper_wrap_con
|
||
_wh(100%, 100%)
|
||
.swiper_item
|
||
position relative
|
||
left 0
|
||
float left
|
||
_wh(100%, 100%)
|
||
_fj(space-around)
|
||
.p1
|
||
position absolute
|
||
display block
|
||
cursor pointer
|
||
left .2509rem
|
||
top .22rem
|
||
font-family "SourceHanSansCN"
|
||
_font(.18rem, .30rem, #fff, 700,)
|
||
letter-spacing .01rem
|
||
</style>
|