【update】-iso\wp27 首页图表的修改

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

@@ -60,14 +60,17 @@ export default {
      */
     initChart(data) {
       let xData = data[0].xAxis
+      let xDataName = data[0]? data[0].departNameCn : []
       let tooltipTitle = new Date().getFullYear() + '年'
       let option = {
         color: ['#069F99', '#18E0AB'],
         tooltip: {
           formatter: params => {
+            let index = params[0].dataIndex
+            const showLabelName = xDataName[index]
             // 获取xAxis data中的数据
             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>`
+            dataStr += `<div style="color:#333;margin-left: 8px;font-size: 14px;margin-bottom: 10px;">${showLabelName}</div>`
             params.forEach(item => {
               let color = ''
               if(typeof item.color === 'string') {
@@ -103,45 +106,36 @@ export default {
         },
         xAxis: {
           axisLabel: {
-            rotate: -10,
-            align: 'center',
-            verticalAlign : 'top',
-            margin: 12,
             formatter: function(params) {
-              if (params.length > 8) {
+              let newParamsName = '' // 最终拼接成的字符串
-                return `${params.slice(0, 8)}...`
+              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 {
-                return params
+                // 将旧标签的值赋给新标签
+                newParamsName = params
               }
-              // let newParamsName = '' // 最终拼接成的字符串
+              return 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,19 +72,6 @@ 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

@@ -223,6 +223,7 @@ export default {
      */
     initChart(data) {
       let xData = data[0]? data[0].xAxis : []
+      let xDataName = data[0]? data[0].departNameCn : []
       let yData = []
       data.map(tt => {
         yData.push(tt.data || [])
@@ -232,9 +233,11 @@ export default {
         color: ['#97E3E0', '#069F99', '#18E0AB'],
         tooltip: {
           formatter: params => {
+            let index = params[0].dataIndex
+            const showLabelName = xDataName[index]
             // 获取xAxis data中的数据
             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>`
+            <div style="color:#333;margin-left: 8px;font-size: 14px;margin-bottom: 10px;">${showLabelName}</div>`
             params.forEach(item => {
               let color = ''
               if(typeof item.color === 'string') {
@@ -269,19 +272,6 @@ 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/ExpertQuantityChart.vue

@@ -31,6 +31,11 @@ export default {
       GetExpertQuantityData().then(res => {
         if(res.success) {
           let result = res.result || { }
+          // TODO  客户要求先写死
+          result.count = [14, 20, 15, 11, 10, 12]
+          result.departName = ['GRBP', 'GRVA', 'GRSP', 'GRSG', 'GRE', 'GRPE']
+          result.departNameCn = ['噪声与轮胎工作组', '自动驾驶与网联车辆工作组', '被动安全工作组', '一般安全工作组', '灯光与光信号工作组', '污染与能源工作组']
+          result.total = result.count.reduce((pre, val) => pre = pre + val)
           this.totalAll = result.total
           this.$nextTick(() => {
             this.initChart(result)
@@ -44,7 +49,8 @@ export default {
      */
     initChart(data) {
       const yData = data.count
-      const xAxisData = data.departNameCn
+      const xAxisData = data.departName
+      const xAxisDataName = data.departNameCn
       let option = {
         legend: {
           show: false
@@ -57,6 +63,9 @@ export default {
           formatter: params => {
             // 获取xAxis data中的数据
             let dataStr = ''
+            let index = params[0].dataIndex
+            const showLabelName = xAxisDataName[index]
+
             params.forEach(item => {
               let color = ''
               if(typeof item.color === 'string') {
@@ -67,7 +76,7 @@ export default {
               dataStr += `<div>
                 <div style="margin: 0 8px;">
                   <span style="display:inline-block;margin-right:5px;width:15px;height:10px;background-color:${color};border-radius: 3px"></span>
-                  <span style="color:#666;white-space: pre-wrap;word-break: break-all">${item.name}</span>
+                  <span style="color:#666;white-space: pre-wrap;word-break: break-all">${showLabelName}</span>
                   <span style="color:#333;">${item.value}</span>
                 </div>
               </div>`
@@ -77,19 +86,6 @@ export default {
           extraCssText:'max-width:400px;'
         },
         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: xAxisData
         },
         series: [

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

@@ -247,6 +247,7 @@ export default {
      */
     initChart(data) {
       let xData = data[0]? data[0].xAxis : []
+      let xDataName = data[0]? data[0].departNameCn : []
       let yData = []
       data.map(tt => {
         yData.push(tt.data || [])
@@ -256,9 +257,12 @@ export default {
         color: [ '#97E3E0', '#069F99','#18E0AB'],
         tooltip: {
           formatter: params => {
+            let index = params[0].dataIndex
+            const showLabelName = xDataName[index]
+
             // 获取xAxis data中的数据
             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>`
+            dataStr += `<div style="color:#333;margin-left: 8px;font-size: 14px;margin-bottom: 10px;">${showLabelName}</div>`
             params.forEach(item => {
               let color = ''
               if(typeof item.color === 'string') {
@@ -294,16 +298,39 @@ export default {
         },
         xAxis: {
           axisLabel: {
-            rotate: -10,
+            show: true,
-            align: 'center',
+            color: '#8E8E95',
-            verticalAlign : 'top',
+            interval: 0,
-            margin: 12,
+            formatter: function(params) {
-            formatter: (params) => {
+              let newParamsName = '' // 最终拼接成的字符串
-              if (params.length > 8) {
+              let paramsNameNumber = params.length // 实际标签的个数
-                return `${params.slice(0, 8)}...`
+              let provideNumber = 10 // 每行能显示的字的个数
+              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
             }
           },
           data: xData

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

@@ -45,6 +45,7 @@ export default {
     initData(arr) {
       this.totalAll = arr[0].totalAll
       this.xAxisData = arr[0].xaxis
+      this.xAxisDataName = arr[0].departNameCnList
       this.yData = []
       this.legendData = []
       arr.map(tt => {
@@ -66,13 +67,16 @@ export default {
         },
         tooltip: {
           formatter: params => {
+            console.log("---params---------", params)
             // 获取xAxis data中的数据
             let dataStr = ''
             let total = 0
             for (let i = 0; i < params.length; i++) {
               total += parseInt(params[i].data)
             }
-            dataStr += ` <div style="color:#333;margin-left: 8px;font-size: 14px">${params[0].name} 总数: ${total}</div>`
+            let index = params[0].dataIndex
+            const showLabelName = this.xAxisDataName[index]
+            dataStr += ` <div style="color:#333;margin-left: 8px;font-size: 14px">${showLabelName} 总数: ${total}</div>`
 
             //     params.forEach(item => {
             //       let color = ''
@@ -93,19 +97,6 @@ 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: [