Merge remote-tracking branch 'gitee/master'

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,