fix pieRow
This commit is contained in:
duanliang
@@ -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')
|
if(item.name=='负面'){
|
||||||
// }
|
colorList.push('#d9011b')
|
||||||
// else if(item.name=='正面'){
|
}
|
||||||
// colorList.push('#50F0A6')
|
else if(item.name=='正面'){
|
||||||
// }
|
colorList.push('#50F0A6')
|
||||||
// else if(item.name=='中性'){
|
}
|
||||||
// colorList.push('#2380fb')
|
else if(item.name=='中性'){
|
||||||
// }
|
colorList.push('#2380fb')
|
||||||
// else{
|
}
|
||||||
// colorList = ['#3BA272', '#73C0DE','#EE6666','#FAC858','#91CC75','#5470C6','#d9011b','#feae00','#50F0A6']
|
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 = {
|
var defaultCofig = {
|
||||||
color: colorList,
|
color: colorList,
|
||||||
legend: {
|
legend: {
|
||||||
@@ -132,15 +112,17 @@
|
|||||||
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: [
|
||||||
{
|
{
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
@@ -173,55 +155,57 @@
|
|||||||
labelLine: {
|
labelLine: {
|
||||||
show: false
|
show: false
|
||||||
},
|
},
|
||||||
// 使用过滤后的有效数据
|
data: []
|
||||||
data: validDataList
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
// defaultCofig.legend.formatter = (name) => {
|
defaultCofig.series[0].data = props.dataList
|
||||||
// let percent = props.dataList.find((item) => item.name == name).value
|
// defaultCofig.legend.formatter = (name) => {
|
||||||
// return name + '\u3000' + `${percent}%`
|
// let percent = props.dataList.find((item) => item.name == name).value
|
||||||
// }
|
// if(name){
|
||||||
// defaultCofig.series[0].data = props.dataList
|
// return name + '\u3000' + `${percent}%`
|
||||||
|
// }else{
|
||||||
|
// return name + '\u3000' + `${0}%`
|
||||||
|
// }
|
||||||
|
// }
|
||||||
// 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)
|
||||||
...defaultCofig,
|
const changeChart = setOption({
|
||||||
...props.config
|
...defaultCofig,
|
||||||
},true)
|
...props.config
|
||||||
if (chart) {
|
},true)
|
||||||
chart.off('legendselectchanged')
|
|
||||||
chart.on('legendselectchanged', function (e) {
|
changeChart.off('legendselectchanged');
|
||||||
const echartsArr = []
|
changeChart.on('legendselectchanged', function (e) {
|
||||||
for (let key in e.selected) {
|
console.log(e,'e')
|
||||||
if (e.selected[key]) {
|
|
||||||
echartsArr.push(key)
|
for (let key in e.selected) {
|
||||||
}
|
if (e.selected[key]) {
|
||||||
}
|
echartsArr.push(key)
|
||||||
|
}
|
||||||
let echartsNum = 0
|
}
|
||||||
validDataList.forEach(item => {
|
var echartsNum = 0;
|
||||||
if (echartsArr.includes(item.name)) {
|
props.dataList.forEach(item => {
|
||||||
echartsNum += parseFloat(item.value) || 0
|
if(echartsArr.includes(item.name)){
|
||||||
}
|
echartsNum += parseFloat(item.value)
|
||||||
})
|
}
|
||||||
const newOption = {
|
})
|
||||||
...defaultConfig,
|
defaultCofig.legend.formatter = (name) => {
|
||||||
...props.config,
|
const item = props.dataList.find((item) => item.name === name);
|
||||||
series: [{
|
|
||||||
...defaultConfig.series[0],
|
const percent = item ? item.value : 0;
|
||||||
label: {
|
|
||||||
...defaultConfig.series[0].label,
|
const displayName = name || '';
|
||||||
formatter: `{value|${parseInt(echartsNum / 100 * props.total)}}` + '\n' + `{name|${props.label}}`
|
return `${displayName}\u3000${percent}%`;
|
||||||
}
|
}
|
||||||
}]
|
defaultCofig.series[0].label.formatter = `{value|${parseInt(echartsNum/100*props.total)}}` + '\n' + `{name|${props.label}}`;
|
||||||
}
|
setOption({
|
||||||
|
...defaultCofig,
|
||||||
// 强制更新配置
|
...props.config
|
||||||
setOption(newOption, true)
|
})
|
||||||
})
|
});
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -11,16 +11,10 @@ export function useEchart() {
|
|||||||
chart = echarts.init(dom)
|
chart = echarts.init(dom)
|
||||||
}
|
}
|
||||||
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()
|
||||||
|
|||||||
Reference in New Issue
Block a user