61 lines
1.4 KiB
Plaintext
61 lines
1.4 KiB
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 option = {
|
|
title: {
|
|
text: '访问来源',
|
|
subtext: '全站来源统计',
|
|
left: 'center',
|
|
},
|
|
tooltip: {
|
|
trigger: 'item',
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
},
|
|
series: [
|
|
{
|
|
name: '访问来源',
|
|
type: 'pie',
|
|
radius: '50%',
|
|
data: [
|
|
{ value: 1048, name: '搜索引擎' },
|
|
{ value: 735, name: '直接访问' },
|
|
{ value: 580, name: '邮件营销' },
|
|
{ value: 484, name: '联盟广告' },
|
|
{ value: 300, name: '视频广告' },
|
|
],
|
|
emphasis: {
|
|
itemStyle: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
};
|
|
|
|
defineProps({
|
|
width: {
|
|
type: String as PropType<string>,
|
|
default: '100%',
|
|
},
|
|
height: {
|
|
type: String as PropType<string>,
|
|
default: '320px',
|
|
},
|
|
});
|
|
const chartRef = ref<HTMLDivElement | null>(null);
|
|
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
|
|
|
|
onMounted(() => {
|
|
setOptions(option as any);
|
|
});
|
|
</script>
|