44 lines
904 B
Plaintext
44 lines
904 B
Plaintext
<template>
|
|
<div ref="chartRef" :style="{ height, width }"></div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { onMounted, PropType, ref, Ref } from 'vue';
|
|
import { useECharts } from '@/hooks/web/useECharts';
|
|
|
|
const props = defineProps({
|
|
width: {
|
|
type: String as PropType<string>,
|
|
default: '100%',
|
|
},
|
|
height: {
|
|
type: String as PropType<string>,
|
|
default: '300px',
|
|
},
|
|
pieData:{
|
|
type:Array,
|
|
default:[]
|
|
}
|
|
});
|
|
const chartRef = ref<HTMLDivElement | null>(null);
|
|
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'item'
|
|
},
|
|
series: [
|
|
{
|
|
type: 'pie',
|
|
data: props.pieData,
|
|
itemStyle: {
|
|
borderColor: '#fff',
|
|
borderWidth: 2,
|
|
},
|
|
},
|
|
]
|
|
};
|
|
|
|
onMounted(() => {
|
|
setOptions(option as any);
|
|
});
|
|
</script>
|