diff --git a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/broad/BeforeLibraryController.java b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/broad/BeforeLibraryController.java new file mode 100644 index 0000000..78ceb61 --- /dev/null +++ b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/broad/BeforeLibraryController.java @@ -0,0 +1,32 @@ +package com.ruoyi.web.controller.broad; + +import com.alibaba.fastjson.JSONArray; +import com.alibaba.fastjson.JSONObject; +import com.ruoyi.system.domain.BoxOutput; +import com.ruoyi.system.service.IBroadDataService; +import io.swagger.annotations.ApiOperation; +import org.springframework.beans.factory.annotation.Autowired; +import org.springframework.stereotype.Controller; +import org.springframework.web.bind.annotation.*; + +import java.text.SimpleDateFormat; +import java.util.ArrayList; +import java.util.List; + +/** + * @author wanghao + * @date 2022/7/7 13:31 + */ +@Controller +@RequestMapping("/broad/beforeLibrary") +public class BeforeLibraryController { + + @Autowired + private IBroadDataService service; + + @GetMapping() + public String box() { + return "broad/beforeLibrary"; + } + +} diff --git a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/broad/FinalAssemblyProductionDataController.java b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/broad/FinalAssemblyProductionDataController.java new file mode 100644 index 0000000..d20b6a6 --- /dev/null +++ b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/broad/FinalAssemblyProductionDataController.java @@ -0,0 +1,25 @@ +package com.ruoyi.web.controller.broad; + +import com.ruoyi.system.service.IBroadDataService; +import org.springframework.beans.factory.annotation.Autowired; +import org.springframework.stereotype.Controller; +import org.springframework.web.bind.annotation.GetMapping; +import org.springframework.web.bind.annotation.RequestMapping; + +/** + * @author wanghao + * @date 2022/7/7 13:31 + */ +@Controller +@RequestMapping("/broad/finalAssemblyProductionData") +public class FinalAssemblyProductionDataController { + + @Autowired + private IBroadDataService service; + + @GetMapping() + public String box() { + return "broad/finalAssemblyProductionData"; + } + +} diff --git a/ruoyi-admin/src/main/resources/static/css/board/beforeLibrary.css b/ruoyi-admin/src/main/resources/static/css/board/beforeLibrary.css new file mode 100644 index 0000000..f628300 --- /dev/null +++ b/ruoyi-admin/src/main/resources/static/css/board/beforeLibrary.css @@ -0,0 +1,52 @@ +body { + height: auto; + width: auto; + background: url(../../img/board/beforeLibrary/backgroundImg.jpg) no-repeat center fixed; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: 100% 100%; + color: rgba(255, 255, 255, .95); + font: normal 100% Arial, sans-serif; +} + +.orderDetails { + position: absolute; + width: 30.2%; + height: 20%; + top: 15%; + left: 3.4%; +} + +.orderQuantityFulfillmentRateOfTheDay { + position: absolute; + width: 30%; + height: 20%; + top: 15%; + left: 35%; +} + +.FinishedGoodsWarehousingStatisticsByHour{ + position: absolute; + width: 93%; + height: 21.5%; + top: 44%; + left: 3.3%; +} + +.PropertyInsuranceOneDayOrderInfo { + position: absolute; + width: 61.8%; + height: 21%; + top: 74%; + left: 3.4%; +} + +.distributionOfBadTypesInProductionLineByDay{ + position: absolute; + width: 30%; + height: 20%; + top: 74%; + left: 66.6%; + +} \ No newline at end of file diff --git a/ruoyi-admin/src/main/resources/static/css/board/finalAssemblyProductionData.css b/ruoyi-admin/src/main/resources/static/css/board/finalAssemblyProductionData.css new file mode 100644 index 0000000..3bdc01c --- /dev/null +++ b/ruoyi-admin/src/main/resources/static/css/board/finalAssemblyProductionData.css @@ -0,0 +1,11 @@ +body { + height: auto; + width: auto; + background: url(../../img/board/finalAssemblyProductionData/backgroundImg.jpg) no-repeat center fixed; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: 100% 100%; + color: rgba(255, 255, 255, .95); + font: normal 100% Arial, sans-serif; +} \ No newline at end of file diff --git a/ruoyi-admin/src/main/resources/static/img/board/beforeLibrary/backgroundImg.jpg b/ruoyi-admin/src/main/resources/static/img/board/beforeLibrary/backgroundImg.jpg new file mode 100644 index 0000000..294c073 Binary files /dev/null and b/ruoyi-admin/src/main/resources/static/img/board/beforeLibrary/backgroundImg.jpg differ diff --git a/ruoyi-admin/src/main/resources/static/img/board/finalAssemblyProductionData/backgroundImg.jpg b/ruoyi-admin/src/main/resources/static/img/board/finalAssemblyProductionData/backgroundImg.jpg new file mode 100644 index 0000000..d949d8e Binary files /dev/null and b/ruoyi-admin/src/main/resources/static/img/board/finalAssemblyProductionData/backgroundImg.jpg differ diff --git a/ruoyi-admin/src/main/resources/static/js/board/beforeLibrary.js b/ruoyi-admin/src/main/resources/static/js/board/beforeLibrary.js new file mode 100644 index 0000000..2ac7107 --- /dev/null +++ b/ruoyi-admin/src/main/resources/static/js/board/beforeLibrary.js @@ -0,0 +1,37 @@ +$(() => { + // 公共请求地址 + let url = '/broad/box' + + // 表格头 + const planWorkOrderColumns = [ + "编号", "计划数量", "完成数量", "差异值", "时间", + ] + + // 订单详情 + const orderDetailsTable = new AutoScrollTable(document.getElementById("orderDetails"), planWorkOrderColumns, {width: ['30%', null, null, null, '17%']}) + + // 产线当日订单信息 + const PropertyInsuranceOneDayOrderInfoTable = new AutoScrollTable(document.getElementById("PropertyInsuranceOneDayOrderInfo"), planWorkOrderColumns, {width: ['30%', null, null, null, '17%']}) + + // 当日订单数量达成率 + horizontalRoundedBarChartWithBackground(null, document.getElementById("orderQuantityFulfillmentRateOfTheDay")); + + // 成品入库统计 + barChartAndLineChart(null, document.getElementById("FinishedGoodsWarehousingStatisticsByHour")); + + // 产线不良类型分布 + pieChart(null, document.getElementById("distributionOfBadTypesInProductionLineByDay")); + + //订单详情轮询 + autoUpdate(url+"/getProductPlanInfo ", INTERVAL, data => { + orderDetailsTable.loadData(data.map(value => [value.plan_code, value.plan_number, value.actual_number, value.plan_number-value.actual_number, value.day]), Object.keys(planWorkOrderColumns)) + }) + + //产线当日订单信息轮询 + autoUpdate(url+"/getProductPlanInfo ", INTERVAL, data => { + PropertyInsuranceOneDayOrderInfoTable.loadData(data.map(value => [value.plan_code, value.plan_number, value.actual_number, value.plan_number-value.actual_number, value.day]), Object.keys(planWorkOrderColumns)) + }) + +}) + + diff --git a/ruoyi-admin/src/main/resources/static/js/board/finalAssemblyProductionData.js b/ruoyi-admin/src/main/resources/static/js/board/finalAssemblyProductionData.js new file mode 100644 index 0000000..e69de29 diff --git a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js new file mode 100644 index 0000000..efd5643 --- /dev/null +++ b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js @@ -0,0 +1,5618 @@ +const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100 + +// 随机数 +const random = (val = 1) => { + return Math.ceil(Math.random() * val) +} + +// 水平圆角带背景柱状图 +const horizontalRoundedBarChartWithBackground = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = { + yName: ["设备001", "设备001", "设备001", "设备001", "设备001"], + xData: [53, 24, 66, 23, 54], + xDataName: "达成率", + } + } + let backGround = [] + data.xData.forEach(() => { + backGround.push(100) + }) + let option = { + grid: { + left: "0%", + right: "5%", + bottom: "0%", + top: "0%", + containLabel: true, + }, + tooltip: { + trigger: "axis", + axisPointer: { + type: "none", + }, + formatter: function (params) { + return ( + params[0].name + + "
" + + "" + + params[0].seriesName + + " : " + params[0].value + '%' + ); + }, + }, + dataZoom: [], + xAxis: { + show: false, + type: "value", + }, + yAxis: [ + { + type: "category", + inverse: true, + axisLabel: { + show: true, + textStyle: { + color: "#fff", + fontSize: 0.75 * vw + }, + }, + splitLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLine: { + show: false, + }, + data: data.yName, + } + ], + series: [ + { + name: data.xDataName, + type: "bar", + zlevel: 1, + itemStyle: { + normal: { + barBorderRadius: 30, + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { + offset: 0, + color: "rgb(57,89,255,1)", + }, + { + offset: 1, + color: "rgb(46,200,207,1)", + }, + ]), + }, + }, + barWidth: vw, + data: data.xData, + }, + { + name: "背景", + type: "bar", + barWidth: vw, + barGap: "-100%", + data: backGround, + itemStyle: { + normal: { + color: "rgba(24,31,68,1)", + barBorderRadius: 30, + }, + }, + }, + ], + }; + if (data.xData?.length >= 3) { + option.dataZoom.push({ + show: true, + type: 'slider', + yAxisIndex: 0, + width: 0.75 * vw, + start: 0, + end: 1 / (data.xData.length / 4) * 100, + textStyle: { + fontSize: 0, + color: 'rgba(0,0,0,0)' + } + }) + } + charts.setOption(option); + $(window).resize(charts.resize); +} + +// 柱状+折线图 +const barChartAndLineChart = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = { + xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"], + yDataOne: [200, 382, 102, 267, 186, 315, 316], + yDataOneName: "成品数量", + yDataTwo: [382, 102, 186, 200, 102, 186, 315], + yDataTwoName: "成品数量", + } + } + let option = { + tooltip: {}, + grid: { + top: "15%", + left: "1%", + right: "1%", + bottom: "8%", + containLabel: true, + }, + legend: { + show: false, + itemGap: 50, + data: ["注册总量", "最新注册量"], + textStyle: { + color: "#f9f9f9", + borderColor: "#fff", + }, + }, + dataZoom: [], + xAxis: [ + { + type: "category", + boundaryGap: true, + axisLine: { + show: true, + lineStyle: { + color: '#fff', + opacity: 0.3, + }, + }, + axisLabel: { + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#d1e6eb", + margin: 15, + fontSize: 0.75 * vw + }, + }, + axisTick: { + show: false, + }, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#777777', + opacity: 0.3, + }, + }, + data: data.xName, + }, + ], + yAxis: [ + { + type: "value", + min: 0, + // max: 140, + splitNumber: 7, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#777777', + opacity: 0.3, + }, + }, + axisLine: { + show: true, + lineStyle: { + color: '#fff', + opacity: 0.3, + }, + }, + axisLabel: { + margin: 20, + textStyle: { + color: "#d1e6eb", + fontSize: 0.75 * vw + }, + }, + axisTick: { + show: false, + }, + }, + ], + series: [ + { + name: data.yDataOneName, + type: "line", + // smooth: true, //是否平滑曲线显示 + // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆 + showAllSymbol: true, + symbol: "emptyCircle", + symbolSize: 6, + lineStyle: { + normal: { + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { + offset: 0, + color: "#8fb9d7", + }, + { + offset: 1, + color: "#0F59E6", + }, + ]), + }, + borderColor: "#f0f", + }, + label: { + show: true, + position: "top", + textStyle: { + color: "#fff", + fontSize: 0.75 * vw + }, + }, + itemStyle: { + normal: { + color: "#A5DBF3", + }, + }, + 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(12,120,249,0.4)", + }, + { + offset: 1, + color: "rgba(0,0,0, 0)", + }, + ], + false + ), + shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色 + shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 + }, + }, + data: data.yDataOne, + }, + { + name: data.yDataTwoName, + type: "bar", + barWidth: vw, + label: { + show: false, + position: "top", + textStyle: { + color: "#fff", + }, + }, + itemStyle: { + normal: { + barBorderRadius: 5, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: "#0CAFF6", + }, + { + offset: 1, + color: "#0F59E6", + }, + ]), + }, + }, + data: data.yDataTwo, + }, + ], + }; + + charts.setOption(option); + $(window).resize(charts.resize); +} + +// 饼图 +const pieChart = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = [ + { + value: 285, + name: "类型1", + }, + { + value: 410, + name: "类型2", + }, + { + value: 274, + name: "类型3", + }, + { + value: 235, + name: "类型4", + }, + ] + } + let option = { + tooltip: { + trigger: "item", + formatter: "{b} : {c} ({d}%)", + }, + + series: [ + { + name: "访问来源", + type: "pie", + radius: "90%", + center: ["50%", "50%"], + color: ["rgb(131,249,103)", "#FBFE27", "#FE5050", "#1DB7E5"], //'#FBFE27','rgb(11,228,96)','#FE5050' + data: data.sort(function (a, b) { + return a.value - b.value; + }), + roseType: "radius", + label: { + normal: { + formatter: ["{c|{c}次}", "{b|{b}}"].join("\n"), + rich: { + c: { + color: "rgb(241,246,104)", + fontSize: 0.75 * vw, + lineHeight: 5, + }, + b: { + color: "rgb(98,137,169)", + fontSize: 0.75 * vw, + height: 1.5*vw, + }, + }, + }, + }, + emphasis:{ + label:{ + fontSize:0.75 * vw + } + }, + labelLine: { + normal: { + lineStyle: { + color: "rgb(98,137,169)", + }, + smooth: true, + length: 5, + length2: 10, + }, + }, + }, + ], + }; + + charts.setOption(option); + $(window).resize(charts.resize); +} +// 水平圆角柱状图 +const horizontalBarChart = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = { + xData: [60, 132, 89, 134, 60], + yData: ["制氢站1", "制氢站2", "制氢站3", "制氢站4", "制氢站5"], + } + } + let colorArray = [ + { + top: "#ffa800", //黄 + bottom: "#ffa800", + }, + { + top: "#1ace4a", //绿 + bottom: "#1ace4a", + }, + { + top: "#4bf3ff", //蓝 + bottom: "#4bf3ff", + }, + { + top: "#4f9aff", //深蓝 + bottom: "#4f9aff", + }, + { + top: "#b250ff", //粉 + bottom: "#b250ff", + }, + ]; + let option = { + tooltip: { + show: true, + formatter: "{b}:{c}", + }, + grid: { + left: "5%", + top: "2%", + right: "1%", + bottom: "8%", + containLabel: true, + }, + dataZoom: [], + xAxis: { + interval: 0, + type: "value", + show: false, + position: "top", + axisTick: { + show: false, + }, + axisLine: { + show: false, + lineStyle: { + color: "#fff", + }, + }, + splitLine: { + show: false, + }, + }, + yAxis: [ + { + interval: 0, + type: "category", + axisTick: { + show: false, + alignWithLabel: false, + length: 5, + }, + splitLine: { + //网格线 + show: false, + }, + inverse: "true", //排序 + axisLine: { + show: false, + lineStyle: { + color: "#fff", + }, + }, + data: data.yData, + }, + ], + series: [ + { + name: "能耗值", + type: "bar", + label: { + normal: { + show: true, + position: "right", + formatter: "{c}", + textStyle: { + color: "white", //color of value + }, + }, + }, + itemStyle: { + normal: { + show: true, + color: function (params) { + let num = colorArray.length; + return { + type: "linear", + colorStops: [ + { + offset: 0, + color: colorArray[params.dataIndex % num].top, + }, + { + offset: 1, + color: colorArray[params.dataIndex % num].top, + }, + { + offset: 0, + color: colorArray[params.dataIndex % num].top, + }, + { + offset: 1, + color: colorArray[params.dataIndex % num].top, + }, + { + offset: 0, + color: colorArray[params.dataIndex % num].top, + }, + { + offset: 1, + color: colorArray[params.dataIndex % num].top, + }, + { + offset: 0, + color: colorArray[params.dataIndex % num].top, + }, + { + offset: 1, + color: colorArray[params.dataIndex % num].top, + }, + { + offset: 0, + color: colorArray[params.dataIndex % num].top, + }, + { + offset: 1, + color: colorArray[params.dataIndex % num].top, + }, + { + offset: 0, + color: colorArray[params.dataIndex % num].top, + }, + { + offset: 1, + color: colorArray[params.dataIndex % num].top, + }, + ], + //globalCoord: false + }; + }, + barBorderRadius: 70, + borderWidth: 0, + borderColor: "#333", + }, + }, + barGap: "0%", + barCategoryGap: "50%", + data: data.xData, + }, + ], + }; + if (data.yData?.length >= 3) { + option.dataZoom.push({ + show: true, + type: 'slider', + yAxisIndex: 0, + width: 12, + start: 0, + end: 1 / (data.yData.length / 4) * 100, + textStyle: { + fontSize: 0, + } + }) + } + charts.setOption(option); + $(window).resize(charts.resize); +} + +// 水平直角柱状图 +const horizontalBasisBarChart = function (data, id) { + let charts = echarts.init(id); + + if (!data) { + data = { + xData: [60, 132, 89, 134, 60], + yData: ["设备1", "设备2", "设备3", "设备4", "设备5"], + } + } + let colorArray = [ + { + top: "#ffa800", //黄 + bottom: "rgba(11,42,84,0.6)", + }, + { + top: "#1ace4a", //绿 + bottom: "rgba(11,42,84, 0.6)", + }, + { + top: "#4bf3ff", //蓝 + bottom: "rgba(11,42,84,0.6)", + }, + { + top: "#4f9aff", //深蓝 + bottom: "rgba(11,42,84,0.6)", + }, + { + top: "#b250ff", //粉 + bottom: "rgba(11,42,84,0.6)", + }, + ]; + let option = { + tooltip: { + show: true, + formatter: "{b}:{c}", + }, + grid: { + left: "5%", + top: "2%", + right: "3%", + bottom: "8%", + containLabel: true, + }, + dataZoom: [], + xAxis: { + type: "value", + show: true, + position: "bottom", + axisLabel: { + show: true, + color: '#fff' + }, + axisLine: { + show: true, + lineStyle: { + opacity: '.8' + }, + }, + splitLine: { + lineStyle: { + type: 'dashed', + color: "#fff", + opacity: '0.4' + }, + show: true, + }, + }, + yAxis: [ + { + axisLabel: { + show: true, + color: '#fff' + }, + type: "category", + axisTick: { + show: false, + alignWithLabel: false, + length: 5, + }, + splitLine: { + //网格线 + show: true, + lineStyle: { + type: 'dashed', + color: "#fff", + opacity: '0.4' + }, + }, + inverse: "true", //排序 + axisLine: { + show: true, + lineStyle: { + // opacity: '.8' + }, + }, + data: data.yData, + }, + ], + series: [ + { + name: "能耗值", + type: "bar", + label: { + normal: { + show: true, + position: "right", + formatter: "{c}", + textStyle: { + color: "white", //color of value + }, + }, + }, + itemStyle: { + normal: { + show: true, + color: function (params) { + let num = colorArray.length; + return { + type: "linear", + colorStops: [ + { + offset: 0, + color: colorArray[params.dataIndex % num].top, + }, + { + offset: 1, + color: colorArray[params.dataIndex % num].top, + }, + { + offset: 0, + color: colorArray[params.dataIndex % num].top, + }, + { + offset: 1, + color: colorArray[params.dataIndex % num].top, + }, + { + offset: 0, + color: colorArray[params.dataIndex % num].top, + }, + { + offset: 1, + color: colorArray[params.dataIndex % num].top, + }, + { + offset: 0, + color: colorArray[params.dataIndex % num].top, + }, + { + offset: 1, + color: colorArray[params.dataIndex % num].top, + }, + { + offset: 0, + color: colorArray[params.dataIndex % num].top, + }, + { + offset: 1, + color: colorArray[params.dataIndex % num].top, + }, + { + offset: 0, + color: colorArray[params.dataIndex % num].top, + }, + { + offset: 1, + color: colorArray[params.dataIndex % num].top, + }, + ], + //globalCoord: false + }; + }, + // barBorderRadius: 70, + borderWidth: 0, + borderColor: "#333", + }, + }, + barGap: "0%", + barCategoryGap: "50%", + data: data.xData, + }, + ], + }; + if (data.xData?.length >= 3) { + option.dataZoom.push({ + show: true, + type: 'slider', + yAxisIndex: 0, + width: 12, + start: 0, + end: 1 / (data.xData.length / 3) * 100, + textStyle: { + fontSize: 0, + } + }) + } + charts.setOption(option); + $(window).resize(charts.resize); +} + +const horizontalBarChartTwo = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = { + xData: [239, 181, 154, 144, 135], + yDataName: [ + "设备1", + "设备2", + "设备3", + "设备4", + "设备5", + ] + } + } + let dataMax = []; //背景按最大值 + for (let i = 0; i < data.xData.length; i++) { + dataMax.push(Math.max.apply(null, data.xData)); + } + let option = { + backgroundColor: "rgba(0,0,0,0)", + grid: { + left: "2%", + right: "2%", + bottom: "2%", + top: "2%", + containLabel: true, + }, + tooltip: { + trigger: "axis", + axisPointer: { + type: "none", + }, + formatter: function (params) { + return params[0].name + " : " + params[0].value; + }, + }, + xAxis: { + show: false, + type: "value", + }, + yAxis: [ + { + type: "category", + inverse: true, + axisLabel: { + show: true, + textStyle: { + color: "#fff", + }, + }, + splitLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLine: { + show: false, + }, + data: data.yDataName, + }, + { + type: "category", + inverse: true, + axisTick: "none", + axisLine: "none", + show: true, + axisLabel: { + textStyle: { + color: "#ffffff", + fontSize: "12", + }, + }, + data: data.xData, + }, + ], + series: [ + { + name: "值", + type: "bar", + zlevel: 1, + itemStyle: { + normal: { + barBorderRadius: 30, + color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { + offset: 0, + color: "rgb(57,89,255,1)", + }, + { + offset: 1, + color: "rgb(46,200,207,1)", + }, + ]), + }, + }, + barWidth: vw, + data: data.xData, + }, + { + name: "背景", + type: "bar", + barWidth: vw, + barGap: "-100%", + data: dataMax, + itemStyle: { + normal: { + color: "rgba(24,31,68,1)", + barBorderRadius: 30, + }, + }, + }, + ], + }; + charts.setOption(option); + $(window).resize(charts.resize); +} +const horizontalBarChartThree = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = { + xData: [60, 70, 80, 90, 60, 70, 80] + } + } + let option = { + grid: { + left: "15%", + right: "10%", + bottom: "2%", + top: "2%", + }, + xAxis: {}, + yAxis: { + data: ["设备1", "设备2", "设备3", "设备4", "设备5"], + axisLabel: { + margin: 30, + } + }, + series: [ + { + name: "", + type: "pictorialBar", + symbolSize: [0.5 * vw, vw], + symbolOffset: [5, 0], + symbolPosition: "end", + z: 12, + label: { + normal: { + show: true, + position: "right", + formatter: "{c}%", + }, + }, + data: data.xData, + }, + { + name: "", + type: "pictorialBar", + symbolSize: [0.5 * vw, vw], + symbolOffset: [0, 0], + z: 12, + data: data.xData, + }, + { + type: "bar", + itemStyle: { + normal: { + opacity: 3.7, + }, + }, + barWidth: vw, + data: data.xData, + markLine: { + silent: true, + symbol: "none", + label: { + position: "middle", + formatter: "{b}", + }, + data: [ + { + name: "目标值", + yAxis: 70, + lineStyle: { + color: "#ffc832", + }, + label: { + position: "end", + formatter: "{b}\n {c}%", + }, + }, + ], + }, + }, + { + type: "effectScatter", + silent: true, + tooltip: { + show: false, + }, + zlevel: 3, + symbolSize: 10, + showEffectOn: "render", + rippleEffect: { + brushType: "stroke", + color: "#3cefff", + scale: 5, + }, + itemStyle: { + color: "#3cefff", + }, + hoverAnimation: true, + data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + }, + ], + }; + + charts.setOption(option); + $(window).resize(charts.resize); +} +// 格子水平柱状图 +const gridHorizontalBasisBarChart = function (data, id) { + let charts = echarts.init(id); + + let category = [ + { + name: "1", + value: 300, + color: '#65F210' + }, + { + name: "2", + value: 770, + color: '#EFFC21' + }, + { + name: "3", + value: 810, + color: '#23A6FC' + }, + { + name: "4", + value: 480, + color: '#F3550E' + }, + ]; // 类别 + if (!data) { + data = []; + category.forEach((value) => { + data.push(value.value); + }); + } + let option = { + backgroundColor: "rgba(0,0,0,0)", + xAxis: { + splitLine: { + show: false, + }, + axisLine: { + show: false, + }, + axisLabel: { + show: false, + }, + axisTick: { + show: false, + }, + }, + grid: { + left: '20%', + top: '0%', // 设置条形图的边距 + right: '15%', + bottom: '1%', + }, + yAxis: [ + { + type: "category", + inverse: false, + data: ["设备4#", "设备3#", "设备2#", '设备1#'], + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLabel: { + verticalAlign: "bottom", + align: "left", + padding: [0, 0, 0, -60], + textStyle: { + fontSize: 14, + color: "white", + }, + formatter(value, index) { + return value; + }, + }, + }, + ], + series: [ + { + // 30 count bar + type: "pictorialBar", + itemStyle: { + normal: { + color: "#07314a", + }, + }, + symbolRepeat: "fixed", + symbolMargin: 2, + symbol: "roundRect", + symbolClip: true, + symbolSize: [5, 18], + symbolPosition: "start", + symbolOffset: [3, -4], + symbolBoundingData: 1000, + data: [1000, 1000, 1000, 1000], + z: 2, + animationEasing: "elasticOut", + }, + + { + // current count bar + type: "pictorialBar", + itemStyle: { + normal: { + color: function (val) { + return category[val.dataIndex].color + }, + }, + }, + symbolRepeat: "fixed", + symbolMargin: 2, + symbol: "roundRect", + symbolClip: true, + symbolSize: [5, 18], + symbolPosition: "start", + symbolOffset: [3, -4], + symbolBoundingData: 1000, + data: data, + z: 2, + animationEasing: "elasticOut", + }, + + { + // label + type: "pictorialBar", + symbolBoundingData: 1000, + itemStyle: { + normal: { + color: "none", + }, + }, + label: { + normal: { + formatter: (params) => { + var text; + text = "{f| " + params.data + "kg}"; + return text; + }, + rich: { + f: { + color: "#ffffff", + }, + }, + position: "right", + distance: 10, // 向右偏移位置 + show: true, + }, + }, + data: data, + z: 0, + }, + + { + name: "外框", + type: "bar", + barGap: "-130%", // 设置外框粗细 + data: [1000, 1000, 1000, 1000], + barWidth: 45, + itemStyle: { + normal: { + barBorderRadius: [5, 5, 5], + color: "transparent", // 填充色 + barBorderColor: "#1588D1", // 边框色 + barBorderWidth: 0, // 边框宽度 + }, + }, + z: 0, + }, + ], + }; + charts.setOption(option); + $(window).resize(charts.resize); + +} + +// 垂直柱状图 +const verticalBarDiagram = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = { + xData: ["01-01", "01-02", "01-03", "01-04", "01-05", "01-06", "01-07"], + yDataOne: [320, 435, 490, 340, 320, 270, 360], + yDataTwo: [490, 490, 490, 490, 490, 490, 490], + yDataName: '故障率', + } + } + + let option = { + backgroundColor: "rgba(0, 0, 0, 0)", + tooltip: {}, + grid: {top: "20%", left: "10%", right: "3%", bottom: "20%"}, + // xAxis + xAxis: { + axisTick: {show: true}, + axisLine: {lineStyle: {color: "rgba(255,255,255, .2)"}}, + axisLabel: { + textStyle: {fontSize: 12, color: "#fff"}, + margin: 14, + }, + data: data.xData, + }, + + // yAxis + yAxis: [ + { + splitLine: {lineStyle: {color: "rgba(255,255,255, .05)"}}, + axisLine: {show: false}, + axisLabel: {textStyle: {fontSize: 16, color: "#fff"}}, + }, + ], + + // series + series: [ + { + z: 3, + name: "", + type: "pictorialBar", + symbolPosition: "end", + data: data.yDataTwo, + symbol: "diamond", + symbolOffset: [0, "-50%"], + symbolSize: [1.5 * vw, vw], + itemStyle: { + borderColor: "#083181", + borderWidth: 2, + color: "#083181", + }, + }, + { + z: 1, + type: "bar", + name: "", + barGap: "-100%", + barWidth: 1.5 * vw, + data: data.yDataTwo, + itemStyle: { + borderColor: "#083181", + borderWidth: 1, + color: '#083181', + }, + }, + { + z: 2, + name: "", + type: "pictorialBar", + data: [1, 1, 1, 1, 1, 1, 1, 1], + symbol: "diamond", + symbolOffset: [0, "50%"], + symbolSize: [1.5 * vw, vw], + itemStyle: { + color: '#FC9402', + }, + }, + { + z: 3, + name: "", + type: "pictorialBar", + symbolPosition: "end", + data: data.yDataOne, + symbol: "diamond", + symbolOffset: [0, "-50%"], + symbolSize: [1.5 * vw, vw], + itemStyle: { + borderColor: "#FE8F09", + borderWidth: 2, + color: "#FE8F09", + }, + }, + { + z: 1, + stack: "总量", + type: "bar", + name: data.yDataName, + barWidth: 1.5 * vw, + // barGap: '-100%', + data: data.yDataOne, + itemStyle: { + color: { + type: "linear", + x: 0, + x2: 0, + y: 0, + y2: 1, + colorStops: [ + {offset: 0, color: "#FC2B10"}, + {offset: 1, color: "#FD9603"}, + ], + }, + }, + }, + ], + }; + + charts.setOption(option); + $(window).resize(charts.resize); + +} + +// 堆叠柱状图 +const stackBarDiagram = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = { + xData: ["01-01", "01-02", "01-03", "01-04", "01-05", "01-06", "01-07"], + yDataOne: [150, 320, 300, 210, 240, 180, 288], + yDataTwo: [320, 435, 490, 340, 320, 270, 360], + } + } + + let option = { + backgroundColor: "rgba(0, 0, 0, 0)", + legend: { + data: ["峰值发电速度", "平均发电速度", "完成率"], + textStyle: {fontSize: 0.75 * vw, color: "#fff"}, + top: "0", + itemWidth: 1.25 * vw, + itemHeight: vw, + itemGap: 15, + bottom: "5%", + selectedMode: false, + }, + tooltip: {}, + grid: {top: "15%", left: "15%", right: "3%", bottom: "15%"}, + + xAxis: { + axisTick: {show: true}, + axisLine: {lineStyle: {color: "rgba(255,255,255, .2)"}}, + axisLabel: {textStyle: {fontSize: 12, color: "#fff"}}, + data: data.xData, + }, + + // yAxis + yAxis: [ + { + splitLine: {lineStyle: {color: "rgba(255,255,255, .05)"}}, + axisLine: {show: false}, + axisLabel: {textStyle: {fontSize: 16, color: "#fff"}}, + }, + ], + + // series + series: [ + { + z: 3, + name: "", + type: "pictorialBar", + symbolPosition: "end", + data: data.yDataTwo, + symbol: "diamond", + symbolOffset: [0, "-50%"], + symbolSize: [1.5 * vw, vw], + itemStyle: { + borderColor: "#EB7B5C", + borderWidth: 2, + color: "#EB7B5C", + }, + }, + { + z: 1, + type: "bar", + name: "峰值发电速度", + barGap: "-100%", + barWidth: 1.5 * vw, + data: data.yDataTwo, + itemStyle: { + borderColor: "#FA340C", + borderWidth: 1, + color: { + type: "linear", + x: 0, + x2: 0, + y: 0, + y2: 1, + colorStops: [ + {offset: 0, color: "#FA340C"}, + {offset: 1, color: "#FE8F05"}, + ], + }, + }, + }, + { + z: 2, + name: "", + type: "pictorialBar", + data: [1, 1, 1, 1, 1, 1, 1, 1], + symbol: "diamond", + symbolOffset: [0, "50%"], + symbolSize: [1.5 * vw, vw], + itemStyle: { + color: { + type: "linear", + x: 0, + x2: 0, + y: 0, + y2: 1, + colorStops: [ + {offset: 0, color: "#65E683"}, + {offset: 1, color: "#65E683"}, + ], + }, + }, + }, + { + z: 3, + name: "", + type: "pictorialBar", + symbolPosition: "end", + data: data.yDataOne, + symbol: "diamond", + symbolOffset: [0, "-50%"], + symbolSize: [1.5 * vw, vw], + itemStyle: { + borderColor: "#FE8F09", + borderWidth: 2, + color: "#FE8F09", + }, + }, + { + z: 1, + stack: "总量", + type: "bar", + name: "平均发电速度", + barWidth: 1.5 * vw, + // barGap: '-100%', + data: data.yDataOne, + itemStyle: { + color: { + type: "linear", + x: 0, + x2: 0, + y: 0, + y2: 1, + colorStops: [ + {offset: 0, color: "#4FD576"}, + {offset: 1, color: "#4FD576"}, + ], + }, + }, + }, + ], + }; + + charts.setOption(option); + $(window).resize(charts.resize); + +} + +// 双向横向柱状图 +const bidirectionalTransverseBarChart = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = { + yName: ["充装站1", "充装站2", "充装站3", "充装站4"], + xDataOne: [-65, -75, -55, -70], + xDataOneName: "平均充装速度", + xDataTwo: [25, 65, 80, 50], + xDataTwoName: "峰值充装速度", + } + } + let option = { + backgroundColor: "rgba(0,0,0,0)", + + legend: { + type: "scroll", + // orient: "vartical", + // x: "right", + top: "0", + // right: "center", + // bottom: "0%", + itemWidth: 0.75 * vw, + itemHeight: 0.5 * vw, + itemGap: 0.75 * vw, + textStyle: { + color: "#A3E2F4", + fontWeight: 200, + }, + data: ["平均充装速度", "峰值充装速度"], + }, + grid: { + left: "5%", + top: "15%", + right: "3%", + bottom: "8%", + containLabel: true, + }, + tooltip: {}, + xAxis: [ + { + type: "value", + splitNumber: 9, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + splitLine: { + show: false, + }, + axisLabel: { + color: "#96F5F6", + fontSize: 8, + // 将X轴上的负数取绝对值变正数 + formatter(value) { + return Math.abs(value); + }, + }, + }, + ], + yAxis: [ + { + type: "category", + data: data.yName, + axisTick: { + show: false, + }, + axisLine: { + show: false, + }, + axisLabel: { + color: "#96F5F6", + fontSize: 8, + }, + }, + ], + series: [ + { + name: data.xDataOneName, + type: "bar", + data: data.xDataOne, + stack: "总量", + barWidth: vw, + label: { + show: true, + position: "left", + textStyle: { + color: "#fff", + }, + formatter(value) { + return 0 - value.data + }, + }, + itemStyle: { + + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 1, + 0, + [ + { + offset: 0, + color: "#1F62F6", + }, + { + offset: 0.8, + color: "#01B9F3", + }, + ], + false + ), + }, + }, + }, + { + name: data.xDataTwoName, + type: "bar", + barWidth: 2 * vw, + data: data.xDataTwo, + stack: "总量", + label: { + show: true, + position: "right", + textStyle: { + color: "#fff", + }, + }, + itemStyle: { + + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 1, + 0, + [ + { + offset: 0, + color: "#FF9300", + }, + { + offset: 0.8, + color: "#F84519", + }, + ], + false + ), + }, + }, + }, + ], + }; + charts.setOption(option); + $(window).resize(charts.resize); + +} + +// 多个垂直柱状图 +const multipleVerticalBarChart = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = { + xName: [ + "7:00", + "8:00", + "9:00", + "10:00", + "11:00", + "12:00", + ], + yDataOne: [4.9, 7.3, 9.2, 5.6, 7.7, 5.6], + yDataOneName: "制氢", + yDataTwo: [2.9, 5, 4.4, 2.7, 5.7, 4.6], + yDataTwoName: "发电", + yDataThree: [3.9, 6, 5.4, 3.7, 6.7, 5.6], + yDataThreeName: "充装", + } + } + let option = { + tooltip: { + //提示框组件 + tooltip: { + trigger: "axis", + axisPointer: { + lineStyle: { + color: "#57617B", + }, + }, + }, + // trigger: "axis", + // formatter: `{b}
{a0}: {c0}
{a1}: {c1}`, + // axisPointer: { + // type: "shadow", + // label: { + // backgroundColor: "#6a7985", + // }, + // }, + // textStyle: { + // color: "#fff", + // fontStyle: "normal", + // fontFamily: "微软雅黑", + // fontSize: 12, + // }, + }, + grid: { + left: "1%", + right: "4%", + bottom: "0", + top: 30, + padding: "0 0 10 0", + containLabel: true, + }, + legend: { + //图例组件，颜色和名字 + right: 10, + top: 0, + itemGap: 16, + itemWidth: vw, + itemHeight: 0.6 * vw, + textStyle: { + color: "#a8aab0", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 0.75 * vw, + }, + }, + dataZoom: [], + xAxis: [ + { + type: "category", + boundaryGap: true, //坐标轴两边留白 + data: data.xName, + axisLabel: { + show: true, + color: '#fff' + }, + axisTick: { + //坐标轴刻度相关设置。 + show: false, + }, + axisLine: { + //坐标轴轴线相关设置 + lineStyle: { + color: "#fff", + opacity: 0.2, + }, + }, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#777777', + opacity: 0.3, + }, + }, + }, + ], + yAxis: [ + { + type: "value", + splitNumber: 5, + axisLabel: { + show: true, + color: '#fff' + }, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#777777', + opacity: 0.3, + }, + }, + }, + ], + series: [ + { + name: data.yDataOneName, + type: "bar", + data: data.yDataOne, + barWidth: 0.5 * vw, + barGap: 0, //柱间距离 + label: { + //图形上的文本标签 + normal: { + show: true, + position: "top", + textStyle: { + color: "#a8aab0", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 0.75 * vw, + }, + }, + }, + itemStyle: { + //图形样式 + normal: { + barBorderRadius: [5, 5, 0, 0], + color: "rgba(127, 128, 225, 0.7)" + }, + }, + }, + { + name: data.yDataTwoName, + type: "bar", + data: data.yDataTwo, + barWidth: 0.5 * vw, + barGap: 0.2, //柱间距离 + label: { + //图形上的文本标签 + normal: { + show: true, + position: "top", + textStyle: { + color: "#a8aab0", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 0.75 * vw, + }, + }, + }, + itemStyle: { + //图形样式 + normal: { + barBorderRadius: [5, 5, 0, 0], + color: "rgba(226, 99, 74, 0.7)", + }, + }, + }, + { + name: data.yDataThreeName, + type: "bar", + data: data.yDataThree, + barWidth: 0.5 * vw, + barGap: 0.2, //柱间距离 + label: { + //图形上的文本标签 + normal: { + show: true, + position: "top", + textStyle: { + color: "#a8aab0", + fontStyle: "normal", + fontFamily: "微软雅黑", + fontSize: 0.75 * vw, + }, + }, + }, + itemStyle: { + //图形样式 + normal: { + barBorderRadius: [5, 5, 0, 0], + color: "rgba(26, 99, 74, 0.7)", + }, + }, + }, + ], + }; + + if (data?.length >= 3) { + option.dataZoom.push({ + show: true, + type: 'slider', + xAxisIndex: 0, + width: 12, + start: 0, + end: 1 / (data.length / 3) * 100, + textStyle: { + fontSize: 0, + } + }) + } + charts.setOption(option); + $(window).resize(charts.resize); +} +const multipleVerticalBarChartTwo = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = { + xName: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'], + yDataOne: [22, 52, 55, 12, 35, 44, 66], + yDataOneName: '平均制氢速度', + yDataTwo: [32, 42, 50, 22, 30, 40, 52], + yDataTwoName: "能耗比", + } + } + let option = { + legend: { + data: ['平均制氢速度', '能耗比'], + textStyle: {color: 'white'}, + selectedMode: false, + }, + backgroundColor: 'rgba(0,0,0,0)', + grid: { + top: '20%', + left: '5%', + bottom: '5%', + right: '5%', + containLabel: true, + }, + tooltip: { + trigger: 'item', + }, + animation: false, + xAxis: [ + { + type: 'category', + data: data.xName, + axisTick: { + alignWithLabel: true, + }, + axisLine: { + show: false, + }, + axisLabel: { + textStyle: { + color: '#ddd', + }, + margin: 10, + }, + interval: 1, + }, + ], + yAxis: [ + { + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#727582', + width: 1 + } + }, + show: true, + type: 'value', + }, + { + show: true, + type: "value", + nameTextStyle: { + color: "#ccc", + }, + axisLabel: { + color: "#ccc", + }, + splitLine: { + show: false, + }, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + }, + ], + series: [ + { + name: '上部圆', + type: 'pictorialBar', + silent: true, + symbolSize: [vw, 0.5 * vw], + symbolOffset: [0, -6], + symbolPosition: 'end', + z: 12, + // label: { + // normal: { + // show: true, + // position: 'top', + // padding: [0, 22, 0, 0], + // fontSize: 15, + // fontWeight: 'bold', + // color: '#5BFCF4', + // }, + // }, + color: '#09B18F', + data: data.yDataOne, + }, + { + name: '底部圆', + type: 'pictorialBar', + silent: true, + symbolSize: [vw, 0.5 * vw], + symbolOffset: [0, 7], + z: 12, + color: '#0CB69B', + data: data.yDataOne, + }, + { + name: data.yDataOneName, + type: 'bar', + barWidth: vw, + barGap: '10%', // Make series be overlap + barCateGoryGap: '10%', + itemStyle: { + normal: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [ + { + offset: 0, + color: '#00FD8D', + }, + { + offset: 1, + color: '#0FB79D', + }, + ]), + }, + }, + data: data.yDataOne, + }, + { + name: data.yDataTwoName, + type: "line", + // smooth: true, //是否平滑曲线显示 + // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆 + showAllSymbol: true, + symbol: "emptyCircle", + symbolSize: 6, + yAxisIndex: 1, + zlevel: 2, + lineStyle: { + normal: { + color: "#28ffb3", // 线条颜色 + }, + borderColor: "#f0f", + }, + label: { + show: true, + position: "top", + textStyle: { + color: "#fff", + }, + }, + itemStyle: { + normal: { + color: "#28ffb3", + }, + }, + data: data.yDataTwo, + }, + ], + }; + + if (data?.length >= 3) { + option.dataZoom.push({ + show: true, + type: 'slider', + xAxisIndex: 0, + width: 12, + start: 0, + end: 1 / (data.length / 3) * 100, + textStyle: { + fontSize: 0, + } + }) + } + charts.setOption(option); + $(window).resize(charts.resize); +} + +// 多个温度计柱状图 +const multipleThermometerBars = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = { + xName: ['01日', '02日', '03日', '04日', '05日', '06日', '07日'], + yData: [52, 60, 22, 33, 44, 78, 59], + } + } + let minArr = [] + let maxArr = [] + data.yData.forEach(val => { + minArr.push(0) + maxArr.push(Math.max.apply(null, data.yData)) + }) + let option = { + backgroundColor: 'rgba(0,0,0,0)', + tooltip: { + trigger: 'axis', + formatter: '{b0}: {c0}kw·h', + }, + grid: { + top: '15%', + left: '5%', + right: '5%', + bottom: '10%', + containLabel: true, + }, + yAxis: { + axisLine: { + show: false, + color: '#ffffff', + }, + axisLabel: { + textStyle: { + color: '#fff', + fontSize: '14', + }, + }, + axisTick: { + show: true, + lineStyle: { + color: '#285abc', + }, + }, + splitLine: { + show: false, + }, + }, + xAxis: [ + { + axisTick: 'none', + axisLine: { + show: false, + }, + data: data.xName, + axisLabel: { + margin: 20, + show: true, + textStyle: { + color: '#fff', + fontSize: '14', + }, + lineHeight: 16, + }, + }, + { + axisTick: { + show: false, + }, + axisLine: { + show: false, + }, + axisLabel: { + show: false, + textStyle: { + color: '#fff', + fontSize: '14', + }, + lineHeight: 16, + }, + data: [0, 0, 0, 0, 0, 0, 0], + }, + { + axisTick: { + show: false, + }, + axisLine: { + show: false, + }, + axisLabel: { + show: false, + textStyle: { + color: '#fff', + fontSize: '14', + }, + lineHeight: 16, + }, + nameGap: '50', + data: [], + }, + ], + series: [ + { + name: '℃', + type: 'bar', + xAxisIndex: 0, + data: data.yData, + barWidth: 12, + itemStyle: { + normal: { + color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ + { + offset: 0, + color: '#02F9FE', + }, + { + offset: 1, + color: '#ECF214', + }, + ]), + }, + }, + z: 2, + }, + { + name: '温度背景框', + type: 'bar', + xAxisIndex: 1, + barGap: '-100%', + data: maxArr, + barWidth: 15, + itemStyle: { + normal: { + color: '#0e2147', + barBorderRadius: 5, + }, + }, + z: 1, + }, + { + name: '外框', + type: 'bar', + xAxisIndex: 2, + barGap: '-100%', + data: maxArr, + barWidth: 17, + itemStyle: { + normal: { + color: '#4577BA', + barBorderRadius: 50, + }, + }, + z: 0, + }, + { + name: '外圆', + type: 'scatter', + hoverAnimation: false, + data: minArr, + xAxisIndex: 2, + symbolSize: 15, + itemStyle: { + normal: { + color: '#93FE94', + opacity: 1, + }, + }, + z: 2, + }, + { + name: '白圆', + type: 'scatter', + hoverAnimation: false, + data: minArr, + xAxisIndex: 1, + symbolSize: 20, + itemStyle: { + normal: { + color: '#02F9FE', + opacity: 1, + }, + }, + z: 4, + }, + { + name: '外圆', + type: 'scatter', + hoverAnimation: false, + data: [0, 0, 0, 0, 0, 0, 0], + xAxisIndex: 2, + symbolSize: 23, + itemStyle: { + normal: { + color: '#4577BA', + opacity: 1, + }, + }, + z: 0, + }, + ], + }; + charts.setOption(option); + $(window).resize(charts.resize); + +} + +// 单个渐变折线图(百分比) +const singleGradientLineChart = function (data, id, param = {smooth: false, label: true}) { + let charts = echarts.init(id); + if (!data) { + data = { + xName: ["0", "4", "8", "12", "16", "20"], + yData: ["40", "60", "22", "85", "50", "40"], + } + } + + let left = () => { + if (vw < 10) return '20%' + return '14%' + } + let option = { + tooltip: { + trigger: "axis", + axisPointer: { + lineStyle: { + color: { + type: "linear", + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: "rgba(255,255,255,0)", // 0% 处的颜色 + }, + { + offset: 0.5, + color: "rgba(255,255,255,1)", // 50% 处的颜色 + }, + { + offset: 1, + color: "rgba(255,255,255,0)", // 100% 处的颜色 + }, + ], + global: false, // 缺省为 false + }, + }, + }, + }, + grid: { + top: "10%", + left: left(), + right: "5%", + bottom: "20%", + // containLabel: true + }, + dataZoom: [], + xAxis: [ + { + type: "category", + boundaryGap: true, + axisLine: { + //坐标轴轴线相关设置。数学上的x轴 + show: true, + lineStyle: { + color: 'color:"#092b5d"', + }, + }, + axisLabel: { + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#24c4ff", + margin: 15, + }, + formatter: function (data) { + return data + "时"; + }, + }, + axisTick: { + show: false, + }, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#777777', + opacity: 0.3, + }, + }, + data: data.xName, + }, + ], + yAxis: [ + { + min: 0, + max: 100, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#777777', + opacity: 0.3, + }, + }, + axisLine: { + show: true, + lineStyle: { + color: "#777777", + }, + }, + axisLabel: { + show: true, + textStyle: { + color: "#24c4ff", + }, + formatter: function (value) { + if (value === 0) { + return value; + } + return value + "%"; + }, + }, + axisTick: { + show: false, + }, + }, + ], + series: [ + { + name: "注册总量", + type: "line", + smooth: param?.smooth, + symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆 + showAllSymbol: true, + symbolSize: 8, + lineStyle: { + normal: { + color: "#16C0A2", // 线条颜色 + }, + borderColor: "rgba(0,0,0,.4)", + }, + itemStyle: { + color: "#16C0A2", + borderColor: "#16C0A2", + borderWidth: 2, + }, + label: { + normal: { + show: param?.label, + position: "top", + formatter: [" {a|{c}%}"].join(","), + rich: { + a: { + color: "#fff", + align: "center", + }, + }, + }, + }, + tooltip: { + show: true, + }, + areaStyle: { + //区域填充样式 + normal: { + //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。 + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#16C0A2", + }, + { + offset: 1, + color: "rgba(124, 128, 244, 0)", + }, + ], + false + ), + shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色 + shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 + }, + }, + data: data.yData, + }, + ], + }; + + + charts.setOption(option); + $(window).resize(charts.resize); +} +const gradientLineChart = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = { + XName: ["2016", "2017", "2018", "2019", "2020", "2021", "2022"], + yDataName: "能耗", + yData: [123, 154, 234, 321, 120, 390, 634] + } + } + let img = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE8AAABPCAYAAACqNJiGAAAACXBIWXMAAAsSAAALEgHS3X78AAAHaUlEQVR42u3cv29jWRUH8O+5P96zX5x4Mk4yjCW0S5QqZil2aIEUUG5BEQr4B2joKBclrhAF1HR0gNYVK6BapDSIyhSLnAKNxBSrLJOJd+L413vv3nsOhfNjMhmx4sfaSXSP5ESOrt/1++jcn+8qJCKI8d+FigQRL+JFvIgXI+JFvIgX8WJEvIgX8SJexIsR8SJexIt4MSJexIt4ES9GxPvfw9zGL0Ugev1vgtv3gJluw0NvApH8R+VvB+ZC8a6jCdpo096/Kd8GsIc9mfEtHnGBzXYG18b+OVgb2+gRABzgBQE7r5Q9wA7WZfuScB9tAIJ9AYiwIECz2GzbpyuwFm1ilQBgA63X+rwdAEeyCeAAkB30ziH3gXPARWTh3EfbWbaBgH0CerSOFnWxqjYAVUeqnqGpB58M9AquXoNPBvoZmrqOVG0AqotVtY4WAT0C9qkNkNz/Pu9iFN0/v/EWHQIqQZ9UqCeauaLJcWqWilM/WQYANhg9RCaFH6eMRNjYiUdfSjRkG2CgJ0BLZhkIzLMJzxHvzXAZnqn+p4mqVauZ1srQkvWToQqaisumGySVbJm1jJ0p82I09Z4bj0ue4G1eJOBc8drnfdw6WrQBqAxQyrtseuqcXSOVn5XarCilR6QUJTSFoyqssJQSasL+jLmykgR3Ilx9YC0bO5kAfAzwC/TkEC3Zw77MC28uA8bFIDEbVXfRxUeUICXlV7KCnE7XSraoatJsFKrKaa8ZOYEsseQiMJLCBKvHnECRWpuGIkCnHllizsbLKGgHuwIcvlLfFw84lwFDzn920CPgkKpoUgVGjYwt7bB05VCbwdhbu1QznBeJKJeI0kkKvAsy74J4k/MisUs1Mxh7Ww61scPSjYwtKzCqiiYBhzS7vkDuV59Hl6NrF6uqjlRNnqcme1TTFcC4cWmD8lYTrTNQBeSbAH4kKnzHQgsLmKGCFngv7DUbZ5cSlwN+8nwUskeFH6DgJ3jJV33fPcm8q6lui6qHTTJoUOVhsmRwqvJRoQ15ratWS8kjVvISwDcAfCxOJYWjhAW/gPAPAnNLWb1myOt8VGiDUzW7ToOqh006uDE/vON4Nxb524DBgKC9n5yR0kSqJK91EbSqsNYgI+zfh1bvV6W1rRMygHwM4LtKcx8+PC7Ja02kJmekoL03GBC2P39z4Q42W6LzqTEBUE+f9vVgqaHrad94W7MV5S1rlQjkHQJ9PQT+ncVXvpzxO78GqAbwP4fqL99nnLxMrSmdSEkipQpc5myccSM3KBq+Pu6Hra1GAMC4XP9+sTc3t2bb6cyWYdgCmo8BPGxgGQCRJYInQI4F8kMiTRV5+70ZHACoL2Wy/R6RphJMhEAET0SWljG7TvPx7LrX6rlPy7Pd3dZlFpSuXAL6GAKYYHKRn6ei6NvGBgHx8HryhjNtQkosH4nQV3H+uVmhPgIH/aZ67gneVTJsoSGDs0GJz4Daci5VsSIwIoUXC2ER4dz0PhRM/yBwf2WMfztO/vyhCKoE/BLMIjBSFSu15VzwGXDSP8EWGvKm+u70JJku53nAAYANAA8bSTk+sYYHSoL2LCKsErPlmQpA/Vzk5PfDyp9+AhcIVguXgWHtsYL6jVHsnMyQ1SCVwFbW1p0/BHCMq42sV+u9s5n36kx/tpV0JB51ebDG7OvCQYSdlEFAnwLCAD4goq+ReEeE71HgP2ptfkYsmyLhcYAOTsoQRNjXhR+sMXvUZRtHsoOevKneO9/ntc9/d7uAR19yV2YhSFJZtmE1q3rPeEGgfzC5D1JSPybhUin6FZH/lgZ+KmAP4NSx+NWs6ivLNoQgSe7KzKMv3e71eu7ZCmO2o3IAqA1AVYJPEymS3Cy5CgamGGljlNeOEh2I1wzUIw/+ewojUzixooOVMng2Ia0Fn6PuK35sS0rLXJviGOAdgOe5szKXzKNre8I9mXaPZFObAsZPyhfHnKHubc24JNNOc+GY/fOE8besogrNXIJDqblwSaadrRmXoe7LF8cM4yeb2hTT7vUmS/cr827u512scSswSrypWUUhPyt5okjVVyqkUF4aMBIZnOWSsXBlJVFeBNB+msPzzTXt/Pbz5tbn0St9X6cDDNGUAQrOn3p2lOYlTzFxpdcr1k0xclOYV14jp1esm7jSlzyF10uT/OkMboimdDpXfR3dvz7vZvZ1Oj3a3QW6WFVVNClBnwwaRGGYgNN0YMsJAFhPlUysgioK0cvlxRb8FEfyBC+507mYGM9/G37OD4AubmxfDndbArTkCV7yNsADFDxBj9/Sy7mzw7MMhc9QeGvykbPDs7f0cj5BjwcoeBu4bKqHC4JbQOa9noHnWYge7WL2vHbnfJrbxdFlmSdoymySPXt+2wGwe62Pmz/cAvHedMRi/xKrg5uL+xnWZVm5voJZzE0s/KzKTcTZu3a7TdibjTB7e3vy+nBwG86r0G367xafd+DnthzwuZV4dy3i4caIF/EiXsSLEfEiXsSLeDEiXsSLeBEv4sWIeBEv4kW8GBEv4kW8iBcj4v0f4l+bPQ5YnMn04QAAAABJRU5ErkJggg==" + let color = "#00f8ff"; + + let option = { + backgroundColor: "rgba(0,0,0,0)", + grid: { + left: "10%", + top: "10%", + bottom: "15%", + right: "5%", + }, + legend: { + type: "scroll", + data: data.XName, + itemWidth: 18, + itemHeight: 12, + textStyle: { + color: "#00ffff", + fontSize: 14, + }, + }, + yAxis: [ + { + type: "value", + position: "right", + splitLine: { + show: false, + }, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLabel: { + show: false, + }, + }, + { + type: "value", + position: "left", + nameTextStyle: { + color: "#00FFFF", + }, + splitLine: { + lineStyle: { + type: "dashed", + color: "rgba(135,140,147,0.8)", + }, + }, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLabel: { + formatter: "{value}", + color: "#fff", + fontSize: 14, + }, + }, + ], + xAxis: [ + { + type: "category", + axisTick: { + show: false, + }, + axisLine: { + show: false, + lineStyle: { + color: "#6A989E", + }, + }, + axisLabel: { + inside: false, + textStyle: { + color: "#fff", // x轴颜色 + fontWeight: "normal", + fontSize: "14", + lineHeight: 22, + }, + }, + data: data.XName, + }, + ], + series: [{ + symbolSize: 150, + symbol: img, + name: data.yDataName, + type: "line", + yAxisIndex: 1, + data: data.yData, + label: { + show: true, + position: "top", + offset: [0, 60], + textStyle: { + color: "#fff", + }, + }, + itemStyle: { + normal: { + borderWidth: 5, + color: color, + }, + }, + }], + }; + charts.setOption(option); + $(window).resize(charts.resize); +} +const gradientLineChartTwo = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = { + xName: ['2021年1月', '2021年2月', '2021年3月', '2021年4月', '2021年5月'], + yData: [2000, 1800, 2800, 900, 1600], + } + } + let option = { + backgroundColor: 'rgba(0,0,0,0)', + grid: { + top: '15%', + bottom: '19%', + left: '12%', + right: '4%' + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'line', + lineStyle: { + color: '#FF8736' + }, + } + }, + xAxis: { + boundaryGap: true, // 默认，坐标轴留白策略 + axisLine: { // 坐标轴轴线相关设置。数学上的x轴 + show: true, + lineStyle: { + color: '#85B1B4' + } + }, + axisLabel: { // 坐标轴刻度标签的相关设置 + textStyle: { + color: '#709FD9', + margin: 15 + } + }, + splitLine: { + show: false + }, + axisTick: { + show: false, + alignWithLabel: true + }, + data: data.xName + }, + yAxis: { + axisLine: { + show: false, + }, + axisLabel: { // 坐标轴刻度标签的相关设置 + show: true, + textStyle: { + color: '#709FD9', + margin: 15 + } + }, + splitLine: { + show: false + }, + axisTick: { + show: false + } + }, + series: [ + { + type: 'scatter', + symbolSize: 10, + itemStyle: { + color: '#FF8736' + }, + silent: true, + tooltip: { + show: false + }, + data: data.yData + }, + { + type: 'line', + symbol: 'circle', + symbolSize: 20, + symbol: 'path://M488 187.381L242.872 328.906a48 48 0 0 0-24 41.57v283.049a48 48 0 0 0 24 41.569L488 836.619a48 48 0 0 0 48 0l245.128-141.525a48 48 0 0 0 24-41.57V370.476a48 48 0 0 0-24-41.569L536 187.381a48 48 0 0 0-48 0z m32 27.713l245.128 141.525a16 16 0 0 1 8 13.856v283.05a16 16 0 0 1-8 13.856L520 808.906a16 16 0 0 1-16 0L258.872 667.381a16 16 0 0 1-8-13.856v-283.05a16 16 0 0 1 8-13.856L504 215.094a16 16 0 0 1 16 0z', + lineStyle: { + color: '#FF8736' + }, + itemStyle: { + color: '#FF8736', + borderWidth: 1, + borderColor: '#FF8736' + }, + label: { + show: true, + position: 'top', + textStyle: { + color: '#fff' + } + }, + + data: data.yData + } + ] + }; + charts.setOption(option); + $(window).resize(charts.resize); + +} +const gradientLineChartThree = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = { + xName: ['2016', '2017', '2018', '2019', '2020', '2021', '2022'], + yData: [52, 43, 60, 44, 79, 60, 40], + yDataName: '合格率', + } + } + let option = { + backgroundColor: 'rgba(0,0,0,0)', + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'none' + }, + formatter: (params) => { + let html = params[0].name + '
' + for (let i = 0; i < params.length; i++) { + html += params[i].marker + params[i].seriesName + ': ' + params[i].value + html += '%' + '
' + } + return html + } + }, + grid: { + left: '8%', + right: '4%', + top: '20%', + bottom: '14%' + }, + xAxis: { + type: 'category', + axisLine: { + lineStyle: { + color: 'rgba(255, 255, 255, .2)' + } + }, + splitLine: { + show: false + }, + axisTick: { + show: false + }, + splitArea: { + show: false + }, + axisLabel: { + fontSize: 12, + padding: [3, 0, 0, 0], + color: 'rgba(168, 177, 187, 1)' + }, + data: data.xName, + }, + yAxis: { + nameTextStyle: { + color: '#A8B1BB', + fontSize: 12, + padding: [0, 16, 0, 10] + }, + type: 'value', + splitLine: { + lineStyle: { + type: 'solid', + color: 'rgba(105, 171, 202, 0.08)' + } + }, + axisLine: { + show: false + }, + axisTick: { + show: false + }, + axisLabel: { + interval: 0, + color: '#A8B1BB', + fontSize: 12, + formatter: '{value}' + }, + splitArea: { + show: false + } + }, + series: [ + { + name: data.yDataName, + type: 'line', + showAllSymbol: true, + symbol: 'circle', + symbolSize: 4, + itemStyle: { + color: '#3DF7E4', + shadowColor: 'rgba(61, 247, 228, 0.46)', + shadowBlur: 20, + borderColor: 'rgba(61, 247, 228, 0.46)', + borderWidth: 4 + }, + lineStyle: { + width: 1, + color: '#3DF7E4', + shadowColor: 'rgba(61, 247, 228, 0.86)', + shadowBlur: 20 + }, + data: data.yData + } + ] + } + charts.setOption(option); + $(window).resize(charts.resize); +} +const gradientLineChartFour = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = { + yData: [10, 10, 30, 12, 15, 3, 7], + xName: ['2016', '2017', '2018', '2019', '2020', '2021', '2022'], + } + } + let option = { + backgroundColor: 'rgba(0,0,0,0)', + + grid: { + left: '8%', + right: '4%', + top: '10%', + bottom: '10%' + }, + xAxis: [ + { + data: data.xName + }, + ], + yAxis: [ + { + type: 'value', + }, + ], + series: [ + { + type: 'line', + data: data.yData, + label: { + show: true, + position: 'top', + textStyle: { + color: '#fff' + } + }, + lineStyle: { + width: 2, + shadowColor: 'rgba(158,135,255, 0.7)', + shadowBlur: 3, + shadowOffsetY: 5, + }, + }, + ], + }; + charts.setOption(option); + $(window).resize(charts.resize); +} + +// 渐变曲线图 +const gradientCurve = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = { + xData: ['00', '02', '04', '06', '08'], + yData: [51, 30, 150, 130, 85], + yName: '充装量', + } + } + let option = { + backgroundColor: 'rgba(0,0,0,0)', + grid: { + top: "20%", + left: '16%', + right: "5%", + bottom: "20%", + // containLabel: true + }, + xAxis: { + data: data.xData, + axisTick: { + show: false + }, + axisLine: { + show: true, + lineStyle: { + color: '#fff', + width: 1 + } + }, + axisLabel: { + show: true, + textStyle: { + color: '#8587C1', + fontSize: 16 + } + }, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#727582', + width: 1 + } + }, + }, + yAxis: { + axisLine: { + show: true, + lineStyle: { + color: '#fff', + width: 1 + } + }, + color: '#8587C1', + splitLine: { + show: false + }, + axisLabel: { + show: true, + textStyle: { + color: '#8587C1', + fontSize: 16 + } + } + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'line' + }, + }, + series: [ + { + name: data.yName, + type: 'line', + symbol: 'circle', + symbolSize: 10, + smooth: true, + data: data.yData, + label: { + show: true, + position: "top", + textStyle: { + color: "#fff", + }, + }, + itemStyle: { + //拐点的样式 + color: 'rgba(244,253,255,0)', + borderWidth: 0, + borderColor: 'rgba(87, 183, 242, 0)' + }, + lineStyle: { + //线条的样式 + width: 2, + color: 'rgba(87, 183, 242, 1)' + }, + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: 'rgba(87, 183, 242, 1)' // 0% 处的颜色 + }, + { + offset: 1, + color: 'rgba(6,37,55,0)' // 100% 处的颜色 + } + ], + global: false // 缺省为 false + } + } + } + ] + } + + charts.setOption(option); + $(window).resize(charts.resize); + +} + +// 绿色多边形柱状图 +const greenPolygonalHistogram = (data, ids) => { + let charts = echarts.init(ids); + if (!data) { + data = { + xName: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], + yData: [1, 2, 3, 4, 5, 4, 3, 2, 1, 4, 1, 3] + } + } + const maxNum = Math.max(...data.yData) + const maxArr = [] + const minArr = [] + data.yData.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", + ], + tooltip: { + trigger: "axis", + show: false, + }, + grid: { + containLabel: true, + left: '3%', + right: '3%', + bottom: '3%', + top: '20%', + }, + dataZoom: [], + xAxis: { + axisLabel: { + color: "#c0c3cd", + fontSize: 14, + interval: 2, + }, + axisTick: { + lineStyle: { + color: "#384267", + }, + show: false, + }, + splitLine: { + show: false, + }, + axisLine: { + lineStyle: { + color: "#384267", + width: 1, + type: "line", + }, + show: true, + }, + data: data.xName, + type: "category", + }, + yAxis: { + show: true, + 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: "line", + }, + show: true, + }, + name: "", + }, + series: [ + { + data: data.yData, + type: "bar", + barMaxWidth: vw, + barWidth: vw, + 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: vw, + barWidth: vw, + symbol: "diamond", + symbolOffset: [0, "50%"], + symbolSize: [vw, 8], + }, + { + data: data.yData, + type: "pictorialBar", + barMaxWidth: vw, + barWidth: vw, + symbolPosition: "end", + symbol: "diamond", + symbolOffset: [0, "-50%"], + symbolSize: [vw, 8], + zlevel: 2, + }, + { + data: maxArr, + type: "bar", + barMaxWidth: vw, + barWidth: vw, + barGap: "-100%", + zlevel: -1, + itemStyle: { + color: '#083181', + }, + }, + { + data: minArr, + type: "pictorialBar", + barMaxWidth: vw, + barWidth: vw, + symbol: "diamond", + symbolOffset: [0, "50%"], + symbolSize: [vw, 8], + zlevel: -2, + }, + { + data: maxArr, + type: "pictorialBar", + barMaxWidth: vw, + barWidth: vw, + symbolPosition: "end", + symbol: "diamond", + symbolOffset: [0, "-50%"], + symbolSize: [vw, 8], + zlevel: -1, + itemStyle: { + color: '#083181', + }, + }, + ], + }; + charts.setOption(option); + $(window).resize(charts.resize); +} + +// 单个垂直柱状图 +const singleVerticalBarChart = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = { + xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"], + yData: [12, 20, 11, 30, 14, 80, 50], + } + } + let left = () => { + if (vw < 10) return '18%' + return '10%' + } + let option = { + grid: { + top: "10%", + left: left(), + right: "5%", + bottom: "25%", + // containLabel: true + }, + dataZoom: [], + xAxis: { + data: data.xName, + axisLine: { + lineStyle: { + color: "#0177d4", + }, + }, + axisLabel: { + color: "#fff", + fontSize: 14, + }, + }, + yAxis: { + nameTextStyle: { + color: "#fff", + fontSize: 16, + }, + axisLine: { + lineStyle: { + color: "#0177d4", + }, + }, + axisLabel: { + color: "#fff", + fontSize: 16, + }, + splitLine: { + show: false, + lineStyle: { + color: "#0177d4", + }, + }, + }, + series: [ + { + type: "bar", + barWidth: 1 * vw, + itemStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#00b0ff", + }, + { + offset: 0.8, + color: "#7052f4", + }, + ], + false + ), + }, + }, + data: data.yData, + }, + ], + }; + + + charts.setOption(option); + $(window).resize(charts.resize); +} +const singleVerticalBarChartTwo = function (data, id) { + let charts = echarts.init(id); + + if (!data) { + data = { + xName: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], + yData: [498, 520, 568, 432, 464, 332, 344, 458, 470, 468, 398, 310], + yDataName: "设备在线率" + } + } + + let option = { + backgroundColor: 'rgba(0,0,0,0)', + animation: true, + grid: { + top: "15%", + bottom: "15%", + right: "5%" + }, + tooltip: { + show: true, + }, + xAxis: { + data: data.xName, + axisLine: { + show: false //隐藏X轴轴线 + }, + axisTick: { + show: false //隐藏X轴轴线 + }, + splitLine: { + show: true, + lineStyle: { + color: "rgba(77, 128, 254, 0.2)", + width: 2 + } + }, + axisLabel: { + show: true, + interval: 0, + // margin: 14, + fontSize: 13, + textStyle: { + color: "#a8d5ff" //X轴文字颜色 + } + } + }, + yAxis: [ + { + type: "value", + gridIndex: 0, + min: 0, + //max: 100, + interval: 100, + // splitNumber: 4, + splitLine: { + show: true, + lineStyle: { + color: "rgba(77, 128, 254, 0.2)", + width: 2 + } + }, + axisTick: { + show: false + }, + axisLine: { + show: true, + lineStyle: { + color: "rgba(77, 128, 254, 0.2)" + } + }, + axisLabel: { + show: true, + margin: 14, + fontSize: 13, + textStyle: { + color: "#a8d5ff" + } + } + } + ], + series: [ + { + name: data.yDataName, + type: "bar", + barWidth: vw, + itemStyle: { + normal: { + label: { + show: true, //开启显示 + position: 'top', //在上方显示 + textStyle: { //数值样式 + color: '#fff', + fontSize: 16 + } + }, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: "rgba(146, 225, 255, 1)" + }, + { + offset: 1, + color: "rgba(0, 151, 251, 1)" + } + ]) + } + }, + data: data.yData, + z: 10, + zlevel: 0 + }, + { + // 分隔 + type: "pictorialBar", + itemStyle: { + normal: { + color: "#0F375F" + } + }, + symbolRepeat: "fixed", + symbolMargin: 6, + symbol: "rect", + symbolClip: true, + symbolSize: [vw, 2], + symbolPosition: "start", + symbolOffset: [1, 1], + data: data.yData, + width: 2, + z: 0, + zlevel: 1 + }, + { + name: "背影", + type: "line", + smooth: true, //平滑曲线显示 + showAllSymbol: false, //显示所有图形。 + symbolSize: 0, + lineStyle: { + width: 0 + }, + areaStyle: { + color: "rgba(0, 151, 251, 0.1)" + }, + data: data.yData, + z: 5 + } + ] + } + + charts.setOption(option); + $(window).resize(charts.resize); +} +const singleVerticalBarChartThree = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = { + xName: ['0时', '2时', '4时', '6时', '8时', '10时', '12时', '14时'], + yData: [38, 60, 40, 55, 42, 39, 45, 40], + } + } + let option = { + backgroundColor: 'rgba(0,0,0,0)', + color: ['#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe'], + grid: { + top: "20%", + bottom: "15%", + right: "5%" + }, + xAxis: { + nameTextStyle: { + color: '#c0c3cd', + padding: [0, 0, -10, 0], + fontSize: 14, + }, + axisLabel: { + color: '#c0c3cd', //X轴文字 + fontSize: 14, + interval: 0, + }, + axisTick: { + lineStyle: { + color: '#0B1535', + width: 1, + }, + show: false, + }, + splitLine: { + show: false, + }, + axisLine: { + lineStyle: { + color: '#384267', + width: 1, + type: 'dashed', + }, + show: true, + }, + data: data.xName, + type: 'category', + }, + yAxis: { + type: 'value', + nameTextStyle: { + color: '#c0c3cd', + padding: [0, 0, -10, 0], + fontSize: 14, + }, + axisLabel: { + color: '#c0c3cd', //Y轴文字 + fontSize: 14, + }, + axisTick: { + lineStyle: { + color: '#384267', + width: 1, + }, + show: true, + }, + splitLine: { + show: true, + lineStyle: { + color: '#384267', + type: 'line', + }, + }, + axisLine: { + lineStyle: { + color: '#fff', + width: 1, + type: 'line', + }, + show: false, + }, + }, + series: [ + { + data: data.yData, + type: 'bar', + barMaxWidth: 'auto', + barWidth: 1.5 * vw, + + label: { + show: true, + position: 'top', + distance: 10, + color: '#fff', + }, + }, + { + data: data.yData, + type: 'pictorialBar', + barMaxWidth: vw, + symbolPosition: 'end', + symbol: 'diamond', + color: '#66c8ff', + symbolOffset: [0 + '%', '-50%'], + symbolSize: [1.5 * vw, 10], + zlevel: 4, + }, + { + data: [1, 1, 1, 1, 1, 1, 1, 1], + type: 'pictorialBar', + barMaxWidth: vw, + symbolPosition: 'end', + symbol: 'diamond', + color: '#66c8ff', + symbolOffset: [0 + '%', '-20%'], + symbolSize: [1.5 * vw, 10], + zlevel: 4, + }], + }; + + + charts.setOption(option); + $(window).resize(charts.resize); +} + +// 多个渐变折线图(曲线) +const multipleGradientLineChart = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = { + xName: ["13:00", "13:05", "13:10", "13:15", "13:20", "13:25", "13:30", "13:35", "13:40", "13:45", "13:50", "13:55"], + yDataOne: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122], + yDataOneName: "充电", + yDataTwo: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150], + yDataTwoName: "加氢", + yDataThree: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122], + yDataThreeName: "加油", + } + } + let option = { + tooltip: { + trigger: "axis", + axisPointer: { + lineStyle: { + color: "#57617B", + }, + }, + }, + legend: { + icon: "rect", + itemWidth: 0.75 * vw, + itemHeight: 0.25 * vw, + itemGap: 0.75 * vw, + data: ["加氢", "加油", "充电"], + top: "4%", + right: "4%", + textStyle: { + fontSize: 0.75 * vw, + color: "#F1F1F3", + }, + }, + grid: { + top: "20%", + left: "3%", + right: "4%", + bottom: "3%", + containLabel: true, + }, + dataZoom: [], + xAxis: [ + { + type: "category", + boundaryGap: false, + axisLabel: { + show: true, + color: '#fff' + }, + axisLine: { + lineStyle: { + color: "#57617B", + }, + }, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#777777', + opacity: 0.3, + }, + }, + data: data.xName + } + ], + yAxis: [ + { + type: "value", + axisTick: { + show: false, + }, + axisLine: { + lineStyle: { + color: "#57617B", + }, + }, + axisLabel: { + show: true, + color: '#fff' + }, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#777777', + opacity: 0.3, + }, + }, + }, + ], + series: [ + { + name: data.yDataOneName, + type: "line", + smooth: true, + symbol: "circle", + symbolSize: 5, + showSymbol: false, + lineStyle: { + normal: { + width: 1, + }, + }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(137, 189, 27, 1)", + }, + { + offset: 0.8, + color: "rgba(137, 189, 27, 0.6)", + }, + ], + false + ), + shadowColor: "rgba(0, 0, 0, 0.1)", + shadowBlur: 10, + }, + }, + itemStyle: { + normal: { + color: "rgb(137,189,27)", + borderColor: "rgba(137,189,2,0.27)", + borderWidth: 12, + }, + }, + data: data.yDataOne, + }, + { + name: data.yDataTwoName, + type: "line", + smooth: true, + symbol: "circle", + symbolSize: 5, + showSymbol: false, + lineStyle: { + normal: { + width: 1, + }, + }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(0, 136, 212, 0.5)", + }, + { + offset: 0.8, + color: "rgba(0, 136, 212, 0.2)", + }, + ], + false + ), + shadowColor: "rgba(0, 0, 0, 0.1)", + shadowBlur: 10, + }, + }, + itemStyle: { + normal: { + color: "rgb(0,136,212)", + borderColor: "rgba(0,136,212,0.2)", + borderWidth: 12, + }, + }, + data: data.yDataTwo, + }, + { + name: data.yDataThreeName, + type: "line", + smooth: true, + symbol: "circle", + symbolSize: 5, + showSymbol: false, + lineStyle: { + normal: { + width: 1, + }, + }, + areaStyle: { + normal: { + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgba(219, 50, 51, 0.5)", + }, + { + offset: 0.8, + color: "rgba(219, 50, 51, 0.2)", + }, + ], + false + ), + shadowColor: "rgba(0, 0, 0, 0.1)", + shadowBlur: 10, + }, + }, + itemStyle: { + normal: { + color: "rgb(219,50,51)", + borderColor: "rgba(219,50,51,0.2)", + borderWidth: 12, + }, + }, + data: data.yDataThree, + }, + ], + }; + + + charts.setOption(option); + $(window).resize(charts.resize); +} + +// 多个折线面积图(直线) +const multipleBrokenLineAreaDiagram = (data, ids) => { + let charts = echarts.init(ids); + + function Fun() { + this.randomNum = function () { + let arr = [] + for (let i = 0; i < 12; i++) { + arr.push(parseInt(Math.random() * 100)) + } + return arr + } + } + + if (!data) { + data = { + xData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], + yDataOne: new Fun().randomNum(), + yDataTwo: new Fun().randomNum(), + yDataThree: new Fun().randomNum(), + yDataOneName: '制氢量', + yDataTwoName: '发电量', + yDataThreeName: '充装量', + } + } + + let option = { + tooltip: { + trigger: "axis", + axisPointer: { + lineStyle: { + color: "#57617B", + }, + }, + }, + legend: { + icon: "rect", + itemWidth: 0.75 * vw, + itemHeight: 0.25 * vw, + itemGap: 0.75 * vw, + data: [data.yDataOneName, data.yDataTwoName, data.yDataThreeName], + left: "4%", + textStyle: { + fontSize: 0.75 * vw, + color: "#F1F1F3", + }, + }, + grid: { + top: "20%", + left: "3%", + right: "4%", + bottom: "3%", + containLabel: true, + }, + dataZoom: [], + xAxis: [ + { + type: "category", + boundaryGap: false, + axisLine: { + lineStyle: { + color: "#57617B", + }, + }, + axisLabel: { + show: true, + color: '#fff' + }, + data: data.xData, + }, + ], + yAxis: [ + { + type: "value", + axisTick: { + show: false, + }, + axisLine: { + lineStyle: { + color: "#57617B", + }, + }, + axisLabel: { + show: true, + color: '#fff' + }, + splitLine: { + show: false, + lineStyle: { + color: "#57617B", + }, + }, + }, + ], + series: [ + { + name: data.yDataOneName, + 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.6)", + }, + { + offset: 0.8, + color: "rgba(137, 189, 27, 0.2)", + }, + ], + false + ), + shadowColor: "rgba(0, 0, 0, 0.1)", + shadowBlur: 10, + }, + }, + itemStyle: { + normal: { + color: "rgb(137,189,27)", + }, + }, + data: data.yDataOne, + }, + { + name: data.yDataTwoName, + 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.6)", + }, + { + offset: 0.8, + color: "rgba(0, 136, 212, 0.2)", + }, + ], + false + ), + shadowColor: "rgba(0, 0, 0, 0.1)", + shadowBlur: 10, + }, + }, + itemStyle: { + normal: { + color: "rgb(0,136,212)", + }, + }, + data: data.yDataTwo, + }, + { + name: data.yDataThreeName, + 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.6)", + }, + { + offset: 0.8, + color: "rgba(219, 50, 51, 0.2)", + }, + ], + false + ), + shadowColor: "rgba(0, 0, 0, 0.1)", + shadowBlur: 10, + }, + }, + itemStyle: { + normal: { + color: "rgb(219,50,51)", + }, + }, + data: data.yDataThree, + }, + ], + }; + + + charts.setOption(option); + $(window).resize(charts.resize); +} + + +// 空心饼图 +const hollowPieChart = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = [ + { + value: 10, + name: "加氢站1", + }, + { + value: 5, + name: "加氢站2", + }, + { + value: 15, + name: "加氢站3", + }, + { + value: 25, + name: "加氢站4", + }, + { + value: 20, + name: "加氢站5", + }, + { + value: 35, + name: "加氢站6", + }, + ] + } + let option = { + color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"], + grid: { + left: -100, + top: 50, + bottom: 10, + right: 10, + containLabel: true, + }, + tooltip: { + trigger: "item", + formatter: "{b} : {c} ({d}%)", + }, + legend: { + type: "scroll", + orient: "vartical", + // x: "right", + top: "center", + right: "15", + // bottom: "0%", + itemWidth: 0.75 * vw, + itemHeight: 0.5 * vw, + itemGap: 0.75 * vw, + textStyle: { + color: "#A3E2F4", + fontSize: 123, + fontWeight: 0, + }, + data: ["加氢站1", "加氢站2", "加氢站3", "加氢站4", "加氢站5", "加氢站6"], + }, + polar: {}, + angleAxis: { + interval: 1, + type: "category", + data: [], + z: 10, + axisLine: { + show: false, + lineStyle: { + color: "#0B4A6B", + width: 1, + type: "solid", + }, + }, + axisLabel: { + interval: 0, + show: true, + color: "#0B4A6B", + margin: 8, + fontSize: 16, + }, + }, + radiusAxis: { + // min: 40, + // max: 120, + // interval: 20, + axisLine: { + show: false, + lineStyle: { + color: "#0B3E5E", + width: 1, + type: "solid", + }, + }, + axisLabel: { + formatter: "{value} %", + show: false, + padding: [0, 0, 20, 0], + color: "#0B3E5E", + fontSize: 16, + }, + splitLine: { + lineStyle: { + color: "#0B3E5E", + width: 2, + type: "solid", + }, + }, + }, + calculable: true, + series: [ + { + type: "pie", + radius: ["5%", "10%"], + center: ["35%", "50%"], + hoverAnimation: false, + labelLine: { + normal: { + show: false, + length: 3, + length2: 5, + }, + emphasis: { + show: false, + }, + }, + data: [ + { + name: "", + value: 0, + itemStyle: { + normal: { + color: "#0B4A6B", + }, + }, + }, + ], + }, + { + type: "pie", + radius: ["90%", "95%"], + center: ["35%", "50%"], + hoverAnimation: false, + labelLine: { + normal: { + show: false, + length: 3, + length2: 5, + }, + emphasis: { + show: false, + }, + }, + name: "", + data: [ + { + name: "", + value: 0, + itemStyle: { + normal: { + color: "#0B4A6B", + }, + }, + }, + ], + }, + { + stack: "a", + type: "pie", + radius: ["30%", "80%"], + center: ["35%", "50%"], + roseType: "area", + zlevel: 10, + label: { + normal: { + show: true, + formatter: "{c}", + textStyle: { + fontSize: 12, + }, + position: "outside", + }, + emphasis: { + show: true, + }, + }, + labelLine: { + normal: { + show: true, + length: 2, + length2: 5, + }, + emphasis: { + show: false, + }, + }, + data: data, + }, + ], + }; + + charts.setOption(option); + $(window).resize(charts.resize); +} + +// 环形图 +const doughnutChart = function (data, id) { + let charts = echarts.init(id); + let color = ['50,123,250', '244,201,7', '23,216,161', '122,60,235', '15,197,243'] + if (!data) { + data = [ + { + value: 335, + name: "类目1", + }, + { + value: 310, + name: "类目2", + }, + { + value: 234, + name: "类目3", + }, + { + value: 135, + name: "类目4", + }, + { + value: 1548, + name: "类目5", + } + ] + } + data.forEach((val, index) => { + console.log(index % color.length) + val.itemStyle = { + color: `rgba(${color[index % color.length]},0.7)`, + borderColor: `rgba(${color[index % color.length]},1)`, + borderWidth: 3, + } + }) + let option = { + backgroundColor: "rgba(0,0,0,0)", + legend: { + orient: "vertical", + top: "center", + right: "5%", + data: ["类目1", "类目2", "类目3", "类目4", "类目5"], + textStyle: { + color: "#fff", + fontSize: 0.75 * vw, + }, + }, + series: [ + { + type: "pie", + radius: ["40%", "85%"], + center: ["40%", "50%"], + avoidLabelOverlap: false, + itemStyle: { + normal: { + color: "transparent", + label: { + formatter: '{d}%', + show: true, + position: "inner", + rotate: "tangential", + color: "#fff", + fontSize: 0.75 * vw, + }, + }, + }, + labelLine: { + normal: { + show: false, + }, + }, + data: data, + }, + ], + }; + charts.setOption(option); + $(window).resize(charts.resize); + +} +const doughnutChartTwo = function (data, id) { + let color = ['#0286ff', '#ffd302', '#fb5274'] + if (!data) { + data = { + value: [ + { + value: 30, + name: "光伏站1", + itemStyle: { + color: "#0286ff", + opacity: 1, + }, + }, + { + value: 30, + name: "光伏站2", + itemStyle: { + color: "#ffd302", + opacity: 1, + }, + }, + { + value: 40, + name: "光伏站3", + itemStyle: { + color: "#fb5274", + opacity: 1, + }, + }, + ], + name: '能耗\n占比' + } + } + data.value.forEach((val, index) => { + val.itemStyle = { + color: color[index % color.length], + opacity: 1, + } + }) + let dataTwo = data.value.map(val => { + console.log(val) + return { + value: val.value, + name: val.name, + itemStyle: { + color: val.itemStyle.color, + opacity: 0.4, + } + } + }) + let index = -1 + let charts = echarts.init(id); + let option = { + backgroundColor: "rgba(0,0,0,0)", + legend: { + orient: "vertical", + show: true, + right: "10%", + y: "center", + itemWidth: 0.5 * vw, + itemHeight: 0.5 * vw, + itemGap: 20, + formatter: function (val) { + index += 1 + if (index >= data.value.length) { + index = 0 + } + return `${val} ${data.value[index].value}%` + }, + textStyle: { + color: "#7a8c9f", + fontSize: 14, + lineHeight: 20, + rich: { + percent: { + color: "#fff", + fontSize: 16, + }, + }, + }, + }, + tooltip: { + show: true, + formatter: '{b},{c}%' + }, + series: [ + { + type: "pie", + radius: ["65%", "75%"], + center: ["25%", "50%"], + hoverAnimation: false, + z: 10, + label: { + position: "center", + formatter: data.name, + rich: { + total: { + fontSize: 30, + color: "#fff", + }, + }, + color: "#55BCFB", + fontSize: 16, + fontWeight: 800, + lineHeight: 30, + }, + data: data.value, + labelLine: { + show: false, + }, + }, + { + name: 'value', + type: "pie", + radius: ["54%", "64%"], + center: ["25%", "50%"], + hoverAnimation: false, + label: { + show: false, + }, + data: dataTwo, + labelLine: { + show: false, + }, + }, + ], + }; + charts.setOption(option); + $(window).resize(charts.resize); + +} +const doughnutChartThree = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = [ + {name: "故障1", value: 1}, + {name: "故障2", value: 2}, + {name: "故障3", value: 3}, + {name: "故障4", value: 7}, + ]; + } + let nameArray = data.map((item) => { + return ( + item.name + "\t\t\t" + item.value + '次' + ); + }); + let color = ["#2ca1ff", "#0adbfa", "#febe13", "#65e5dd"]; + let list = []; + for (let i = 0; i < data.length; i++) { + list.push( + { + value: data[i].value, + name: + data[i].name + + "\t\t\t" + + data[i].value + '次', + itemStyle: { + normal: { + borderWidth: 2, + shadowBlur: 5, + borderRadius: 5, + borderColor: color[i % color.length], + shadowColor: color[i % color.length], + }, + }, + }, + { + value: 1, + name: "", + itemStyle: { + normal: { + label: { + show: false, + }, + labelLine: { + show: false, + }, + color: "rgba(0, 0, 0, 0)", + borderColor: "rgba(0, 0, 0, 0)", + borderWidth: 0, + }, + }, + } + ); + } + let option = { + backgroundColor: "rgba(0,0,0,0)", + color: color, + tooltip: { + show: true, + formatter: function (val) { + if (!val.data.name) return + return val.data.name + } + }, + grid: { + left: "20%", + top: "10%", + }, + legend: [ + { + icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`, + orient: "vertical", + data: nameArray, + right: "5%", + top: "center", + align: "left", + itemGap: 5, + textStyle: { + color: "rgba(36, 173, 254, 1)", + fontSize: "1rem", + }, + //图例标记的图形高度 + itemHeight: 10, + //图例标记的图形宽度 + itemWidth: 10, + }, + ], + toolbox: { + show: false, + }, + series: [ + { + name: "", + type: "pie", + clockWise: false, + radius: ["120%", "140%"], + width: "55%", + height: "55%", + hoverAnimation: false, + center: ["50%", "50%"], + top: "center", + itemStyle: { + normal: { + label: { + show: false, + }, + }, + }, + data: list, + }, + ], + }; + charts.setOption(option); + $(window).resize(charts.resize); + +} + +// 百分比柱状图 +const PercentageBarChart = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = { + value: [20, 30, 40, 50, 60, 70, 80, 90], + xValue: ["设备1", "设备2", "设备3", "设备4", "设备5", "设备6", "设备7", "设备8"], + threshold: 70 + } + } + const value = data.value + const xValue = data.xValue + const threshold = data.threshold + const isWarning = data.value.map(val => { + return val > threshold + }) + let option = { + tooltip: { + trigger: "item", + borderColor: "rgba(89,211,255,1)", + borderWidth: 2, + padding: 5, + textStyle: { + color: "rgba(89,211,255,1)", + fontSize: vw, + width: 300, + height: 40, + }, + formatter: "{c}" + "%", + + extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);", + + // 自定义的 CSS 样式 + }, + grid: { + bottom: "20%", + top: "35%", + left: "1%", + right: "1%", + }, + dataZoom: [], + xAxis: { + data: xValue, + axisTick: { + show: false, + }, + axisLine: { + show: false, + }, + axisLabel: { + show: true, + textStyle: { + color: "#fff", + }, + margin: 12, //刻度标签与轴线之间的距离。 + }, + }, + yAxis: { + splitLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLine: { + show: false, + }, + axisLabel: { + show: false, + }, + }, + series: [ + // 头 + { + name: "", + type: "pictorialBar", + symbolSize: [1.5 * vw, 0.8 * vw], + symbolOffset: [0, -5], + z: 12, + itemStyle: { + normal: { + color: function (val) { + if (isWarning[val.dataIndex]) { + return "#C73536" + } else { + return "#0057A3" + } + } + }, + }, + data: value.map(val => { + return { + name: "", + value: 100, + symbolPosition: "end", + } + }) + }, + //底部立体柱 + { + name: "vvvv", + stack: "1", + type: "bar", + + // label: { + // show: true, + // position: 'top', //top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight + // distance: 15, + // color: "#FFFE00", + // fontSize: 30, + // formatter: '{c}' + '%' + // }, + + silent: true, + barWidth: 1.5 * vw, + barGap: "-100%", // Make series be overlap + data: value, + itemStyle: { + normal: { + color: function (val) { + if (isWarning[val.dataIndex]) { + return { + x: 0, + y: 0, + x2: 0, + y2: 1, + type: "linear", + global: false, + colorStops: [ + { + //第一节下面 + offset: 0, + color: "#FE1006", + }, + { + offset: 1, + color: "#FE7917", + }, + ], + } + } else { + return { + x: 0, + y: 0, + x2: 0, + y2: 1, + type: "linear", + global: false, + colorStops: [ + { + //第一节下面 + offset: 0, + color: "#0968FC", + }, + { + offset: 1, + color: "#15A1FF", + }, + ], + } + } + } + }, + }, + }, + //三个最底下的圆片 + { + name: "", + type: "pictorialBar", + symbolSize: [1.5 * vw, 0.8 * vw], + symbolOffset: [0, 4], + z: 12, + itemStyle: { + normal: { + color: function (val) { + if (isWarning[val.dataIndex]) { + return '#CC0809' + } else { + return '#086ACB' + } + } + }, + }, + data: value.map(val => { + return { + name: "", + value: "100", + } + }) + }, + // 中间圆片 + { + name: "", + type: "pictorialBar", + symbolSize: [1.5 * vw, 0.8 * vw], + symbolOffset: [0, -5], + itemStyle: { + normal: { + color: function (val) { + if (isWarning[val.dataIndex]) { + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#FB130A", + }, + { + offset: 1, + color: "#FE843A", + }, + ], + false + ) + } else { + return new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "#0EACFF", + }, + { + offset: 1, + color: "#3AE8FE", + }, + ], + false + ) + } + } + }, + }, + z: 12, + data: value.map(val => { + return { + name: "", + value: val, + symbolPosition: "end", + } + }) + }, + //上部立体柱 + { + //上部立体柱 + stack: "1", + type: "bar", + itemStyle: { + normal: { + color: function (val) { + if (isWarning[val.dataIndex]) { + return "#980811" + } else { + return "#0730A6" + } + }, + opacity: 0.7, + }, + }, + label: { + show: true, + position: "top", //top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight + distance: 20, + color: "#A2A6C0", + fontSize: 12, + formatter: function (item) { + let a = 100; + return a - item.value + "%"; + }, + }, + silent: true, + barWidth: 1.5 * vw, + barGap: "-100%", // Make series be overlap + data: value.map(val => { + return { + name: "a", + value: 100 - val, + } + }) + }, + ], + }; + charts.setOption(option); + $(window).resize(charts.resize); +} +const PercentageBarChartTwo = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = + { + xName: ["设备1", "设备2", "设备3", "设备4", "设备5", "设备6", "设备7", "设备8"], + yData: [20, 30, 40, 50, 60, 70, 80, 90], + } + + } + let option = { + color: ["#3398DB"], + tooltip: { + trigger: "axis", + fontSize: 1 * vw, + axisPointer: { + type: "line", + lineStyle: { + opacity: 0, + }, + }, + formatter: function (prams) { + return prams[0].data + "%"; + }, + }, + grid: { + left: "0%", + right: "0%", + bottom: "0%", + top: "15%", + height: "85%", + containLabel: true, + z: 22, + }, + xAxis: [ + { + type: "category", + gridIndex: 0, + data: data.xName, + axisTick: { + show: false, + }, + axisLine: { + show: false, + }, + axisLabel: { + show: true, + color: "rgb(170,170,170)", + fontSize: vw, + }, + }, + ], + yAxis: [ + { + type: "value", + gridIndex: 0, + splitLine: { + show: false, + }, + axisTick: { + show: false, + }, + min: 0, + max: 100, + axisLine: { + show: false, + }, + axisLabel: { + show: false, + }, + }, + ], + series: [ + { + name: "合格率", + type: "bar", + barWidth: "30%", + xAxisIndex: 0, + yAxisIndex: 0, + label: { + show: true, + position: "top", //top / left / right / bottom / inside / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight + distance: 20, + color: "#A2A6C0", + fontSize: 0.75 * vw, + formatter: function (item) { + return item.value + "%"; + }, + }, + itemStyle: { + normal: { + barBorderRadius: 30, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: "#00feff", + }, + { + offset: 0.5, + color: "#027eff", + }, + { + offset: 1, + color: "#0286ff", + }, + ]), + }, + }, + data: data.yData, + zlevel: 11, + }, + ], + }; + charts.setOption(option); + $(window).resize(charts.resize); +} + +// 圆柱背景折线图 +const cylindricalBackgroundLineChart = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = { + xName: ['00', '02', '04', '06', '08', '10', '12', '14'], + yData: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 6, 5], + yDataName: "发电量", + } + } + let max = [] + data.yData.forEach(val => { + max.push(Math.max(...data.yData)) + }) + let option = { + backgroundColor: "rgba(0,0,0,0)", + grid: { + top: "20%", + bottom: "15%", + }, + tooltip: { + trigger: "axis", + axisPointer: { + type: "shadow", + label: { + show: true, + }, + }, + }, + xAxis: { + data: data.xName, + axisLine: { + show: true, //隐藏X轴轴线 + lineStyle: { + color: "#01FCE3", + }, + }, + axisTick: { + show: false, //隐藏X轴刻度 + }, + axisLabel: { + show: true, + textStyle: { + color: "#ebf8ac", //X轴文字颜色 + }, + }, + }, + yAxis: [ + { + type: "value", + nameTextStyle: { + color: "#ebf8ac", + }, + splitLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLine: { + show: true, + lineStyle: { + color: "#FFFFFF", + }, + }, + axisLabel: { + show: true, + textStyle: { + color: "#ebf8ac", + }, + }, + }, + ], + series: [ + { + name: data.yDataName, + type: "line", + symbol: "circle", + symbolSize: 12, + lineStyle: { + normal: { + width: 2, + color: "#0f0", + }, + }, + label: { + show: true, + position: "top", + textStyle: { + color: "#fff", + fontSize: 0.75 * vw + }, + }, + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [ + { + offset: 0, + color: "#C9C7ED", + }, + { + offset: 1, + color: "#fff", + }, + ]), + borderColor: "#fff", + shadowColor: "rgba(0, 0, 0, .5)", + }, + data: data.yData, + }, + { + type: "bar", + barWidth: '80%', + tooltip: { + show: false, + }, + itemStyle: { + normal: { + barBorderRadius: 50, + color: "#0B2F90", + opacity: 0.7, + label: { + show: false, + }, + shadowColor: "rgba(255, 255, 255, .1)", + shadowBlur: 0, + shadowOffsetY: 2, + shadowOffsetX: 2, + }, + }, + data: max, + }, + ], + }; + charts.setOption(option); + $(window).resize(charts.resize); +} + +// 冰山图 +const tipFigure = function (data, id) { + let charts = echarts.init(id); + data = { + xName: ['1月', '2月', '3月', '4月', '5月', '6月'], + yDataOne: [138, 124, 714, 442, 622, 528], + yDataOneName: '能耗', + yDataTwo: [138, 124, 714, 442, 622, 528], + yDataTwoName: '能耗', + }; + + let xAxisMonth = [], + barData = [], + lineData = []; + for (let i = 0; i < data.xName.length; i++) { + xAxisMonth.push(data.xName[i]); + barData.push({ + name: data.xName[i], + value: data.yDataOne[i], + }); + lineData.push({ + name: data.xName[i], + value: data.yDataTwo[i], + }); + } + + let option = { + backgroundColor: "rgba(0,0,0,0)", + title: "", + grid: { + top: "14%", + left: "1%", + bottom: "1%", + containLabel: true, + }, + tooltip: { + trigger: "axis", + axisPointer: { + type: "none", + }, + formatter: function (params) { + return ( + params[0]["data"].name + + "
" + + data.yDataOneName + ' ' + + params[1]["data"].value + + "
" + + data.yDataTwoName + ' ' + + params[0]["data"].value + ); + }, + }, + xAxis: [ + { + type: "category", + show: false, + data: ["3月", "4月", "5月", "6月", "7月", "8月"], + axisLabel: { + textStyle: { + color: "#b6b5ab", + }, + }, + }, + { + type: "category", + position: "bottom", + data: xAxisMonth, + boundaryGap: true, + // offset: 40, + axisTick: { + show: false, + }, + axisLine: { + // show: false, + }, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#727582', + width: 1, + } + }, + axisLabel: { + textStyle: { + color: "#b6b5ab", + }, + }, + }, + ], + yAxis: [ + { + show: true, + // offset: 22, + splitLine: { + show: true, + lineStyle: { + type: 'dashed', + color: '#727582', + width: 1, + } + }, + axisTick: { + show: false, + }, + axisLine: { + show: true, + }, + axisLabel: { + show: true, + color: "#b6b5ab", + }, + }, + { + show: false, + type: "value", + name: "合格率(%)", + nameTextStyle: { + color: "#ccc", + }, + axisLabel: { + color: "#ccc", + }, + splitLine: { + show: false, + }, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + }, + ], + color: ["#e54035"], + series: [ + { + name: data.yDataOneName, + type: "pictorialBar", + xAxisIndex: 1, + barCategoryGap: '-80%', + // barCategoryGap: '-5%', + symbol: 'path://d="M150 50 L130 130 L170 130 Z"', + itemStyle: { + normal: { + color: function (params) { + let colorList = [ + "rgba(13,177,205,0.3)", + "rgba(29,103,182,0.3)", + "rgba(13,177,205,0.3)", + "rgba(29,103,182,0.3)", + "rgba(13,177,205,0.3)", + "rgba(29,103,182,0.3)", + ]; + return colorList[params.dataIndex]; + }, + borderColor: 'rgba(255,255,255,0.5)', + borderWidth: 3 + }, + emphasis: { + opacity: 1, + }, + }, + data: barData, + }, + { + name: data.yDataTwoName, + symbolSize: 12, + type: "line", + yAxisIndex: 1, + data: lineData, + itemStyle: { + normal: { + borderWidth: 5, + color: { + colorStops: [ + { + offset: 0, + color: "#821eff", + }, + + { + offset: 1, + color: "#204fff", + }, + ], + }, + }, + }, + }, + ], + }; + charts.setOption(option); + $(window).resize(charts.resize); +} + +// 多个环形图 +const multipleRingDiagram = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = [ + {value: 10, name: "1月"}, + {value: 20, name: "2月"}, + {value: 40, name: "3月"}, + {value: 45, name: "4月"}, + {value: 10, name: "5月"}, + {value: 20, name: "6月"}, + {value: 40, name: "7月"}, + {value: 45, name: "8月"}, + {value: 10, name: "9月"}, + {value: 20, name: "10月"}, + {value: 40, name: "11月"}, + {value: 65, name: "12月"} + ]; + } + let option = { + backgroundColor: "rgba(0,0,0,0)", + polar: { + radius: ["10%", "90%"], + center: ['30%', '50%'], + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'line' + }, + }, + angleAxis: { + show: false, + clockwise: false, + // min: function(value) { + // return 5 + // }, + max: function (value) { + return value.max + 2; + }, + }, + radiusAxis: { + type: "category", + axisLabel: { + interval: 0, + color: "#fff", + fontSize: 0.25 * vw, + align: "left", + margin: "-2", + }, + axisLine: { + show: false, + }, + axisTick: { + show: false, + }, + splitLine: { + show: false, + }, + z: 20, + data: [...data.map((d) => d.name)], + }, + series: [ + { + type: "bar", + coordinateSystem: "polar", + barWidth: 4, + barGap: 10, + showBackground: true, + backgroundStyle: { + color: "rgba(255,255,255,0.3)", + }, + itemStyle: { + color: function (params) { + return new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: "#00BCFA", + }, + { + offset: 1, + color: "#01FE84", + }, + ]); + }, + }, + roundCap: true, + data: data, + }, + + ], + }; + charts.setOption(option); + $(window).resize(charts.resize); +} + +// 中国地图 +const ChinaMap = function (data, id, param = {type: undefined}) { + let charts = echarts.init(id); + $.getJSON('../../board/json/ChinaMapData.json', function (geoJson) { + geoJson.features.forEach((val, index) => { + val.properties.name = ''.padStart(index, ' ') + }) + echarts.registerMap("china", geoJson); + data = [ + {value: [118.8062, 31.9208], index: random(5), type: random(5), state: random(5)}, + {value: [127.9688, 45.368], index: random(5), type: random(5), state: random(5)}, + {value: [123.1238, 42.1216], index: random(5), type: random(5), state: random(5)}, + {value: [114.4995, 38.1006], index: random(5), type: random(5), state: random(5)}, + {value: [109.1162, 34.2004], index: random(5), type: random(5), state: random(5)}, + {value: [106.3586, 38.1775], index: random(5), type: random(5), state: random(5)}, + {value: [101.4038, 36.8207], index: random(5), type: random(5), state: random(5)}, + {value: [113.0823, 28.2568], index: random(5), type: random(5), state: random(5)}, + {value: [102.9199, 25.46639], index: random(5), type: random(5), state: random(5)}, + ] + if (param.type) { + console.log(param.type) + data.forEach(val => { + val.type = param.type + }) + } + charts.showLoading(); + echarts.registerMap("china", geoJson); + charts.hideLoading(); + let option = { + grid: { + top: '0%', + left: '0%', + right: '0%', + bottom: '0%', + }, + geo: { + map: "china", + aspectScale: 0.75, //长宽比 + zoom: 1.1, + roam: false, + itemStyle: { + normal: { + areaColor: { + type: "radial", + x: 0.5, + y: 0.5, + r: 0.8, + colorStops: [ + { + offset: 0, + color: "#013B8F", // 0% 处的颜色 + }, + { + offset: 1, + color: "#013B8F", // 100% 处的颜色 + }, + ], + globalCoord: true, // 缺省为 false + }, + shadowColor: "#013B8F", + shadowOffsetX: 0, + shadowOffsetY: 8, + }, + emphasis: { + areaColor: "#2AB8FF", + borderWidth: 0, + color: "green", + label: { + show: false, + }, + }, + }, + regions: [ + { + name: "南海诸岛", + label: { + // formatter:'南海诸岛', + // fontSize:750*vw, + }, + itemStyle: { + areaColor: "rgba(0, 10, 52, 1)", + borderColor: "rgba(0, 10, 52, 1)", + normal: { + opacity: 0, + label: { + show: false, + color: "#009cc9", + }, + }, + }, + }, + ], + }, + series: [ + { + type: "map", + roam: false, + label: { + normal: { + show: true, + textStyle: { + color: "#1DE9B6", + }, + }, + emphasis: { + textStyle: { + // color: "rgb(183,185,14)", + }, + }, + }, + + itemStyle: { + normal: { + borderColor: "rgb(147, 235, 248,0.5)", + borderWidth: 1, + areaColor: { + type: "radial", + x: 0.5, + y: 0.5, + r: 0.8, + colorStops: [ + { + offset: 0, + color: "#013B8F", // 0% 处的颜色 + }, + { + offset: 1, + color: "#013B8F", // 100% 处的颜色 + }, + ], + globalCoord: true, // 缺省为 false + }, + }, + emphasis: { + // areaColor: "rgb(46,229,206)", + // shadowColor: 'rgb(12,25,50)', + // borderWidth: 0.1, + }, + }, + zoom: 1.1, + // roam: false, + map: "china", //使用 + aspectScale: 0.75, //长宽比 + // data: this.difficultData //热力图数据 不同区域 不同的底色 + }, + // 地图标点 + { + type: "effectScatter", + coordinateSystem: "geo", + showEffectOn: 'emphasis', + zlevel: 1, + rippleEffect: { + period: 15, + scale: 1, + brushType: "fill", + }, + hoverAnimation: true, + // label: { + // normal: { + // formatter: "{b}", + // position: "right", + // offset: [15, 0], + // color: "#1DE9B6", + // show: true, + // }, + // }, + itemStyle: { + normal: { + color: "#1DE9B6", + shadowBlur: 10, + shadowColor: "#333", + }, + }, + symbol: function (value, data) { + // 修改图片为'image://+地址' + switch (data.data.type) { + case 1: + return `image://../../img/mapIcon/hydrogenRefuelingStation${data.data.state}.png` + case 2: + return `image://../../img/mapIcon/hydrogenPowerStation${data.data.state}.png` + case 3: + return `image://../../img/mapIcon/oilHydrogenPowerStation${data.data.state}.png` + case 4: + return `image://../../img/mapIcon/oilHydrogenStation${data.data.state}.png` + case 5: + return `image://../../img/mapIcon/hydrogenRefuelingStation${data.data.state}.png` + } + }, + symbolSize: [2.5 * vw, 2.5 * vw], + data: data, + label: { + padding: [-16, 0, 0, 5], + show: true, + position: 'bottom', + // align:'left', + formatter: function (val) { + switch (val.data.type) { + case 1: + return [`{a|}{b|'加氢站${val.data.index}}`] + case 2: + return [`{a|}{b|光伏站${val.data.index}}`] + case 3: + return [`{a|}{b|充装站${val.data.index}}`] + case 4: + return [`{a|}{b|制氢站${val.data.index}}`] + case 5: + return [`{a|}{b|能源站${val.data.index}}`] + } + }, + rich: { + a: { + width: 0.34 * vw, + height: 0.34 * vw, + borderColor: '#0FF32E', + borderWidth: 0.34 * vw, + borderRadius: 0.17 * vw, + shadowBlur: 20, + shadowColor: "#0FF32E", + }, + b: { + padding: [0, 0, 0, 5], + color: '#0FF32E', + height: 40, + fontSize: 0.75 * vw, + }, + } + } + }, + ], + }; + charts.on('click', function (params) { + if (params.componentSubType === "effectScatter") { + console.log(params.data) + window.open(`http://121.36.58.109:8011/board/managementPlatformTwo?id=${params.data.type}`); + + // window.open(`${location.protocol}${location.protocol ? '//' : ''}${location.host}/board/managementPlatformTwo?index=${params.data.index}`); + } + }); + charts.setOption(option, true); + $(window).resize(charts.resize); + }) + +} + +// 地图补充 +const mapSupplement = (el, data) => { + const htmlData = ` +
+
+运行中 +7个/11% +
+
+
+预警 +7个/22% +
+
+
+检修中 +7个/33% +
+
+
+建设中 +7个/44% +
+
+
+计划中 +7个/55% +
+` + $(el).html(htmlData) +} diff --git a/ruoyi-admin/src/main/resources/templates/broad/beforeLibrary.html b/ruoyi-admin/src/main/resources/templates/broad/beforeLibrary.html new file mode 100644 index 0000000..ab5f3a8 --- /dev/null +++ b/ruoyi-admin/src/main/resources/templates/broad/beforeLibrary.html @@ -0,0 +1,49 @@ + + + + + + 箱壳成型数据监控平台 + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + +
+ + +
+ + +
+ + + + + \ No newline at end of file diff --git a/ruoyi-admin/src/main/resources/templates/broad/finalAssemblyProductionData.html b/ruoyi-admin/src/main/resources/templates/broad/finalAssemblyProductionData.html new file mode 100644 index 0000000..76b63a4 --- /dev/null +++ b/ruoyi-admin/src/main/resources/templates/broad/finalAssemblyProductionData.html @@ -0,0 +1,49 @@ + + + + + + 箱壳成型数据监控平台 + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + +
+ + +
+ + +
+ + + + +