45 lines
1.0 KiB
Vue
45 lines
1.0 KiB
Vue
<script lang="ts" setup>
|
|
import { onMounted, ref } from 'vue';
|
|
|
|
import { EchartsUI, type EchartsUIType, useEcharts } from '@vben/chart-ui';
|
|
|
|
const chartRef = ref<EchartsUIType>();
|
|
const { renderEcharts } = useEcharts(chartRef);
|
|
|
|
onMounted(() => {
|
|
renderEcharts({
|
|
series: [
|
|
{
|
|
animationDelay() {
|
|
return Math.random() * 400;
|
|
},
|
|
animationEasing: 'exponentialInOut',
|
|
animationType: 'scale',
|
|
center: ['50%', '50%'],
|
|
color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
|
|
data: [
|
|
{ name: '外包', value: 500 },
|
|
{ name: '定制', value: 310 },
|
|
{ name: '技术支持', value: 274 },
|
|
{ name: '远程', value: 400 },
|
|
].sort((a, b) => {
|
|
return a.value - b.value;
|
|
}),
|
|
name: '商业占比',
|
|
radius: '80%',
|
|
roseType: 'radius',
|
|
type: 'pie',
|
|
},
|
|
],
|
|
|
|
tooltip: {
|
|
trigger: 'item',
|
|
},
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<EchartsUI ref="chartRef" />
|
|
</template>
|