LK/income_payments_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
fengchenchen
2023-07-20 11:42:53 +08:00
parent 347c680253
commit 92efa65839
6 changed files with 87 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/dashboard/screen/iso/ExpertChart.vue
+31 -37
View File
@@ -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) {
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,
src/views/dashboard/screen/iso/LeadingStandardChart.vue
-13
View File
@@ -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
+4 -14
View File
@@ -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
+11 -15
View File
@@ -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
+36 -9
View File
@@ -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,
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
src/views/dashboard/screen/wp29/RegulationQuantityChart.vue
+5 -14
View File
@@ -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: [