wangh
/
aucma-benchmarking-factory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改正负值显示

Browse Source
master
夜笙歌 2 years ago
parent df2b36ba71
commit 5f2d832a27
2 changed files with 531 additions and 4 deletions
Show Stats Download Patch File Download Diff File

529
ruoyi-admin/src/main/resources/static/js/echartsCommon.js
Unescape Escape View File

@ -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}<br />{a0}: {c0}<br />{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);
}
}

6
ruoyi-admin/src/main/resources/templates/broad/fp.html
Unescape Escape View File

@ -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 @@
}
</script>
</html>
</html>

Write Preview
Loading…
Cancel
Save