diff --git a/src/components/PieRow/index.vue b/src/components/PieRow/index.vue index 28358ff..9cefa7c 100644 --- a/src/components/PieRow/index.vue +++ b/src/components/PieRow/index.vue @@ -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 + }) + }