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

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

10
src/hooks/echart.js
View File

@@ -13,14 +13,8 @@ export function useEchart() {
const setOption = (params, update = false) => { const setOption = (params, update = false) => {
initChart() initChart()
chart.setOption(params, update) chart.setOption(params, update)
if (update) {
chart.setOption({}, true)
chart.setOption(params)
}
return chart; return chart;
} }
const clearOption = () => { const clearOption = () => {
// 将series设置为空数组，可以清空图表内容 // 将series设置为空数组，可以清空图表内容
chart.setOption({ chart.setOption({
@@ -28,8 +22,8 @@ export function useEchart() {
}) })
} }
const dispose = () => { const dispose = () => {
// chart.dispose() chart.dispose()
// chart = null chart = null
} }
const resize = () => { const resize = () => {
if (chart) chart.resize() if (chart) chart.resize()