微调
This commit is contained in:
@@ -22,11 +22,16 @@ const props = defineProps({
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
|
||||
});
|
||||
const customData: any = ref({}),
|
||||
legendData: any = ref({}),
|
||||
chart: any = ref();
|
||||
|
||||
const labelIsShow = ref(true)//引导线台数和鼠标点击饼图是否弹出提示显示
|
||||
const init = () => {
|
||||
|
||||
|
||||
customData.value = {
|
||||
title: "", //标题
|
||||
textAlign: "left", //标题位置可选属性left 可选属性值 left,right,center
|
||||
@@ -36,6 +41,7 @@ const init = () => {
|
||||
isSpace: false, //是否显示间隔
|
||||
isLabelLine: true, //是否显示引导线
|
||||
titleFontSize: '14px', //标题字体大小
|
||||
|
||||
...props.customData,
|
||||
|
||||
};
|
||||
@@ -71,7 +77,7 @@ const init = () => {
|
||||
// },
|
||||
// },
|
||||
tooltip: {
|
||||
show: true,
|
||||
show: labelIsShow.value,
|
||||
trigger: "item",
|
||||
formatter: customData.value.ratio ? `{b} : {c} ({d}%)` : "{b} :{c} ",
|
||||
borderWidth: 1,
|
||||
@@ -100,14 +106,14 @@ const init = () => {
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
show: labelIsShow.value,
|
||||
position: "outside",
|
||||
textStyle: {
|
||||
//color: "#fff",
|
||||
fontSize: 12,
|
||||
},
|
||||
formatter: function (data) {
|
||||
return data.value +'台'
|
||||
return labelIsShow.value ? data.value + '台' : '';
|
||||
}
|
||||
},
|
||||
},
|
||||
@@ -122,6 +128,7 @@ const init = () => {
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
option && chart.value && chart.value.setOption(option);
|
||||
setTimeout(() => {
|
||||
chart.value.resize();
|
||||
@@ -157,6 +164,12 @@ watch(
|
||||
() => props.chartsData,
|
||||
(val, oldVal) => {
|
||||
if (val) {
|
||||
const item = props.chartsData.find(item => item.value === 0);
|
||||
if(item != undefined){
|
||||
labelIsShow.value = false;
|
||||
}else{
|
||||
labelIsShow.value = true;
|
||||
}
|
||||
init();
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user