import { ECharts } from 'echarts';
import { useEffect } from 'react';
import { getDataZoom } from '@opm/shared/echarts';
export const useScrollEChart = (
echarts: ECharts | undefined,
dataZoomId: string,
) => {
useEffect(() => {
// код ниже для реализации вне React
if (!echarts) return;
let startPercent: number;
let endPercent: number;
const mouseWheelHandler = (e: WheelEvent) => {
// тут нужно получить id той оси которую нужно скроллить - тут это реализовано через кастомный хук - но вы можете это сделать как вас будет удобно
const dataZoom = getDataZoom(echarts, [dataZoomId]);
startPercent = dataZoom[0].start;
endPercent = dataZoom[0].end;
if (e.deltaY > 0 && endPercent < 100) {
const increment = Math.min(4, 100 - endPercent);
startPercent += increment;
endPercent += increment;
}
if (e.deltaY < 0 && startPercent > 0) {
const decrement = Math.min(4, startPercent);
startPercent -= decrement;
endPercent -= decrement;
}
// передаём параметры для echart dataZoom потому что это единственный способ проскроллить
echarts.dispatchAction({
type: 'dataZoom',
batch: [
{
dataZoomId,
start: startPercent,
end: endPercent,
},
],
});
};
echarts.getDom()?.addEventListener('wheel', mouseWheelHandler);
return () => {
echarts.getDom()?.removeEventListener('wheel', mouseWheelHandler);
};
}, [echarts, dataZoomId]);
};//Удаление дочерних элементов перед заполнением
let childrens = [...output.children];
childrens.forEach(item => item.remove())//Удаление дочерних элементов перед заполнением
output.innerHtml = ''
fetch('https://jsonplaceholder.typicode.com/posts.json')
// получили Джейсон с сервера
.then( anyName => anyName.json() )
// Преобразовали Джейсон в объект джаваскрипи
.then ( againAnyName => {
console.log(againAnyName)
let jsonFile = againAnyName;
}
// выводим полученный объект в консоль, и/или присваиваем объект новой переменной*{
padding: 0;
margin: 0;
}/* reset.css */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
box-sizing: border-box;
font: 18px 'Golos', Helvetica, Roboto, Arial, sans-serif;
line-height: normal;
}
* {
scrollbar-width: thin;
}
*:hover, *:active{
-webkit-tap-highlight-color: transparent
}
a {
text-decoration: none;
color: inherit;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
html {
min-height: 100%;
scrollbar-width: thin;
}class Sizer {
constructor(){
document.addEventListener('DOMContentLoaded', ()=>{
// windowHeght/Width - размер с учётом ширины скролл полосы
// documentHeght/Width - размер с учётом ширины скролл полосы
this.windowWidth = window.innerWidth;
this.windowHeight = window.innerHeight;
this.documentWidth = document.body.clientWidth;
this.documentHeight = document.body.clientHeight;
})
window.addEventListener('resize', ()=>{
this.windowWidth = window.innerWidth;
this.windowHeight = window.innerHeight;
this.documentWidth = document.body.clientWidth;
this.documentHeight = document.body.clientHeight;
})
}
}
let sizer = new Sizer;
window.addEventListener('resize', ()=>{
if(sizer.windowWidth < 1199){
console.log('размер окна меньше 1199px');
// тут можно писать что будет происходить с сайтом/разметкой/класса CSS если ширина окна меньше 1199px
}
})window.addEventListener('resize', ()=>{
if(document.body.clientWidth < 1199){
console.log('размер окна без учёта прокрутки меньше 1199px');
// тут можно писать что будет происходить с сайтом/разметкой/класса CSS если ширина окна меньше 1199px
}
})