From 937ae79a37b4855307ae3d17c7c915c58ad75e94 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com> Date: Mon, 25 Jul 2022 15:40:04 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=95=8C=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../main/resources/static/js/echartsCommon.js | 92 +++++++++++++------ 1 file changed, 65 insertions(+), 27 deletions(-) diff --git a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js index a6ef26f..e4ca637 100644 --- a/ruoyi-admin/src/main/resources/static/js/echartsCommon.js +++ b/ruoyi-admin/src/main/resources/static/js/echartsCommon.js @@ -1,6 +1,8 @@ const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100 -let time1 =() =>{} -let time2 =() =>{} +let time1 = () => { +} +let time2 = () => { +} // 随机数 const random = (val = 1) => { return Math.ceil(Math.random() * val) @@ -146,7 +148,7 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) { yNameOne: ["设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001", "设备000000001"], yData: [41, 99, 32, 41, 24, 4, 16, 64, 18], xDataName: "达成率", - status:[1,1,1,1,1,1,1,1,1] + status: [1, 1, 1, 1, 1, 1, 1, 1, 1] } } let myColor = ["green", "red", "yellow", "blue", "#8B78F6"]; @@ -184,9 +186,9 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) { axisLabel: { color: "#fff", // margin:150, - fontSize:0.75 * vw, + fontSize: 0.75 * vw, textStyle: { - textAlign:'center' + textAlign: 'center' }, }, }, @@ -202,7 +204,6 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) { normal: { barBorderRadius: 30, color: function (params) { - console.log(data.status[params.dataIndex]) return myColor[data.status[params.dataIndex]]; }, }, @@ -255,18 +256,18 @@ const horizontalRoundedBarChartWithBackgroundTwo = function (data, id) { let step = 1 / (data.yNameOne.length / 9) * 100 time1 = setInterval(() => { - option.dataZoom[0].end += step - option.dataZoom[0].start += step - if (option.dataZoom[0].start >= 100) { - option.dataZoom[0].start = 0 - option.dataZoom[0].end = step - } - if (option.dataZoom[0].end >= 100) { - option.dataZoom[0].end = 100 - option.dataZoom[0].start = option.dataZoom[0].end - step - } - charts.setOption(option); - }, 6000) + option.dataZoom[0].end += step + option.dataZoom[0].start += step + if (option.dataZoom[0].start >= 100) { + option.dataZoom[0].start = 0 + option.dataZoom[0].end = step + } + if (option.dataZoom[0].end >= 100) { + option.dataZoom[0].end = 100 + option.dataZoom[0].start = option.dataZoom[0].end - step + } + charts.setOption(option); + }, 6000) // time() } charts.setOption(option); @@ -1513,7 +1514,7 @@ const multipleVerticalBarChartTwo = function (data, id) { } // 单个垂直柱状图 -const singleVerticalBarChart = function (data, id, rotate = 0,bottom='15%') { +const singleVerticalBarChart = function (data, id, rotate = 0, bottom = '15%') { let charts = echarts.init(id); if (!data) { data = { @@ -1543,8 +1544,8 @@ const singleVerticalBarChart = function (data, id, rotate = 0,bottom='15%') { }, axisLabel: { color: "#fff", - fontSize: 14, - interval:0, + fontSize: 0.5 * vw, + interval: 0, rotate: rotate, }, }, @@ -1623,6 +1624,7 @@ const singleVerticalBarChartTwo = function (data, id) { yImg: ['', '', '', '', '', '', '', ''], } } + let bottom = data.yData.map(val => 1) let option = { backgroundColor: 'rgba(0,0,0,0)', color: ['#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe'], @@ -1633,7 +1635,7 @@ const singleVerticalBarChartTwo = function (data, id) { }, dataZoom: [], xAxis: { - margin:10, + margin: 10, nameTextStyle: { color: '#c0c3cd', padding: [0, 0, -10, 0], @@ -1643,7 +1645,7 @@ const singleVerticalBarChartTwo = function (data, id) { color: '#c0c3cd', //X轴文字 fontSize: 14, interval: 0, - margin:20, + margin: 20, rotate: -20, }, axisTick: { @@ -1707,7 +1709,19 @@ const singleVerticalBarChartTwo = function (data, id) { type: 'bar', barMaxWidth: 'auto', barWidth: 1.5 * vw, - label:{ + itemStyle: { + color: function (val) { + if (data.yData.length - val.dataIndex === 1) { + return 'red' + } else if (data.yData.length - val.dataIndex === 2) { + return 'yellow' + + } else { + return '#35AAFE' + } + } + }, + label: { normal: { show: true, position: "top", @@ -1726,18 +1740,42 @@ const singleVerticalBarChartTwo = function (data, id) { barMaxWidth: vw, symbolPosition: 'end', symbol: 'diamond', - color: '#66c8ff', + itemStyle: { + color: function (val) { + console.log(val) + if (data.yData.length - val.dataIndex === 1) { + return 'red' + } else if (data.yData.length - val.dataIndex === 2) { + return 'yellow' + + } else { + return '#66c8ff' + } + } + }, symbolOffset: ['25%', '-50%'], symbolSize: [1.5 * vw, 10], zlevel: 4, }, { - data: [1, 1, 1, 1, 1, 1, 1, 1], + data: bottom, type: 'pictorialBar', barMaxWidth: vw, symbolPosition: 'end', symbol: 'diamond', - color: '#66c8ff', + itemStyle: { + color: function (val) { + console.log(val) + if (data.yData.length - val.dataIndex === 1) { + return 'red' + } else if (data.yData.length - val.dataIndex === 2) { + return 'yellow' + + } else { + return '#66c8ff' + } + } + }, symbolOffset: ['25%', '-20%'], symbolSize: [1.5 * vw, 10], zlevel: 4,