wenjy
/
aucma-scada-visual-board-new
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

change - 箱壳、铝内胆库存样式处理

Browse Source
master
wenjy 3 years ago
parent 8cf8906cab
commit 1e2c418146
5 changed files with 641 additions and 5 deletions
Show Stats Download Patch File Download Diff File

2
productionboard/src/main/resources/static/js/aluminumTank/index.js
Unescape Escape View File

@ -12,7 +12,7 @@ $(()=>{
//库存统计
$.getJSON('/aluminumTank/getInventoryStatistics', function (result) {
threeDimensionalCylindrical(result,document.getElementById("inventoryStatistics"));
multipleThreeDimensionalCylindrical(result,document.getElementById("inventoryStatistics"));
});
})

320
productionboard/src/main/resources/static/js/common/echarts.common.js
Unescape Escape View File

@ -1,4 +1,13 @@
/*Echarts图表封装*/
/*
* Echarts图表封装
* 横向柱状图：horizontalBarChart(res, ids)
* 折线图面积图：brokenLineAreaDiagram(res, ids)
* 立体柱状图：threeDimensionalCylindrical(res, ids)
* 多个折线面积图：multipleBrokenLineAreaDiagram(res, ids)
* 绿色多边形柱状图：greenPolygonalHistogram(res, ids)
* 蓝色多边形柱状图：bluePolygonHistogram(res, ids)T
* 多个立体柱状图：multipleThreeDimensionalCylindrical(res, ids)
* */
//横向柱状图
const horizontalBarChart = (res, ids) => {
@ -1204,6 +1213,315 @@ const bluePolygonHistogram = (res, ids) =>{
};
mycharts.setOption(option);
$(window).resize(mycharts.resize);
}
//多个立体柱状图
const multipleThreeDimensionalCylindrical = (res, ids) =>{
let mycharts = echarts.init(ids);
let lineColor = "#406A92";
let labelColor = "#fff";
let fontSize = "12";
let lineWidth = 1;
let option = {
grid: {
left: "0%",
right: "0%",
top: "25%",
bottom: "2%",
containLabel: true,
},
tooltip: {
show: true,
trigger: "axis",
textStyle: {
fontSize: fontSize,
},
},
legend: {
show: true,
x: "center",
y: "1%",
itemWidth: 10,
itemHeight: 2,
textStyle: {
color: "#fff",
fontSize: fontSize,
},
data: ["内胆库", "箱壳库"],
},
xAxis: [
{
type: "category",
name: "",
nameTextStyle: {
fontSize: fontSize,
color: labelColor,
lineHeight: 20,
},
axisLabel: {
color: labelColor,
fontSize: fontSize,
margin: 20,
},
axisLine: {
show: false,
lineStyle: {
color: lineColor,
width: lineWidth,
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
lineStyle: {
color: "#197584",
},
},
data: ["SC329", "SC528"],
},
],
yAxis: [
{
type: "value",
name: "",
nameTextStyle: {
fontSize: fontSize,
color: labelColor,
},
nameGap: 10,
axisLabel: {
show: false,
formatter: "{value}",
margin: 10,
textStyle: {
color: labelColor,
fontSize: fontSize,
},
},
axisLine: {
show: false,
lineStyle: {
color: lineColor,
width: lineWidth,
},
},
splitArea: {
show: false,
areaStyle: {
color: ["rgba(128,160,176,.1)", "rgba(250,250,250,0)"],
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
lineStyle: {
color: lineColor,
},
},
},
],
series: [
{
name: "",
type: "pictorialBar",
symbolSize: [26, 12],
symbolOffset: [-39, -5],
symbolPosition: "end",
z: 12,
tooltip: {
show: false,
},
label: {
normal: {
show: false,
position: "top",
fontSize: fontSize,
color: "#fff",
},
},
color: "#26B2E8",
data: [99.9, 99.9],
},
{
name: "",
type: "pictorialBar",
tooltip: {
show: false,
},
//外圈
symbolSize: [37, 20],
symbolOffset: [-39, 20],
z: 10,
itemStyle: {
normal: {
color: "transparent",
borderColor: "#2EA9E5",
borderType: "solid",
borderWidth: 20,
},
},
data: [99.9, 99.9],
},
{
name: "",
type: "pictorialBar",
tooltip: {
show: false,
},
symbolSize: [50, 25],
symbolOffset: [-39, 25],
z: 10,
itemStyle: {
normal: {
color: "transparent",
borderColor: "#26B2E8",
borderType: "solid",
borderWidth: 20,
},
},
data: [99.9, 99.9],
},
{
name: "",
type: "pictorialBar",
symbolSize: [26, 12],
tooltip: {
show: false,
},
symbolOffset: [-39, 5],
z: 12,
color: "#26B2E8",
data: [99.9, 99.9],
},
{
type: "bar",
name: "箱壳库",
barWidth: "26",
barGap: "200%",
barCateGoryGap: "10%",
label: {
normal: {
show: true,
position: "top",
fontSize: fontSize,
color: "#fff",
opacity: 1,
formatter: "{c}%",
offset: [0, -20],
},
},
itemStyle: {
normal: {
color: "#1E93C6",
opacity: 1,
},
},
data: [99.9, 99.9],
},
{
name: "",
type: "pictorialBar",
symbolSize: [26, 12],
symbolOffset: [39, -5],
symbolPosition: "end",
z: 12,
tooltip: {
show: false,
},
label: {
normal: {
show: false,
position: "top",
fontSize: fontSize,
color: "#fff",
},
},
color: "#20D3AB",
data: [99.9, 99.9],
},
{
name: "",
type: "pictorialBar",
tooltip: {
show: false,
},
symbolSize: [37, 20],
symbolOffset: [39, 20],
z: 10,
itemStyle: {
normal: {
color: "transparent",
borderColor: "#20D3AB",
borderType: "solid",
borderWidth: 20,
},
},
data: [99.9, 99.9],
},
{
name: "",
type: "pictorialBar",
tooltip: {
show: false,
},
symbolSize: [50, 25],
symbolOffset: [39, 25],
z: 10,
itemStyle: {
normal: {
color: "transparent",
borderColor: "#20D3AB",
borderType: "solid",
borderWidth: 20,
},
},
data: [99.9, 99.9],
},
{
name: "",
type: "pictorialBar",
symbolSize: [26,12],
tooltip: {
show: false,
},
symbolOffset: [39, 5],
z: 12,
color: "#20D3AB",
data: [99.9, 99.9],
},
{
type: "bar",
name: "内胆库",
barWidth: "26",
barGap: "200%",
barCateGoryGap: "10%",
label: {
normal: {
show: true,
position: "top",
fontSize: fontSize,
color: "#fff",
formatter: "{c}%",
offset: [0, -20],
},
},
itemStyle: {
normal: {
color: "#1AAE96",
opacity: 1,
},
},
data: [99.9, 99.9],
},
],
};
mycharts.setOption(option);
$(window).resize(mycharts.resize);
}

2
productionboard/src/main/resources/static/js/tankShell/index.js
Unescape Escape View File

@ -12,7 +12,7 @@ $(()=>{
//库存统计
$.getJSON('/tankShell/getInventoryStatistics', function (result) {
threeDimensionalCylindrical(result,document.getElementById("inventoryStatistics"));
multipleThreeDimensionalCylindrical(result,document.getElementById("inventoryStatistics"));
});
})

320
productionboard/target/classes/static/js/common/echarts.common.js
Unescape Escape View File

@ -1,4 +1,13 @@
/*Echarts图表封装*/
/*
* Echarts图表封装
* 横向柱状图：horizontalBarChart(res, ids)
* 折线图面积图：brokenLineAreaDiagram(res, ids)
* 立体柱状图：threeDimensionalCylindrical(res, ids)
* 多个折线面积图：multipleBrokenLineAreaDiagram(res, ids)
* 绿色多边形柱状图：greenPolygonalHistogram(res, ids)
* 蓝色多边形柱状图：bluePolygonHistogram(res, ids)T
* 多个立体柱状图：multipleThreeDimensionalCylindrical(res, ids)
* */
//横向柱状图
const horizontalBarChart = (res, ids) => {
@ -1204,6 +1213,315 @@ const bluePolygonHistogram = (res, ids) =>{
};
mycharts.setOption(option);
$(window).resize(mycharts.resize);
}
//多个立体柱状图
const multipleThreeDimensionalCylindrical = (res, ids) =>{
let mycharts = echarts.init(ids);
let lineColor = "#406A92";
let labelColor = "#fff";
let fontSize = "12";
let lineWidth = 1;
let option = {
grid: {
left: "0%",
right: "0%",
top: "25%",
bottom: "2%",
containLabel: true,
},
tooltip: {
show: true,
trigger: "axis",
textStyle: {
fontSize: fontSize,
},
},
legend: {
show: true,
x: "center",
y: "1%",
itemWidth: 10,
itemHeight: 2,
textStyle: {
color: "#fff",
fontSize: fontSize,
},
data: ["内胆库", "箱壳库"],
},
xAxis: [
{
type: "category",
name: "",
nameTextStyle: {
fontSize: fontSize,
color: labelColor,
lineHeight: 20,
},
axisLabel: {
color: labelColor,
fontSize: fontSize,
margin: 20,
},
axisLine: {
show: false,
lineStyle: {
color: lineColor,
width: lineWidth,
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
lineStyle: {
color: "#197584",
},
},
data: ["SC329", "SC528"],
},
],
yAxis: [
{
type: "value",
name: "",
nameTextStyle: {
fontSize: fontSize,
color: labelColor,
},
nameGap: 10,
axisLabel: {
show: false,
formatter: "{value}",
margin: 10,
textStyle: {
color: labelColor,
fontSize: fontSize,
},
},
axisLine: {
show: false,
lineStyle: {
color: lineColor,
width: lineWidth,
},
},
splitArea: {
show: false,
areaStyle: {
color: ["rgba(128,160,176,.1)", "rgba(250,250,250,0)"],
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
lineStyle: {
color: lineColor,
},
},
},
],
series: [
{
name: "",
type: "pictorialBar",
symbolSize: [26, 12],
symbolOffset: [-39, -5],
symbolPosition: "end",
z: 12,
tooltip: {
show: false,
},
label: {
normal: {
show: false,
position: "top",
fontSize: fontSize,
color: "#fff",
},
},
color: "#26B2E8",
data: [99.9, 99.9],
},
{
name: "",
type: "pictorialBar",
tooltip: {
show: false,
},
//外圈
symbolSize: [37, 20],
symbolOffset: [-39, 20],
z: 10,
itemStyle: {
normal: {
color: "transparent",
borderColor: "#2EA9E5",
borderType: "solid",
borderWidth: 20,
},
},
data: [99.9, 99.9],
},
{
name: "",
type: "pictorialBar",
tooltip: {
show: false,
},
symbolSize: [50, 25],
symbolOffset: [-39, 25],
z: 10,
itemStyle: {
normal: {
color: "transparent",
borderColor: "#26B2E8",
borderType: "solid",
borderWidth: 20,
},
},
data: [99.9, 99.9],
},
{
name: "",
type: "pictorialBar",
symbolSize: [26, 12],
tooltip: {
show: false,
},
symbolOffset: [-39, 5],
z: 12,
color: "#26B2E8",
data: [99.9, 99.9],
},
{
type: "bar",
name: "箱壳库",
barWidth: "26",
barGap: "200%",
barCateGoryGap: "10%",
label: {
normal: {
show: true,
position: "top",
fontSize: fontSize,
color: "#fff",
opacity: 1,
formatter: "{c}%",
offset: [0, -20],
},
},
itemStyle: {
normal: {
color: "#1E93C6",
opacity: 1,
},
},
data: [99.9, 99.9],
},
{
name: "",
type: "pictorialBar",
symbolSize: [26, 12],
symbolOffset: [39, -5],
symbolPosition: "end",
z: 12,
tooltip: {
show: false,
},
label: {
normal: {
show: false,
position: "top",
fontSize: fontSize,
color: "#fff",
},
},
color: "#20D3AB",
data: [99.9, 99.9],
},
{
name: "",
type: "pictorialBar",
tooltip: {
show: false,
},
symbolSize: [37, 20],
symbolOffset: [39, 20],
z: 10,
itemStyle: {
normal: {
color: "transparent",
borderColor: "#20D3AB",
borderType: "solid",
borderWidth: 20,
},
},
data: [99.9, 99.9],
},
{
name: "",
type: "pictorialBar",
tooltip: {
show: false,
},
symbolSize: [50, 25],
symbolOffset: [39, 25],
z: 10,
itemStyle: {
normal: {
color: "transparent",
borderColor: "#20D3AB",
borderType: "solid",
borderWidth: 20,
},
},
data: [99.9, 99.9],
},
{
name: "",
type: "pictorialBar",
symbolSize: [26,12],
tooltip: {
show: false,
},
symbolOffset: [39, 5],
z: 12,
color: "#20D3AB",
data: [99.9, 99.9],
},
{
type: "bar",
name: "内胆库",
barWidth: "26",
barGap: "200%",
barCateGoryGap: "10%",
label: {
normal: {
show: true,
position: "top",
fontSize: fontSize,
color: "#fff",
formatter: "{c}%",
offset: [0, -20],
},
},
itemStyle: {
normal: {
color: "#1AAE96",
opacity: 1,
},
},
data: [99.9, 99.9],
},
],
};
mycharts.setOption(option);
$(window).resize(mycharts.resize);
}

2
productionboard/target/classes/static/js/tankShell/index.js
Unescape Escape View File

@ -12,7 +12,7 @@ $(()=>{
//库存统计
$.getJSON('/tankShell/getInventoryStatistics', function (result) {
threeDimensionalCylindrical(result,document.getElementById("inventoryStatistics"));
multipleThreeDimensionalCylindrical(result,document.getElementById("inventoryStatistics"));
});
})

Write Preview
Loading…
Cancel
Save