151 lines
3.7 KiB
Vue
151 lines
3.7 KiB
Vue
<!-- 默认饼图 -->
|
|
<template>
|
|
<div class="pie" ref="chartsRef"></div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import * as echarts from "echarts";
|
|
const chartsRef = ref();
|
|
const props = defineProps({
|
|
//饼图数据
|
|
chartsData: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
//自定义数据
|
|
customData: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
//legend配置
|
|
legendData: {
|
|
type: Object,
|
|
default: () => ({}),
|
|
},
|
|
});
|
|
const customData: any = ref({}),
|
|
legendData: any = ref({}),
|
|
chart: any = ref();
|
|
const init = () => {
|
|
customData.value = {
|
|
title: "", //标题
|
|
textAlign: "left", //标题位置可选属性left 可选属性值 left,right,center
|
|
ratio: true, //是否显示数值占比，默认不显示
|
|
isRing: false, //是否环形图
|
|
isRadius: false, //是否圆角
|
|
isSpace: false, //是否显示间隔
|
|
isLabelLine: true, //是否显示引导线
|
|
...props.customData,
|
|
};
|
|
legendData.value = {
|
|
icon: "roundRect", // 图例项的icon,类型包括 circle(圆形),rect(正方形),//roundRect(圆角正方形),triangle(三角形),diamond(菱形),//pin(大头针行),arrow(箭头形),none(无图例项的icon)
|
|
orient: "vertical", //图例排列方向
|
|
left: "right", //可选属性left,right,top,bottom,可选属性值 left,right,top,bottom,px,百分比,数值,
|
|
itemGap: 1, // 设置图例项之间的间隔为20
|
|
...props.legendData,
|
|
};
|
|
chart.value = chartsRef.value && echarts.init(chartsRef.value);
|
|
var option = {
|
|
title: {
|
|
text: customData.value.title,
|
|
left: customData.value.textAlign,
|
|
},
|
|
legend: legendData.value,
|
|
tooltip: {
|
|
show: true,
|
|
trigger: "item",
|
|
formatter: customData.value.ratio ? `{b} : {c} ({d}%)` : "{b} :{c} ",
|
|
borderWidth: 1,
|
|
},
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
radius: customData.value.isRing ? ["55", "75"] : "80%",
|
|
data: props.chartsData,
|
|
center: ["55%", "50%"], // 设置饼图的中心位置
|
|
// padAngle: 2,
|
|
minAngle: 15, //最小角度
|
|
startAngle: 270, //起始角度
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
},
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: "inside",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 12,
|
|
},
|
|
},
|
|
},
|
|
itemStyle: {
|
|
borderRadius: customData.value.isRadius ? 10 : 0,
|
|
borderColor: customData.value.isSpace ? "#fff" : "",
|
|
borderWidth: customData.value.isSpace ? 2 : 0,
|
|
},
|
|
labelLine: {
|
|
show: customData.value.isLabelLine,
|
|
},
|
|
},
|
|
],
|
|
};
|
|
option && chart.value && chart.value.setOption(option);
|
|
setTimeout(() => {
|
|
chart.value.resize();
|
|
}, 0);
|
|
};
|
|
const reSize = (widthValue: number,heightValue: number,silentValue: boolean) => {
|
|
if (chart.value) {
|
|
chart.value.resize({
|
|
width: widthValue,
|
|
height: heightValue,
|
|
silent: silentValue,
|
|
});
|
|
}
|
|
};
|
|
const resizeCharts = () => {
|
|
console.log(chart.value,111111);
|
|
|
|
if (chart.value) {
|
|
chart.value.resize();
|
|
}
|
|
};
|
|
window.addEventListener("resize", resizeCharts);
|
|
onUnmounted(() => {
|
|
if (chart.value) {
|
|
chart.value.resize();
|
|
}
|
|
window.removeEventListener("resize", resizeCharts);
|
|
if (chart.value != null && chart.value.dispose) {
|
|
chart.value.dispose(); // 销毁图表
|
|
}
|
|
});
|
|
watch(
|
|
() => props.chartsData,
|
|
(val, oldVal) => {
|
|
if (val) {
|
|
init();
|
|
}
|
|
},
|
|
{
|
|
deep: true,
|
|
}
|
|
);
|
|
onMounted(() => {
|
|
init();
|
|
});
|
|
defineExpose({ init,reSize });
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.pie {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
}
|
|
</style>
|