From afc316bbab468402697c9c8eda13633f73fe5c14 Mon Sep 17 00:00:00 2001 From: duanliang <540489889@qq.com> Date: Thu, 11 Dec 2025 10:46:30 +0800 Subject: [PATCH] fix scenic-box3 --- src/components/Line/index.vue | 2 +- src/components/PieRow/index.vue | 152 ++++++++++++++++++++------------ src/hooks/echart.js | 10 ++- 3 files changed, 106 insertions(+), 58 deletions(-) diff --git a/src/components/Line/index.vue b/src/components/Line/index.vue index 11f3cc1..b86fcd9 100644 --- a/src/components/Line/index.vue +++ b/src/components/Line/index.vue @@ -93,7 +93,7 @@ }, grid: { left: '2%', - right: '2%', + right: '5%', bottom: '5%', top: '10%', containLabel: true diff --git a/src/components/PieRow/index.vue b/src/components/PieRow/index.vue index 2fa2456..9d95e1d 100644 --- a/src/components/PieRow/index.vue +++ b/src/components/PieRow/index.vue @@ -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) + }) + } } diff --git a/src/hooks/echart.js b/src/hooks/echart.js index 24c9d79..8d439b0 100644 --- a/src/hooks/echart.js +++ b/src/hooks/echart.js @@ -13,8 +13,14 @@ export function useEchart() { const setOption = (params, update = false) => { initChart() chart.setOption(params, update) + if (update) { + chart.setOption({}, true) + chart.setOption(params) + } return chart; } + + const clearOption = () => { // 将series设置为空数组，可以清空图表内容 chart.setOption({ @@ -22,8 +28,8 @@ export function useEchart() { }) } const dispose = () => { - chart.dispose() - chart = null + // chart.dispose() + // chart = null } const resize = () => { if (chart) chart.resize()