From 92efa65839d44edefbd2348693a5f90ac9841976 Mon Sep 17 00:00:00 2001 From: fengchenchen Date: Thu, 20 Jul 2023 11:42:53 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90update=E3=80=91-iso\wp27=20=E9=A6=96?= =?UTF-8?q?=E9=A1=B5=E5=9B=BE=E8=A1=A8=E7=9A=84=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../dashboard/screen/iso/ExpertChart.vue | 68 +++++++++---------- .../screen/iso/LeadingStandardChart.vue | 13 ---- .../screen/iso/MeetingInformationChart.vue | 18 ++--- .../screen/wp29/ExpertQuantityChart.vue | 26 +++---- .../screen/wp29/MeetingInformationChart.vue | 45 +++++++++--- .../screen/wp29/RegulationQuantityChart.vue | 19 ++---- 6 files changed, 87 insertions(+), 102 deletions(-) diff --git a/src/views/dashboard/screen/iso/ExpertChart.vue b/src/views/dashboard/screen/iso/ExpertChart.vue index d915ce7..f9c0f30 100644 --- a/src/views/dashboard/screen/iso/ExpertChart.vue +++ b/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 = `
${tooltipTitle}
` - dataStr += `
${params[0].name}
` + dataStr += `
${showLabelName}
` 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) { - return `${params.slice(0, 8)}...` + 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 { - return params + // 将旧标签的值赋给新标签 + newParamsName = params } - // 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 + return newParamsName } }, data: xData, diff --git a/src/views/dashboard/screen/iso/LeadingStandardChart.vue b/src/views/dashboard/screen/iso/LeadingStandardChart.vue index 8b7ca1b..2a24c2b 100644 --- a/src/views/dashboard/screen/iso/LeadingStandardChart.vue +++ b/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: [ diff --git a/src/views/dashboard/screen/iso/MeetingInformationChart.vue b/src/views/dashboard/screen/iso/MeetingInformationChart.vue index 1ee640b..25e55d7 100644 --- a/src/views/dashboard/screen/iso/MeetingInformationChart.vue +++ b/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 = `
${tooltipTitle}
-
${params[0].name}
` +
${showLabelName}
` 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: [ diff --git a/src/views/dashboard/screen/wp29/ExpertQuantityChart.vue b/src/views/dashboard/screen/wp29/ExpertQuantityChart.vue index 7669a80..8a44337 100644 --- a/src/views/dashboard/screen/wp29/ExpertQuantityChart.vue +++ b/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 += `
- ${item.name} + ${showLabelName} ${item.value}
` @@ -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: [ diff --git a/src/views/dashboard/screen/wp29/MeetingInformationChart.vue b/src/views/dashboard/screen/wp29/MeetingInformationChart.vue index 7b0d56d..cb02dc3 100644 --- a/src/views/dashboard/screen/wp29/MeetingInformationChart.vue +++ b/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 = `
${tooltipTitle}
` - dataStr += `
${params[0].name}
` + dataStr += `
${showLabelName}
` params.forEach(item => { let color = '' if(typeof item.color === 'string') { @@ -294,16 +298,39 @@ export default { }, xAxis: { axisLabel: { - rotate: -10, - align: 'center', - verticalAlign : 'top', - margin: 12, - formatter: (params) => { - if (params.length > 8) { - return `${params.slice(0, 8)}...` + show: true, + color: '#8E8E95', + interval: 0, + formatter: function(params) { + let newParamsName = '' // 最终拼接成的字符串 + let paramsNameNumber = params.length // 实际标签的个数 + 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 diff --git a/src/views/dashboard/screen/wp29/RegulationQuantityChart.vue b/src/views/dashboard/screen/wp29/RegulationQuantityChart.vue index 0d20842..70adf28 100644 --- a/src/views/dashboard/screen/wp29/RegulationQuantityChart.vue +++ b/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 += `
${params[0].name} 总数: ${total}
` + let index = params[0].dataIndex + const showLabelName = this.xAxisDataName[index] + dataStr += `
${showLabelName} 总数: ${total}
` // 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: [