mt-fe-group
/
11-mes-new
11
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

update 3d techy-bar

pull/14/head
lb 1 year ago
parent
41fba93d47
commit
6df938da04
5 changed files with 303 additions and 419 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +16
    -4
      src/views/3DOverview/components/RightContentRealtimeProduction.vue
  2. +286
    -0
      src/views/3DOverview/components/TechyBar.vue
  3. BIN
      src/views/3DOverview/components/bottom.png
  4. +1
    -2
      src/views/QualityManager/HomePage.vue
  5. +0
    -413
      src/views/QualityManager/components/charts/newBar.vue

+ 16
- 4
src/views/3DOverview/components/RightContentRealtimeProduction.vue View File

@@ -2,7 +2,7 @@
<techy-box style="width: 100%; height: calc(100% - 36px);">
<!-- <div :id="id" ref="techy-line-chart" class="techy-chart" /> -->

<new-bar
<!-- <new-bar
chart-name="realtime-cost-production"
:name-list="['A', 'B', 'C', 'D', 'E', 'F']"
:data-list="[
@@ -19,17 +19,29 @@
data: [32, 65, 65, 54, 37, 77]
}
]"
/>
/> -->

<techy-bar :extra-space-between-zero="16" :datainfo="[
{
name: '产量',
list: [64, 91, 55, 65, 37, 77]
},
{
name: '能耗',
list: [32, 65, 65, 54, 37, 77]
}
]" />
</techy-box>
</template>

<script>
import TechyBox from './TechyBox.vue'
import newBar from './newBar.vue'
// import newBar from './newBar.vue'
import TechyBar from './TechyBar.vue'

export default {
name: 'RealtimeProductionHorizontalBarChart',
components: { TechyBox, newBar },
components: { TechyBox, TechyBar },
props: {},
data() {
return {}


+ 286
- 0
src/views/3DOverview/components/TechyBar.vue View File

@@ -0,0 +1,286 @@
<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: 'TechyBarFor3DPage',
props: {
datainfo: {
type: Array,
default: () => [
{
name: '产线A',
list: [100, 102, 104, 105, 100, 117]
},
{
name: '产线B',
list: [110, 92, 124, 85, 100, 120]
}
]
},
unitName: {
type: String,
default: ''
},
extraSpaceBetweenZero: {
type: Number,
default: 25
}
},
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'
}
]

let result = []

this.datainfo.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
}
},
label: {
show: true,
position: 'top',
color: '#fff8',
fontSize: 8,
offset: [0, 6]
}
}

result.push(topCircle)
result.push(mainBar)
result.push(bottomCircle)
})

return {
BottomPic,
width: 0,
chart: null,
option: {
legend: {
icon: 'rect',
itemWidth: 8,
itemHeight: 8,
top: '2%',
right: '10%',
textStyle: {
color: '#fff8'
},
data: this.datainfo.map(item => item.name)
},
grid: {
top: 24,
left: '8%',
bottom: 24
},
xAxis: {
type: 'category',
axisTick: {
show: false
},
axisLine: {
onZero: false,
show: false,
lineStyle: {}
},
axisLabel: {
color: '#fff8',
fontSize: 10
},
data: ['产线A', '产线B', '产线C', '产线D', '产线E', '产线F']
},
yAxis: {
type: 'value',
// min: -25,
min: this.extraSpaceBetweenZero * -1,
name: this.unitName,
nameTextStyle: {
color: '#fff8',
fontSize: 8,
verticalAlign: 'top',
align: 'right'
},
axisLine: {
show: true,
lineStyle: {
color: '#31A2FF'
}
},
axisLabel: {
color: '#fff8',
fontSize: 10,
/** 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,
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.88
option.graphic[0].style.height = height * 0.3
option.graphic[0].style.image = this.BottomPic.default
option.graphic[0].left = '8%'
option.graphic[0].bottom = 24
},
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/3DOverview/components/bottom.png View File

Before After
Width: 1050  |  Height: 162  |  Size: 105 KiB

+ 1
- 2
src/views/QualityManager/HomePage.vue View File

@@ -281,7 +281,7 @@ import TechyAnalysisHeader from './components/TechyAnalysisHeader.vue'
import PlFaultAnalysisPieChart from './components/charts/PlFaultAnalysisPieChart.vue'
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'

@@ -298,7 +298,6 @@ export default {
TechyTable,
// FaultCategoryChart,
PlFaultAnalysisPieChart,
NewBar,
TechyBar,
NewLineStack
},


+ 0
- 413
src/views/QualityManager/components/charts/newBar.vue View File

@@ -1,413 +0,0 @@
<template>
<div
ref="chartContainer"
class="chartContainer"
:class="bindClass"
style="position: relative; width: 100%; height:100%"
/>
</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: 'OverviewBar',
mixins: [resize],
props: {
unitName: {
type: String,
default: '单位: 片'
},
chartName: {
type: String,
default: ''
},
xlabelFontSize: {
type: Number,
default: 12
},
xlabelRotate: {
type: Number,
default: 0
},
nameList: {
type: Array,
default: () => []
},
dataList: {
type: Array,
default: () => []
}
},
data() {
return {
BottomPic,
chart: null,
series: []
}
},
computed: {
bindClass() {
return {
'fault-category-chart': this.chartName === 'fault-category',
'process-fault-chart': this.chartName === 'process-fault',
'realtime-production-cost-chart': this.chartName === 'realtime-cost-production'
}
}
},
mounted() {
console.log('BottomPic, ', this.BottomPic)

if (this.dataList.length > 1) {
this.series = [
{
// 柱体
name: this.dataList[0].name,
type: 'bar',
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,
barCategoryGap: '20%'
},
{
// 柱顶
name: this.dataList[0].name,
type: 'pictorialBar',
barWidth: 16,
symbol: 'circle',
symbolPosition: 'end',
symbolOffset: ['-70%', '-50%'],
symbolSize: [16, 6],
zlevel: 2,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(59, 76, 118, 0)' },
{ offset: 1, color: '#2c6e7d' }
])
},
data: this.dataList[0].data,
label: {
color:
this.chartName === 'process-fault'
? 'rgba(119, 255, 242, 1)'
: this.chartName === 'fault-category'
? '#31a2ff'
: '#fff9',
show: true,
offset: [-12, 10],
position: 'top',
vertialAlign: 'bottom'
},
barCategoryGap: '20%'
},
{
// 柱底
name: this.dataList[0].name,
type: 'pictorialBar',
barWidth: 16,
symbol: 'circle',
symbolOffset: ['-62%', '50%'],
symbolSize: [16.5, 5],
itemStyle: { color: this.dataList[0].bottomColor },
data: this.dataList[0].data,
barCategoryGap: '20%'
},
{
// 柱体
name: this.dataList[1].name,
type: 'bar',
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,
barCategoryGap: '20%'
},
{
// 柱顶
name: this.dataList[1].name,
type: 'pictorialBar',
barWidth: 16,
symbol: 'circle',
symbolPosition: 'end',
symbolOffset: ['66%', '-50%'],
symbolSize: [16, 6],
zlevel: 2,
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,
label: {
color:
this.chartName === 'process-fault'
? 'rgba(119, 255, 242, 1)'
: this.chartName === 'fault-category'
? '#31a2ff'
: '#fff9',
show: true,
offset: [12, 5],
position: 'top',
vertialAlign: 'bottom'
},
barCategoryGap: '20%'
},
{
// 柱底
name: this.dataList[1].name,
type: 'pictorialBar',
barWidth: 16,
symbol: 'circle',
symbolOffset: ['66%', '50%'],
symbolSize: [16, 6],
itemStyle: { color: this.dataList[1].bottomColor },
data: this.dataList[1].data,
barCategoryGap: '20%'
}
]
} else {
const barWidth = 400 / 2 / this.dataList[0].data.length
this.series = [
{
// 柱体
name: this.dataList[0].name,
type: 'bar',
barWidth: barWidth,
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
},
{
// 柱顶
name: this.dataList[0].name,
type: 'pictorialBar',
barWidth: barWidth,
symbol: 'circle',
symbolPosition: 'end',
symbolOffset: [0, '-50%'],
symbolSize: [barWidth, 6],
zlevel: 2,
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: 'rgba(59, 76, 118, 0)' },
{ offset: 1, color: '#2c6e7d' }
])
},
label: {
color:
this.chartName === 'process-fault'
? 'rgba(119, 255, 242, 1)'
: this.chartName === 'fault-category'
? '#31a2ff'
: '#fff9',
show: true,
offset: [0, 10],
position: 'top',
vertialAlign: 'bottom'
},
data: this.dataList[0].data
},
{
// 柱底
name: this.dataList[0].name,
type: 'pictorialBar',
barWidth: barWidth,
symbol: 'circle',
symbolOffset: [0, '50%'],
symbolSize: [barWidth, 6],
itemStyle: { color: '#2c6e7d' },
data: this.dataList[0].data
}
]
}
this.$nextTick(() => {
console.log('on Mounted(): ')
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
calcSize(size /** px */) {
// const beilv =
},
initChart() {
this.chart = echarts.init(this.$refs.chartContainer)
this.chart.setOption({
grid: {
top: '24%',
left: '8%',
right: '5%',
bottom: '5%',
containLabel: true
},
legend: {
show: false,
itemWidth: 10,
itemHeight: 10,
selectedMode: false,
top: '7%',
right: '2%',
textStyle: {
color: '#fff9',
fontSize: 12
}
},
xAxis: {
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
margin: 16,
textStyle: {
fontSize: this.xlabelFontSize,
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
},
rotate: this.xlabelRotate
},
data: this.nameList
},
yAxis: [
{
name: this.unitName, // '单位: 片',
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'
}
// {
// 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,
graphic: [
{
type: 'image',
id: 'bottom-pic',
bottom: '12%',
left: '10%',
style: { image: BottomPic.default, width: 380, height: 50 }
}
]
})
}
}
}
</script>
<style scoped>
.chartContainer >>> div {
width: 100% !important;
height: 100% !important;
/* position: relative !important; */
}

/* .fault-category-chart >>> div::before {
content: '';
position: absolute;
bottom: 25px;
left: 9%;
height: 52px;
width: 90%;
background: linear-gradient(to top, #31a2ff6d, transparent);
transform: skew(-45deg);
z-index: 0;
}
.process-fault-chart >>> div::before {
content: '';
position: absolute;
bottom: 26px;
left: 10%;
height: 48px;
width: 90%;
background: linear-gradient(to top, #49fbd789, transparent);
transform: skew(-45deg);
z-index: 0;
}
.realtime-production-cost-chart >>> div::before {
content: '';
position: absolute;
bottom: 12%;
left: 6%;
height: 30px;
width: 90%;
border-radius: 3px;
background: linear-gradient(to top, #49fbd789 5%, transparent);
transform: skew(-35deg);
z-index: 0;
} */
</style>

Write Preview
Loading…
Cancel
Save