wenjy
/
aucma-scada-visual-board-new
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '2bb997d928'
${ noResults }
aucma-scada-visual-board-new/productionboard/target/classes/static/js/common/echarts.common.js

2448 lines
69 KiB
JavaScript
Raw Normal View History Unescape Escape

修改
3 years ago
/*
* 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) => {
let mycharts = echarts.init(ids);
//参考：https://www.makeapie.com/editor.html?c=xqjNqqjc_U
let datas = [
{ ranking: 1, station: "SC227", value: 199999 },
{ ranking: 2, station: "SC228", value: 104970 },
{ ranking: 3, station: "SC229", value: 29034 },
{ ranking: 4, station: "SC223", value: 23489 },
{ ranking: 5, station: "SC224", value: 18203 },
];
let seriesName = "产量";
function contains(arr, dst) {
var i = arr.length;
while ((i -= 1)) {
if (arr[i] == dst) {
return i;
}
}
return false;
}
let attackSourcesColor = [
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
{ offset: 0, color: "#EB3B5A" },
{ offset: 1, color: "#FE9C5A" },
]),
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
{ offset: 0, color: "#FA8231" },
{ offset: 1, color: "#FFD14C" },
]),
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
{ offset: 0, color: "#F7B731" },
{ offset: 1, color: "#FFEE96" },
]),
new echarts.graphic.LinearGradient(0, 1, 1, 1, [
{ offset: 0, color: "#395CFE" },
{ offset: 1, color: "#2EC7CF" },
]),
];
let attackSourcesColor1 = [
"#EB3B5A",
"#FA8231",
"#F7B731",
"#3860FC",
"#1089E7",
"#F57474",
"#56D0E3",
"#1089E7",
"#F57474",
"#1089E7",
"#F57474",
"#F57474",
];
let stationData = [];
let values = [];
res.datas.forEach(function (it, index) {
stationData.push(it.station);
values.push(it.value);
});
function dataFormat(data) {
let arr = [];
data.forEach(function (item, i) {
let itemStyle = {
color: i > 3 ? attackSourcesColor[3] : attackSourcesColor[i],
};
arr.push({
value: item,
itemStyle: itemStyle,
});
});
return arr;
}
let option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
top: "9%",
left: "-9%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: {
type: "value",
splitLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
},
yAxis: [
{
type: "category",
inverse: true,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
data: stationData,
axisLabel: {
margin: 30,
fontSize: 10,
align: "left",
padding: [2, 0, 0, 0],
color: "#000",
formatter: function (value, index) {
},
},
},
{
type: "category",
inverse: true,
axisTick: "none",
axisLine: "none",
show: true,
axisLabel: {
textStyle: {
color: "#A8A6AB",
fontSize: "12",
},
},
data: dataFormat(values),
},
{
type: "category",
inverse: true,
offset: -10,
position: "left",
axisTick: "none",
axisLine: "none",
show: true,
axisLabel: {
interval: 0,
color: ["#A8A6AB"],
align: "left",
verticalAlign: "bottom",
lineHeight: 32,
fontSize: 12,
},
data: dataFormat(stationData),
},
],
series: [
{
zlevel: 1,
name: seriesName,
type: "bar",
barWidth: 15,
data: dataFormat(values),
align: "center",
itemStyle: {
normal: {
barBorderRadius: 10,
},
},
label: {
show: false,
fontSize: 12,
color: "#A8A6AB",
textBorderWidth: 2,
padding: [2, 0, 0, 0],
},
},
{
name: seriesName,
type: "bar",
barWidth: 15,
barGap: "-100%",
data: res.plan,
itemStyle: {
normal: {
color: "#05325F",
//width:"100%",
fontSize: 12,
barBorderRadius: 30,
},
},
},
],
};
mycharts.setOption(option);
$(window).resize(mycharts.resize);
}
//折线面积图
const brokenLineAreaDiagram = (res, ids) => {
let mycharts = echarts.init(ids);
let option = {
tooltip: {},
grid: {
top: "15%",
left: "1%",
right: "1%",
bottom: "8%",
containLabel: true,
},
legend: {
itemGap: 50,
data: ["人员出入总数"],
textStyle: {
color: "#f9f9f9",
borderColor: "#fff",
},
},
xAxis: [
{
type: "category",
boundaryGap: true,
axisLine: {
//坐标轴轴线相关设置。数学上的x轴
show: true,
lineStyle: {
color: "#2A3852",
},
},
axisLabel: {
//坐标轴刻度标签的相关设置
textStyle: {
color: "#A8A6AB",
margin: 15,
},
},
axisTick: {
show: false,
},
data: [
"07",
"08",
"09",
"10",
"11",
"12",
"13",
],
},
],
yAxis: [
{
type: "value",
min: 0,
// max: 140,
splitNumber: 7,
splitLine: {
show: false,
lineStyle: {
color: "#0a3256",
},
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
margin: 20,
textStyle: {
color: "#A8A6AB",
},
},
axisTick: {
show: false,
},
},
],
series: [
{
name: "小时产量",
type: "line",
smooth: false, //是否平滑曲线显示
showAllSymbol: true,
symbol: "emptyCircle",
symbolSize: 6,
lineStyle: {
normal: {
color: "#13D064", // 线条颜色
},
borderColor: "#f0f",
},
label: {
show: true,
position: "top",
textStyle: {
color: "#28ffb3",
},
},
itemStyle: {
normal: {
color: "#28ffb3",
},
},
tooltip: {
show: false,
},
areaStyle: {
//区域填充样式
normal: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(19,208,100,1)",
},
{
offset: 1,
color: "rgba(0,0,0, 0)",
},
],
false
),
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
},
},
data: [100, 120, 110, 60, 70, 130, 150],
}
],
};
mycharts.setOption(option);
$(window).resize(mycharts.resize);
}
//立体柱状图
const threeDimensionalCylindrical = (res, ids) => {
let mycharts = echarts.init(ids);
let xAxisData = [];
let seriesData1 = [];
let sum = 0;
let barTopColor = ["#02c3f1"];
let barBottomColor = [
"rgba(2,195,241,0.1)",
];
res.datas.forEach((item) => {
xAxisData.push(item.name);
seriesData1.push(item.value);
sum += item.value;
});
let option = {
grid: {
top: "25%",
bottom: "25%",
},
xAxis: {
data: xAxisData,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
margin: 25,
align: "center",
textStyle: {
fontSize: 14,
color: "#A8A6AB",
rich: {
a: {
fontSize: 12,
color: "#ffffff",
},
b: {
height: 20,
fontSize: 14,
color: "#ffffff",
},
},
},
},
interval: 0,
},
yAxis: {
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
},
series: [
{
name: "柱顶部",
type: "pictorialBar",
symbolSize: [26, 10],
symbolOffset: [0, -5],
z: 12,
itemStyle: {
normal: {
color: function (params) {
return barTopColor[0];
},
},
},
label: {
show: true,
position: "top",
textStyle: {
color: "#02C3F1",
},
},
symbolPosition: "end",
data: seriesData1,
},
{
name: "柱底部",
type: "pictorialBar",
symbolSize: [26, 10],
symbolOffset: [0, 5],
z: 12,
itemStyle: {
normal: {
color: function (params) {
return barTopColor[0];
},
},
},
data: seriesData1,
},
{
name: "第一圈",
type: "pictorialBar",
symbolSize: [47, 16],
symbolOffset: [0, 11],
z: 11,
itemStyle: {
normal: {
color: "transparent",
borderColor: barTopColor[0],
borderWidth: 4,
},
},
data: [seriesData1[0], "", ""],
},
{
name: "第一圈",
type: "pictorialBar",
symbolSize: [47, 16],
symbolOffset: [0, 11],
z: 11,
itemStyle: {
normal: {
color: "transparent",
borderColor: barTopColor[0],
borderWidth: 4,
},
},
data: ["", seriesData1[1], ""],
},
{
name: "第一圈",
type: "pictorialBar",
symbolSize: [47, 16],
symbolOffset: [0, 11],
z: 11,
itemStyle: {
normal: {
color: "transparent",
borderColor: barTopColor[0],
borderWidth: 4,
},
},
data: ["", "", seriesData1[2]],
},
{
name: "第二圈",
type: "pictorialBar",
symbolSize: [62, 22],
symbolOffset: [0, 17],
z: 10,
itemStyle: {
normal: {
color: "transparent",
borderColor: barTopColor[0],
borderWidth: 4,
},
},
data: [seriesData1[0], "", ""],
},
{
name: "第二圈",
type: "pictorialBar",
symbolSize: [62, 22],
symbolOffset: [0, 17],
z: 10,
itemStyle: {
normal: {
color: "transparent",
borderColor: barTopColor[0],
borderWidth: 4,
},
},
data: ["", seriesData1[1], ""],
},
{
name: "第二圈",
type: "pictorialBar",
symbolSize: [62, 22],
symbolOffset: [0, 17],
z: 10,
itemStyle: {
normal: {
color: "transparent",
borderColor: barTopColor[0],
borderWidth: 4,
},
},
data: ["", "", seriesData1[2]],
},
{
type: "bar",
itemStyle: {
normal: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: barTopColor[0],
},
{
offset: 0,
color: barBottomColor[0],
},
]);
},
opacity: 0.8,
},
},
z: 16,
silent: true,
barWidth: 26,
barGap: "-100%", // Make series be overlap
data: seriesData1,
},
],
};
mycharts.setOption(option);
$(window).resize(mycharts.resize);
}
//多个折线面积图
const multipleBrokenLineAreaDiagram = (res, ids) => {
let mycharts = echarts.init(ids);
let option = {
tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: "#57617B",
},
},
},
legend: {
icon: "rect",
itemWidth: 14,
itemHeight: 5,
itemGap: 13,
data: ["1#ISO温度", "1#POL温度", "2#ISO温度", "2#POL温度"],
left: "4%",
textStyle: {
fontSize: 12,
color: "#F1F1F3",
},
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
xAxis: [
{
type: "category",
boundaryGap: false,
axisLine: {
lineStyle: {
color: "#57617B",
},
},
data: [
"11:00",
"11:10",
"11:20",
"11:30",
"11:40",
"11:50",
"12:00",
"12:10",
"12:20",
"12:30",
"12:40",
"12:50",
],
},
],
yAxis: [
{
type: "value",
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#57617B",
},
},
axisLabel: {
margin: 10,
textStyle: {
fontSize: 14,
},
},
splitLine: {
show: false,
lineStyle: {
color: "#57617B",
},
},
},
],
series: [
{
name: "1#ISO温度",
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.3)",
},
{
offset: 0.8,
color: "rgba(137, 189, 27, 0)",
},
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)",
shadowBlur: 10,
},
},
itemStyle: {
normal: {
color: "rgb(137,189,27)",
},
},
data: [
96.3, 96.4, 97.5, 95.6, 98.1, 94.8, 89.6, 94.1, 80.1, 52.4, 75.8, 94.7,
],
},
{
name: "1#POL温度",
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.3)",
},
{
offset: 0.8,
color: "rgba(0, 136, 212, 0)",
},
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)",
shadowBlur: 10,
},
},
itemStyle: {
normal: {
color: "rgb(0,136,212)",
},
},
data: [
97.3, 99.2, 99.3, 100.0, 99.6, 90.6, 80.0, 91.5, 69.8, 67.5, 90.4, 84.9,
],
},
{
name: "2#ISO温度",
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.3)",
},
{
offset: 0.8,
color: "rgba(219, 50, 51, 0)",
},
],
false
),
shadowColor: "rgba(0, 0, 0, 0.1)",
shadowBlur: 10,
},
},
itemStyle: {
normal: {
color: "rgb(219,50,51)",
},
},
data: [
84.2, 81.0, 67.5, 72.1, 43.7, 88.5, 91.9, 101.8, 79.7, 87.6, 92.9, 0,
],
},
{
name: "2#POL温度",
type: "line",
smooth: false,
lineStyle: {
normal: {
width: 1,
},
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(31,97,244, 0.3)",
},
{
offset: 0.8,
color: "rgba(31,97,244, 0)",
},
],
false
),
shadowColor: "rgba(31,97,244, 0.1)",
shadowBlur: 10,
},
},
itemStyle: {
normal: {
color: "rgb(31,97,244)",
},
},
data: [
95.3, 26.4, 57.5, 75.6, 78.1, 94.8, 89.6, 94.1, 80.1, 52.4, 75.8, 94.7,
],
},
],
};
mycharts.setOption(option);
$(window).resize(mycharts.resize);
}
//绿色多边形柱状图
const greenPolygonalHistogram = (res, ids) => {
let mycharts = echarts.init(ids);
let option = {
color: [
"#68E683",
"#58E28A",
"#042A4F",
"#042A4F",
"#042A4F",
"#6c93ee",
"#a9abff",
"#f7a23f",
"#27bae7",
"#ff6d9d",
"#cb79ff",
"#f95b5a",
"#ccaf27",
"#38b99c",
"#93d0ff",
"#bd74e0",
"#fd77da",
"#dea700",
],
grid: {
containLabel: true,
left: 20,
right: 20,
bottom: 10,
top: 20,
},
xAxis: {
axisLabel: {
color: "#c0c3cd",
fontSize: 14,
interval: 0,
},
axisTick: {
lineStyle: {
color: "#384267",
},
show: true,
},
splitLine: {
show: false,
},
axisLine: {
lineStyle: {
color: "#384267",
width: 1,
type: "dashed",
},
show: true,
},
data: [
"7点",
"8点",
"9点",
"10点",
"11点",
"12点",
"13点",
"14点",
],
type: "category",
},
yAxis: {
show: false,
axisLabel: {
color: "#c0c3cd",
fontSize: 14,
},
axisTick: {
lineStyle: {
color: "#384267",
width: 1,
},
show: false,
},
splitLine: {
show: false,
lineStyle: {
color: "#384267",
type: "dashed",
},
},
axisLine: {
lineStyle: {
color: "#384267",
width: 1,
type: "dashed",
},
show: false,
},
name: "",
},
series: [
{
data: [200, 85, 112, 275, 305, 415, 741, 405],
type: "bar",
barMaxWidth: "auto",
barWidth: 30,
itemStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: "#1FB55E",
},
{
offset: 1,
color: "#68E683",
},
],
},
},
label: {
show: true,
position: "top",
distance: 10,
color: "#fff",
},
},
{
data: [1, 1, 1, 1, 1, 1, 1, 1],
type: "pictorialBar",
barMaxWidth: "20",
symbol: "diamond",
symbolOffset: [0, "50%"],
symbolSize: [30, 15],
},
{
data: [200, 85, 112, 275, 305, 415, 741, 405],
type: "pictorialBar",
barMaxWidth: "20",
symbolPosition: "end",
symbol: "diamond",
symbolOffset: [0, "-50%"],
symbolSize: [30, 12],
zlevel: 2,
},
{
data: [741, 741, 741, 741, 741, 741, 741, 741],
type: "bar",
barMaxWidth: "auto",
barWidth: 30,
barGap: "-100%",
zlevel: -1,
},
{
data: [1, 1, 1, 1, 1, 1, 1, 1],
type: "pictorialBar",
barMaxWidth: "20",
symbol: "diamond",
symbolOffset: [0, "50%"],
symbolSize: [30, 15],
zlevel: -2,
},
{
data: [741, 741, 741, 741, 741, 741, 741, 741],
type: "pictorialBar",
barMaxWidth: "20",
symbolPosition: "end",
symbol: "diamond",
symbolOffset: [0, "-50%"],
symbolSize: [30, 12],
zlevel: -1,
},
],
tooltip: {
trigger: "axis",
show: false,
},
};
mycharts.setOption(option);
$(window).resize(mycharts.resize);
}
//蓝色多边形柱状图
const bluePolygonHistogram = (res, ids) => {
let mycharts = echarts.init(ids);
let option = {
color: [
"#63caff",
"#49beff",
"#03387a",
"#03387a",
"#03387a",
"#6c93ee",
"#a9abff",
"#f7a23f",
"#27bae7",
"#ff6d9d",
"#cb79ff",
"#f95b5a",
"#ccaf27",
"#38b99c",
"#93d0ff",
"#bd74e0",
"#fd77da",
"#dea700",
],
grid: {
containLabel: true,
left: 20,
right: 20,
bottom: 10,
top: 20,
},
xAxis: {
axisLabel: {
color: "#c0c3cd",
fontSize: 14,
interval: 0,
},
axisTick: {
lineStyle: {
color: "#384267",
},
show: true,
},
splitLine: {
show: false,
},
axisLine: {
lineStyle: {
color: "#384267",
width: 1,
type: "dashed",
},
show: true,
},
data: [
"7点",
"8点",
"9点",
"10点",
"11点",
"12点",
"13点",
"14点",
],
type: "category",
},
yAxis: {
show: false,
axisLabel: {
color: "#c0c3cd",
fontSize: 14,
},
axisTick: {
lineStyle: {
color: "#384267",
width: 1,
},
show: false,
},
splitLine: {
show: false,
lineStyle: {
color: "#384267",
type: "dashed",
},
},
axisLine: {
lineStyle: {
color: "#384267",
width: 1,
type: "dashed",
},
show: false,
},
name: "",
},
series: [
{
data: [200, 85, 112, 275, 305, 415, 741, 405],
type: "bar",
barMaxWidth: "auto",
barWidth: 30,
itemStyle: {
color: {
x: 0,
y: 0,
x2: 0,
y2: 1,
type: "linear",
global: false,
colorStops: [
{
offset: 0,
color: "#0b9eff",
},
{
offset: 1,
color: "#63caff",
},
],
},
},
label: {
show: true,
position: "top",
distance: 10,
color: "#fff",
},
},
{
data: [1, 1, 1, 1, 1, 1, 1, 1],
type: "pictorialBar",
barMaxWidth: "20",
symbol: "diamond",
symbolOffset: [0, "50%"],
symbolSize: [30, 15],
},
{
data: [200, 85, 112, 275, 305, 415, 741, 405],
type: "pictorialBar",
barMaxWidth: "20",
symbolPosition: "end",
symbol: "diamond",
symbolOffset: [0, "-50%"],
symbolSize: [30, 12],
zlevel: 2,
},
{
data: [741, 741, 741, 741, 741, 741, 741, 741],
type: "bar",
barMaxWidth: "auto",
barWidth: 30,
barGap: "-100%",
zlevel: -1,
},
{
data: [1, 1, 1, 1, 1, 1, 1, 1],
type: "pictorialBar",
barMaxWidth: "20",
symbol: "diamond",
symbolOffset: [0, "50%"],
symbolSize: [30, 15],
zlevel: -2,
},
{
data: [741, 741, 741, 741, 741, 741, 741, 741],
type: "pictorialBar",
barMaxWidth: "20",
symbolPosition: "end",
symbol: "diamond",
symbolOffset: [0, "-50%"],
symbolSize: [30, 12],
zlevel: -1,
},
],
tooltip: {
trigger: "axis",
show: false,
},
};
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);
}
//设备OEE统计
const OEEStatistics = (res, ids) => {
let mycharts = echarts.init(ids);
修改字体颜色
3 years ago
let xAxisData = res.map(val => val.xValue);
let yAxisData = res.map(val => val.yValue);
修改
3 years ago
let option = {
tooltip: {},
grid: {
top: "15%",
left: "5%",
right: "5%",
bottom: "8%",
containLabel: true,
},
legend: {
itemGap: 50,
data: ["人员出入总数"],
textStyle: {
color: "#f9f9f9",
borderColor: "#fff",
},
},
xAxis: [
{
type: "category",
boundaryGap: false,
data: xAxisData,
min: 0,
splitNumber: 4,
splitLine: {
show: true,
lineStyle: {
color: "#0a3256",
},
},
axisLine: {
show: true,
},
axisLabel: {
show: true,
margin: 10,
textStyle: {
color: "#A8A6AB",
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
lineStyle: {
color: "rgb(217,217,217,0.5)",
type: "dashed" //虚线
// width: 2
}
}
},
],
yAxis: [
{
type: "value",
min: 0,
splitLine: {
show: true,
lineStyle: {
color: "#0a3256",
},
},
axisLine: {
show: true,
},
axisLabel: {
show: true,
margin: 20,
textStyle: {
color: "#A8A6AB",
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
lineStyle: {
color: "rgb(217,217,217,0.5)",
type: "dashed" //虚线
// width: 2
}
}
},
],
series: [
{
name: "小时产量",
type: "line",
smooth: false, //是否平滑曲线显示
showAllSymbol: true,
symbol: "circle",
symbolSize: 6,
lineStyle: {
normal: {
color: "rgb(165,122,75)", // 线条颜色
},
borderColor: "#f0f",
},
label: {
show: true,
position: "top",
textStyle: {
修改字体颜色
3 years ago
color: "rgb(165,122,75)",
修改
3 years ago
},
},
itemStyle: {
normal: {
color: "rgb(9,24,51)",
borderColor: "rgb(165,122,75)",
borderWidth: 2,
},
},
tooltip: {
show: false,
},
areaStyle: {
//区域填充样式
normal: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "rgba(102,64,38,1)",
},
{
offset: 1,
color: "rgba(0,0,0, 0)",
},
],
),
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
},
},
data:yAxisData,
}
],
};
mycharts.setOption(option);
$(window).resize(mycharts.resize);
}
//库存情况
const inventory = (res, ids) => {
let mycharts = echarts.init(ids);
let xAxisData = [];
let seriesData1 = [];
let sum = 0;
let barTopColor = ["#02c3f1"];
let barBottomColor = [
"rgba(2,195,241,0.1)",
];
let Res =
{
datas: [
{
name: 'SC-279',
value: 2
},
{
name: 'SC-606',
value: 6
},
{
name: 'SC-387NE',
value: 31
},
{
name: 'SC-329',
value: 2
},
{
name: 'SC-279',
value: 9
},
]
}
Res.datas.forEach((item) => {
xAxisData.push(item.name);
seriesData1.push(item.value);
sum += item.value;
});
let option = {
grid: {
top: "25%",
bottom: "25%",
},
xAxis: {
data: xAxisData,
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
interval: 0,
show: true,
margin: 25,
align: "center",
textStyle: {
fontSize: 12,
color: "#A8A6AB",
rich: {
a: {
fontSize: 12,
color: "#ffffff",
},
b: {
height: 20,
fontSize: 14,
color: "#ffffff",
},
},
},
},
},
yAxis: {
splitLine: {
show: false,
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
},
series: [
{
name: "柱顶部",
type: "pictorialBar",
symbolSize: [15, 6],
symbolOffset: [0, -5],
z: 12,
itemStyle: {
normal: {
color: function (params) {
return barTopColor[0];
},
},
},
label: {
show: true,
position: "top",
textStyle: {
color: "#02C3F1",
},
},
symbolPosition: "end",
data: seriesData1,
},
{
name: "柱底部",
type: "pictorialBar",
symbolSize: [26, 10],
symbolOffset: [0, 5],
z: 12,
itemStyle: {
normal: {
color: function (params) {
return barTopColor[0];
},
},
},
data: seriesData1,
},
{
name: "第一圈",
type: "pictorialBar",
symbolSize: [38, 14],
symbolOffset: [0, 17],
z: 11,
itemStyle: {
normal: {
color: "transparent",
borderColor: barTopColor[0],
borderWidth: 20,
},
},
data: [seriesData1[0], "", ""],
},
{
name: "第一圈",
type: "pictorialBar",
symbolSize: [38, 14],
symbolOffset: [0, 17],
z: 11,
itemStyle: {
normal: {
color: "transparent",
borderColor: barTopColor[0],
borderWidth: 20,
},
},
data: ["", seriesData1[1], ""],
},
{
name: "第一圈",
type: "pictorialBar",
symbolSize: [38, 14],
symbolOffset: [0, 17],
z: 11,
itemStyle: {
normal: {
color: "transparent",
borderColor: barTopColor[0],
borderWidth: 20,
},
},
data: ["", "", seriesData1[2]],
},
{
name: "第一圈",
type: "pictorialBar",
symbolSize: [38, 14],
symbolOffset: [0, 17],
z: 11,
itemStyle: {
normal: {
color: "transparent",
borderColor: barTopColor[0],
borderWidth: 20,
},
},
data: ["", "", "", seriesData1[3]],
},
{
name: "第一圈",
type: "pictorialBar",
symbolSize: [38, 14],
symbolOffset: [0, 17],
z: 11,
itemStyle: {
normal: {
color: "transparent",
borderColor: barTopColor[0],
borderWidth: 20,
},
},
data: ["", "", "", "", seriesData1[4]],
},
{
name: "第二圈",
type: "pictorialBar",
symbolSize: [30, 10],
symbolOffset: [0, 12],
z: 10,
itemStyle: {
normal: {
color: "transparent",
borderColor: barTopColor[0],
borderWidth: 16,
},
},
data: [seriesData1[0], "", ""],
},
{
name: "第二圈",
type: "pictorialBar",
symbolSize: [30, 10],
symbolOffset: [0, 12],
z: 10,
itemStyle: {
normal: {
color: "transparent",
borderColor: barTopColor[0],
borderWidth: 16,
},
},
data: ["", seriesData1[1], ""],
},
{
name: "第二圈",
type: "pictorialBar",
symbolSize: [30, 10],
symbolOffset: [0, 12],
z: 10,
itemStyle: {
normal: {
color: "transparent",
borderColor: barTopColor[0],
borderWidth: 16,
},
},
data: ["", "", seriesData1[2]],
},
{
name: "第二圈",
type: "pictorialBar",
symbolSize: [30, 10],
symbolOffset: [0, 12],
z: 10,
itemStyle: {
normal: {
color: "transparent",
borderColor: barTopColor[0],
borderWidth: 16,
},
},
data: ["", "", "", seriesData1[3]],
},
{
name: "第二圈",
type: "pictorialBar",
symbolSize: [30, 10],
symbolOffset: [0, 12],
z: 10,
itemStyle: {
normal: {
color: "transparent",
borderColor: barTopColor[0],
borderWidth: 16,
},
},
data: ["", "", "", "", seriesData1[4]],
},
{
type: "bar",
itemStyle: {
normal: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: barTopColor[0],
},
{
offset: 0,
color: barBottomColor[0],
},
]);
},
opacity: 0.8,
},
},
z: 16,
silent: true,
barWidth: 14,
barGap: "-100%", // Make series be overlap
data: seriesData1,
},
],
};
mycharts.setOption(option);
$(window).resize(mycharts.resize);
}
//loss
const loss = (res, ids) => {
let mycharts = echarts.init(ids);
let xAxisData = [];
let seriesData1 = [];
let sum = 0;
let barTopColor = [
修改颜色
3 years ago
"#55F675",
修改
3 years ago
];
let barBottomColor = [
修改颜色
3 years ago
"#55F675",
修改
3 years ago
];
let Res =
{
datas:res.length > 0 ? res : [
{
name: '>30分钟',
value: 2
},
{
name: '3-10分钟',
value: 6
},
{
name: '0-3分钟',
value: 9
},
],
}
Res.datas.forEach((item) => {
xAxisData.push(item.name);
seriesData1.push(item.value);
sum += item.value;
});
let option = {
grid: {
top: "25%",
right: "5%",
bottom: "25%",
},
xAxis: {
axisTick: {
show: false,
},
data: xAxisData,
axisLine: {
show: true,
},
axisLabel: {
interval: 0,
show: true,
margin: 10,
align: "center",
textStyle: {
fontSize: 12,
color: "#A8A6AB",
rich: {
a: {
fontSize: 12,
color: "#ffffff",
},
b: {
height: 20,
fontSize: 14,
color: "#ffffff",
},
},
},
},
splitLine: {
show: false,
lineStyle: {
color: "rgb(217,217,217,0.5)",
type: "dashed" //虚线
// width: 2
}
}
},
yAxis: {
splitLine: {
show: true,
},
axisTick: {
show: false,
},
axisLine: {
show: true,
},
axisLabel: {
show: true,
},
splitLine: {
show: false,
lineStyle: {
color: "rgb(217,217,217,0.5)",
type: "dashed" //虚线
// width: 2
}
}
},
series: [
{
name: "柱顶部",
type: "pictorialBar",
symbolSize: [35, 6],
symbolOffset: [0, -3],
z: 12,
itemStyle: {
normal: {
color: function (params) {
return barTopColor[0];
},
},
},
label: {
show: true,
position: "top",
textStyle: {
修改字体颜色
3 years ago
color: barTopColor[0],
修改
3 years ago
},
},
symbolPosition: "end",
data: seriesData1,
},
{
type: "bar",
itemStyle: {
normal: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: barTopColor[0],
},
{
offset: 0,
color: barBottomColor[0],
},
]);
},
opacity: 0.8,
},
},
z: 16,
silent: true,
barWidth: 35,
barGap: "-100%", // Make series be overlap
data: seriesData1,
},
],
};
mycharts.setOption(option);
$(window).resize(mycharts.resize);
}
//设备故障排名
const equipmentFailure = (res, ids) => {
let mycharts = echarts.init(ids);
let stationData = [];
let values = [];
res.datas.forEach(function (it, index) {
stationData.push(it.station);
values.push(it.value);
});
let option = {
grid: {
top: '1%',
left: '6%',
修改字体颜色
3 years ago
right: '15%',
修改
3 years ago
bottom: '3%',
containLabel: true
},
xAxis: {
// type: "category",
boundaryGap: false,
min: 0,
splitNumber: 4,
splitLine: {
show: true,
lineStyle: {
color: "#0a3256",
},
},
axisLine: {
show: true,
},
axisLabel: {
show: true,
margin: 10,
textStyle: {
color: "#A8A6AB",
},
},
axisTick: {
show: false,
},
splitLine: {
show: false,
lineStyle: {
color: "rgb(217,217,217,0.5)",
type: "dashed" //虚线
// width: 2
}
},
type: 'value',
},
yAxis: {
axisTick: {
show: false,
},
interval: 0,
type: 'category',
data: stationData,
splitLine: {
show: false,
lineStyle: {
color: "rgb(217,217,217,0.5)",
type: "dashed" //虚线
// width: 2
}
},
axisLabel: {
interval: 0,
show: true,
margin: 25,
align: "center",
textStyle: {
fontSize: 12,
rich: {
a: {
fontSize: 12,
color: "#ffffff",
},
b: {
height: 20,
fontSize: 14,
color: "#ffffff",
},
},
},
},
},
series: [
修改字体颜色
3 years ago
// {
// name: "柱顶部",
// type: "pictorialBar",
// symbolSize: [6, 13],
// symbolOffset: [3, 0],
// z: 12,
// itemStyle: {
// normal: {
// color: function (params) {
// return "#B78E45";
// },
// },
// },
// symbolPosition: "end",
// data: values,
// },
修改
3 years ago
{
name: '2011',
type: 'bar',
data: values,
修改字体颜色
3 years ago
label: {
show: true,
position: "right",
textStyle: {
color: '#CCFF66',
},
},
修改
3 years ago
itemStyle: {
normal: {
color: function (params) {
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{
offset: 1,
修改颜色
3 years ago
color: "#DE9405",
修改
3 years ago
},
{
offset: 0,
修改字体颜色
3 years ago
color: "#CCFF66",
修改
3 years ago
},
]);
},
opacity: 0.8,
},
},
},
]
};
mycharts.setOption(option);
$(window).resize(mycharts.resize);
}
// 设备产量能耗对比
const energyConsumption = (res, ids) => {
console.log(res);
let mycharts = echarts.init(ids);
let xAxisData = res.xValueArray;// x
let yAxisDataOne = res.productionArray;// 产量
let yAxisDataTwo = res.energyArray;// 能耗
let option = {
grid: {
top: '25%',
left: '6%',
right: '6%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
interval: 0,
type: 'category',
data: xAxisData,
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: '产量(t)',
min: 0,
修改颜色
3 years ago
// max: 40,
// interval: 10,
修改
3 years ago
axisLabel: {
formatter: '{value} ml'
},
splitLine: {
修改颜色
3 years ago
show: false,
修改
3 years ago
lineStyle: {
color: "rgb(217,217,217,0.5)",
type: "dashed" //虚线
// width: 2
}
},
axisLine: {
show: true,
},
},
{
type: 'value',
name: '能耗(kw·h)',
min: 0,
修改颜色
3 years ago
// max: 20,
// interval: 5,
修改
3 years ago
axisLabel: {
formatter: '{value} °C'
},
splitLine: {
修改颜色
3 years ago
show: false,
修改
3 years ago
lineStyle: {
color: "rgb(217,217,217,0.5)",
type: "dashed" //虚线
// width: 2
}
},
axisLine: {
show: true,
},
}
],
series: [
{
name: '产量',
type: 'bar',
itemStyle: {
normal: {
color: function (params) {
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 1,
color: "rgba(10,50,220)",
},
{
offset: 0,
color: "rgba(40,140,210)",
},
]);
},
},
},
tooltip: {
valueFormatter: function (value) {
return value + ' ml';
}
},
barWidth: 20,
data: yAxisDataOne,
},
{
name: '能耗',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + ' °C';
}
},
data: yAxisDataTwo,
},
{
name: "柱顶部",
type: "pictorialBar",
symbolSize: [20, 6],
symbolOffset: [0, -3],
z: 12,
itemStyle: {
normal: {
color: function (params) {
return 'rgb(217,217,217)';
},
},
},
label: {
show: true,
position: "top",
textStyle: {
color: "#02C3F1",
},
},
symbolPosition: "end",
data:yAxisDataOne,
},
]
};
mycharts.setOption(option);
$(window).resize(mycharts.resize);
}