diff --git a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/broad/AllBroadHTMLController.java b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/broad/AllBroadHTMLController.java index 7b814e8..9c98d99 100644 --- a/ruoyi-admin/src/main/java/com/ruoyi/web/controller/broad/AllBroadHTMLController.java +++ b/ruoyi-admin/src/main/java/com/ruoyi/web/controller/broad/AllBroadHTMLController.java @@ -48,5 +48,10 @@ public class AllBroadHTMLController { return "broad/finalAssemblyProductionData"; } + @GetMapping("/orderVisualization") + public String orderVisualization() { + return "broad/orderVisualization"; + } + } diff --git a/ruoyi-admin/src/main/resources/static/css/board/orderVisualization.css b/ruoyi-admin/src/main/resources/static/css/board/orderVisualization.css new file mode 100644 index 0000000..2bdc458 --- /dev/null +++ b/ruoyi-admin/src/main/resources/static/css/board/orderVisualization.css @@ -0,0 +1,75 @@ +body { + height: auto; + width: auto; + background: url(../../img/board/orderVisualization/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; +} + +.manpowerAttendance{ + position: absolute; + width: 25%; + height: 35%; + top: 15%; + left: 3.5%; +} +.IQCOne{ + position: absolute; + width: 20%; + height: 15%; + top: 15%; + left: 30%; +} +.IQCTwo{ + position: absolute; + width: 13%; + height: 15%; + top: 15%; + left: 50%; +} +.IQCThree{ + position: absolute; + width: 7%; + height: 15%; + top: 15%; + left: 63%; +} +.IQCFour{ + position: absolute; + width: 40%; + height: 20%; + top: 30%; + left: 30%; +} +.productionEfficiency{ + position: absolute; + width: 25%; + height: 35%; + top: 15%; + left: 71.7%; +} +.mainData{ + position: absolute; + width: 25%; + height: 35%; + top: 59%; + left: 3.7%; +} +.equipmentPowerOne{ + position: absolute; + width: 20%; + height: 19%; + top: 76%; + left: 30.5%; +} +.equipmentPowerTwo{ + position: absolute; + width: 20%; + height: 19%; + top: 76%; + left: 50.5%; +} \ No newline at end of file diff --git a/ruoyi-admin/src/main/resources/static/img/board/orderVisualization/backgroundImg.jpg b/ruoyi-admin/src/main/resources/static/img/board/orderVisualization/backgroundImg.jpg new file mode 100644 index 0000000..af68f23 Binary files /dev/null and b/ruoyi-admin/src/main/resources/static/img/board/orderVisualization/backgroundImg.jpg differ diff --git a/ruoyi-admin/src/main/resources/static/js/board/orderVisualization.js b/ruoyi-admin/src/main/resources/static/js/board/orderVisualization.js new file mode 100644 index 0000000..e723f6b --- /dev/null +++ b/ruoyi-admin/src/main/resources/static/js/board/orderVisualization.js @@ -0,0 +1,93 @@ +$(() => { + moduleTitle() + safe() + card({top: 60, left: 30.5}) + card({top: 60, left: 38.5}) + card({top: 60, left: 46.5}) + card({top: 60, left: 54.5}) + card({top: 60, left: 62.5}) + // 公共请求地址 + let url = '/broad/beforeLibrary' + + // 轮询间隔时间 + const INTERVAL = 30000 + + // IQC3 + const IQCTwo = new AutoScrollTable(document.getElementById("IQCTwo"), ["编号", "计划数量", "完成数量", "差异值", "时间"], {width: ['30%', null, null, null, '17%']}) + + //每日人力出勤轮询 + // autoUpdate(url + "/ ", INTERVAL, data => { + singleVerticalBarChartTwo(null, document.getElementById("manpowerAttendance")) + // }) + + // IQC + multipleVerticalBarChartTwo(null, document.getElementById("IQCOne")) + IQCTwo.loadData([[1, 2, 3, 4, 5], [1, 2, 3, 4, 5], [1, 2, 3, 4, 5], [1, 2, 3, 4, 5]], Object.keys(["编号", "计划数量", "完成数量", "差异值", "时间"])) + hollowPieChart(null, document.getElementById("IQCThree")) + barChartAndLineChartTwo(null, document.getElementById("IQCFour")) + + // 设备功率 + singleVerticalBarChart(null, document.getElementById("equipmentPowerOne")) + singleVerticalBarChart(null, document.getElementById("equipmentPowerTwo")) + + // 生产效率 + // autoUpdate(url + "/ ", INTERVAL, data => { + horizontalRoundedBarChartWithBackgroundTwo(null, document.getElementById("productionEfficiency")) + // }) + // 主体数据 + percentageRingDiagram(null, document.getElementById("mainData")) + +}) +const moduleTitle = () => { + const html = ` + 订单可视化、6S 及安全生产看板 + 每日人力出勤 + IQC检测明细 + 碱生产效率 + 成品入库统计 + 设备功率 + 安全生产 + ` + $('body').append(html) +} +const safe = () => { + const html = ` + 1809天 + QSR连续安全生产天数 + ` + $('body').append(html) +} +const card = (val = {top: 1, left: 1}) => { + const html = ` +
+
+ KTTX-1 +
+
+ + 项目名称111: + + + 值111 + +
+
+ + 项目名称111: + + + 值111 + +
+
+ + 项目名称111: + + + 值111 + +
+
+ ` + $('body').append(html) +} \ No newline at end of file diff --git a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js index 731c0c5..dc088c6 100644 --- a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js +++ b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js @@ -137,6 +137,125 @@ const horizontalRoundedBarChartWithBackground = function (data, id) { charts.setOption(option); $(window).resize(charts.resize); } +const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = { + yNameOne: ["设备001", "设备001", "设备001", "设备001", "设备001", "设备001", "设备001", "设备001", "设备001"], + yData: [41, 99, 32, 41, 24,4,16,64,18], + xDataName: "达成率", + } + } + let myColor = ["#1089E7", "#F57474", "#56D0E3", "#F8B448", "#8B78F6"]; + let bgBar = [] + data.yData.forEach(() => { + bgBar.push(100) + }) + let option = { + grid: { + left: "0%", + right: "12%", + bottom: "0%", + top: "0%", + containLabel: true, + }, + xAxis: { + show: false, + }, + yAxis: [ + { + show: true, + data: data.yNameOne, + inverse: true, + axisLine: { + show: false, + }, + splitLine: { + show: false, + }, + axisTick: { + show: false, + }, + axisLabel: { + color: "#fff", + }, + }, + { + show: true, + inverse: true, + data: data.yData, + axisLabel: { + textStyle: { + fontSize: 12, + color: "#fff", + + }, + formatter: '{value}%' + }, + axisLine: { + show: false, + }, + splitLine: { + show: false, + }, + axisTick: { + show: false, + }, + }, + ], + series: [ + { + name: "条", + type: "bar", + yAxisIndex: 0, + data: data.yData, + barWidth: vw, + itemStyle: { + normal: { + barBorderRadius: 30, + color: function (params) { + var num = myColor.length; + return myColor[params.dataIndex % num]; + }, + }, + }, + }, + { + name: "框", + type: "bar", + yAxisIndex: 1, + barGap: "-100%", + data: bgBar, + barWidth: 1.2 * vw, + itemStyle: { + normal: { + color: "none", + borderColor: "#00c1de", + borderWidth: 1, + barBorderRadius: 15, + }, + }, + }, + ], + }; + + // 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) { @@ -304,7 +423,7 @@ const barChartAndLineChart = function (data, id) { shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 }, }, - // data: data.yDataOne || [], + data: data.yDataOne || [], }, { name: data.yDataTwoName, @@ -340,6 +459,135 @@ const barChartAndLineChart = function (data, id) { charts.setOption(option); $(window).resize(charts.resize); } +const barChartAndLineChartTwo = function (data, id) { + let charts = echarts.init(id); + if (!data) { + data = { + xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], + yDataOne: [61, 25, 57, 83, 87, 73, 17,25, 57, 83, 87, 73], + yDataOneName: "百分比", + yDataTwo: [382, 102, 186, 200, 102, 186, 315,255, 527, 837, 587, 173], + yDataTwoName: "成品数量", + } + } + let option = { + grid: { + top: "15%", + left: "1%", + right: "1%", + bottom: "2%", + containLabel: true, + }, + tooltip: { + trigger: 'axis', + axisPointer: { + type: 'cross', + crossStyle: { + color: '#999', + }, + label:{ + fontSize:0.5*vw, + } + }, + textStyle:{ + fontSize:0.5*vw, + } + }, + legend: { + data: [data.yDataOneName, data.yDataTwoName], + textStyle: { + color: "#d1e6eb", + margin: 15, + fontSize: 0.75 * vw + }, + }, + xAxis: [ + { + axisLabel: { + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#d1e6eb", + margin: 15, + fontSize: 0.75 * vw + }, + }, + type: 'category', + data:data.xName, + axisPointer: { + type: 'shadow' + } + } + ], + yAxis: [ + { + type: 'value', + splitLine: { + lineStyle: { + color: "rgba(255,255,255,0.1)", + }, + }, + axisLabel: { + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#d1e6eb", + margin: 15, + fontSize: 0.75 * vw + }, + formatter: '{value} %' + } + }, + { + type: 'value', + splitLine: { + show: false, + }, + axisLabel: { + //坐标轴刻度标签的相关设置 + textStyle: { + color: "#d1e6eb", + margin: 15, + fontSize: 0.75 * vw + }, + formatter: '{value} ' + } + } + ], + series: [ + { + name: data.yDataOneName, + type: 'bar', + data: data.yDataOne, + label: { + show: true, + position: ['10%', `50%`], + textStyle: { + color: "rgba(255,255,255,0.5)", + fontSize: 0.75 * vw + }, + }, + itemStyle: { + normal: { + color: '#0BB5FB', + }, + }, + }, + { + name: data.yDataTwoName, + type: 'line', + yAxisIndex: 1, + data: data.yDataTwo, + itemStyle: { + normal: { + color: '#0DB99D', + }, + }, + } + ] + }; + + charts.setOption(option); + $(window).resize(charts.resize); +} // 饼图 const pieChart = function (data, id) { @@ -533,1224 +781,6 @@ const verticalBarChart = function (data, id) { } -// 水平圆角柱状图 -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); @@ -1854,7 +884,7 @@ const multipleVerticalBarChart = function (data, id) { yAxis: { type: "value", splitNumber: 5, - max: Math.max(...data.yDataOne,...data.yDataTwo) + 5, + max: Math.max(...data.yDataOne, ...data.yDataTwo) + 5, axisLabel: { show: true, color: '#fff' @@ -2018,166 +1048,108 @@ const multipleVerticalBarChartTwo = function (data, id) { data = { xName: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'], yDataOne: [22, 52, 55, 12, 35, 44, 66], - yDataOneName: '平均制氢速度', + yDataOneName: 'a1', yDataTwo: [32, 42, 50, 22, 30, 40, 52], - yDataTwoName: "能耗比", + yDataTwoName: "a2", } } let option = { - legend: { - data: ['平均制氢速度', '能耗比'], - textStyle: {color: 'white'}, - selectedMode: false, - }, - backgroundColor: 'rgba(0,0,0,0)', grid: { - top: '20%', - left: '5%', - bottom: '5%', - right: '5%', + top: "20%", + left: "1%", + right: "1%", + bottom: "1%", containLabel: true, }, tooltip: { - trigger: 'item', + trigger: 'axis', + axisPointer: { + type: 'shadow' + } + }, + legend: { + data: [data.yDataOneName, data.yDataTwoName], + textStyle: { + fontSize: 0.75 * vw, + color: "#F1F1F3", + }, }, - animation: false, xAxis: [ { type: 'category', - data: data.xName, - axisTick: { - alignWithLabel: true, - }, - axisLine: { - show: false, - }, + axisTick: {show: false}, axisLabel: { textStyle: { - color: '#ddd', + fontSize: 0.75 * vw, + color: "#F1F1F3", }, - margin: 10, }, - interval: 1, - }, + data: data.xName + } ], 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", + textStyle: { + fontSize: 0.75 * vw, + color: "#F1F1F3", + }, }, splitLine: { - show: false, + lineStyle: { + color: "rgba(255,255,255,0.1)", + }, }, - axisLine: { - show: false, - }, - axisTick: { - show: false, - }, - }, + type: 'value' + } ], 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', - }, - ]), - }, + barGap: 0, + emphasis: { + focus: 'series' }, - data: data.yDataOne, - }, - { - name: data.yDataTwoName, - type: "line", - // smooth: true, //是否平滑曲线显示 - // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆 - showAllSymbol: true, - symbol: "emptyCircle", - symbolSize: 6, - yAxisIndex: 1, - zlevel: 2, - lineStyle: { + itemStyle: { + //图形样式 normal: { - color: "#28ffb3", // 线条颜色 + color: "#1FEDCA", }, - borderColor: "#f0f", }, label: { show: true, position: "top", textStyle: { - color: "#fff", + color: "rgba(255,255,255,0.5)", + fontSize: 0.75 * vw + }, + }, + data: data.yDataOne + }, + { + name: data.yDataTwoName, + type: 'bar', + emphasis: { + focus: 'series' + }, + label: { + show: true, + position: "top", + textStyle: { + color: "rgba(255,255,255,0.5)", + fontSize: 0.75 * vw }, }, itemStyle: { + //图形样式 normal: { - color: "#28ffb3", + color: "#E65454", }, }, - data: data.yDataTwo, + data: data.yDataTwo }, - ], + ] }; if (data?.length >= 3) { @@ -2197,1122 +1169,6 @@ const multipleVerticalBarChartTwo = function (data, id) { $(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); @@ -3404,159 +1260,6 @@ const singleVerticalBarChart = function (data, id) { } 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时'], @@ -3647,8 +1350,18 @@ const singleVerticalBarChartThree = function (data, id) { label: { show: true, position: 'top', - distance: 10, + // distance: 10, color: '#fff', + formatter: '{a|}', + rich: { + a: { + width: 3 * vw, + height: 3 * vw, + backgroundColor: { + image: '../../img/board/intelligentRefrigeratorInterconnectionFactory/btnOneClick.png' + }, + }, + } }, }, { @@ -3680,240 +1393,6 @@ const singleVerticalBarChartThree = function (data, id) { $(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); @@ -4158,60 +1637,43 @@ const hollowPieChart = function (data, id) { data = [ { value: 10, - name: "加氢站1", + name: "IQC1", }, { value: 5, - name: "加氢站2", + name: "IQC2", }, { value: 15, - name: "加氢站3", + name: "IQC3", }, { value: 25, - name: "加氢站4", + name: "IQC4", }, { value: 20, - name: "加氢站5", + name: "IQC5", }, { value: 35, - name: "加氢站6", + name: "IQC6", }, ] } let option = { color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E", "#3DD1F9", "#FFAD05"], grid: { - left: -100, - top: 50, - bottom: 10, - right: 10, + left: '-10%', + top: '10%', + 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, @@ -4220,134 +1682,39 @@ const hollowPieChart = function (data, id) { z: 10, axisLine: { show: false, - lineStyle: { - color: "#0B4A6B", - width: 1, - type: "solid", - }, }, axisLabel: { - interval: 0, - show: true, - color: "#0B4A6B", - margin: 8, - fontSize: 16, - }, + show: false, + } }, radiusAxis: { - // min: 40, - // max: 120, - // interval: 20, + 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, + }, + axisTick: { + show: false, }, splitLine: { - lineStyle: { - color: "#0B3E5E", - width: 2, - type: "solid", - }, + show: false, }, }, - calculable: true, + // 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", + radius: ["20%", "80%"], 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, - }, + show: false }, + // roseType: "area", data: data, }, ], @@ -4357,1443 +1724,132 @@ const hollowPieChart = function (data, id) { $(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) { +const percentageRingDiagram = 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月"} + { + name: "数据1", + value: 54, + }, + { + name: "数据1", + value: 44, + }, + { + name: "数据1", + value: 35, + }, + { + name: "数据1", + value: 30, + }, + { + name: "数据1", + value: 44, + }, + { + name: "数据1", + value: 35, + }, + { + name: "数据1", + value: 30, + }, ]; } - 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%', + let titleArr = [], + seriesArr = []; + let colors = [ + ["#389af4", "#dfeaff"], + ["#ff8c37", "#ffdcc3"], + ["#ffc257", "#ffedcc"], + ["#fd6f97", "#fed4e0"], + ["#a181fc", "#e3d9fe"], + ["#389af4", "#dfeaff"], + ["#ff8c37", "#ffdcc3"], + ["#ffc257", "#ffedcc"], + ["#fd6f97", "#fed4e0"], + ]; + data.forEach(function (item, index) { + titleArr.push({ + text: item.name, + x: index > 3 ? (index - 4) * 25 + 10 + "%" : index * 25 + 10 + "%", + y: index > 3 ? "90%" : "40%", + // top: '65%', + textAlign: "center", + textStyle: { + fontWeight: "normal", + fontSize: 0.8*vw, + color: colors[index][0], + textAlign: "center", }, - 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, + }); + seriesArr.push({ + // name: item.name, + type: "pie", + clockWise: false, + radius: [2*vw, 2.5*vw], + itemStyle: { + normal: { + color: colors[index][0], + shadowColor: colors[index][0], + shadowBlur: 0, + label: { + show: false, }, - emphasis: { - areaColor: "#2AB8FF", - borderWidth: 0, - color: "green", - label: { - show: false, - }, + labelLine: { + 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: [ + hoverAnimation: false, + center: [ + index > 3 ? (index - 4) * 25 + 10 + "%" : index * 25 + 10 + "%", + index > 3 ? "75%" : "25%", + ], + data: [ { - type: "map", - roam: false, + value: item.value, label: { normal: { + formatter: function (params) { + return params.value + "%"; + }, + position: "center", show: true, textStyle: { - color: "#1DE9B6", - }, - }, - emphasis: { - textStyle: { - // color: "rgb(183,185,14)", + fontSize: vw, + fontWeight: "bold", + color: colors[index][0], }, }, }, - - 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, - // }, - // }, + value: 100 - item.value, + name: "invisible", itemStyle: { normal: { - color: "#1DE9B6", - shadowBlur: 10, - shadowColor: "#333", + color: colors[index][1], + }, + emphasis: { + color: colors[index][1], }, }, - 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); - }) + }); -} + let option = { + title: titleArr, + series: seriesArr, + }; -// 地图补充 -const mapSupplement = (el, data) => { - const htmlData = ` -
-
-运行中 -7个/11% -
-
-
-预警 -7个/22% -
-
-
-检修中 -7个/33% -
-
-
-建设中 -7个/44% -
-
-
-计划中 -7个/55% -
-` - $(el).html(htmlData) -} + + charts.setOption(option); + $(window).resize(charts.resize); +} \ No newline at end of file diff --git a/ruoyi-admin/src/main/resources/templates/broad/box.html b/ruoyi-admin/src/main/resources/templates/broad/box.html index 99a11c1..3c0cb08 100644 --- a/ruoyi-admin/src/main/resources/templates/broad/box.html +++ b/ruoyi-admin/src/main/resources/templates/broad/box.html @@ -355,7 +355,7 @@ const planWorkOrderColumns = [ "序号", "型号","计划数量", "完成数量", "完成率", "时间", ] - const planWorkOrderTable = new AutoScrollTable(document.getElementById("plan-work-order"), planWorkOrderColumns, {width: ['10%','30%', '13%', '13%', '13%', '20%']}) + const planWorkOrderTable = new AutoScrollTable(document.getElementById("plan-work-order"), planWorkOrderColumns, {width: ['10%','35%', '12%', '12%', '11%', '20%']}) // const planTable = new AutoScrollTable(document.getElementById("plan-table"), [], { // width: ['15%', '5%', null, null, null, null, null, null, null, null, null, null, null, null, null, null, "5%", "5%", "5%"], // caption: "生产计划统计", @@ -390,7 +390,7 @@ let url = '/broad/box' //生产计划工单 autoUpdate(url+"/getProductPlanInfo ", INTERVAL, data => { - planWorkOrderTable.loadData(data.map((value,index) => [index+1,value.name, value.plan_number, value.actual_number, value.rate, value.day]), Object.keys(planWorkOrderColumns)) + planWorkOrderTable.loadData(data.map((value,index) => [index+1,value.name, value.plan_number, value.actual_number, `${value.rate}%`, value.day]), Object.keys(planWorkOrderColumns)) }) autoUpdate(url + '/selectStock/S001', INTERVAL, data => { diff --git a/ruoyi-admin/src/main/resources/templates/broad/orderVisualization.html b/ruoyi-admin/src/main/resources/templates/broad/orderVisualization.html new file mode 100644 index 0000000..bad1f26 --- /dev/null +++ b/ruoyi-admin/src/main/resources/templates/broad/orderVisualization.html @@ -0,0 +1,52 @@ + + + + + + 箱壳成型数据监控平台 + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+
+
+ + +
+ + +
+ + +
+
+ + + + \ No newline at end of file