|
|
|
|
|
/*
|
|
|
|
|
|
* 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);
|
|
|
|
|
|
const xValue = res.map(val => val.xValue)
|
|
|
|
|
|
const yValue = res.map(val => val.yValue)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let seriesName = "产量";
|
|
|
|
|
|
|
|
|
|
|
|
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 = [];
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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: "0%",
|
|
|
|
|
|
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: xValue,
|
|
|
|
|
|
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(yValue),
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
// {
|
|
|
|
|
|
// 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(xValue),
|
|
|
|
|
|
// },
|
|
|
|
|
|
],
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
zlevel: 1,
|
|
|
|
|
|
name: seriesName,
|
|
|
|
|
|
type: "bar",
|
|
|
|
|
|
barWidth: 15,
|
|
|
|
|
|
data: dataFormat(yValue),
|
|
|
|
|
|
align: "center",
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
barBorderRadius: 10,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
|
color: "#A8A6AB",
|
|
|
|
|
|
textBorderWidth: 2,
|
|
|
|
|
|
position: 'insideTopLeft',
|
|
|
|
|
|
padding: [-20, 0, 0, 0],
|
|
|
|
|
|
formatter: function (params) {
|
|
|
|
|
|
return dataFormat(xValue)[params[`dataIndex`]].value
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
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) => {
|
|
|
|
|
|
const xValue = res.map(val => val.xValue)
|
|
|
|
|
|
const yValue = res.map(val => val.yValue)
|
|
|
|
|
|
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: xValue,
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
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: "rgb(38,208,19)",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 1,
|
|
|
|
|
|
color: "rgba(0,0,0, 0)",
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
false
|
|
|
|
|
|
),
|
|
|
|
|
|
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
|
|
|
|
|
|
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
data: yValue,
|
|
|
|
|
|
}
|
|
|
|
|
|
],
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
mycharts.setOption(option);
|
|
|
|
|
|
$(window).resize(mycharts.resize);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//立体柱状图
|
|
|
|
|
|
const threeDimensionalCylindrical = (res, ids) => {
|
|
|
|
|
|
let mycharts = echarts.init(ids);
|
|
|
|
|
|
const xValue = res.map(val => val.materialName)
|
|
|
|
|
|
const yValue = res.map(val => val.lineStoreAmount)
|
|
|
|
|
|
let barTopColor = ["#02c3f1"];
|
|
|
|
|
|
let barBottomColor = [
|
|
|
|
|
|
"rgba(2,195,241,0.1)",
|
|
|
|
|
|
];
|
|
|
|
|
|
let option = {
|
|
|
|
|
|
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
top: "25%",
|
|
|
|
|
|
bottom: "25%",
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
data: xValue,
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
rotate:-30,
|
|
|
|
|
|
margin: 25,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: 10,
|
|
|
|
|
|
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: yValue,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: "柱底部",
|
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
|
symbolSize: [26, 10],
|
|
|
|
|
|
symbolOffset: [0, 5],
|
|
|
|
|
|
z: 12,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: function (params) {
|
|
|
|
|
|
return barTopColor[0];
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
data: yValue,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: "第一圈",
|
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
|
symbolSize: [47, 16],
|
|
|
|
|
|
symbolOffset: [0, 11],
|
|
|
|
|
|
z: 11,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: "transparent",
|
|
|
|
|
|
borderColor: barTopColor[0],
|
|
|
|
|
|
borderWidth: 4,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
data: [yValue[0], "", ""],
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: "第一圈",
|
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
|
symbolSize: [47, 16],
|
|
|
|
|
|
symbolOffset: [0, 11],
|
|
|
|
|
|
z: 11,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: "transparent",
|
|
|
|
|
|
borderColor: barTopColor[0],
|
|
|
|
|
|
borderWidth: 4,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
data: ["", yValue[1], ""],
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: "第一圈",
|
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
|
symbolSize: [47, 16],
|
|
|
|
|
|
symbolOffset: [0, 11],
|
|
|
|
|
|
z: 11,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: "transparent",
|
|
|
|
|
|
borderColor: barTopColor[0],
|
|
|
|
|
|
borderWidth: 4,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
data: ["", "", yValue[2]],
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: "第二圈",
|
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
|
symbolSize: [62, 22],
|
|
|
|
|
|
symbolOffset: [0, 17],
|
|
|
|
|
|
z: 10,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: "transparent",
|
|
|
|
|
|
borderColor: barTopColor[0],
|
|
|
|
|
|
borderWidth: 4,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
data: [yValue[0], "", ""],
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: "第二圈",
|
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
|
symbolSize: [62, 22],
|
|
|
|
|
|
symbolOffset: [0, 17],
|
|
|
|
|
|
z: 10,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: "transparent",
|
|
|
|
|
|
borderColor: barTopColor[0],
|
|
|
|
|
|
borderWidth: 4,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
data: ["", yValue[1], ""],
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: "第二圈",
|
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
|
symbolSize: [62, 22],
|
|
|
|
|
|
symbolOffset: [0, 17],
|
|
|
|
|
|
z: 10,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: "transparent",
|
|
|
|
|
|
borderColor: barTopColor[0],
|
|
|
|
|
|
borderWidth: 4,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
data: ["", "", yValue[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: yValue,
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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: res.xAxisArray,
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
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: res.isoArray1,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
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: res.polArray1,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
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: res.isoArray2,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
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: res.polArray2,
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
mycharts.setOption(option);
|
|
|
|
|
|
$(window).resize(mycharts.resize);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//绿色多边形柱状图
|
|
|
|
|
|
const greenPolygonalHistogram = (res, ids) => {
|
|
|
|
|
|
let mycharts = echarts.init(ids);
|
|
|
|
|
|
const xValue = res.map(val => val.xValue)
|
|
|
|
|
|
const yValue = res.map(val => val.yValue)
|
|
|
|
|
|
const maxNum = Math.max(...yValue)
|
|
|
|
|
|
const maxArr = []
|
|
|
|
|
|
const minArr = []
|
|
|
|
|
|
yValue.forEach(val => {
|
|
|
|
|
|
maxArr.push(maxNum)
|
|
|
|
|
|
minArr.push(1)
|
|
|
|
|
|
})
|
|
|
|
|
|
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: xValue,
|
|
|
|
|
|
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: yValue,
|
|
|
|
|
|
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: minArr,
|
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
|
barMaxWidth: "20",
|
|
|
|
|
|
symbol: "diamond",
|
|
|
|
|
|
symbolOffset: [0, "50%"],
|
|
|
|
|
|
symbolSize: [30, 15],
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
data: yValue,
|
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
|
barMaxWidth: "20",
|
|
|
|
|
|
symbolPosition: "end",
|
|
|
|
|
|
symbol: "diamond",
|
|
|
|
|
|
symbolOffset: [0, "-50%"],
|
|
|
|
|
|
symbolSize: [30, 12],
|
|
|
|
|
|
zlevel: 2,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
data: maxArr,
|
|
|
|
|
|
type: "bar",
|
|
|
|
|
|
barMaxWidth: "auto",
|
|
|
|
|
|
barWidth: 30,
|
|
|
|
|
|
barGap: "-100%",
|
|
|
|
|
|
zlevel: -1,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
data: minArr,
|
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
|
barMaxWidth: "20",
|
|
|
|
|
|
symbol: "diamond",
|
|
|
|
|
|
symbolOffset: [0, "50%"],
|
|
|
|
|
|
symbolSize: [30, 15],
|
|
|
|
|
|
zlevel: -2,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
data: maxArr,
|
|
|
|
|
|
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);
|
|
|
|
|
|
const xValue = res.map(val => val.xValue)
|
|
|
|
|
|
const yValue = res.map(val => val.yValue)
|
|
|
|
|
|
const maxNum = Math.max(...yValue)
|
|
|
|
|
|
const maxArr = []
|
|
|
|
|
|
const minArr = []
|
|
|
|
|
|
yValue.forEach(val => {
|
|
|
|
|
|
maxArr.push(maxNum)
|
|
|
|
|
|
minArr.push(1)
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
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: xValue,
|
|
|
|
|
|
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: yValue,
|
|
|
|
|
|
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: minArr,
|
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
|
barMaxWidth: "20",
|
|
|
|
|
|
symbol: "diamond",
|
|
|
|
|
|
symbolOffset: [0, "50%"],
|
|
|
|
|
|
symbolSize: [30, 15],
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
data: yValue,
|
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
|
barMaxWidth: "20",
|
|
|
|
|
|
symbolPosition: "end",
|
|
|
|
|
|
symbol: "diamond",
|
|
|
|
|
|
symbolOffset: [0, "-50%"],
|
|
|
|
|
|
symbolSize: [30, 12],
|
|
|
|
|
|
zlevel: 2,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
data: maxArr,
|
|
|
|
|
|
type: "bar",
|
|
|
|
|
|
barMaxWidth: "auto",
|
|
|
|
|
|
barWidth: 30,
|
|
|
|
|
|
barGap: "-100%",
|
|
|
|
|
|
zlevel: -1,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
data: minArr,
|
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
|
barMaxWidth: "20",
|
|
|
|
|
|
symbol: "diamond",
|
|
|
|
|
|
symbolOffset: [0, "50%"],
|
|
|
|
|
|
symbolSize: [30, 15],
|
|
|
|
|
|
zlevel: -2,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
data: maxArr,
|
|
|
|
|
|
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);
|
|
|
|
|
|
const value = []
|
|
|
|
|
|
res.forEach(e=>{
|
|
|
|
|
|
if(!(value.includes(e.materialName))){
|
|
|
|
|
|
value.push(e.materialName)
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
const data = value.map(e => {
|
|
|
|
|
|
return {
|
|
|
|
|
|
materialName:e,
|
|
|
|
|
|
lineStoreAmount:res.filter( val => val.materialName === e).filter(val => val.hullStoreAmount === 'L001')?.[0]?.lineStoreAmount || 0,
|
|
|
|
|
|
hullStoreAmount:res.filter( val => val.materialName === e).filter(val => val.hullStoreAmount === 'U001')?.[0]?.lineStoreAmount || 0
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
const xValue = data.map(val => val.materialName)
|
|
|
|
|
|
const lineStoreAmount = data.map(val => val.lineStoreAmount)
|
|
|
|
|
|
const hullStoreAmount = data.map(val => val.hullStoreAmount)
|
|
|
|
|
|
let lineColor = "#406A92";
|
|
|
|
|
|
let labelColor = "#fff";
|
|
|
|
|
|
let fontSize = "12";
|
|
|
|
|
|
let lineWidth = 1;
|
|
|
|
|
|
let isDataZoom = xValue.length > 3
|
|
|
|
|
|
let stepSize = 1 / (xValue.length / 3) * 100
|
|
|
|
|
|
// hullStoreAmount.forEach((val, index) => {
|
|
|
|
|
|
// if (val == 0) {
|
|
|
|
|
|
// hullStoreAmount[index] = 0
|
|
|
|
|
|
// }
|
|
|
|
|
|
// })
|
|
|
|
|
|
// lineStoreAmount.forEach((val, index) => {
|
|
|
|
|
|
// if (val == 0) {
|
|
|
|
|
|
// lineStoreAmount[index] = 0
|
|
|
|
|
|
// }
|
|
|
|
|
|
// })
|
|
|
|
|
|
let option = {
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
left: "0%",
|
|
|
|
|
|
right: "0%",
|
|
|
|
|
|
top: "25%",
|
|
|
|
|
|
bottom: "10%",
|
|
|
|
|
|
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: {
|
|
|
|
|
|
interval:0,
|
|
|
|
|
|
color: labelColor,
|
|
|
|
|
|
fontSize: fontSize,
|
|
|
|
|
|
margin: 30,
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: lineColor,
|
|
|
|
|
|
width: lineWidth,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: "#197584",
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
data: xValue,
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
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,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
dataZoom: [],
|
|
|
|
|
|
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: hullStoreAmount,
|
|
|
|
|
|
},
|
|
|
|
|
|
// {
|
|
|
|
|
|
// // 左侧下内圈
|
|
|
|
|
|
// name: "",
|
|
|
|
|
|
// type: "pictorialBar",
|
|
|
|
|
|
// tooltip: {
|
|
|
|
|
|
// show: false,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// symbolSize: function (val) {
|
|
|
|
|
|
// if (val == 0) {
|
|
|
|
|
|
// return [0, 0]
|
|
|
|
|
|
// }else{
|
|
|
|
|
|
// return [37, 20]
|
|
|
|
|
|
// }
|
|
|
|
|
|
// },
|
|
|
|
|
|
// symbolOffset: [-39, 20],
|
|
|
|
|
|
// z: 10,
|
|
|
|
|
|
// itemStyle: {
|
|
|
|
|
|
// normal: {
|
|
|
|
|
|
// color: "transparent",
|
|
|
|
|
|
// borderColor: "#2EA9E5",
|
|
|
|
|
|
// borderType: "solid",
|
|
|
|
|
|
// borderWidth: 20,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// },
|
|
|
|
|
|
//
|
|
|
|
|
|
// data: hullStoreAmount,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// {
|
|
|
|
|
|
// // 左侧下外圈
|
|
|
|
|
|
// name: "",
|
|
|
|
|
|
// type: "pictorialBar",
|
|
|
|
|
|
// tooltip: {
|
|
|
|
|
|
// show: false,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// symbolSize: function (val) {
|
|
|
|
|
|
// if (val == 0) {
|
|
|
|
|
|
// return [0, 0]
|
|
|
|
|
|
// }else{
|
|
|
|
|
|
// return [50, 25]
|
|
|
|
|
|
// }
|
|
|
|
|
|
// },
|
|
|
|
|
|
// symbolOffset: [-39, 25],
|
|
|
|
|
|
// z: 10,
|
|
|
|
|
|
// itemStyle: {
|
|
|
|
|
|
// normal: {
|
|
|
|
|
|
// color: "transparent",
|
|
|
|
|
|
// borderColor: "#26B2E8",
|
|
|
|
|
|
// borderType: "solid",
|
|
|
|
|
|
// borderWidth: 20,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// },
|
|
|
|
|
|
// data: hullStoreAmount,
|
|
|
|
|
|
// },
|
|
|
|
|
|
{
|
|
|
|
|
|
// 左侧下圆片
|
|
|
|
|
|
name: "",
|
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
|
symbolSize: [26, 12],
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
symbolOffset: [-39, 5],
|
|
|
|
|
|
z: 12,
|
|
|
|
|
|
color: "#26B2E8",
|
|
|
|
|
|
data: hullStoreAmount,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
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: hullStoreAmount,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
// 右柱上圆片
|
|
|
|
|
|
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: lineStoreAmount,
|
|
|
|
|
|
},
|
|
|
|
|
|
// {
|
|
|
|
|
|
// // 右柱下内圈
|
|
|
|
|
|
// name: "",
|
|
|
|
|
|
// type: "pictorialBar",
|
|
|
|
|
|
// tooltip: {
|
|
|
|
|
|
// show: false,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// symbolPosition:'start',
|
|
|
|
|
|
// symbolSize: function (val,data) {
|
|
|
|
|
|
// console.log(val)
|
|
|
|
|
|
// if (!lineStoreAmount[data.dataIndex] > 0) return [0, 0]
|
|
|
|
|
|
// return [37, 20]
|
|
|
|
|
|
// },
|
|
|
|
|
|
// symbolOffset: [39, 20],
|
|
|
|
|
|
// z: 10,
|
|
|
|
|
|
// itemStyle: {
|
|
|
|
|
|
// normal: {
|
|
|
|
|
|
// color: "transparent",
|
|
|
|
|
|
// borderColor: "#20D3AB",
|
|
|
|
|
|
// borderType: "solid",
|
|
|
|
|
|
// borderWidth: 20,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// },
|
|
|
|
|
|
// data: hullStoreAmount,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// {
|
|
|
|
|
|
// // 右柱下外圈
|
|
|
|
|
|
// name: "",
|
|
|
|
|
|
// type: "pictorialBar",
|
|
|
|
|
|
// tooltip: {
|
|
|
|
|
|
// show: false,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// symbolSize: function (val,data) {
|
|
|
|
|
|
// if (!lineStoreAmount[data.dataIndex] > 0) return [0, 0]
|
|
|
|
|
|
// return [50, 25]
|
|
|
|
|
|
// },
|
|
|
|
|
|
// symbolOffset: [39, 25],
|
|
|
|
|
|
// z: 10,
|
|
|
|
|
|
// itemStyle: {
|
|
|
|
|
|
// normal: {
|
|
|
|
|
|
// color: "transparent",
|
|
|
|
|
|
// borderColor: "#20D3AB",
|
|
|
|
|
|
// borderType: "solid",
|
|
|
|
|
|
// borderWidth: 20,
|
|
|
|
|
|
// },
|
|
|
|
|
|
// },
|
|
|
|
|
|
// data: hullStoreAmount,
|
|
|
|
|
|
// },
|
|
|
|
|
|
{
|
|
|
|
|
|
// 右柱下圆片
|
|
|
|
|
|
name: "",
|
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
|
symbolSize: [26, 12],
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
symbolOffset: [39, 5],
|
|
|
|
|
|
z: 12,
|
|
|
|
|
|
color: "#20D3AB",
|
|
|
|
|
|
data: lineStoreAmount,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
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: lineStoreAmount,
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
};
|
|
|
|
|
|
if (isDataZoom) {
|
|
|
|
|
|
option.dataZoom.push({
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
type: 'slider',
|
|
|
|
|
|
start: 0,
|
|
|
|
|
|
end: stepSize,
|
|
|
|
|
|
})
|
|
|
|
|
|
option.grid.bottom = '20%'
|
|
|
|
|
|
}
|
|
|
|
|
|
const aaa = () => {
|
|
|
|
|
|
setInterval(() => {
|
|
|
|
|
|
option.dataZoom[0].start += stepSize
|
|
|
|
|
|
option.dataZoom[0].start = option.dataZoom[0].start % 100
|
|
|
|
|
|
option.dataZoom[0].end = option.dataZoom[0].start + stepSize
|
|
|
|
|
|
mycharts.setOption(option);
|
|
|
|
|
|
$(window).resize(mycharts.resize);
|
|
|
|
|
|
}, 3000)
|
|
|
|
|
|
}
|
|
|
|
|
|
aaa()
|
|
|
|
|
|
|
|
|
|
|
|
mycharts.setOption(option);
|
|
|
|
|
|
$(window).resize(mycharts.resize);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//设备OEE统计
|
|
|
|
|
|
const OEEStatistics = (res, ids) => {
|
|
|
|
|
|
let mycharts = echarts.init(ids);
|
|
|
|
|
|
let xAxisData = res.map(val => val.xValue);
|
|
|
|
|
|
let yAxisData = res.map(val => val.yValue);
|
|
|
|
|
|
|
|
|
|
|
|
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(45,220,47)", // 线条颜色
|
|
|
|
|
|
},
|
|
|
|
|
|
borderColor: "#f0f",
|
|
|
|
|
|
},
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
position: "top",
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: "rgb(47,224,8)",
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
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: "rgb(6,236,71)",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
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 sum = 0;
|
|
|
|
|
|
|
|
|
|
|
|
let barTopColor = ["#02c3f1"];
|
|
|
|
|
|
let barBottomColor = [
|
|
|
|
|
|
"rgba(2,195,241,0.1)",
|
|
|
|
|
|
];
|
|
|
|
|
|
const xAxisData = res.map(val => val.materialName?.split(',')[0] )
|
|
|
|
|
|
const seriesData1 = res.map(val => val.lineStoreAmount)
|
|
|
|
|
|
console.log(xAxisData,seriesData1)
|
|
|
|
|
|
// Res.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);
|
|
|
|
|
|
const xValue = res.map(val => val.name)
|
|
|
|
|
|
const yValue = res.map(val => val.value)
|
|
|
|
|
|
|
|
|
|
|
|
let barTopColor = [
|
|
|
|
|
|
"#55F675",
|
|
|
|
|
|
];
|
|
|
|
|
|
let barBottomColor = [
|
|
|
|
|
|
"#55F675",
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
|
|
let option = {
|
|
|
|
|
|
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
top: "25%",
|
|
|
|
|
|
right: "5%",
|
|
|
|
|
|
bottom: "25%",
|
|
|
|
|
|
},
|
|
|
|
|
|
xAxis: {
|
|
|
|
|
|
axisTick: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
},
|
|
|
|
|
|
data: xValue,
|
|
|
|
|
|
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: {
|
|
|
|
|
|
color: barTopColor[0],
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
symbolPosition: "end",
|
|
|
|
|
|
data: yValue,
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
{
|
|
|
|
|
|
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: yValue,
|
|
|
|
|
|
},
|
|
|
|
|
|
],
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
mycharts.setOption(option);
|
|
|
|
|
|
$(window).resize(mycharts.resize);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
//设备故障排名
|
|
|
|
|
|
const equipmentFailure = (res, ids) => {
|
|
|
|
|
|
let mycharts = echarts.init(ids);
|
|
|
|
|
|
// console.log("设备故障排名1"+res)
|
|
|
|
|
|
let stationData = [];
|
|
|
|
|
|
let values = [];
|
|
|
|
|
|
|
|
|
|
|
|
res.forEach(function (it, index) {
|
|
|
|
|
|
|
|
|
|
|
|
stationData.push(it.name);
|
|
|
|
|
|
values.push(it.value);
|
|
|
|
|
|
});
|
|
|
|
|
|
let option = {
|
|
|
|
|
|
grid: {
|
|
|
|
|
|
top: '1%',
|
|
|
|
|
|
left: '10%',
|
|
|
|
|
|
right: '15%',
|
|
|
|
|
|
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: 5,
|
|
|
|
|
|
align: "right",
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
|
rich: {
|
|
|
|
|
|
a: {
|
|
|
|
|
|
fontSize: 12,
|
|
|
|
|
|
color: "#ffffff",
|
|
|
|
|
|
},
|
|
|
|
|
|
b: {
|
|
|
|
|
|
height: 20,
|
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
|
color: "#ffffff",
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
series: [
|
|
|
|
|
|
// {
|
|
|
|
|
|
// name: "柱顶部",
|
|
|
|
|
|
// type: "pictorialBar",
|
|
|
|
|
|
// symbolSize: [6, 13],
|
|
|
|
|
|
// symbolOffset: [3, 0],
|
|
|
|
|
|
// z: 12,
|
|
|
|
|
|
// itemStyle: {
|
|
|
|
|
|
// normal: {
|
|
|
|
|
|
// color: function (params) {
|
|
|
|
|
|
// return "#B78E45";
|
|
|
|
|
|
// },
|
|
|
|
|
|
// },
|
|
|
|
|
|
// },
|
|
|
|
|
|
// symbolPosition: "end",
|
|
|
|
|
|
// data: values,
|
|
|
|
|
|
// },
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '2011',
|
|
|
|
|
|
type: 'bar',
|
|
|
|
|
|
data: values,
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
position: "right",
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: '#CCFF66',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: function (params) {
|
|
|
|
|
|
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 1,
|
|
|
|
|
|
color: "#DE9405",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
color: "#CCFF66",
|
|
|
|
|
|
},
|
|
|
|
|
|
]);
|
|
|
|
|
|
},
|
|
|
|
|
|
opacity: 0.8,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
]
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
mycharts.setOption(option);
|
|
|
|
|
|
$(window).resize(mycharts.resize);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 设备产量能耗对比
|
|
|
|
|
|
const energyConsumption = (res, ids) => {
|
|
|
|
|
|
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,
|
|
|
|
|
|
// max: 40,
|
|
|
|
|
|
// interval: 10,
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
formatter: '{value} t'
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: "rgb(217,217,217,0.5)",
|
|
|
|
|
|
type: "dashed" //虚线
|
|
|
|
|
|
// width: 2
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
axisLine: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
type: 'value',
|
|
|
|
|
|
name: '能耗(kw·h)',
|
|
|
|
|
|
min: 0,
|
|
|
|
|
|
// max: 20,
|
|
|
|
|
|
// interval: 5,
|
|
|
|
|
|
axisLabel: {
|
|
|
|
|
|
formatter: '{value} kw·h'
|
|
|
|
|
|
},
|
|
|
|
|
|
splitLine: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
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: "#45C967",
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
offset: 0,
|
|
|
|
|
|
color: "#55F675",
|
|
|
|
|
|
},
|
|
|
|
|
|
]);
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
valueFormatter: function (value) {
|
|
|
|
|
|
return value + ' ml';
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
barWidth: 20,
|
|
|
|
|
|
data: yAxisDataOne,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: '能耗',
|
|
|
|
|
|
type: 'line',
|
|
|
|
|
|
yAxisIndex: 1,
|
|
|
|
|
|
tooltip: {
|
|
|
|
|
|
valueFormatter: function (value) {
|
|
|
|
|
|
return value + ' °C';
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
lineStyle: {
|
|
|
|
|
|
color: '#45b685'
|
|
|
|
|
|
},
|
|
|
|
|
|
data: yAxisDataTwo,
|
|
|
|
|
|
},
|
|
|
|
|
|
{
|
|
|
|
|
|
name: "柱顶部",
|
|
|
|
|
|
type: "pictorialBar",
|
|
|
|
|
|
symbolSize: [20, 6],
|
|
|
|
|
|
symbolOffset: [0, -3],
|
|
|
|
|
|
z: 12,
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
color: function (params) {
|
|
|
|
|
|
return '#55F675';
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
position: "top",
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
color: "#45C967",
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
symbolPosition: "end",
|
|
|
|
|
|
data: yAxisDataOne,
|
|
|
|
|
|
},
|
|
|
|
|
|
]
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
mycharts.setOption(option);
|
|
|
|
|
|
$(window).resize(mycharts.resize);
|
|
|
|
|
|
}
|
