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

fix pieRow

Browse Source
This commit is contained in:
duanliang
2025-12-11 13:39:08 +08:00
parent 9d134a2b9d
commit b459464052
2 changed files with 87 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -48,10 +48,7 @@
}
})
const { id, setOption,chartVal,dispose ,clearOption} = useEchart()
const { id,chart, setOption,chartVal,dispose ,clearOption} = useEchart()
let condShow = ref(0)
let aIndex = 1
var colorList = []
@@ -59,66 +56,49 @@
watch(
() => props.dataList,
(newVal) => {
aIndex+=1
if(aIndex>=3&&!newVal.length){
condShow.value = 1
dispose()
return false
}
if (newVal.length === 0) {
condShow.value = 1
dispose()
return false
}
if (newVal.length > 0) {
clearOption()
colorList = []
nextTick(() => {
init()
})
colorList = []
nextTick(() => {
clearOption();
init()
})
}else{
}
},
{ immediate: true,deep: true }
{ immediate: true }
)
var echartsArr = [];
const init = ()=>{
echartsArr = []
if(condShow.value===2){
return;
}
clearOption()
colorList = [];
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']
// }
// })
// 过滤数据
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']
}
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']
}
})
var defaultCofig = {
color: colorList,
legend: {
@@ -132,15 +112,17 @@
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}%`
}
},
// let percent = props.dataList.find((item) => item.name == name).value
const item = props.dataList.find((item) => item.name === name);
const percent = item ? item.value : 0;
const displayName = name || '';
return `${displayName}\u3000${percent}%`;
},
},
series: [
{
type: 'pie',
@@ -173,55 +155,57 @@
labelLine: {
show: false
},
// 使用过滤后的有效数据
data: validDataList
data: []
}
]
}
// 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].data = props.dataList
// defaultCofig.legend.formatter = (name) => {
// let percent = props.dataList.find((item) => item.name == name).value
// if(name){
// return name + '\u3000' + `${percent}%`
// }else{
// return name + '\u3000' + `${0}%`
// }
// }
// 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)
})
}
setOption({},true)
const changeChart = setOption({
...defaultCofig,
...props.config
},true)
changeChart.off('legendselectchanged');
changeChart.on('legendselectchanged', function (e) {
console.log(e,'e')
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.legend.formatter = (name) => {
const item = props.dataList.find((item) => item.name === name);
const percent = item ? item.value : 0;
const displayName = name || '';
return `${displayName}\u3000${percent}%`;
}
defaultCofig.series[0].label.formatter = `{value|${parseInt(echartsNum/100*props.total)}}` + '\n' + `{name|${props.label}}`;
setOption({
...defaultCofig,
...props.config
})
});
}
</script>