lb #12

Merged
gtz217 merged 27 commits from lb into master 2022-11-18 17:04:51 +08:00
3 changed files with 83 additions and 143 deletions
Showing only changes of commit 97901a0278 - Show all commits

View File

@ -75,7 +75,7 @@ export default {
type: 'value', type: 'value',
name: '成品率', name: '成品率',
min: 'dataMin', min: 'dataMin',
splitNumber: 3, splitNumber: 2,
nameTextStyle: { nameTextStyle: {
color: '#fffc', color: '#fffc',
align: 'right', align: 'right',

View File

@ -1,5 +1,5 @@
<template> <template>
<techy-box style="width: 100%; height: calc(100% - 36px); padding: calc(100vmin / 1920 * 16)"> <techy-box style="width: 100%; height: calc(100% - 36px);">
<!-- <div :id="id" ref="techy-line-chart" class="techy-chart" /> --> <!-- <div :id="id" ref="techy-line-chart" class="techy-chart" /> -->
<new-bar <new-bar
@ -24,116 +24,16 @@
</template> </template>
<script> <script>
import echarts from 'echarts'
import TechyBox from './TechyBox.vue' import TechyBox from './TechyBox.vue'
import newBar from './newBar.vue' import newBar from './newBar.vue'
import resize from '@/views/OperationalOverview/components/mixins/resize'
export default { export default {
name: 'RealtimeProductionHorizontalBarChart', name: 'RealtimeProductionHorizontalBarChart',
components: { TechyBox, newBar }, components: { TechyBox, newBar },
mixins: [resize], props: {},
props: {
id: {
type: String,
default: 'default-linechart-id'
},
title: {
type: String,
default: 'default-title'
},
xData: {
type: Array,
default: () => []
},
seriesData: {
type: Array,
default: () => []
}
},
data() { data() {
return { return {}
chart: null,
option: {
color: ['#FF7345', '#52FFF1', '#6A6E87', '#9452FFA6'],
grid: {
top: 0,
left: 0,
right: '5%',
bottom: 0,
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.001],
axisTick: {
show: false
},
axisLabel: {
fontSize: 8
// rotate: 10
},
axisLine: {
show: false,
lineStyle: {
color: '#fffa'
} }
},
splitLine: {
lineStyle: {
color: '#fff3'
}
}
},
yAxis: {
type: 'category',
data: ['产线1', '产线2', '产线3', '产线4', '产线5', '产线6'],
axisLine: {
show: false
},
axisLabel: {
fontSize: 10,
color: '#fffa'
},
axisTick: { show: false },
splitLine: {
lineStyle: {
color: '#fffa'
}
}
},
series: [
{
name: '2011',
type: 'bar',
barWidth: 5,
data: Array(6)
.fill(0)
.map(value => Math.floor(Math.random() * 1000))
},
{
name: '2012',
type: 'bar',
barWidth: 5,
data: Array(6)
.fill(0)
.map(value => Math.floor(Math.random() * 1000))
}
]
}
}
},
mounted() {
this.$nextTick(() => {
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
this.chart.setOption(this.option)
})
},
beforeDestroy() {
if (this.chart) this.chart.dispose()
this.chart = null
},
methods: {}
} }
</script> </script>
<style scoped> <style scoped>

View File

@ -113,6 +113,7 @@ export default {
name: this.dataList[1].name, name: this.dataList[1].name,
type: 'bar', type: 'bar',
barWidth: 20, barWidth: 20,
yAxisIndex: 1,
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: this.dataList[1].topColor }, { offset: 0, color: this.dataList[1].topColor },
@ -124,6 +125,7 @@ export default {
{ {
// //
name: this.dataList[1].name, name: this.dataList[1].name,
yAxisIndex: 1,
type: 'pictorialBar', type: 'pictorialBar',
barWidth: 20, barWidth: 20,
symbol: 'circle', symbol: 'circle',
@ -154,6 +156,7 @@ export default {
{ {
// //
name: this.dataList[1].name, name: this.dataList[1].name,
yAxisIndex: 1,
type: 'pictorialBar', type: 'pictorialBar',
barWidth: 20, barWidth: 20,
symbol: 'circle', symbol: 'circle',
@ -170,7 +173,6 @@ export default {
// //
name: this.dataList[0].name, name: this.dataList[0].name,
type: 'bar', type: 'bar',
// barWidth: 26,
barWidth: barWidth, barWidth: barWidth,
itemStyle: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
@ -191,7 +193,6 @@ export default {
// //
name: this.dataList[0].name, name: this.dataList[0].name,
type: 'pictorialBar', type: 'pictorialBar',
// barWidth: 26,
barWidth: barWidth, barWidth: barWidth,
symbol: 'circle', symbol: 'circle',
symbolPosition: 'end', symbolPosition: 'end',
@ -222,7 +223,6 @@ export default {
// //
name: this.dataList[0].name, name: this.dataList[0].name,
type: 'pictorialBar', type: 'pictorialBar',
// barWidth: 26,
barWidth: barWidth, barWidth: barWidth,
symbol: 'circle', symbol: 'circle',
symbolOffset: [0, '50%'], symbolOffset: [0, '50%'],
@ -249,15 +249,16 @@ export default {
this.chart = echarts.init(this.$refs.chartContainer) this.chart = echarts.init(this.$refs.chartContainer)
this.chart.setOption({ this.chart.setOption({
grid: { grid: {
top: '16%', top: '24%',
left: '2%', left: '8%',
right: '2%', right: '5%',
bottom: '3%', bottom: '3%',
containLabel: true containLabel: true
}, },
legend: { legend: {
itemWidth: 8, itemWidth: 8,
itemHeight: 8, itemHeight: 8,
top: '2%',
right: '2%', right: '2%',
textStyle: { textStyle: {
color: '#fff9' color: '#fff9'
@ -281,7 +282,16 @@ export default {
}, },
data: this.nameList data: this.nameList
}, },
yAxis: { yAxis: [
{
name: '产量/m²',
nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
type: 'value',
splitNumber: 3,
axisTick: { show: false },
onZero: true,
position: 'left',
offset: 10,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
type: 'solid', type: 'solid',
@ -290,9 +300,6 @@ export default {
width: '1' // 线 width: '1' // 线
} }
}, },
axisTick: {
show: false
},
axisLabel: { axisLabel: {
textStyle: { textStyle: {
color: 'rgba(255,255,255,0.5)' // color: 'rgba(255,255,255,0.5)' //
@ -306,6 +313,37 @@ export default {
}, },
type: 'value' type: 'value'
}, },
{
name: '能耗kw/h',
nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
type: 'value',
splitNumber: 3,
axisTick: { show: false },
onZero: true,
position: 'left',
offset: 48,
axisLine: {
lineStyle: {
type: 'solid',
color: this.dataList[1].bottomColor,
width: '1' // 线
}
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.5)' //
}
},
splitLine: {
show: false,
// lineStyle: {
// type: 'dotted',
// color: 'rgba(119, 255, 242, 0.2)'
// }
},
type: 'value'
}
],
series: this.series series: this.series
}) })
} }
@ -354,10 +392,12 @@ export default {
left: calc(100vw/1920 * 48); */ left: calc(100vw/1920 * 48); */
/* bottom: calc(10% + 100vh/1920 * 28); */ /* bottom: calc(10% + 100vh/1920 * 28); */
bottom: 20px; bottom: 20px;
left: 9%; left: 6%;
height: 30px; height: 30px;
width: 90%; width: 90%;
background: linear-gradient(to top, #49fbd789, transparent); border-radius: 3px;
/* border: 1px solid #49fbd7; */
background: linear-gradient(to top, #49fbd789 5%, transparent);
transform: skew(-35deg); transform: skew(-35deg);
z-index: 0; z-index: 0;
} }