160 lines
3.4 KiB
Vue
160 lines
3.4 KiB
Vue
<template>
|
|
<n-space :vertical="true" :size="16">
|
|
<n-card :bordered="false" class="rounded-16px shadow-sm">
|
|
<div ref="pieRef" class="h-400px"></div>
|
|
</n-card>
|
|
<n-card :bordered="false" class="rounded-16px shadow-sm">
|
|
<div ref="lineRef" class="h-400px"></div>
|
|
</n-card>
|
|
<n-card :bordered="false" class="rounded-16px shadow-sm">
|
|
<div ref="barRef" class="h-400px"></div>
|
|
</n-card>
|
|
<n-card :bordered="false" class="rounded-16px shadow-sm">
|
|
<div ref="scatterRef" class="h-400px"></div>
|
|
</n-card>
|
|
</n-space>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed } from 'vue';
|
|
import { useThemeStore } from '@/store';
|
|
import { useEcharts, type ECOption } from '@/hooks';
|
|
|
|
const theme = useThemeStore();
|
|
|
|
const darkMode = computed(() => theme.darkMode);
|
|
|
|
const pieOptions = ref<ECOption>({
|
|
legend: {},
|
|
toolbox: {
|
|
show: true,
|
|
feature: {
|
|
mark: { show: true },
|
|
dataView: { show: true, readOnly: false },
|
|
restore: { show: true },
|
|
saveAsImage: { show: true }
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: 'Nightingale Chart',
|
|
type: 'pie',
|
|
radius: [50, 150],
|
|
center: ['50%', '50%'],
|
|
roseType: 'area',
|
|
itemStyle: {
|
|
borderRadius: 8
|
|
},
|
|
data: [
|
|
{ value: 40, name: 'rose 1' },
|
|
{ value: 38, name: 'rose 2' },
|
|
{ value: 32, name: 'rose 3' },
|
|
{ value: 30, name: 'rose 4' },
|
|
{ value: 28, name: 'rose 5' },
|
|
{ value: 26, name: 'rose 6' },
|
|
{ value: 22, name: 'rose 7' },
|
|
{ value: 18, name: 'rose 8' }
|
|
]
|
|
}
|
|
]
|
|
});
|
|
const { domRef: pieRef } = useEcharts(pieOptions, darkMode);
|
|
|
|
const lineOptions = ref<ECOption>({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#6a7985'
|
|
}
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
|
type: 'line',
|
|
smooth: true
|
|
}
|
|
]
|
|
});
|
|
const { domRef: lineRef } = useEcharts(lineOptions, darkMode);
|
|
|
|
const barOptions = ref<ECOption>({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
label: {
|
|
backgroundColor: '#6a7985'
|
|
}
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
data: [120, 200, 150, 80, 70, 110, 130],
|
|
type: 'bar',
|
|
showBackground: true,
|
|
backgroundStyle: {
|
|
color: 'rgba(180, 180, 180, 0.2)'
|
|
}
|
|
}
|
|
]
|
|
});
|
|
const { domRef: barRef } = useEcharts(barOptions, darkMode);
|
|
|
|
const scatterOptions = ref<ECOption>({
|
|
tooltip: {},
|
|
xAxis: {},
|
|
yAxis: {},
|
|
series: [
|
|
{
|
|
symbolSize: 20,
|
|
data: [
|
|
[10.0, 8.04],
|
|
[8.07, 6.95],
|
|
[13.0, 7.58],
|
|
[9.05, 8.81],
|
|
[11.0, 8.33],
|
|
[14.0, 7.66],
|
|
[13.4, 6.81],
|
|
[10.0, 6.33],
|
|
[14.0, 8.96],
|
|
[12.5, 6.82],
|
|
[9.15, 7.2],
|
|
[11.5, 7.2],
|
|
[3.03, 4.23],
|
|
[12.2, 7.83],
|
|
[2.02, 4.47],
|
|
[1.05, 3.33],
|
|
[4.05, 4.96],
|
|
[6.03, 7.24],
|
|
[12.0, 6.26],
|
|
[12.0, 8.84],
|
|
[7.08, 5.82],
|
|
[5.02, 5.68]
|
|
],
|
|
type: 'scatter'
|
|
}
|
|
]
|
|
});
|
|
|
|
const { domRef: scatterRef } = useEcharts(scatterOptions, darkMode);
|
|
</script>
|
|
|
|
<style scoped></style>
|