diff --git a/src/assets/board/boardBg4.jpg b/src/assets/board/boardBg4.jpg new file mode 100644 index 0000000..6bfe679 Binary files /dev/null and b/src/assets/board/boardBg4.jpg differ diff --git a/src/assets/board/expendImg.png b/src/assets/board/expendImg.png new file mode 100644 index 0000000..9f3dafa Binary files /dev/null and b/src/assets/board/expendImg.png differ diff --git a/src/components/board/Chart.vue b/src/components/board/Chart.vue index a729166..ae31a42 100644 --- a/src/components/board/Chart.vue +++ b/src/components/board/Chart.vue @@ -37,6 +37,9 @@ export default { setData(option) { this.initChart(option) }, + on(option) { + this.chart.on(...option) + }, initChart(option) { this.chart = echarts.init(this.$refs.chart, 'macarons') diff --git a/src/views/board/board4/index.vue b/src/views/board/board4/index.vue index df8b88d..66c2b09 100644 --- a/src/views/board/board4/index.vue +++ b/src/views/board/board4/index.vue @@ -179,7 +179,7 @@ export default { center: ["30%", "50%"], radius: ['57%', '63%'], itemStyle: { - color: '#6666' + color: '#fff4' }, labelLine: { show: false @@ -202,214 +202,220 @@ export default { }, data: [ { - value: 20, + value: 15, name: '不合格数', itemStyle: { - color: '#4E97FF' + color: '#4E97FF', + borderColor: '#000', + borderWidth: 2 }, }, { - value: 80, + value: 85, name: '合格数', itemStyle: { - color: '#0000' + color: '#0000', }, }, ] }, ] }) + let barData = Array(8).fill(0).map((item, index) => { + return 5 + Math.floor(Math.random() * 8); + }) this.$refs.chart2.setData({ - grid: { - top: "15%", - left: "10%", - right: "5%", - bottom: "15%", + xAxis: { + data: Array(8).fill(0).map((item, index) => 'SC-228NE'), + axisLine: { + lineStyle: { + color: '#377097', + } + }, + axisLabel: { + fontSize: 14, + interval: 0, + color: '#4C95C1', + }, + axisTick: { + lineStyle: { + color: '#37709799', + } + }, + splitLine: { + show: true, + lineStyle: { + color: '#37709799', + type: 'dashed', + } + } }, - xAxis: [ - { - type: "category", - boundaryGap: true, - axisLine: { - show: true, - }, - splitArea: { - color: "#f00", - lineStyle: { - color: "#f00", - }, - }, - axisLabel: { - color: "#fff", - fontSize: 0.8 * vw, - interval: 0, - }, - splitLine: { - show: false, - }, - data: ["2025-10-01", "2025-10-02", "2025-10-03", "2025-10-04", "2025-10-05"], + yAxis: { + max: 25, + axisLine: { + show: true, + lineStyle: { + color: '#377097', + } }, - ], - - yAxis: [ - { - boundaryGap: true, - type: "value", - min: 0, - splitNumber: 4, - splitLine: { - show: true, - lineStyle: { - color: "rgba(255,255,255,0.1)", - }, - }, - axisLine: { - show: true, - }, - axisLabel: { - show: true, - textStyle: { - color: "#d1e6eb", - }, - }, - axisTick: { - show: true, - }, + axisLabel: { + fontSize: 14, + color: '#4C95C1', }, - ], + axisTick: { + show: true, + alignWithLabel: true, + lineStyle: { + color: '#37709799', + } + }, + splitLine: { + show: true, + alignWithLabel: true, + lineStyle: { + color: '#37709799', + type: 'dashed', + } + } + }, + grid: { + top: 20, + right: 20, + bottom: 40, + left: 50 + }, series: [ { - name: "OEE", + name: " ", type: "bar", - + barWidth: '50%', + barMaxWidth: '34', + barMinWidth: '20', itemStyle: { - color: "#0C2CD8", + color: new echarts.graphic.LinearGradient( + 0, 0, 0, 1, + [ + {offset: 0, color: '#2B90D1CC'}, + {offset: 1, color: '#0D2DD7'} + ] + ), + borderColor: '#fff6', + borderWidth: 1 }, tooltip: { show: false, }, - data: [27, 31, 20, 31, 10], + label: { + show: true, + + distance: 10, + fontSize: 16, + color: '#66C7FA', + position: 'top', + }, + data: barData, }, + { + type: 'pictorialBar', + symbol: 'circle', // 👈 圆形（通过拉伸变成椭圆） + barWidth: '50%', + barMaxWidth: '34', + barMinWidth: '20', + symbolSize: ['100%', 4], // [宽, 高] → 椭圆 + symbolPosition: 'end', // 在柱体顶部 + symbolOffset: [0, -2], // 微调位置（向上） + z: 10, + itemStyle: { + color: '#0D2DD7' + }, + data: barData, + } ], }) this.$refs.chart3.setData({ - grid: { - top: "15%", - left: "10%", - right: "5%", - bottom: "15%", - }, - xAxis: [ - { - type: "category", - boundaryGap: true, - axisLine: { - show: true, - }, - splitArea: { - color: "#f00", - lineStyle: { - color: "#f00", - }, - }, - axisLabel: { - color: "#fff", - fontSize: 0.8 * vw, - interval: 0, - }, - splitLine: { - show: false, - }, - data: ["2025-10-01", "2025-10-02", "2025-10-03", "2025-10-04", "2025-10-05"], - }, - ], - - yAxis: [ - { - boundaryGap: true, - type: "value", - min: 0, - splitNumber: 4, - splitLine: { - show: true, - lineStyle: { - color: "rgba(255,255,255,0.1)", - }, - }, - axisLine: { - show: true, - }, - axisLabel: { - show: true, - textStyle: { - color: "#d1e6eb", - }, - }, - axisTick: { - show: true, - }, - }, - ], - series: [ - // { - // name: "稼动率", - // type: "line", - // showAllSymbol: true, - // symbol: "circle", - // symbolSize: 5, - // lineStyle: { - // normal: { - // color: "#2FCCE9", - // shadowColor: "rgba(0, 0, 0, .3)", - // shadowBlur: 0, - // shadowOffsetY: 5, - // shadowOffsetX: 5, - // }, - // }, - // - // itemStyle: { - // color: "#2FCCE9", - // borderColor: "#2FCCE9", - // borderWidth: 3, - // shadowColor: "rgba(0, 0, 0, .3)", - // shadowBlur: 0, - // shadowOffsetY: 2, - // shadowOffsetX: 2, - // }, - // tooltip: { - // show: false, - // }, - // data: [17, 27, 38, 19, 28], - // }, - { - name: "OEE", - type: "line", - showAllSymbol: true, - symbol: "circle", - symbolSize: 5, + xAxis: { + data: ["13:00:00", "13:01:00", "13:02:00", "13:03:00", "13:04:00", '13:05:00'], + boundaryGap: false, + axisLine: { lineStyle: { - normal: { - color: "#E3A731", - shadowColor: "rgba(0, 0, 0, .3)", - shadowBlur: 0, - shadowOffsetY: 5, - shadowOffsetX: 5, - }, - }, - + color: '#377097', + } + }, + axisLabel: { + fontSize: 12, + interval: 0, + color: '#4C95C1', + }, + axisTick: { + alignWithLabel: true, + lineStyle: { + color: '#37709799', + } + }, + splitLine: { + show: true, + alignWithLabel: true, + lineStyle: { + color: '#37709799', + type: 'dashed', + } + } + }, + yAxis: { + max: 10, + axisLine: { + show: true, + lineStyle: { + color: '#377097', + } + }, + axisLabel: { + fontSize: 14, + color: '#4C95C1', + }, + axisTick: { + show: true, + alignWithLabel: true, + lineStyle: { + color: '#37709799', + } + }, + splitLine: { + show: true, + alignWithLabel: true, + lineStyle: { + color: '#37709799', + type: 'dashed', + } + } + }, + grid: { + top: 20, + right: 20, + bottom: 40, + left: 50 + }, + series: [ + { + type: "line", + symbolSize: 5, + symbol: 'circle', itemStyle: { - color: "#E3A731", - borderColor: "#E3A731", - borderWidth: 3, - shadowColor: "rgba(0, 0, 0, .3)", - shadowBlur: 0, - shadowOffsetY: 2, - shadowOffsetX: 2, + color: '#FBFFFA', // 点填充颜色 + borderColor: '#D8080C', // 点边框颜色 + borderWidth: 2 // 边框宽度 }, - tooltip: { + lineStyle: { + color: '#CE0F06', // 折线颜色 + width: 2 + }, + label: { show: false, }, - data: [27, 31, 20, 31, 10], + data: Array(6).fill(0).map((item, index) => { + let num = Math.floor(Math.random() * 2) + 2 + return Math.max(num, 0) + }) }, ], }) diff --git a/src/views/board/board5/index.vue b/src/views/board/board5/index.vue index e69de29..03c022c 100644 --- a/src/views/board/board5/index.vue +++ b/src/views/board/board5/index.vue @@ -0,0 +1,643 @@ + + + \ No newline at end of file