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

424

Browse Source
This commit is contained in:
duanliang
2025-04-25 00:36:19 +08:00
parent 0312549427
commit eb73021073
1 changed files with 95 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -50,60 +50,12 @@
const { id, setOption,chartVal,dispose ,clearOption} = useEchart()
var colorList = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
var defaultCofig = {
color: colorList,
legend: {
orient: 'vertical',
x: '64%',
y: 'center',
itemWidth: fitChartSize(12),
itemHeight: fitChartSize(12),
itemGap: fitChartSize(10),
textStyle: {
color: '#ffffff',
fontSize: fitChartSize(14)
}
},
series: [
{
type: 'pie',
center: ['30%', '50%'],
radius: ['40%', '55%'],
itemStyle: {
borderWidth: fitChartSize(4),
borderColor: '#093672'
},
label: {
show: true,
position: 'center',
fontWeight: 'bold',
formatter: () => {
return `{value|${props.total}}` + '\n' + `{name|${props.label} }`
},
rich: {
value: {
color: '#fff',
fontSize: fitChartSize(24),
fontWeight: 'bold',
padding: [0, 0, 5, 0]
},
name: {
color: '#fff',
fontSize: fitChartSize(12)
}
}
},
labelLine: {
show: false
},
data: []
}
]
}
let condShow = ref(0)
let aIndex = 1
var colorList = []
// ['#2380fb', '#d9011b','#feae00']
watch(
() => props.dataList,
(newVal) => {
@@ -114,20 +66,23 @@
condShow.value = 1
}
if (newVal.length > 0) {
console.log(colorList.value,'colorList')
condShow.value = 2
nextTick(() => {
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} }`
}
setOption({
...defaultCofig,
...props.config
})
init()
// 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} }`
// }
// setOption({
// ...defaultCofig,
// ...props.config
// })
})
}else{
@@ -137,6 +92,82 @@
},
{ immediate: true }
)
const init = ()=>{
props.dataList.forEach((item,index)=>{
if(item.name=='负面'){
colorList.push('#d9011b')
}
if(item.name=='正面'){
colorList.push('#feae00')
}
if(item.name=='中性'){
colorList.push('#2380fb')
}
})
var defaultCofig = {
color: colorList,
legend: {
orient: 'vertical',
x: '64%',
y: 'center',
itemWidth: fitChartSize(12),
itemHeight: fitChartSize(12),
itemGap: fitChartSize(10),
textStyle: {
color: '#ffffff',
fontSize: fitChartSize(14)
}
},
series: [
{
type: 'pie',
center: ['30%', '50%'],
radius: ['40%', '55%'],
itemStyle: {
borderWidth: fitChartSize(4),
borderColor: '#093672'
},
label: {
show: true,
position: 'center',
fontWeight: 'bold',
formatter: () => {
return `{value|${props.total}}` + '\n' + `{name|${props.label} }`
},
rich: {
value: {
color: '#fff',
fontSize: fitChartSize(24),
fontWeight: 'bold',
padding: [0, 0, 5, 0]
},
name: {
color: '#fff',
fontSize: fitChartSize(12)
}
}
},
labelLine: {
show: false
},
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].label.formatter = () => {
return `{value|${props.total}}` + '\n' + `{name|${props.label} }`
}
setOption({
...defaultCofig,
...props.config
})
}
</script>
<style scoped lang="scss">