mt-fe-group/yudao-dev
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

修改图例

Browse Source
This commit is contained in:
‘937886381’ 2024-01-17 15:30:47 +08:00
parent d230508e9c
commit bee302b08e
7 changed files with 324 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/views/OperationalOverview/coldBoard.vue
View File

@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2021-07-19 15:18:30
* @LastEditors: zhp
* @LastEditTime: 2024-01-15 16:03:39
* @LastEditTime: 2024-01-17 14:00:15
* @Description:
-->
<template>
@ -143,7 +143,7 @@ import pileBarChart from './components/pileBarChart'
import colorDiv from './components/colorDiv'
// import axios from '@/utils/request'
import doubleYChart from './components/doubleYChart '
import doubleYChart from './components/coldDoubleYChart'
// import elementResizeDetectorMaker from 'element-resize-detector';
// var erd = elementResizeDetectorMaker(); //创建实例
// let resizeFun = null

13
src/views/OperationalOverview/components/baseContainer/index.vue
View File

@ -2,7 +2,7 @@
* @Author: gtz
* @Date: 2022-01-19 15:58:17
* @LastEditors: zhp
* @LastEditTime: 2024-01-16 16:06:47
* @LastEditTime: 2024-01-17 14:57:00
* @Description: file content
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
-->
@ -22,15 +22,14 @@
</template>
<div class="bar-item">
<div v-if="title" class="bar-title">
<div v-if="title" class="bar-title" ds>
<span>
<svg-icon :icon-class="titleIcon" style="font-size: 1em; position: relative; top: .08em" />
{{ title }}
</span>
<span style="font-size: 20px;color:#52FFF8;margin-left: 10px;">
<!-- <svg-icon :icon-class="titleIcon" style="font-size: 1em; position: relative; top: .08em" /> -->
<!-- <span style="font-size: 20px;color:#52FFF8;margin-left: 10px;margin-top: 2px;">
{{ time +'-'+ time2 }}
</span>
</span> -->
</div>
<!-- <div v-if="true" class="bar-title">
<span>
@ -226,11 +225,13 @@ export default {
color: #ffffff;
font-size: 24px;
padding: 0.67em;
display: flex;
}
.bar-content {
padding: 1em;
// padding: 1em;
flex: 1 auto;
position: relative;
}
.no-padding {

292
src/views/OperationalOverview/components/coldDoubleYChart.vue Normal file
View File

@ -0,0 +1,292 @@
<!--
* @Author: zhp
* @Date: 2023-09-21 09:06:28
* @LastEditTime: 2024-01-17 15:26:04
* @LastEditors: zhp
* @Description:
-->
<template>
<div>
<div :id="id" class="productChart" :style="{ height: '390px', width: width }" />
</div>
</template>
<script>
import * as echarts from 'echarts';
import 'echarts/theme/macarons' // echarts theme
import resize from './mixins/resize'
export default {
name: 'OverviewBar',
mixins: [resize],
props: {
id: {
type: String,
default: 'linearBarChart'
},
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
borderRadius: {
type: Array,
default: () => [9, 9, 0, 0]
},
beilv: {
type: Number,
default: 1
},
height: {
type: Number,
default: 200
},
showLegend: {
type: Boolean,
default: false
},
nameList: {
type: Array,
default: () => []
},
dataList: {
type: Array,
default: () => []
}
},
data() {
return {
chart: null,
series: [{
type: 'bar',
data: [],
barWidth: 6
}]
}
},
mounted() {
console.log('mounted')
console.log('borderRadius: ', this.borderRadius)
// this.$nextTick(() => {
// this.initChart()
// })
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart(nameList, passRateList, outputNumList) {
console.log(nameList, passRateList)
let series= [
{
name: '产线产量',
type: 'bar',
yAxisIndex: 1,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#9DD5FF' },
{ offset: 0.3, color: '#1295FF' }
]),
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: '#ced1d5',
fontSize: 12
}
},
}
// barBorderRadius: this.borderRadius
},
barWidth: 12,
data: outputNumList
},
{
name: '产线良品率',
symbol: 'circle', //变为实心圆
type: 'line',
yAxisIndex: 0,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(255, 209, 96, 0.18)'
},
{
offset: 1,
color: 'rgba(255, 234, 153, 0)'
}
])
},
itemStyle: {
normal: {
color: 'rgba(255, 209, 96, 1)', //改变折线点的颜色
lineStyle: {
color: 'rgba(255, 209, 96, 1)' //改变折线颜色
}
}
},
data: passRateList
}
]
// const colors = ['#5470C6', '#91CC75', '#EE6666']
this.chart = echarts.init(document.getElementById(this.id))
this.chart.setOption({
// color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
left: "3%",
right: "5%",
bottom: "3%",
containLabel: true
},
legend: {
itemWidth: 10,
itemHeight: 10,
top: '1%',
right: '20px',
data: ['产线产量', '产线良品率'],
textStyle: {
fontSize: 12 * this.beilv,
color: '#ced1d5'
}
},
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
type: 'solid',
color: '#213259', // 左边线的颜色
width: '1' // 坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
}
},
splitLine: {
lineStyle: {
color: '#213259'
}
},
data: nameList
},
// yAxis: {
// },
yAxis: [
{
min: function() { // 取最小值向下取整为最小刻度
return 0
},
max: function(value) { // 取最大值向上取整为最大刻度
return Math.ceil(value.max)
},
scale: true,
type: 'value',
name: '良品率/%',
nameTextStyle: {// y轴上方单位的颜色
color: '#fff',
align: "left",
},
position: 'right',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#213259', // 左边线的颜色
width: '1' // 坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: '#ced1d5', // 坐标值得具体的颜色
formatter: '{value}%'
}
},
splitLine: {
lineStyle: {
color: '#213259'
}
}
// type: 'value'
// axisLine: {
// show: true,
// lineStyle: {
// color: colors[0]
// }
// },
},
{
min: function() { // 取最小值向下取整为最小刻度
return 0
},
max: function(value) { // 取最大值向上取整为最大刻度
return Math.ceil(value.max)
},
scale: true,
type: 'value',
name: '产量/㎡', // y轴上方的单位
nameTextStyle: {
color: "#fff",
// fontSize: 10,
align: "right",
},
position: 'left',
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
type: 'solid',
color: '#213259', // 左边线的颜色
width: '1' // 坐标线的宽度
}
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,0.5)', // 坐标值得具体的颜色
formatter: '{value} 片'
}
},
splitLine: {
lineStyle: {
color: '#213259'
}
}
// type: 'value'
// axisLine: {
// show: true,
// lineStyle: {
// color: colors[1]
// }jik078u7uut9890999999999999999999999999999999999999999999999999999999999999995u8
// },
}
],
series: series
})
}
}
}
</script>
<style>
.productChart{
top: -40px;
}
</style>

14
src/views/OperationalOverview/components/doubleYChart .vue
View File

@ -1,13 +1,13 @@
<!--
* @Author: zhp
* @Date: 2023-09-21 09:06:28
* @LastEditTime: 2024-01-12 10:25:19
* @LastEditTime: 2024-01-17 13:56:46
* @LastEditors: zhp
* @Description:
-->
<template>
<div>
<div :id="id" :class="className" :style="{ height: height + 'px', width: width }" />
<div :id="id" class="productChart" :style="{ height: '390px', width: width }" />
</div>
</template>
@ -152,11 +152,12 @@ export default {
left: "3%",
right: "5%",
bottom: "3%",
width: 'auto',
height: "auto",
containLabel: true
},
legend: {
itemWidth: 10,
itemHeight: 10,
right: '20px',
data: ['产线产量', '产线良品率'],
textStyle: {
fontSize: 12 * this.beilv,
@ -282,3 +283,8 @@ export default {
}
}
</script>
<style>
.productChart{
top: -40px;
}
</style>

1
src/views/OperationalOverview/components/linearBarChart.vue
View File

@ -173,3 +173,4 @@ export default {
}
}
</script>

13
src/views/OperationalOverview/components/pileBarChart.vue
View File

@ -1,13 +1,13 @@
<!--
* @Author: zhp
* @Date: 2023-12-27 13:54:52
* @LastEditTime: 2023-12-29 16:28:26
* @LastEditTime: 2024-01-17 10:09:36
* @LastEditors: zhp
* @Description:
-->
<template>
<div>
<div :id="id" :class="className" :style="{ height: height + 'px', width: width }" />
<div :id="id" class="productChart" :style="{ height: height + 'px', width: width }" />
</div>
</template>
@ -133,14 +133,17 @@ export default {
// }
this.chart.setOption({
legend: {
// top: '2.5%',
// right: '20px',
textStyle: {
color: '#ffffff'
}
},
grid: {
top:'80',
left: '3%',
right: '4%',
bottom: '3%',
// bottom: '3%',
width: 'auto',
height: 'auto',
containLabel: true
@ -213,3 +216,7 @@ export default {
}
}
</script>
<style scoped lang="scss">
</style>

4
src/views/OperationalOverview/processingBoard.vue
View File

@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2021-07-19 15:18:30
* @LastEditors: zhp
* @LastEditTime: 2024-01-12 16:38:55
* @LastEditTime: 2024-01-17 13:52:44
* @Description:
-->
<template>
@ -1113,7 +1113,7 @@ export default {
flex: 1 1;
}
.h-full {
height: calc(100vh - 150px);
height: calc(100vh);
}
/* .container-main {
min-height: calc(100vh - 10em);