修改ui
This commit is contained in:
‘937886381’
@@ -1,7 +1,7 @@
|
||||
<!--
|
||||
* @Author: zhp
|
||||
* @Date: 2023-12-27 13:54:52
|
||||
* @LastEditTime: 2024-04-03 18:12:18
|
||||
* @LastEditTime: 2024-04-16 13:16:34
|
||||
* @LastEditors: zhp
|
||||
* @Description:
|
||||
-->
|
||||
@@ -101,11 +101,14 @@ export default {
|
||||
});;
|
||||
},
|
||||
initChart(nameList, topNameList, nameWasteList, passRateList, wasteList) {
|
||||
let rawData = []
|
||||
let colors = ['#0fdedb', '#2359ec']
|
||||
if (topNameList.length === 0 && nameWasteList.length === 0 && passRateList === 0 && wasteList === 0) {
|
||||
return
|
||||
} else {
|
||||
let rawData = []
|
||||
let colors = ['#0fdedb', '#2359ec']
|
||||
rawData.push(passRateList, wasteList)
|
||||
const totalData = [];
|
||||
// if (rawData.length != 0 && raw,Data,length != 0) {
|
||||
const totalData = [];
|
||||
// if (rawData.length != 0 && raw,Data,length != 0) {
|
||||
for (let i = 0; i < rawData[0].length; ++i) {
|
||||
let sum = 0;
|
||||
for (let j = 0; j < rawData.length; ++j) {
|
||||
@@ -113,150 +116,152 @@ export default {
|
||||
}
|
||||
totalData.push(sum);
|
||||
}
|
||||
// }
|
||||
// rawData[1].map((d, did) =>
|
||||
// console.log((d / totalData[did]).toFixed(3))
|
||||
// // totalData[did] <= 0 ? 0 : d / totalData[did]
|
||||
// )
|
||||
console.log('total', totalData)
|
||||
const series = [
|
||||
'良品',
|
||||
'废品',
|
||||
// 'Affiliate Ad',
|
||||
// 'Video Ad',
|
||||
// 'Search Engine'
|
||||
].map((name, sid) => {
|
||||
// console.log(sid)
|
||||
return {
|
||||
name,
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 12,
|
||||
// label: {
|
||||
// show: true,
|
||||
// formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
|
||||
// },
|
||||
color:colors[sid],
|
||||
data: rawData.length != 0 ? rawData[sid].map((d, did) =>
|
||||
totalData[did] <= 0 ? 0 : (d / totalData[did]).toFixed(4)
|
||||
) : []
|
||||
};
|
||||
});
|
||||
// this.charts.resize({
|
||||
// //width: width,
|
||||
// //height: height,
|
||||
// // es6解构
|
||||
// width,
|
||||
// height
|
||||
// })
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
let isFinished = false //标记 isFinished
|
||||
this.chart.on('finished', _ => {
|
||||
if (!isFinished) {
|
||||
console.log('我只执行一次')
|
||||
isFinished = true
|
||||
// this.isLoading = false //关闭loading
|
||||
this.chart.resize() //重新渲染charts大小
|
||||
}
|
||||
console.log(113, 'finished')
|
||||
})
|
||||
this.chart.setOption({
|
||||
legend: {
|
||||
formatter: function (name) {
|
||||
//通过name获取到数组对象中的单个对象
|
||||
let singleData = series.filter(function (item) {
|
||||
return item.name == name
|
||||
})
|
||||
return name + parseFloat((singleData[0].data * 100).toFixed(0)) + '%'
|
||||
},
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
bottom: '20',
|
||||
left: '20',
|
||||
icon: 'roundRect',
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,.9)',
|
||||
fontSize:12,
|
||||
// }
|
||||
// rawData[1].map((d, did) =>
|
||||
// console.log((d / totalData[did]).toFixed(3))
|
||||
// // totalData[did] <= 0 ? 0 : d / totalData[did]
|
||||
// )
|
||||
console.log('total', totalData)
|
||||
const series = [
|
||||
'良品',
|
||||
'废品',
|
||||
// 'Affiliate Ad',
|
||||
// 'Video Ad',
|
||||
// 'Search Engine'
|
||||
].map((name, sid) => {
|
||||
// console.log(sid)
|
||||
return {
|
||||
name,
|
||||
type: 'bar',
|
||||
stack: 'total',
|
||||
barWidth: 12,
|
||||
// label: {
|
||||
// show: true,
|
||||
// formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
|
||||
// },
|
||||
color: colors[sid],
|
||||
data: rawData.length != 0 ? rawData[sid].map((d, did) =>
|
||||
totalData[did] <= 0 ? 0 : (d / totalData[did]).toFixed(4)
|
||||
) : []
|
||||
};
|
||||
});
|
||||
// this.charts.resize({
|
||||
// //width: width,
|
||||
// //height: height,
|
||||
// // es6解构
|
||||
// width,
|
||||
// height
|
||||
// })
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
let isFinished = false //标记 isFinished
|
||||
this.chart.on('finished', _ => {
|
||||
if (!isFinished) {
|
||||
console.log('我只执行一次')
|
||||
isFinished = true
|
||||
// this.isLoading = false //关闭loading
|
||||
this.chart.resize() //重新渲染charts大小
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top:'0',
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
// bottom: '3%',
|
||||
width: 'auto',
|
||||
height: '95',
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
splitLine: {
|
||||
show: false
|
||||
console.log(113, 'finished')
|
||||
})
|
||||
this.chart.setOption({
|
||||
legend: {
|
||||
formatter: function (name) {
|
||||
//通过name获取到数组对象中的单个对象
|
||||
let singleData = series.filter(function (item) {
|
||||
return item.name == name
|
||||
})
|
||||
return name + parseFloat((singleData[0].data * 100).toFixed(0)) + '%'
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
inside: true,
|
||||
interval: 0, //横轴信息全部显
|
||||
splitNumber: 50,
|
||||
// boundaryGap: [20, 20],
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,.9)',
|
||||
verticalAlign: 'bottom',
|
||||
fontSize: 16,
|
||||
align: 'left',
|
||||
padding: [0, 0, 10, -5]
|
||||
}
|
||||
},
|
||||
data: topNameList
|
||||
itemWidth: 12,
|
||||
itemHeight: 12,
|
||||
bottom: '20',
|
||||
left: '20',
|
||||
icon: 'roundRect',
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,.9)',
|
||||
fontSize: 12,
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
splitLine: {
|
||||
show: false
|
||||
grid: {
|
||||
top: '0',
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
// bottom: '3%',
|
||||
width: 'auto',
|
||||
height: '95',
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
inside: true,
|
||||
interval: 0, //横轴信息全部显
|
||||
splitNumber: 50,
|
||||
// boundaryGap: [20, 20],
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,.9)',
|
||||
verticalAlign: 'bottom',
|
||||
fontSize: 16,
|
||||
align: 'left',
|
||||
padding: [0, 0, 10, -5]
|
||||
}
|
||||
},
|
||||
data: topNameList
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
inside: true,
|
||||
interval: 0, //横轴信息全部显
|
||||
splitNumber: 50,
|
||||
// boundaryGap: [20, 20],
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,.9)',
|
||||
verticalAlign: 'bottom',
|
||||
fontSize: 16,
|
||||
align: 'right',
|
||||
padding: [0, 0, 10, -5]
|
||||
}
|
||||
},
|
||||
data: nameWasteList
|
||||
}
|
||||
],
|
||||
xAxis: {
|
||||
// max: 120,
|
||||
show: false,
|
||||
},
|
||||
series:series
|
||||
})
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.resize()
|
||||
},1000);
|
||||
})
|
||||
{
|
||||
type: 'category',
|
||||
inverse: true,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
inside: true,
|
||||
interval: 0, //横轴信息全部显
|
||||
splitNumber: 50,
|
||||
// boundaryGap: [20, 20],
|
||||
textStyle: {
|
||||
color: 'rgba(255,255,255,.9)',
|
||||
verticalAlign: 'bottom',
|
||||
fontSize: 16,
|
||||
align: 'right',
|
||||
padding: [0, 0, 10, -5]
|
||||
}
|
||||
},
|
||||
data: nameWasteList
|
||||
}
|
||||
],
|
||||
xAxis: {
|
||||
// max: 120,
|
||||
show: false,
|
||||
},
|
||||
series: series
|
||||
})
|
||||
this.$nextTick(() => {
|
||||
setTimeout(() => {
|
||||
this.resize()
|
||||
}, 1000);
|
||||
})
|
||||
}
|
||||
|
||||
// this.chart.resize({
|
||||
// width: 'auto',
|
||||
// height: 90
|
||||
|
||||
Reference in New Issue
Block a user