134 lines
4.1 KiB
JavaScript
134 lines
4.1 KiB
JavaScript
|
|
|
|
const charts = [];
|
|
function getOptionApi(isDark) {
|
|
const gridColor = isDark ? 'var(--color-zinc-800)' : 'var(--color-zinc-200)';
|
|
const textColor = isDark ? 'var(--color-zinc-300)' : 'var(--color-zinc-500)';
|
|
return {
|
|
backgroundColor: 'transparent',
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
backgroundColor: isDark ? 'var(--color-zinc-800)' : 'var(--color-white)',
|
|
borderColor: gridColor,
|
|
textStyle: {
|
|
fontFamily: 'inherit',
|
|
color: textColor
|
|
},
|
|
formatter: function (params) {
|
|
const value = params[0].value;
|
|
return `${params[0].axisValue}<br/><span>${value}</span>`;
|
|
}
|
|
},
|
|
grid: {
|
|
right: '40px',
|
|
left: '10px',
|
|
bottom: '30px',
|
|
top: '3%'
|
|
},
|
|
legend: {
|
|
show: false,
|
|
bottom: 0,
|
|
itemGap: 20,
|
|
textStyle: {
|
|
fontFamily: 'inherit',
|
|
color: textColor
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45'],
|
|
axisLine: { lineStyle: { color: gridColor } },
|
|
axisLabel: {
|
|
align: 'left',
|
|
fontSize: 11,
|
|
padding: [0, 0, 0, 5],
|
|
showMaxLabel: false,
|
|
color: textColor,
|
|
fontFamily: 'inherit',
|
|
|
|
}
|
|
},
|
|
yAxis: {
|
|
position: 'right',
|
|
axisTick: 'none',
|
|
type: 'value',
|
|
axisLine: { show: false, lineStyle: { color: gridColor } },
|
|
axisLabel: {
|
|
fontFamily: 'inherit',
|
|
fontSize: 'var(--text-xs)',
|
|
color: textColor,
|
|
formatter: value => value / 1000 + 'k'
|
|
},
|
|
splitLine: { lineStyle: { color: gridColor } }
|
|
},
|
|
series: [
|
|
{
|
|
type: 'line',
|
|
data: [300, 580, 450, 660, 570, 730, 650, 800, 700, 860, 680, 890, 770, 1100, 800, 1250, 900, 1440, 1050, 1700],
|
|
symbol: 'none',
|
|
smooth: true,
|
|
areaStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0,
|
|
color: 'var(--color-primary-subtle)'
|
|
}, {
|
|
offset: 1,
|
|
color: 'rgba(0,0,0,0)'
|
|
}]
|
|
}
|
|
},
|
|
lineStyle: {
|
|
color: 'var(--color-primary)',
|
|
width: 2
|
|
},
|
|
emphasis: {
|
|
disabled: true
|
|
},
|
|
}
|
|
]
|
|
};
|
|
}
|
|
function initChart(el, getOptionFn) {
|
|
const chart = echarts.init(el, null, { renderer: 'svg' });
|
|
charts.push({ chart, getOptionFn, el });
|
|
|
|
chart.setOption(getOptionFn(isDarkMode()));
|
|
// ResizeObserver
|
|
if (window.ResizeObserver) {
|
|
const resizeObserver = new ResizeObserver(() => chart.resize());
|
|
resizeObserver.observe(el);
|
|
}
|
|
}
|
|
|
|
function isDarkMode() {
|
|
return document.documentElement.classList.contains('dark');
|
|
}
|
|
|
|
function rerenderAll() {
|
|
const isDark = isDarkMode();
|
|
charts.forEach(({ chart, getOptionFn }) => {
|
|
chart.setOption(getOptionFn(isDark));
|
|
});
|
|
}
|
|
|
|
|
|
// Rerender on theme change
|
|
const themeObserver = new MutationObserver(rerenderAll);
|
|
themeObserver.observe(document.documentElement, {
|
|
attributes: true,
|
|
attributeFilter: ['class']
|
|
});
|
|
|
|
// Rerender on window resize (fallback)
|
|
window.addEventListener('resize', () => {
|
|
charts.forEach(({ chart }) => chart.resize());
|
|
});
|
|
// Initialize all charts
|
|
initChart(document.getElementById('chart_api'), getOptionApi); |