mt-fe-group/11-mes-new
12
0
Bifurcation 0
Code Tickets Demandes d'ajout Publications Wiki Activité

update TechyBar

Parcourir la source
Cette révision appartient à :
lb 2022-11-21 14:34:03 +08:00
Parent 9dd1f27481
révision a75d632902
4 fichiers modifiés avec 308 ajouts et 29 suppressions
Voir les Statistiques Télécharger le Fichier Patch Télécharger le Fichier des Différences Développer tous les fichiers Réduire tous les fichiers

7
src/views/QualityManager/HomePage.vue
Voir le fichier

@ -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() {

261
src/views/QualityManager/components/charts/TechyBar.vue Fichier normal
Voir le fichier

@ -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>

BIN
src/views/QualityManager/components/charts/bottom.png Fichier normal
Voir le fichier

Fichier binaire non affiché.
Côte à côte

Après

Largeur:  |  Hauteur:  |  Taille: 105 KiB

69
src/views/QualityManager/components/charts/newBar.vue
Voir le fichier

@ -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>