110 lines
2.8 KiB
Vue
110 lines
2.8 KiB
Vue
|
<!-- 默认饼图 -->
|
||
|
|
<template>
|
||
|
|
<div class="charts" ref="chartsRef"></div>
|
||
|
|
</template>
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { ref, onMounted, defineProps, defineExpose, watch } from "vue";
|
||
|
|
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({});
|
||
|
|
const init = () => {
|
||
|
|
console.log("init", props.customData);
|
||
|
|
customData.value = {
|
||
|
|
title: "", //标题
|
||
|
|
textAlign: "left", //标题位置可选属性left 可选属性值 left,right,center
|
||
|
|
ratio: true, //是否显示数值占比，默认不显示
|
||
|
|
isRing: false, //是否环形图
|
||
|
|
isRadius: false, //是否圆角
|
||
|
|
isSpace: true, //是否显示间隔
|
||
|
|
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,百分比,数值,
|
||
|
|
...props.legendData,
|
||
|
|
};
|
||
|
|
var chart = 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 ? ["45", "65"] : "65%",
|
||
|
|
data: props.chartsData,
|
||
|
|
center: ["50%", "60%"], // 设置饼图的中心位置
|
||
|
|
// padAngle: 2,
|
||
|
|
emphasis: {
|
||
|
|
itemStyle: {
|
||
|
|
shadowBlur: 10,
|
||
|
|
shadowOffsetX: 0,
|
||
|
|
shadowColor: "rgba(0, 0, 0, 0.5)",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
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.setOption(option);
|
||
|
|
};
|
||
|
|
|
||
|
|
watch(
|
||
|
|
() => props.chartsData,
|
||
|
|
(val, oldVal) => {
|
||
|
|
if (val) {
|
||
|
|
init();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
deep: true,
|
||
|
|
}
|
||
|
|
);
|
||
|
|
onMounted(() => {
|
||
|
|
init();
|
||
|
|
});
|
||
|
|
defineExpose({ init });
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.charts {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
</style>
|