diff --git a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js
index 0779c8e..7efbdf9 100644
--- a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js
+++ b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js
@@ -1672,6 +1672,267 @@ const verticalBarChart = function (data, id, unit = '次') {
}
// 多个垂直柱状图
+const multipleVerticalBarChart1 = function (data, id) {
+ let charts = echarts.init(id);
+ if (!data) {
+ data = {
+ xName: [
+ "7:00",
+ "8:00",
+ "9:00",
+ "10:00",
+ "11:00",
+ "12:00",
+ ],
+ yDataOne: [4.9, 7.3, 9.2, 5.6, 7.7, 5.6],
+ yDataOneName: "制氢",
+ yDataTwo: [2.9, 5, 4.4, 2.7, 5.7, 4.6],
+ yDataTwoName: "发电",
+ yDataThree: [3.9, 6, 5.4, 3.7, 6.7, 5.6],
+ yDataThreeName: "充装",
+ }
+ }
+ let option = {
+ tooltip: {
+ //提示框组件
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ lineStyle: {
+ color: "#57617B",
+ },
+ },
+ },
+ // trigger: "axis",
+ // formatter: `{b}
{a0}: {c0}
{a1}: {c1}`,
+ // axisPointer: {
+ // type: "shadow",
+ // label: {
+ // backgroundColor: "#6a7985",
+ // },
+ // },
+ // textStyle: {
+ // color: "#fff",
+ // fontStyle: "normal",
+ // fontFamily: "微软雅黑",
+ // fontSize: 12,
+ // },
+ },
+ grid: {
+ left: "1%",
+ right: "4%",
+ bottom: "0",
+ top: 30,
+ padding: "0 0 10 0",
+ containLabel: true,
+ },
+ legend: {
+ //图例组件，颜色和名字
+ right: 10,
+ top: 0,
+ itemGap: 16,
+ itemWidth: vw,
+ itemHeight: 0.6 * vw,
+ textStyle: {
+ color: "#a8aab0",
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.75 * vw,
+ },
+ },
+ dataZoom: [],
+ xAxis: [
+ {
+ type: "category",
+ boundaryGap: true, //坐标轴两边留白
+ data: data.xName,
+ axisLabel: {
+ show: true,
+ color: '#fff'
+ },
+ axisTick: {
+ //坐标轴刻度相关设置。
+ show: false,
+ },
+ axisLine: {
+ //坐标轴轴线相关设置
+ lineStyle: {
+ color: "#fff",
+ opacity: 0.2,
+ },
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: 'dashed',
+ color: '#777777',
+ opacity: 0.3,
+ },
+ },
+ },
+ ],
+ yAxis: {
+ type: "value",
+ splitNumber: 5,
+ min: 10,
+ max: 14,
+ axisLabel: {
+ show: true,
+ color: '#fff'
+ },
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: 'dashed',
+ color: '#777777',
+ opacity: 0.3,
+ },
+ },
+ },
+ series: [
+ {
+ name: data.yDataOneName,
+ type: "bar",
+ data: data.yDataOne,
+ barWidth: 1 * vw,
+ barGap: 0, //柱间距离
+ label: {
+ //图形上的文本标签
+ normal: {
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "#a8aab0",
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.75 * vw,
+ },
+ },
+ },
+ itemStyle: {
+ //图形样式
+ normal: {
+ barBorderRadius: [5, 5, 0, 0],
+ color: {
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ type: 'linear',
+ global: false,
+ colorStops: [
+ {
+ offset: 0,
+ color: 'rgb(21, 148, 244)',
+ },
+ {
+ offset: 1,
+ color: 'rgb(13, 48, 243)',
+ },
+ ],
+ },
+ },
+ },
+ },
+ {
+ name: data.yDataTwoName,
+ type: "bar",
+ data: data.yDataTwo,
+ barWidth: 1 * vw,
+ barGap: 0.5, //柱间距离
+ label: {
+ //图形上的文本标签
+ normal: {
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "#a8aab0",
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.75 * vw,
+ },
+ },
+ },
+ itemStyle: {
+ //图形样式
+ normal: {
+ barBorderRadius: [5, 5, 0, 0],
+ color: {
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ type: 'linear',
+ global: false,
+ colorStops: [
+ {
+ offset: 0,
+ color: '#0DCEB1',
+ },
+ {
+ offset: 1,
+ color: '#14A15A',
+ },
+ ],
+ },
+ },
+ },
+ },
+ {
+ name: data.yDataThreeName,
+ type: "bar",
+ data: data.yDataThree,
+ barWidth: 1 * vw,
+ barGap: 0.5, //柱间距离
+ label: {
+ //图形上的文本标签
+ normal: {
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "#a8aab0",
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.75 * vw,
+ },
+ },
+ },
+ itemStyle: {
+ //图形样式
+ normal: {
+ barBorderRadius: [5, 5, 0, 0],
+ color: "rgba(26, 99, 74, 0.7)",
+ },
+ },
+ },
+ ],
+ };
+
+ if (data?.xName?.length >= 4) {
+ option.dataZoom.push({
+ show: true,
+ type: 'slider',
+ bottom: '0%',
+ xAxisIndex: 0,
+ height: 12,
+ start: 0,
+ end: 1 / (data.xName.length / 4) * 100,
+ textStyle: {
+ fontSize: 0,
+ color: 'rgba(0,0,0,0)'
+ }
+ })
+ option.grid.bottom = '7%'
+ }
+ charts.setOption(option);
+ $(window).resize(charts.resize);
+}
const multipleVerticalBarChart = function (data, id) {
let charts = echarts.init(id);
if (!data) {
@@ -2616,6 +2877,272 @@ const singleVerticalBarChartTwo = function (data, id) {
}
// 多个折线面积图(直线)
+const multipleBrokenLineAreaDiagram1 = (data, ids) => {
+ let charts = echarts.init(ids);
+
+ function Fun() {
+ this.randomNum = function () {
+ let arr = []
+ for (let i = 0; i < 12; i++) {
+ arr.push(parseInt(Math.random() * 100))
+ }
+ return arr
+ }
+ }
+
+ if (!data) {
+ data = {
+ xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
+ yDataOne: new Fun().randomNum(),
+ yDataTwo: new Fun().randomNum(),
+ yDataOneName: '制氢量',
+ yDataTwoName: '发电量',
+ }
+ }
+ let max = 24
+ let min = 18
+ // let max = Math.round(Math.max(...data.yDataOne, ...data.yDataTwo))
+ // let min = Math.round(Math.min(...data.yDataOne, ...data.yDataTwo))
+
+ let option = {
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ lineStyle: {
+ color: "#57617B",
+ },
+ },
+ },
+ legend: {
+ icon: "rect",
+ itemWidth: 0.75 * vw,
+ itemHeight: 0.25 * vw,
+ itemGap: 0.75 * vw,
+ data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName],
+ right: "4%",
+ textStyle: {
+ fontSize: 0.75 * vw,
+ color: "#F1F1F3",
+ },
+ },
+ grid: {
+ top: "20%",
+ left: "3%",
+ right: "4%",
+ bottom: "3%",
+ containLabel: true,
+ },
+ dataZoom: [],
+ xAxis: [
+ {
+ type: "category",
+ boundaryGap: false,
+ axisLine: {
+ lineStyle: {
+ color: "#57617B",
+ },
+ },
+ axisLabel: {
+ show: true,
+ color: '#fff',
+ interval: 0,
+ },
+ data: data.xData,
+ },
+ ],
+ yAxis: [
+ {
+ type: "value",
+ axisTick: {
+ show: false,
+ },
+ max: max + 0.5,
+ min: min - 1,
+ axisLine: {
+ lineStyle: {
+ color: "#57617B",
+ },
+ },
+ axisLabel: {
+ show: true,
+ color: '#fff',
+ interval: 0.5,
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: "#57617B",
+ },
+ },
+ },
+ ],
+ series: [
+ {
+ name: data.yDataOneName,
+ type: "line",
+ smooth: false,
+ lineStyle: {
+ normal: {
+ width: 1,
+ },
+ },
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1,
+ [
+ {
+ offset: 0,
+ color: "rgba(137, 189, 27, 0.6)",
+ },
+ {
+ offset: 0.8,
+ color: "rgba(137, 189, 27, 0.2)",
+ },
+ ],
+ false
+ ),
+ shadowColor: "rgba(0, 0, 0, 0.1)",
+ shadowBlur: 10,
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: "rgb(137,189,27)",
+ },
+ },
+ label: {
+ //图形上的文本标签
+ normal: {
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "#a8aab0",
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.75 * vw,
+ },
+ },
+ },
+ data: data.yDataOne,
+ },
+ {
+ name: data.yDataTwoName,
+ type: "line",
+ smooth: false,
+ lineStyle: {
+ normal: {
+ width: 1,
+ },
+ },
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1,
+ [
+ {
+ offset: 0,
+ color: "rgba(0, 136, 212, 0.6)",
+ },
+ {
+ offset: 0.8,
+ color: "rgba(0, 136, 212, 0.2)",
+ },
+ ],
+ false
+ ),
+ shadowColor: "rgba(0, 0, 0, 0.1)",
+ shadowBlur: 10,
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: "rgb(0,136,212)",
+ },
+ },
+ label: {
+ //图形上的文本标签
+ normal: {
+ show: true,
+ position: "bottom",
+ textStyle: {
+ color: "#a8aab0",
+ fontStyle: "normal",
+ fontFamily: "微软雅黑",
+ fontSize: 0.75 * vw,
+ },
+ },
+ },
+ data: data.yDataTwo,
+ },
+ {
+ name: data.yDataThreeName,
+ type: "line",
+ smooth: false,
+ lineStyle: {
+ normal: {
+ width: 1,
+ },
+ },
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 0,
+ 1,
+ [
+ {
+ offset: 0,
+ color: "rgba(219, 50, 51, 0.6)",
+ },
+ {
+ offset: 0.8,
+ color: "rgba(219, 50, 51, 0.2)",
+ },
+ ],
+ false
+ ),
+ shadowColor: "rgba(0, 0, 0, 0.1)",
+ shadowBlur: 10,
+ },
+ },
+ itemStyle: {
+ normal: {
+ color: "rgb(219,50,51)",
+ },
+ },
+ data: data.yDataThree,
+ },
+ ],
+ };
+
+ if (data?.xData?.length >= 4) {
+ option.dataZoom.push({
+ show: true,
+ type: 'slider',
+ bottom: '0%',
+ xAxisIndex: 0,
+ height: 12,
+ start: 0,
+ end: 1 / (data.xData.length / 4) * 100,
+ textStyle: {
+ fontSize: 0,
+ color: 'rgba(0,0,0,0)'
+ }
+ })
+ option.grid.bottom = '7%'
+ }
+
+ charts.setOption(option);
+ $(window).resize(charts.resize);
+}
const multipleBrokenLineAreaDiagram = (data, ids) => {
let charts = echarts.init(ids);
@@ -3472,4 +3999,4 @@ const percentageRingDiagramTwo = function (data, id) {
charts.setOption(option);
$(window).resize(charts.resize);
-}
\ No newline at end of file
+}
diff --git a/ruoyi-admin/src/main/resources/templates/broad/fp.html b/ruoyi-admin/src/main/resources/templates/broad/fp.html
index 379c725..4c86907 100644
--- a/ruoyi-admin/src/main/resources/templates/broad/fp.html
+++ b/ruoyi-admin/src/main/resources/templates/broad/fp.html
@@ -583,7 +583,7 @@
// 右侧压力 + 右侧温度
autoUpdate('/broad/fp/selectDeviceStation', INTERVAL, data => {
// 右侧压力
- multipleVerticalBarChart(
+ multipleVerticalBarChart1(
{
xName: data.map(value => value.station_no),
yDataOne: data.map(value => value.pol_yl * 1.3),
@@ -592,7 +592,7 @@
yDataTwoName: "ISO压力",
}, document.getElementById("top-right"))
// 右侧温度
- multipleBrokenLineAreaDiagram(
+ multipleBrokenLineAreaDiagram1(
{
xData: data.map(value => value.station_no),
yDataOne: data.map(value => value.pol_wd ),
@@ -983,4 +983,4 @@
}
-