lixuefeng/fengjie-datascreen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix scenic-box3

Browse Source
This commit is contained in:
duanliang
2025-12-11 10:46:30 +08:00
parent 1b4226d325
commit afc316bbab
3 changed files with 106 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Line/index.vue
View File

@@ -93,7 +93,7 @@
},
grid: {
left: '2%',
right: '2%',
right: '5%',
bottom: '5%',
top: '10%',
containLabel: true

152
src/components/PieRow/index.vue
View File

@@ -60,44 +60,65 @@
() => props.dataList,
(newVal) => {
aIndex+=1
if(aIndex>=3&&!newVal.length){
condShow.value = 1
condShow.value = 1
dispose()
return false
}
if (newVal.length === 0) {
condShow.value = 1
dispose()
return false
}
if (newVal.length > 0) {
clearOption()
colorList = []
nextTick(() => {
init()
})
}else{
}
},
{ immediate: true }
{ immediate: true,deep: true }
)
const init = ()=>{
if(condShow.value===2){
return;
}
condShow.value = 2
props.dataList.forEach((item,index)=>{
if(item.name=='负面'){
colorList.push('#d9011b')
}
else if(item.name=='正面'){
colorList.push('#50F0A6')
}
else if(item.name=='中性'){
colorList.push('#2380fb')
}
else{
colorList = ['#3BA272', '#73C0DE','#EE6666','#FAC858','#91CC75','#5470C6','#d9011b','#feae00','#50F0A6']
}
// props.dataList.forEach((item,index)=>{
// if(item.name=='负面'){
// colorList.push('#d9011b')
// }
// else if(item.name=='正面'){
// colorList.push('#50F0A6')
// }
// else if(item.name=='中性'){
// colorList.push('#2380fb')
// }
// else{
// colorList = ['#3BA272', '#73C0DE','#EE6666','#FAC858','#91CC75','#5470C6','#d9011b','#feae00','#50F0A6']
// }
// })
// 过滤数据
const validDataList = props.dataList.filter(item => {
return item && item.name && (item.value || item.value === 0)
})
validDataList.forEach((item) => {
if (item.name === '负面') {
colorList.push('#d9011b')
} else if (item.name === '正面') {
colorList.push('#50F0A6')
} else if (item.name === '中性') {
colorList.push('#2380fb')
} else {
// 非固定名称时，使用预设颜色数组（避免多次push导致颜色重复）
colorList = ['#3BA272', '#73C0DE', '#EE6666', '#FAC858', '#91CC75', '#5470C6', '#d9011b', '#feae00', '#50F0A6']
}
})
var defaultCofig = {
color: colorList,
legend: {
@@ -110,8 +131,16 @@
textStyle: {
color: '#ffffff',
fontSize: fitChartSize(14)
}
},
},
// 显式绑定图例数据，确保与新数据同步
data: validDataList.map(item => item.name),
// 修复图例formatter的空值问题
formatter: (name) => {
const item = validDataList.find((item) => item.name === name)
const percent = item ? item.value : 0
return name + '\u3000' + `${percent}%`
}
},
series: [
{
type: 'pie',
@@ -144,42 +173,55 @@
labelLine: {
show: false
},
data: []
// 使用过滤后的有效数据
data: validDataList
}
]
}
defaultCofig.legend.formatter = (name) => {
let percent = props.dataList.find((item) => item.name == name).value
return name + '\u3000' + `${percent}%`
}
defaultCofig.series[0].data = props.dataList
defaultCofig.series[0].label.formatter = () => {
return `{value|${props.total}}` + '\n' + `{name|${props.label} }`
}
const chart = setOption({
...defaultCofig,
...props.config
})
chart.on('legendselectchanged', function (e) {
console.log(e,'e')
var echartsArr = [];
for (let key in e.selected) {
if (e.selected[key]) {
echartsArr.push(key)
}
}
var echartsNum = 0;
props.dataList.forEach(item => {
if(echartsArr.includes(item.name)){
echartsNum += parseFloat(item.value)
}
})
defaultCofig.series[0].label.formatter = `{value|${parseInt(echartsNum/100*props.total)}}` + '\n' + `{name|${props.label}}`;
setOption({
...defaultCofig,
...props.config
})
});
// defaultCofig.legend.formatter = (name) => {
// let percent = props.dataList.find((item) => item.name == name).value
// return name + '\u3000' + `${percent}%`
// }
// defaultCofig.series[0].data = props.dataList
// defaultCofig.series[0].label.formatter = () => {
// return `{value|${props.total}}` + '\n' + `{name|${props.label} }`
// }
const chart = setOption({
...defaultCofig,
...props.config
},true)
if (chart) {
chart.off('legendselectchanged')
chart.on('legendselectchanged', function (e) {
const echartsArr = []
for (let key in e.selected) {
if (e.selected[key]) {
echartsArr.push(key)
}
}
let echartsNum = 0
validDataList.forEach(item => {
if (echartsArr.includes(item.name)) {
echartsNum += parseFloat(item.value) || 0
}
})
const newOption = {
...defaultConfig,
...props.config,
series: [{
...defaultConfig.series[0],
label: {
...defaultConfig.series[0].label,
formatter: `{value|${parseInt(echartsNum / 100 * props.total)}}` + '\n' + `{name|${props.label}}`
}
}]
}
// 强制更新配置
setOption(newOption, true)
})
}
}
</script>