/* * 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: "-30%", 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: 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) => { 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, 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: 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); console.log(res); 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 xValue = res.map(val => val.materialName) const lineStoreAmount = res.map(val => val.lineStoreAmount) const hullStoreAmount = res.map(val => val.hullStoreAmount) let lineColor = "#406A92"; let labelColor = "#fff"; let fontSize = "12"; let lineWidth = 1; let isDataZoom = xValue.length > 3 let stepSize = 20 // 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: { 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) const seriesData1 = res.map(val => val.lineStoreAmount) // 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.station); 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); }