接口
This commit is contained in:
@@ -41,9 +41,9 @@
|
||||
</div>
|
||||
<div class="item_wraper">
|
||||
<div class="title_wraper">
|
||||
<p>历史分析</p>
|
||||
<p>困料货架泥料库（吨）</p>
|
||||
</div>
|
||||
<div class="content_wraper">
|
||||
<div class="content_wraper content_wraper_1">
|
||||
<div class="w_wraper">
|
||||
<div id="new_home_echart_3" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
@@ -78,16 +78,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wraper">
|
||||
<div class="title_wraper">
|
||||
<p>30天故障-TOP10</p>
|
||||
</div>
|
||||
<div class="content_wraper content_wraper_1">
|
||||
<div class="w_wraper">
|
||||
<div id="new_home_echart_5" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wraper">
|
||||
<div class="title_wraper">
|
||||
<p>设备报警信息</p>
|
||||
@@ -118,7 +108,17 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item_wraper">
|
||||
<div class="title_wraper">
|
||||
<p>历史分析</p>
|
||||
</div>
|
||||
<div class="content_wraper">
|
||||
<div class="w_wraper">
|
||||
<div id="new_home_echart_5" style="width: 100%; height: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -156,9 +156,10 @@ export default {
|
||||
deviceErrorRecordList: [], // 设备报警信息
|
||||
mixingList: [], // 当日混料
|
||||
historyList: [], // 历史分析
|
||||
deviceErrorList: [], // 30天故障Top10
|
||||
productList: [], // 当日成品
|
||||
deviceRunStat: {} // 设备运行统计
|
||||
klInfoList: [], // 困料货架泥料库（吨）
|
||||
deviceRunStat: {}, // 设备运行统计
|
||||
deviceErrorList: [] // 30天故障Top10
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -177,7 +178,7 @@ export default {
|
||||
},
|
||||
created () {
|
||||
this._screenTableData()
|
||||
// this.refresh()
|
||||
this.refresh()
|
||||
},
|
||||
beforeDestroy () {
|
||||
clearInterval(this.timer)
|
||||
@@ -185,11 +186,25 @@ export default {
|
||||
clearInterval(this.chart2Timer)
|
||||
clearInterval(this.chart3Timer)
|
||||
clearInterval(this.chart4Timer)
|
||||
this.timer = null
|
||||
this.chart1Timer = null
|
||||
this.chart2Timer = null
|
||||
this.chart3Timer = null
|
||||
this.chart4Timer = null
|
||||
},
|
||||
destroyed () {
|
||||
clearInterval(this.timer)
|
||||
clearInterval(this.chart1Timer)
|
||||
clearInterval(this.chart2Timer)
|
||||
clearInterval(this.chart3Timer)
|
||||
clearInterval(this.chart4Timer)
|
||||
this.timer = null
|
||||
this.chart1Timer = null
|
||||
this.chart2Timer = null
|
||||
this.chart3Timer = null
|
||||
this.chart4Timer = null
|
||||
},
|
||||
methods: {
|
||||
expandTooltip () {
|
||||
this.expand = !this.expand
|
||||
},
|
||||
refresh () {
|
||||
this.timer = setInterval(() => {
|
||||
this._screenTableData()
|
||||
@@ -201,15 +216,14 @@ export default {
|
||||
clearInterval(this.chart2Timer)
|
||||
clearInterval(this.chart3Timer)
|
||||
clearInterval(this.chart4Timer)
|
||||
this.chart1Timer = null
|
||||
this.chart2Timer = null
|
||||
this.chart3Timer = null
|
||||
this.chart4Timer = null
|
||||
this.deviceErrorRecordList = [...res.deviceErrorRecordList]
|
||||
this.mixingList = [...res.mixingList]
|
||||
this.productList = [...res.productList]
|
||||
this.historyList = [...res.historyList]
|
||||
this.deviceErrorList = [...res.deviceErrorList]
|
||||
this.deviceErrorList.map((e, i) => {
|
||||
this.$set(e, 'sort', i + 1)
|
||||
})
|
||||
this.deviceErrorList = this.deviceErrorList.reverse()
|
||||
this.klInfoList = [...res.klInfoList]
|
||||
let seriesData = [{value: res.deviceRunStat.runNum, name: '正常运行'}, {value: res.deviceRunStat.unProducedNum, name: '暂未生产'}, {value: res.deviceRunStat.freeNum, name: '空闲设备'}, {value: res.deviceRunStat.errorNum, name: '故障设备'}]
|
||||
seriesData.map(el => {
|
||||
let rate = Number(el.value) * 100 / Number(res.deviceRunStat.total)
|
||||
@@ -218,6 +232,7 @@ export default {
|
||||
})
|
||||
this.deviceRunStat = res.deviceRunStat
|
||||
this.deviceRunStat.seriesData = seriesData
|
||||
this.historyList = [...res.historyList]
|
||||
this.setEchart1()
|
||||
this.setEchart2()
|
||||
this.setEchart3()
|
||||
@@ -305,7 +320,7 @@ export default {
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '单位：吨',
|
||||
// name: '单位：吨',
|
||||
nameTextStyle: {
|
||||
color: '#B5C5D4',
|
||||
fontSize: 14,
|
||||
@@ -578,6 +593,360 @@ export default {
|
||||
})
|
||||
},
|
||||
setEchart3 () {
|
||||
let ydata = []
|
||||
let xdata = []
|
||||
this.klInfoList.map(el => {
|
||||
ydata.push(el.materialCode)
|
||||
xdata.push(el.weight)
|
||||
})
|
||||
let dataZoomMove = {
|
||||
start: 0,
|
||||
end: 3
|
||||
}
|
||||
let img = {
|
||||
bg1: bg1,
|
||||
bg2: bg2,
|
||||
bg3: bg3,
|
||||
bg4: bg4
|
||||
}
|
||||
let colorArray = []
|
||||
this.klInfoList.map((e, i) => {
|
||||
if (i === 0) {
|
||||
colorArray.push({top: '#8C620F', bottom: '#C7B51C'})
|
||||
} else if (i === 1) {
|
||||
colorArray.push({top: '#3261FB', bottom: '#6BB5FB'})
|
||||
} else if (i === 2) {
|
||||
colorArray.push({top: '#6B4C43', bottom: '#B8A590'})
|
||||
} else {
|
||||
colorArray.push({top: '#537BCB', bottom: '#ADC0E6'})
|
||||
}
|
||||
})
|
||||
let option = {
|
||||
dataZoom: [
|
||||
{
|
||||
show: false, // 为true 滚动条出现
|
||||
startValue: dataZoomMove.start,
|
||||
endValue: dataZoomMove.end,
|
||||
yAxisIndex: [0, 1] // 关联多个y轴
|
||||
},
|
||||
{
|
||||
// 没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
|
||||
type: 'inside',
|
||||
yAxisIndex: 0,
|
||||
zoomOnMouseWheel: false, // 滚轮是否触发缩放
|
||||
moveOnMouseMove: true, // 鼠标滚轮触发滚动
|
||||
moveOnMouseWheel: true
|
||||
}
|
||||
],
|
||||
grid: {
|
||||
top: 13,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ydata,
|
||||
inverse: true,
|
||||
axisLabel: {
|
||||
inside: true,
|
||||
verticalAlign: 'bottom',
|
||||
lineHeight: 50,
|
||||
margin: 0, // 刻度标签与轴线之间的距离
|
||||
formatter: function (value) {
|
||||
let k = ydata.indexOf(value)
|
||||
let index = k + 1
|
||||
if (k === 0) {
|
||||
return '{one|' + 'TOP' + index + '} {a|' + value + '}'
|
||||
} else if (k === 1) {
|
||||
return '{two|' + 'TOP' + index + '} {a|' + value + '}'
|
||||
} else if (k === 2) {
|
||||
return '{three|' + 'TOP' + index + '} {a|' + value + '}'
|
||||
} else {
|
||||
return '{four|' + 'TOP' + index + '} {a|' + value + '}'
|
||||
}
|
||||
},
|
||||
rich: {
|
||||
// 第一名
|
||||
one: {
|
||||
backgroundColor: {
|
||||
image: img.bg1
|
||||
},
|
||||
color: '#fff',
|
||||
width: 60,
|
||||
height: 32,
|
||||
fontSize: 16,
|
||||
lineHeight: 16,
|
||||
align: 'center',
|
||||
fontFamily: 'YouSheBiaoTiHei'
|
||||
},
|
||||
// 第二名
|
||||
two: {
|
||||
backgroundColor: {
|
||||
image: img.bg2
|
||||
},
|
||||
color: '#fff',
|
||||
width: 60,
|
||||
height: 32,
|
||||
fontSize: 16,
|
||||
lineHeight: 16,
|
||||
align: 'center',
|
||||
fontFamily: 'YouSheBiaoTiHei'
|
||||
},
|
||||
// 第三名
|
||||
three: {
|
||||
backgroundColor: {
|
||||
image: img.bg3
|
||||
},
|
||||
color: '#fff',
|
||||
width: 60,
|
||||
height: 32,
|
||||
fontSize: 16,
|
||||
lineHeight: 16,
|
||||
align: 'center',
|
||||
fontFamily: 'YouSheBiaoTiHei'
|
||||
},
|
||||
four: {
|
||||
backgroundColor: {
|
||||
image: img.bg4
|
||||
},
|
||||
color: '#fff',
|
||||
width: 60,
|
||||
height: 32,
|
||||
fontSize: 16,
|
||||
lineHeight: 16,
|
||||
align: 'center',
|
||||
fontFamily: 'YouSheBiaoTiHei'
|
||||
},
|
||||
a: {
|
||||
color: '#AEC3DC',
|
||||
height: 32,
|
||||
fontSize: 16,
|
||||
lineHeight: 16,
|
||||
padding: [0, 0, 0, 7],
|
||||
fontFamily: 'SourceHanSansCN-Regular'
|
||||
}
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
type: 'category',
|
||||
data: ydata,
|
||||
inverse: true,
|
||||
axisLabel: {
|
||||
inside: true,
|
||||
verticalAlign: 'bottom',
|
||||
lineHeight: 50,
|
||||
margin: 2,
|
||||
formatter: function (value) {
|
||||
let k = ydata.indexOf(value)
|
||||
let index = k
|
||||
return `{a|${xdata[index]}}`
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
height: 50,
|
||||
fontSize: 20,
|
||||
lineHeight: 50,
|
||||
align: 'right',
|
||||
fontFamily: 'YouSheBiaoTiHei',
|
||||
color: '#E1F6FF'
|
||||
}
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
data: xdata,
|
||||
type: 'bar',
|
||||
barWidth: 3,
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: '#ffffff'
|
||||
},
|
||||
itemStyle: {
|
||||
color: (params) => {
|
||||
let num = colorArray.length
|
||||
return {
|
||||
type: 'linear',
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: colorArray[params.dataIndex % num].bottom
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: colorArray[params.dataIndex % num].top
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: colorArray[params.dataIndex % num].bottom
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: colorArray[params.dataIndex % num].top
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: colorArray[params.dataIndex % num].bottom
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: colorArray[params.dataIndex % num].top
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
if (document.getElementById('new_home_echart_3') == null) {
|
||||
return
|
||||
}
|
||||
this.$echarts.dispose(document.getElementById('new_home_echart_3'))
|
||||
let echart = this.$echarts.init(document.getElementById('new_home_echart_3'))
|
||||
echart.setOption(option)
|
||||
const startMoveDataZoom = () => {
|
||||
this.chart3Timer = setInterval(() => {
|
||||
dataZoomMove.start += 1
|
||||
dataZoomMove.end += 1
|
||||
if (dataZoomMove.end > xdata.length - 1) {
|
||||
dataZoomMove.start = 0
|
||||
dataZoomMove.end = 5
|
||||
}
|
||||
echart.setOption({
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
|
||||
startValue: dataZoomMove.start,
|
||||
endValue: dataZoomMove.end
|
||||
}
|
||||
]
|
||||
})
|
||||
}, 2000)
|
||||
}
|
||||
startMoveDataZoom()
|
||||
document.getElementById('new_home_echart_3').addEventListener('mouseout', () => {
|
||||
if (this.chart3Timer) return
|
||||
let dataZoomMoveGet = echart.getOption().dataZoom[0]
|
||||
dataZoomMove.start = dataZoomMoveGet.startValue
|
||||
dataZoomMove.end = dataZoomMoveGet.endValue
|
||||
startMoveDataZoom()
|
||||
})
|
||||
document.getElementById('new_home_echart_3').addEventListener('mouseover', () => {
|
||||
clearInterval(this.chart3Timer)
|
||||
this.chart3Timer = undefined
|
||||
})
|
||||
window.addEventListener('resize', () => {
|
||||
echart.resize()
|
||||
})
|
||||
},
|
||||
setEchart4 () {
|
||||
let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252', '#BCBF5C', '#6d5edd', '#bf41bb']
|
||||
let seriesData = this.deviceRunStat.seriesData
|
||||
let total = this.deviceRunStat.total
|
||||
let option = {
|
||||
color: colors,
|
||||
grid: {
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
title: {
|
||||
text: `{a|总数}\n{b|${total}}`,
|
||||
x: 'center',
|
||||
y: '39%',
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 16,
|
||||
lineHeight: 20,
|
||||
color: '#A8C3E6',
|
||||
fontFamily: 'SourceHanSansCN-Regular'
|
||||
},
|
||||
b: {
|
||||
fontSize: 30,
|
||||
lineHeight: 36,
|
||||
color: '#DBE7F6',
|
||||
fontFamily: 'YouSheBiaoTiHei'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: '设备运行统计',
|
||||
type: 'pie',
|
||||
radius: ['61%', '69%'],
|
||||
center: ['50%', '50%'],
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: 'RGBA(27, 58, 98, .5)',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
selectedMode: 'single',
|
||||
selectedOffset: 20,
|
||||
data: seriesData
|
||||
}]
|
||||
}
|
||||
if (document.getElementById('new_home_echart_4') == null) {
|
||||
return
|
||||
}
|
||||
this.$echarts.dispose(document.getElementById('new_home_echart_4'))
|
||||
let echart = this.$echarts.init(document.getElementById('new_home_echart_4'))
|
||||
echart.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
echart.resize()
|
||||
})
|
||||
},
|
||||
setEchart5 () {
|
||||
let img = {
|
||||
imgSrc1: symbol3,
|
||||
imgSrc2: symbol4,
|
||||
@@ -759,14 +1128,14 @@ export default {
|
||||
}
|
||||
]
|
||||
}
|
||||
if (document.getElementById('new_home_echart_3') == null) {
|
||||
if (document.getElementById('new_home_echart_5') == null) {
|
||||
return
|
||||
}
|
||||
this.$echarts.dispose(document.getElementById('new_home_echart_3'))
|
||||
let echart = this.$echarts.init(document.getElementById('new_home_echart_3'))
|
||||
this.$echarts.dispose(document.getElementById('new_home_echart_5'))
|
||||
let echart = this.$echarts.init(document.getElementById('new_home_echart_5'))
|
||||
echart.setOption(option)
|
||||
let len = 0
|
||||
this.chart3Timer = setInterval(() => {
|
||||
this.chart4Timer = setInterval(() => {
|
||||
if (len === barName.length) {
|
||||
len = 0
|
||||
}
|
||||
@@ -792,349 +1161,6 @@ export default {
|
||||
window.addEventListener('resize', () => {
|
||||
echart.resize()
|
||||
})
|
||||
},
|
||||
setEchart4 () {
|
||||
let colors = ['#1980EA', '#67D470', '#B4C9EF', '#EF5252', '#BCBF5C', '#6d5edd', '#bf41bb']
|
||||
let seriesData = this.deviceRunStat.seriesData
|
||||
let total = this.deviceRunStat.total
|
||||
let option = {
|
||||
color: colors,
|
||||
grid: {
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
title: {
|
||||
text: `{a|总数}\n{b|${total}}`,
|
||||
x: 'center',
|
||||
y: '39%',
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 16,
|
||||
lineHeight: 20,
|
||||
color: '#A8C3E6',
|
||||
fontFamily: 'SourceHanSansCN-Regular'
|
||||
},
|
||||
b: {
|
||||
fontSize: 30,
|
||||
lineHeight: 36,
|
||||
color: '#DBE7F6',
|
||||
fontFamily: 'YouSheBiaoTiHei'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [{
|
||||
name: '设备运行统计',
|
||||
type: 'pie',
|
||||
radius: ['61%', '69%'],
|
||||
center: ['50%', '50%'],
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: 'RGBA(27, 58, 98, .5)',
|
||||
borderWidth: 2
|
||||
},
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
selectedMode: 'single',
|
||||
selectedOffset: 20,
|
||||
data: seriesData
|
||||
}]
|
||||
}
|
||||
if (document.getElementById('new_home_echart_4') == null) {
|
||||
return
|
||||
}
|
||||
this.$echarts.dispose(document.getElementById('new_home_echart_4'))
|
||||
let echart = this.$echarts.init(document.getElementById('new_home_echart_4'))
|
||||
echart.setOption(option)
|
||||
window.addEventListener('resize', () => {
|
||||
echart.resize()
|
||||
})
|
||||
},
|
||||
setEchart5 () {
|
||||
let ydata = []
|
||||
let xdata = []
|
||||
let total = 0
|
||||
this.deviceErrorList.map(el => {
|
||||
total = Math.max(total, Number(el.errorNum))
|
||||
})
|
||||
let data = []
|
||||
this.deviceErrorList.map(el => {
|
||||
ydata.push(el.deviceName)
|
||||
xdata.push({name: el.deviceName, value: el.errorNum, sort: el.sort})
|
||||
data.push({value: total, num: el.errorNum})
|
||||
})
|
||||
let img = {
|
||||
bg1: bg1,
|
||||
bg2: bg2,
|
||||
bg3: bg3,
|
||||
bg4: bg4
|
||||
}
|
||||
let colorArray = [
|
||||
{
|
||||
top: '#537BCB',
|
||||
bottom: '#ADC0E6'
|
||||
},
|
||||
{
|
||||
top: '#537BCB',
|
||||
bottom: '#ADC0E6'
|
||||
},
|
||||
{
|
||||
top: '#537BCB',
|
||||
bottom: '#ADC0E6'
|
||||
},
|
||||
{
|
||||
top: '#537BCB',
|
||||
bottom: '#ADC0E6'
|
||||
},
|
||||
{
|
||||
top: '#537BCB',
|
||||
bottom: '#ADC0E6'
|
||||
},
|
||||
{
|
||||
top: '#537BCB',
|
||||
bottom: '#ADC0E6'
|
||||
},
|
||||
{
|
||||
top: '#537BCB',
|
||||
bottom: '#ADC0E6'
|
||||
},
|
||||
{
|
||||
top: '#6B4C43',
|
||||
bottom: '#B8A590'
|
||||
},
|
||||
{
|
||||
top: '#3261FB',
|
||||
bottom: '#6BB5FB'
|
||||
}, {
|
||||
top: '#8C620F',
|
||||
bottom: '#C7B51C'
|
||||
}
|
||||
]
|
||||
let option = {
|
||||
grid: {
|
||||
top: 13,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ydata,
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
max: total
|
||||
},
|
||||
series: [{
|
||||
type: 'bar',
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: '#FFFFFF',
|
||||
borderWidth: 5
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: [-2, -32],
|
||||
formatter: (value) => {
|
||||
let o = value.data
|
||||
if (o.sort === 1) {
|
||||
return '{one|' + 'TOP' + o.sort + '} {a|' + o.name + '}'
|
||||
} else if (o.sort === 2) {
|
||||
return '{two|' + 'TOP' + o.sort + '} {a|' + o.name + '}'
|
||||
} else if (o.sort === 3) {
|
||||
return '{three|' + 'TOP' + o.sort + '} {a|' + o.name + '}'
|
||||
} else {
|
||||
return '{four|' + 'TOP' + o.sort + '} {a|' + o.name + '}'
|
||||
}
|
||||
},
|
||||
rich: {
|
||||
// 第一名
|
||||
one: {
|
||||
backgroundColor: {
|
||||
image: img.bg1
|
||||
},
|
||||
color: '#fff',
|
||||
width: 60,
|
||||
height: 32,
|
||||
fontSize: 16,
|
||||
lineHeight: 16,
|
||||
align: 'center',
|
||||
fontFamily: 'YouSheBiaoTiHei'
|
||||
},
|
||||
// 第二名
|
||||
two: {
|
||||
backgroundColor: {
|
||||
image: img.bg2
|
||||
},
|
||||
color: '#fff',
|
||||
width: 60,
|
||||
height: 32,
|
||||
fontSize: 16,
|
||||
lineHeight: 16,
|
||||
align: 'center',
|
||||
fontFamily: 'YouSheBiaoTiHei'
|
||||
},
|
||||
// 第三名
|
||||
three: {
|
||||
backgroundColor: {
|
||||
image: img.bg3
|
||||
},
|
||||
color: '#fff',
|
||||
width: 60,
|
||||
height: 32,
|
||||
fontSize: 16,
|
||||
lineHeight: 16,
|
||||
align: 'center',
|
||||
fontFamily: 'YouSheBiaoTiHei'
|
||||
},
|
||||
four: {
|
||||
backgroundColor: {
|
||||
image: img.bg4
|
||||
},
|
||||
color: '#fff',
|
||||
width: 60,
|
||||
height: 32,
|
||||
fontSize: 16,
|
||||
lineHeight: 16,
|
||||
align: 'center',
|
||||
fontFamily: 'YouSheBiaoTiHei'
|
||||
},
|
||||
a: {
|
||||
color: '#AEC3DC',
|
||||
height: 32,
|
||||
fontSize: 16,
|
||||
lineHeight: 16,
|
||||
padding: [0, 0, 0, 7],
|
||||
fontFamily: 'SourceHanSansCN-Regular'
|
||||
}
|
||||
}
|
||||
},
|
||||
barWidth: 3,
|
||||
itemStyle: {
|
||||
color: (params) => {
|
||||
let num = colorArray.length
|
||||
return {
|
||||
type: 'linear',
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: colorArray[params.dataIndex % num].bottom
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: colorArray[params.dataIndex % num].top
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: colorArray[params.dataIndex % num].bottom
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: colorArray[params.dataIndex % num].top
|
||||
},
|
||||
{
|
||||
offset: 0,
|
||||
color: colorArray[params.dataIndex % num].bottom
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: colorArray[params.dataIndex % num].top
|
||||
}
|
||||
]
|
||||
// globalCoord: false
|
||||
}
|
||||
}
|
||||
},
|
||||
data: xdata
|
||||
}, {
|
||||
name: '背景',
|
||||
type: 'bar',
|
||||
barWidth: 3,
|
||||
barGap: '-100%',
|
||||
itemStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
z: 1,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'insideTopRight',
|
||||
offset: [0, -32],
|
||||
formatter: (value) => {
|
||||
return '{a|' + value.data.num + '}'
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
height: 32,
|
||||
fontSize: 20,
|
||||
lineHeight: 20,
|
||||
align: 'left',
|
||||
fontFamily: 'YouSheBiaoTiHei',
|
||||
color: '#E1F6FF'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: data
|
||||
}],
|
||||
dataZoom: [
|
||||
{
|
||||
yAxisIndex: [0, 1], // 这里是从X轴的0刻度开始
|
||||
show: false, // 是否显示滑动条，不影响使用
|
||||
type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
|
||||
startValue: 9, // 从头开始。
|
||||
endValue: 6 // 展示到第几个。
|
||||
}
|
||||
]
|
||||
}
|
||||
if (document.getElementById('new_home_echart_5') == null) {
|
||||
return
|
||||
}
|
||||
this.$echarts.dispose(document.getElementById('new_home_echart_5'))
|
||||
let echart = this.$echarts.init(document.getElementById('new_home_echart_5'))
|
||||
echart.setOption(option)
|
||||
this.chart4Timer = setInterval(() => {
|
||||
if (option.dataZoom[0].endValue === 0) {
|
||||
option.dataZoom[0].endValue = 6
|
||||
option.dataZoom[0].startValue = 9
|
||||
} else {
|
||||
option.dataZoom[0].endValue = option.dataZoom[0].endValue - 1
|
||||
option.dataZoom[0].startValue = option.dataZoom[0].startValue - 1
|
||||
}
|
||||
echart.setOption(option)
|
||||
}, 2000)
|
||||
window.addEventListener('resize', () => {
|
||||
echart.resize()
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user