|
|
/*
|
|
|
* 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);
|
|
|
} |