【update】-大屏-iso\wp29横坐标倾斜

src/views/dashboard/screen/iso/ExpertChart.vue

@@ -66,7 +66,8 @@ export default {
         tooltip: {
           formatter: params => {
             // 获取xAxis data中的数据
-            let dataStr = `<div style="color:#333;margin-left: 8px;font-size: 14px;margin-bottom: 10px;">${tooltipTitle}</div>`
+            let dataStr = `<div style="color:#333;margin-left: 8px;font-size: 14px;">${tooltipTitle}</div>`
+            dataStr += `<div style="color:#333;margin-left: 8px;font-size: 14px;margin-bottom: 10px;">${params[0].name}</div>`
             params.forEach(item => {
               let color = ''
               if(typeof item.color === 'string') {
@@ -102,36 +103,45 @@ export default {
         },
         xAxis: {
           axisLabel: {
+            rotate: -10,
+            align: 'center',
+            verticalAlign : 'top',
+            margin: 12,
             formatter: function(params) {
-              let newParamsName = '' // 最终拼接成的字符串
+              if (params.length > 8) {
-              let paramsNameNumber = params.length // 实际标签的个数
+                return `${params.slice(0, 8)}...`
-              let provideNumber = 6 // 每行能显示的字的个数
-              let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
-              /**
-               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
-               */
-              // 条件等同于rowNumber>1
-              if (paramsNameNumber > provideNumber) {
-                /** 循环每一行,p表示行 */
-                for (let p = 0; p < rowNumber; p++) {
-                  let tempStr = ''// 表示每一次截取的字符串
-                  let start = p * provideNumber // 开始截取的位置
-                  let end = start + provideNumber // 结束截取的位置
-                  // 此处特殊处理最后一行的索引值
-                  if (p === rowNumber - 1) {
-                    // 最后一次不换行
-                    tempStr = params.substring(start, paramsNameNumber)
-                  } else {
-                    // 每一次拼接字符串并换行
-                    tempStr = params.substring(start, end) + '\n'
-                  }
-                  newParamsName += tempStr // 最终拼成的字符串
-                }
               } else {
-                // 将旧标签的值赋给新标签
+                return params
-                newParamsName = params
               }
-              return newParamsName
+              // let newParamsName = '' // 最终拼接成的字符串
+              // let paramsNameNumber = params.length // 实际标签的个数
+              // let provideNumber = 6 // 每行能显示的字的个数
+              // let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话，需要显示几行，向上取整
+              // /**
+              //  * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
+              //  */
+              // // 条件等同于rowNumber>1
+              // if (paramsNameNumber > provideNumber) {
+              //   /** 循环每一行,p表示行 */
+              //   for (let p = 0; p < rowNumber; p++) {
+              //     let tempStr = ''// 表示每一次截取的字符串
+              //     let start = p * provideNumber // 开始截取的位置
+              //     let end = start + provideNumber // 结束截取的位置
+              //     // 此处特殊处理最后一行的索引值
+              //     if (p === rowNumber - 1) {
+              //       // 最后一次不换行
+              //       tempStr = params.substring(start, paramsNameNumber)
+              //     } else {
+              //       // 每一次拼接字符串并换行
+              //       tempStr = params.substring(start, end) + '\n'
+              //     }
+              //     newParamsName += tempStr // 最终拼成的字符串
+              //   }
+              // } else {
+              //   // 将旧标签的值赋给新标签
+              //   newParamsName = params
+              // }
+              // return newParamsName
             }
           },
           data: xData,

src/views/dashboard/screen/iso/LeadingStandardChart.vue

@@ -72,6 +72,19 @@ export default {
           top : '20'
         },
         xAxis: {
+          axisLabel: {
+            rotate: -10,
+            align: 'center',
+            verticalAlign : 'top',
+            margin: 12,
+            formatter: (params) => {
+              if (params.length > 8) {
+                return `${params.slice(0, 8)}...`
+              } else {
+                return params
+              }
+            }
+          },
           data: xData
         },
         series: [

src/views/dashboard/screen/iso/MeetingInformationChart.vue

@@ -233,7 +233,8 @@ export default {
         tooltip: {
           formatter: params => {
             // 获取xAxis data中的数据
-            let dataStr = `<div style="color:#333;margin-left: 8px;font-size: 14px;margin-bottom: 10px;">${tooltipTitle}</div>`
+            let dataStr = `<div style="color:#333;margin-left: 8px;font-size: 14px;">${tooltipTitle}</div>
+            <div style="color:#333;margin-left: 8px;font-size: 14px;margin-bottom: 10px;">${params[0].name}</div>`
             params.forEach(item => {
               let color = ''
               if(typeof item.color === 'string') {
@@ -268,6 +269,19 @@ export default {
           }
         },
         xAxis: {
+          axisLabel: {
+            rotate: -10,
+            align: 'center',
+            verticalAlign : 'top',
+            margin: 12,
+            formatter: (params) => {
+              if (params.length > 8) {
+                return `${params.slice(0, 8)}...`
+              } else {
+                return params
+              }
+            }
+          },
           data: xData
         },
         series: [

src/views/dashboard/screen/wp29/MeetingInformationChart.vue

@@ -257,7 +257,8 @@ export default {
         tooltip: {
           formatter: params => {
             // 获取xAxis data中的数据
-            let dataStr = `<div style="color:#333;margin-left: 8px;font-size: 14px;margin-bottom: 10px;">${tooltipTitle}</div>`
+            let dataStr = `<div style="color:#333;margin-left: 8px;font-size: 14px;">${tooltipTitle}</div>`
+            dataStr += `<div style="color:#333;margin-left: 8px;font-size: 14px;margin-bottom: 10px;">${params[0].name}</div>`
             params.forEach(item => {
               let color = ''
               if(typeof item.color === 'string') {

src/views/dashboard/screen/wp29/RegulationQuantityChart.vue

@@ -93,6 +93,19 @@ export default {
           }
         },
         xAxis: {
+          axisLabel: {
+            rotate: -10,
+            align: 'center',
+            verticalAlign : 'top',
+            margin: 12,
+            formatter: function(params) {
+              if (params.length > 8) {
+                return `${params.slice(0, 8)}...`
+              } else {
+                return params
+              }
+            }
+          },
           data: this.xAxisData
         },
         series: [