@@ -46,7 +46,7 @@ | |||
class="absolute top-0 left-0" | |||
style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" | |||
> | |||
<new-bar | |||
<!-- <new-bar | |||
chart-name="realtime-cost-production" | |||
:name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']" | |||
:data-list="[ | |||
@@ -63,7 +63,8 @@ | |||
data: [162, 172, 122, 15, 82, 74] | |||
} | |||
]" | |||
/> | |||
/> --> | |||
<techy-bar /> | |||
</div> | |||
</techy-box> | |||
</div> | |||
@@ -255,6 +256,7 @@ import PlFaultAnalysisPieChart from './components/charts/PlFaultAnalysisPieChart | |||
import { mapGetters } from 'vuex' | |||
import screenfull from 'screenfull' | |||
import NewBar from './components/charts/newBar.vue' | |||
import TechyBar from './components/charts/TechyBar.vue' | |||
import NewLineStack from './components/charts/newLineStack.vue' | |||
import { qualityDatalist, qualityTableProps, qualityExceptionDatalist, qualityExceptionTableProps } from './mockData' | |||
@@ -271,6 +273,7 @@ export default { | |||
// FaultCategoryChart, | |||
PlFaultAnalysisPieChart, | |||
NewBar, | |||
TechyBar, | |||
NewLineStack | |||
}, | |||
data() { | |||
@@ -0,0 +1,261 @@ | |||
<template> | |||
<div ref="techyBar" class="techy-bar"></div> | |||
</template> | |||
<script> | |||
import echarts from 'echarts' // echarts theme | |||
import resize from '@/views/OperationalOverview/components/mixins/resize' | |||
import * as BottomPic from './bottom.png' | |||
export default { | |||
name: 'TechyBar', | |||
props: {}, | |||
mixins: [resize], | |||
data() { | |||
const color_gradients = [ | |||
/** 蓝 */ | |||
{ | |||
direction: 'to top', | |||
from: '#49B2FF', // * 0.6 是底部颜色和顶部颜色 | |||
to: '#49B2FF00', | |||
topAndBottom: '#49B2FF9F' | |||
}, | |||
/** 绿 */ | |||
{ | |||
direction: 'to top', | |||
from: '#49FBD6', // * 0.6 是底部颜色和顶部颜色 | |||
to: '#49FBD600', | |||
topAndBottom: '#49FBD69F' | |||
} | |||
] | |||
const mock_data = [ | |||
{ | |||
color: [ | |||
/** top color **/ | |||
'#0b58ff', | |||
/** bottom color **/ | |||
'#993f80' | |||
], | |||
name: '产线A', | |||
list: [100, 102, 104, 105, 100, 117] | |||
}, | |||
{ | |||
color: [ | |||
/** top color **/ | |||
'#49FBD6', | |||
/** bottom color **/ | |||
'#31A2FF' | |||
], | |||
name: '产线B', | |||
list: [110, 92, 124, 85, 100, 120] | |||
} | |||
] | |||
let result = [] | |||
mock_data.map((pl, index) => { | |||
let topCircle = { | |||
__position: 'top', | |||
name: pl.name, | |||
barGap: '10%', | |||
barCategoryGap: '48%', | |||
type: 'pictorialBar', | |||
symbol: 'circle', | |||
symbolPosition: 'end', | |||
symbolOffset: ['25%', '-50%'], | |||
// symbolSize: ['100%', 6], | |||
symbolSize: ['200%', 6], | |||
data: pl.list, | |||
z: 10, | |||
itemStyle: { | |||
// color: color_gradients[index].topAndBottom | |||
color: { | |||
type: 'linear', | |||
x: 0, | |||
y: 1, | |||
x2: 0, | |||
y2: 0, | |||
colorStops: [ | |||
{ | |||
offset: 0, | |||
color: color_gradients[index].topAndBottom | |||
}, | |||
{ | |||
offset: 1, | |||
color: color_gradients[index].to | |||
} | |||
], | |||
global: false // 缺省为 false | |||
} | |||
} | |||
} | |||
let bottomCircle = { | |||
__position: 'top', | |||
name: pl.name, | |||
barGap: '10%', | |||
barCategoryGap: '48%', | |||
type: 'pictorialBar', | |||
symbol: 'circle', | |||
symbolOffset: ['-25%', '50%'], | |||
symbolSize: ['200%', 6], | |||
data: pl.list, | |||
z: 10, | |||
itemStyle: { | |||
color: color_gradients[index].from | |||
} | |||
} | |||
let mainBar = { | |||
__position: 'main', | |||
type: 'bar', | |||
name: pl.name, | |||
// barWidth: 20, // 不需要设置 barWidth | |||
barGap: '10%', | |||
barCategoryGap: '48%', | |||
data: pl.list, | |||
z: 0, | |||
itemStyle: { | |||
color: { | |||
type: 'linear', | |||
x: 0, | |||
y: 1, | |||
x2: 0, | |||
y2: 0, | |||
colorStops: [ | |||
{ | |||
offset: 0, | |||
color: color_gradients[index].from | |||
}, | |||
{ | |||
offset: 0.15, | |||
color: color_gradients[index].topAndBottom | |||
}, | |||
{ | |||
offset: 1, | |||
color: color_gradients[index].to | |||
} | |||
], | |||
global: false // 缺省为 false | |||
} | |||
} | |||
} | |||
result.push(topCircle) | |||
result.push(mainBar) | |||
result.push(bottomCircle) | |||
}) | |||
return { | |||
BottomPic, | |||
width: 0, | |||
chart: null, | |||
option: { | |||
grid: { | |||
left: '10%', | |||
top: 36, | |||
bottom: 28 | |||
}, | |||
xAxis: { | |||
type: 'category', | |||
axisTick: { | |||
show: false | |||
}, | |||
axisLine: { | |||
onZero: false, | |||
show: false, | |||
lineStyle: {} | |||
}, | |||
axisLabel: { | |||
color: '#fff8' | |||
}, | |||
data: ['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他'] | |||
}, | |||
yAxis: { | |||
type: 'value', | |||
min: -25, | |||
axisLine: { | |||
show: true, | |||
lineStyle: { | |||
color: '#31A2FF' | |||
} | |||
}, | |||
axisLabel: { | |||
color: '#fff8', | |||
/** y轴不从0开始,也可以用 xAxis 向下 offset 的方式模拟 **/ | |||
formatter: function(value, index) { | |||
if (value < 0) { | |||
return '' | |||
} | |||
return value | |||
} | |||
}, | |||
axisTick: { show: false }, | |||
splitLine: { | |||
lineStyle: { | |||
color: '#569acd', | |||
type: 'dotted', | |||
opacity: 0.2 | |||
} | |||
} | |||
}, | |||
series: result, | |||
graphic: [ | |||
{ | |||
type: 'image', | |||
left: 0, | |||
bottom: 0, | |||
// left: '10%', | |||
// bottom: '5%', | |||
style: { | |||
image: 'image url', | |||
height: 0, | |||
width: 0 | |||
} | |||
} | |||
] | |||
} | |||
} | |||
}, | |||
mounted() { | |||
window.addEventListener('resize', this.refreshOption) | |||
if (!this.chart) this.chart = echarts.init(this.$refs.techyBar) | |||
this.$nextTick(() => { | |||
this.updateOption(this.option) | |||
this.chart.setOption(this.option) | |||
}) | |||
}, | |||
methods: { | |||
updateOption(option) { | |||
// console.log('option', this.BottomPic.default) | |||
let width = this.$refs.techyBar.querySelector('div').clientWidth | |||
let height = this.$refs.techyBar.querySelector('div').clientHeight | |||
option.graphic[0].style.width = width * 0.85 | |||
option.graphic[0].style.height = height * 0.25 | |||
option.graphic[0].style.image = this.BottomPic.default | |||
option.graphic[0].left = '10%' | |||
option.graphic[0].bottom = 28 | |||
}, | |||
refreshOption() { | |||
this.updateOption(this.option) | |||
this.chart.setOption(this.option) | |||
} | |||
} | |||
} | |||
</script> | |||
<style scoped> | |||
.techy-bar { | |||
position: relative; | |||
width: 100%; | |||
height: 100%; | |||
} | |||
.techy-bar >>> div { | |||
width: 100% !important; | |||
height: 100% !important; | |||
} | |||
</style> |
@@ -10,6 +10,7 @@ | |||
<script> | |||
import echarts from 'echarts' // echarts theme | |||
import resize from '@/views/OperationalOverview/components/mixins/resize' | |||
import * as BottomPic from './bottom.png' | |||
export default { | |||
name: 'OverviewBar', | |||
@@ -42,6 +43,7 @@ export default { | |||
}, | |||
data() { | |||
return { | |||
BottomPic, | |||
chart: null, | |||
series: [] | |||
} | |||
@@ -56,30 +58,33 @@ export default { | |||
} | |||
}, | |||
mounted() { | |||
console.log('BottomPic, ', this.BottomPic) | |||
if (this.dataList.length > 1) { | |||
this.series = [ | |||
{ | |||
// 柱体 | |||
name: this.dataList[0].name, | |||
type: 'bar', | |||
barWidth: 20, | |||
barWidth: 16, | |||
itemStyle: { | |||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||
{ offset: 0, color: this.dataList[0].topColor }, | |||
{ offset: 1, color: this.dataList[0].bottomColor } | |||
]) | |||
}, | |||
data: this.dataList[0].data | |||
data: this.dataList[0].data, | |||
barCategoryGap: '20%' | |||
}, | |||
{ | |||
// 柱顶 | |||
name: this.dataList[0].name, | |||
type: 'pictorialBar', | |||
barWidth: 20, | |||
barWidth: 16, | |||
symbol: 'circle', | |||
symbolPosition: 'end', | |||
symbolOffset: ['-70%', '-50%'], | |||
symbolSize: [20, 6], | |||
symbolSize: [16, 6], | |||
zlevel: 2, | |||
itemStyle: { | |||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||
@@ -99,41 +104,44 @@ export default { | |||
offset: [-12, 10], | |||
position: 'top', | |||
vertialAlign: 'bottom' | |||
} | |||
}, | |||
barCategoryGap: '20%' | |||
}, | |||
{ | |||
// 柱底 | |||
name: this.dataList[0].name, | |||
type: 'pictorialBar', | |||
barWidth: 20, | |||
barWidth: 16, | |||
symbol: 'circle', | |||
symbolOffset: ['-62%', '50%'], | |||
symbolSize: [20, 6], | |||
symbolSize: [16.5, 5], | |||
itemStyle: { color: this.dataList[0].bottomColor }, | |||
data: this.dataList[0].data | |||
data: this.dataList[0].data, | |||
barCategoryGap: '20%' | |||
}, | |||
{ | |||
// 柱体 | |||
name: this.dataList[1].name, | |||
type: 'bar', | |||
barWidth: 20, | |||
barWidth: 16, | |||
itemStyle: { | |||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||
{ offset: 0, color: this.dataList[1].topColor }, | |||
{ offset: 1, color: this.dataList[1].bottomColor } | |||
]) | |||
}, | |||
data: this.dataList[1].data | |||
data: this.dataList[1].data, | |||
barCategoryGap: '20%' | |||
}, | |||
{ | |||
// 柱顶 | |||
name: this.dataList[1].name, | |||
type: 'pictorialBar', | |||
barWidth: 20, | |||
barWidth: 16, | |||
symbol: 'circle', | |||
symbolPosition: 'end', | |||
symbolOffset: ['66%', '-50%'], | |||
symbolSize: [20, 6], | |||
symbolSize: [16, 6], | |||
zlevel: 2, | |||
itemStyle: { | |||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ | |||
@@ -150,21 +158,23 @@ export default { | |||
? '#31a2ff' | |||
: '#fff9', | |||
show: true, | |||
offset: [12, 10], | |||
offset: [12, 5], | |||
position: 'top', | |||
vertialAlign: 'bottom' | |||
} | |||
}, | |||
barCategoryGap: '20%' | |||
}, | |||
{ | |||
// 柱底 | |||
name: this.dataList[1].name, | |||
type: 'pictorialBar', | |||
barWidth: 20, | |||
barWidth: 16, | |||
symbol: 'circle', | |||
symbolOffset: ['66%', '50%'], | |||
symbolSize: [20, 6], | |||
symbolSize: [16, 6], | |||
itemStyle: { color: this.dataList[1].bottomColor }, | |||
data: this.dataList[1].data | |||
data: this.dataList[1].data, | |||
barCategoryGap: '20%' | |||
} | |||
] | |||
} else { | |||
@@ -239,6 +249,9 @@ export default { | |||
this.chart = null | |||
}, | |||
methods: { | |||
calcSize(size /** px */) { | |||
// const beilv = | |||
}, | |||
initChart() { | |||
this.chart = echarts.init(this.$refs.chartContainer) | |||
this.chart.setOption({ | |||
@@ -341,7 +354,16 @@ export default { | |||
// type: 'value' | |||
// } | |||
], | |||
series: this.series | |||
series: this.series, | |||
graphic: [ | |||
{ | |||
type: 'image', | |||
id: 'bottom-pic', | |||
bottom: '12%', | |||
left: '10%', | |||
style: { image: BottomPic.default, width: 380, height: 50 } | |||
} | |||
] | |||
}) | |||
} | |||
} | |||
@@ -354,13 +376,9 @@ export default { | |||
/* position: relative !important; */ | |||
} | |||
.fault-category-chart >>> div::before { | |||
/* .fault-category-chart::before { */ | |||
/* .fault-category-chart >>> div::before { | |||
content: ''; | |||
position: absolute; | |||
/* bottom: calc(100vh/1920 * 80); | |||
left: calc(100vw/1920 * 48); */ | |||
/* bottom: calc(10% + 100vh/1920 * 28); */ | |||
bottom: 25px; | |||
left: 9%; | |||
height: 52px; | |||
@@ -370,7 +388,6 @@ export default { | |||
z-index: 0; | |||
} | |||
.process-fault-chart >>> div::before { | |||
/* .process-fault-chart::before { */ | |||
content: ''; | |||
position: absolute; | |||
bottom: 26px; | |||
@@ -382,7 +399,6 @@ export default { | |||
z-index: 0; | |||
} | |||
.realtime-production-cost-chart >>> div::before { | |||
/* .fault-category-chart::before { */ | |||
content: ''; | |||
position: absolute; | |||
bottom: 12%; | |||
@@ -390,9 +406,8 @@ export default { | |||
height: 30px; | |||
width: 90%; | |||
border-radius: 3px; | |||
/* border: 1px solid #49fbd7; */ | |||
background: linear-gradient(to top, #49fbd789 5%, transparent); | |||
transform: skew(-35deg); | |||
z-index: 0; | |||
} | |||
} */ | |||
</style> |