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

update 3d实时产量和能耗

Browse Source
This commit is contained in:
lb
2022-11-17 11:30:11 +08:00
parent 19f673b45f
commit 97901a0278
3 changed files with 83 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
src/views/3DOverview/components/newBar.vue
View File

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