linsxw
8 months ago
12 changed files with 28 additions and 319 deletions
@ -1,3 +0,0 @@
@@ -1,3 +0,0 @@
|
||||
# Components |
||||
|
||||
Components in this dir will be auto-registered and on-demand, powered by [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components). |
@ -1,179 +0,0 @@
@@ -1,179 +0,0 @@
|
||||
const contrastColor = 'rgba(255, 255, 255, 0.65)' |
||||
const backgroundColor = 'transparent' |
||||
const axisCommon = function () { |
||||
return { |
||||
axisLine: { |
||||
lineStyle: { |
||||
color: contrastColor, |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: '#484753', |
||||
}, |
||||
}, |
||||
splitArea: { |
||||
areaStyle: { |
||||
color: ['rgba(255,255,255,0.02)', 'rgba(255,255,255,0.05)'], |
||||
}, |
||||
}, |
||||
minorSplitLine: { |
||||
lineStyle: { |
||||
color: '#20203B', |
||||
}, |
||||
}, |
||||
} |
||||
} |
||||
|
||||
const colorPalette = [ |
||||
'#4992ff', |
||||
'#7cffb2', |
||||
'#fddd60', |
||||
'#ff6e76', |
||||
'#58d9f9', |
||||
'#05c091', |
||||
'#ff8a45', |
||||
'#8d48e3', |
||||
'#dd79ff', |
||||
] |
||||
const theme: any = { |
||||
color: colorPalette, |
||||
backgroundColor, |
||||
axisPointer: { |
||||
lineStyle: { |
||||
color: '#817f91', |
||||
}, |
||||
crossStyle: { |
||||
color: '#817f91', |
||||
}, |
||||
label: { |
||||
// TODO Contrast of label backgorundColor
|
||||
color: '#fff', |
||||
}, |
||||
}, |
||||
legend: { |
||||
textStyle: { |
||||
color: contrastColor, |
||||
}, |
||||
}, |
||||
textStyle: { |
||||
color: contrastColor, |
||||
}, |
||||
title: { |
||||
textStyle: { |
||||
color: 'red', |
||||
}, |
||||
subtextStyle: { |
||||
color: 'rgba(255, 255, 255, 0.65)', |
||||
}, |
||||
}, |
||||
toolbox: { |
||||
iconStyle: { |
||||
borderColor: contrastColor, |
||||
}, |
||||
}, |
||||
dataZoom: { |
||||
borderColor: '#71708A', |
||||
textStyle: { |
||||
color: contrastColor, |
||||
}, |
||||
brushStyle: { |
||||
color: 'rgba(135,163,206,0.3)', |
||||
}, |
||||
handleStyle: { |
||||
color: '#353450', |
||||
borderColor: '#C5CBE3', |
||||
}, |
||||
moveHandleStyle: { |
||||
color: '#B0B6C3', |
||||
opacity: 0.3, |
||||
}, |
||||
fillerColor: 'rgba(135,163,206,0.2)', |
||||
emphasis: { |
||||
handleStyle: { |
||||
borderColor: '#91B7F2', |
||||
color: '#4D587D', |
||||
}, |
||||
moveHandleStyle: { |
||||
color: '#636D9A', |
||||
opacity: 0.7, |
||||
}, |
||||
}, |
||||
dataBackground: { |
||||
lineStyle: { |
||||
color: '#71708A', |
||||
width: 1, |
||||
}, |
||||
areaStyle: { |
||||
color: '#71708A', |
||||
}, |
||||
}, |
||||
selectedDataBackground: { |
||||
lineStyle: { |
||||
color: '#87A3CE', |
||||
}, |
||||
areaStyle: { |
||||
color: '#87A3CE', |
||||
}, |
||||
}, |
||||
}, |
||||
visualMap: { |
||||
textStyle: { |
||||
color: contrastColor, |
||||
}, |
||||
}, |
||||
timeline: { |
||||
lineStyle: { |
||||
color: contrastColor, |
||||
}, |
||||
label: { |
||||
color: contrastColor, |
||||
}, |
||||
controlStyle: { |
||||
color: contrastColor, |
||||
borderColor: contrastColor, |
||||
}, |
||||
}, |
||||
calendar: { |
||||
itemStyle: { |
||||
color: backgroundColor, |
||||
}, |
||||
dayLabel: { |
||||
color: contrastColor, |
||||
}, |
||||
monthLabel: { |
||||
color: contrastColor, |
||||
}, |
||||
yearLabel: { |
||||
color: contrastColor, |
||||
}, |
||||
}, |
||||
timeAxis: axisCommon(), |
||||
logAxis: axisCommon(), |
||||
valueAxis: axisCommon(), |
||||
categoryAxis: axisCommon(), |
||||
|
||||
line: { |
||||
symbol: 'circle', |
||||
}, |
||||
graph: { |
||||
color: colorPalette, |
||||
}, |
||||
gauge: { |
||||
title: { |
||||
color: contrastColor, |
||||
}, |
||||
}, |
||||
candlestick: { |
||||
itemStyle: { |
||||
color: '#FD1050', |
||||
color0: '#0CF49B', |
||||
borderColor: '#FD1050', |
||||
borderColor0: '#0CF49B', |
||||
}, |
||||
}, |
||||
} |
||||
|
||||
theme.categoryAxis.splitLine.show = false |
||||
|
||||
export default theme |
@ -1,65 +0,0 @@
@@ -1,65 +0,0 @@
|
||||
<script setup lang="ts"> |
||||
import type { ECharts } from 'echarts' |
||||
import * as echarts from 'echarts' |
||||
import { debounce } from 'lodash-es' |
||||
import { addListener, removeListener } from 'resize-detector' |
||||
import dark from './dark' |
||||
|
||||
const props = defineProps({ |
||||
option: Object, |
||||
}) |
||||
|
||||
echarts.registerTheme('dark-chart', dark) |
||||
|
||||
const chartDom = ref<HTMLDivElement>() |
||||
let chart: ECharts | null = null |
||||
const isRealDark = ref(isDark.value) |
||||
function resizeChart() { |
||||
chart?.resize() |
||||
} |
||||
|
||||
const resize = debounce(resizeChart, 300) |
||||
|
||||
function disposeChart() { |
||||
if (chartDom.value) |
||||
removeListener(chartDom.value, resize) |
||||
|
||||
chart?.dispose() |
||||
chart = null |
||||
} |
||||
|
||||
function initChart() { |
||||
disposeChart() |
||||
if (chartDom.value) { |
||||
// init echarts |
||||
chart = echarts.init(chartDom.value, isRealDark.value ? 'dark-chart' : undefined) |
||||
chart.setOption(props.option) |
||||
addListener(chartDom.value, resize) |
||||
} |
||||
} |
||||
|
||||
watch(isRealDark, () => { |
||||
initChart() |
||||
}, { |
||||
flush: 'post', |
||||
}) |
||||
|
||||
onMounted(() => { |
||||
watch(() => props.option, () => { |
||||
chart?.setOption(props.option) |
||||
}, { |
||||
deep: true, |
||||
flush: 'post', |
||||
}) |
||||
|
||||
initChart() |
||||
}) |
||||
|
||||
onUnmounted(() => { |
||||
disposeChart() |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<div ref="chartDom" /> |
||||
</template> |
@ -1,15 +0,0 @@
@@ -1,15 +0,0 @@
|
||||
export interface SeriesDataItem { |
||||
x: any |
||||
y: any |
||||
} |
||||
|
||||
export interface RadarDataItem { |
||||
label: string |
||||
name: string |
||||
value: string | number |
||||
} |
||||
|
||||
export interface RadarIndicatorItem { |
||||
name: string |
||||
max: number |
||||
} |
@ -1,5 +0,0 @@
@@ -1,5 +0,0 @@
|
||||
<template> |
||||
<main class="h-full w-full p-16 py-60"> |
||||
<slot /> |
||||
</main> |
||||
</template> |
@ -1,5 +0,0 @@
@@ -1,5 +0,0 @@
|
||||
export { default as Container } from './container/index.vue' |
||||
|
||||
// charts
|
||||
export { default as Chart } from './chart/index.vue' |
||||
export type { SeriesDataItem, RadarDataItem, RadarIndicatorItem } from './chart/typing' |
@ -1,4 +0,0 @@
@@ -1,4 +0,0 @@
|
||||
// these APIs are auto-imported from @vueuse/core
|
||||
export const isDark = useDark() |
||||
export const toggleDark = useToggle(isDark) |
||||
export const preferredDark = usePreferredDark() |
Loading…
Reference in new issue