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

update 3d techy-bar

Browse Source
This commit is contained in:
lb
2022-11-21 15:22:04 +08:00
parent 41fba93d47
commit 6df938da04
5 changed files with 303 additions and 419 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>