179 lines
2.2 KiB
Vue
179 lines
2.2 KiB
Vue
<script setup>
|
|
import { useTheme } from 'vuetify'
|
|
import { getScatterChartConfig } from '@core/libs/apex-chart/apexCharConfig'
|
|
|
|
const vuetifyTheme = useTheme()
|
|
const scatterChartConfig = computed(() => getScatterChartConfig(vuetifyTheme.current.value))
|
|
|
|
const series = [
|
|
{
|
|
name: 'Angular',
|
|
data: [
|
|
{
|
|
x: 5.4,
|
|
y: 170,
|
|
},
|
|
{
|
|
x: 5.4,
|
|
y: 100,
|
|
},
|
|
{
|
|
x: 6.3,
|
|
y: 170,
|
|
},
|
|
{
|
|
x: 5.7,
|
|
y: 140,
|
|
},
|
|
{
|
|
x: 5.9,
|
|
y: 130,
|
|
},
|
|
{
|
|
x: 7,
|
|
y: 150,
|
|
},
|
|
{
|
|
x: 8,
|
|
y: 120,
|
|
},
|
|
{
|
|
x: 9,
|
|
y: 170,
|
|
},
|
|
{
|
|
x: 10,
|
|
y: 190,
|
|
},
|
|
{
|
|
x: 11,
|
|
y: 220,
|
|
},
|
|
{
|
|
x: 12,
|
|
y: 170,
|
|
},
|
|
{
|
|
x: 13,
|
|
y: 230,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'Vue',
|
|
data: [
|
|
{
|
|
x: 14,
|
|
y: 220,
|
|
},
|
|
{
|
|
x: 15,
|
|
y: 280,
|
|
},
|
|
{
|
|
x: 16,
|
|
y: 230,
|
|
},
|
|
{
|
|
x: 18,
|
|
y: 320,
|
|
},
|
|
{
|
|
x: 17.5,
|
|
y: 280,
|
|
},
|
|
{
|
|
x: 19,
|
|
y: 250,
|
|
},
|
|
{
|
|
x: 20,
|
|
y: 350,
|
|
},
|
|
{
|
|
x: 20.5,
|
|
y: 320,
|
|
},
|
|
{
|
|
x: 20,
|
|
y: 320,
|
|
},
|
|
{
|
|
x: 19,
|
|
y: 280,
|
|
},
|
|
{
|
|
x: 17,
|
|
y: 280,
|
|
},
|
|
{
|
|
x: 22,
|
|
y: 300,
|
|
},
|
|
{
|
|
x: 18,
|
|
y: 120,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'React',
|
|
data: [
|
|
{
|
|
x: 14,
|
|
y: 290,
|
|
},
|
|
{
|
|
x: 13,
|
|
y: 190,
|
|
},
|
|
{
|
|
x: 20,
|
|
y: 220,
|
|
},
|
|
{
|
|
x: 21,
|
|
y: 350,
|
|
},
|
|
{
|
|
x: 21.5,
|
|
y: 290,
|
|
},
|
|
{
|
|
x: 22,
|
|
y: 220,
|
|
},
|
|
{
|
|
x: 23,
|
|
y: 140,
|
|
},
|
|
{
|
|
x: 19,
|
|
y: 400,
|
|
},
|
|
{
|
|
x: 20,
|
|
y: 200,
|
|
},
|
|
{
|
|
x: 22,
|
|
y: 90,
|
|
},
|
|
{
|
|
x: 20,
|
|
y: 120,
|
|
},
|
|
],
|
|
},
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<VueApexCharts
|
|
type="scatter"
|
|
height="400"
|
|
:options="scatterChartConfig"
|
|
:series="series"
|
|
/>
|
|
</template>
|