lb #12
@ -75,7 +75,7 @@ export default {
|
||||
type: 'value',
|
||||
name: '成品率',
|
||||
min: 'dataMin',
|
||||
splitNumber: 3,
|
||||
splitNumber: 2,
|
||||
nameTextStyle: {
|
||||
color: '#fffc',
|
||||
align: 'right',
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<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" /> -->
|
||||
|
||||
<new-bar
|
||||
@ -24,116 +24,16 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import TechyBox from './TechyBox.vue'
|
||||
import newBar from './newBar.vue'
|
||||
import resize from '@/views/OperationalOverview/components/mixins/resize'
|
||||
|
||||
export default {
|
||||
name: 'RealtimeProductionHorizontalBarChart',
|
||||
components: { TechyBox, newBar },
|
||||
mixins: [resize],
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'default-linechart-id'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: 'default-title'
|
||||
},
|
||||
xData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
seriesData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
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: {}
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
@ -89,8 +89,8 @@ export default {
|
||||
this.chartName === 'process-fault'
|
||||
? 'rgba(119, 255, 242, 1)'
|
||||
: this.chartName === 'fault-category'
|
||||
? '#31a2ff'
|
||||
: '#fff9',
|
||||
? '#31a2ff'
|
||||
: '#fff9',
|
||||
show: true,
|
||||
offset: [-12, 10],
|
||||
position: 'top',
|
||||
@ -113,6 +113,7 @@ export default {
|
||||
name: this.dataList[1].name,
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: this.dataList[1].topColor },
|
||||
@ -124,6 +125,7 @@ export default {
|
||||
{
|
||||
// 柱顶
|
||||
name: this.dataList[1].name,
|
||||
yAxisIndex: 1,
|
||||
type: 'pictorialBar',
|
||||
barWidth: 20,
|
||||
symbol: 'circle',
|
||||
@ -143,8 +145,8 @@ export default {
|
||||
this.chartName === 'process-fault'
|
||||
? 'rgba(119, 255, 242, 1)'
|
||||
: this.chartName === 'fault-category'
|
||||
? '#31a2ff'
|
||||
: '#fff9',
|
||||
? '#31a2ff'
|
||||
: '#fff9',
|
||||
show: true,
|
||||
offset: [12, 10],
|
||||
position: 'top',
|
||||
@ -154,6 +156,7 @@ export default {
|
||||
{
|
||||
// 柱底
|
||||
name: this.dataList[1].name,
|
||||
yAxisIndex: 1,
|
||||
type: 'pictorialBar',
|
||||
barWidth: 20,
|
||||
symbol: 'circle',
|
||||
@ -170,7 +173,6 @@ export default {
|
||||
// 柱体
|
||||
name: this.dataList[0].name,
|
||||
type: 'bar',
|
||||
// barWidth: 26,
|
||||
barWidth: barWidth,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
@ -191,7 +193,6 @@ export default {
|
||||
// 柱顶
|
||||
name: this.dataList[0].name,
|
||||
type: 'pictorialBar',
|
||||
// barWidth: 26,
|
||||
barWidth: barWidth,
|
||||
symbol: 'circle',
|
||||
symbolPosition: 'end',
|
||||
@ -209,8 +210,8 @@ export default {
|
||||
this.chartName === 'process-fault'
|
||||
? 'rgba(119, 255, 242, 1)'
|
||||
: this.chartName === 'fault-category'
|
||||
? '#31a2ff'
|
||||
: '#fff9',
|
||||
? '#31a2ff'
|
||||
: '#fff9',
|
||||
show: true,
|
||||
offset: [0, 10],
|
||||
position: 'top',
|
||||
@ -222,7 +223,6 @@ export default {
|
||||
// 柱底
|
||||
name: this.dataList[0].name,
|
||||
type: 'pictorialBar',
|
||||
// barWidth: 26,
|
||||
barWidth: barWidth,
|
||||
symbol: 'circle',
|
||||
symbolOffset: [0, '50%'],
|
||||
@ -249,15 +249,16 @@ export default {
|
||||
this.chart = echarts.init(this.$refs.chartContainer)
|
||||
this.chart.setOption({
|
||||
grid: {
|
||||
top: '16%',
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
top: '24%',
|
||||
left: '8%',
|
||||
right: '5%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
top: '2%',
|
||||
right: '2%',
|
||||
textStyle: {
|
||||
color: '#fff9'
|
||||
@ -281,31 +282,68 @@ export default {
|
||||
},
|
||||
data: this.nameList
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: this.dataList[0].bottomColor,
|
||||
// color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
|
||||
width: '1' // 坐标线的宽度
|
||||
}
|
||||
yAxis: [
|
||||
{
|
||||
name: '产量/m²',
|
||||
nameTextStyle: { align: 'right', fontSize: 9, color: '#fff9' },
|
||||
type: 'value',
|
||||
splitNumber: 3,
|
||||
axisTick: { show: false },
|
||||
onZero: true,
|
||||
position: 'left',
|
||||
offset: 10,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: this.dataList[0].bottomColor,
|
||||
// color: 'rgba(119, 255, 242, 0.6)', // 左边线的颜色
|
||||
width: '1' // 坐标线的宽度
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dotted',
|
||||
color: 'rgba(119, 255, 242, 0.2)'
|
||||
}
|
||||
},
|
||||
type: 'value'
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dotted',
|
||||
color: 'rgba(119, 255, 242, 0.2)'
|
||||
}
|
||||
},
|
||||
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
|
||||
})
|
||||
}
|
||||
@ -354,10 +392,12 @@ export default {
|
||||
left: calc(100vw/1920 * 48); */
|
||||
/* bottom: calc(10% + 100vh/1920 * 28); */
|
||||
bottom: 20px;
|
||||
left: 9%;
|
||||
left: 6%;
|
||||
height: 30px;
|
||||
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);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user