Apache ECharts Basic Example

echarts-basic-example-template

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/npm/echarts@6/dist/echarts.min.js"></script>
</head>
<body>

<button id="enableZoom">Enable Drag Zoom</button>
<button id="disableZoom">Disable Drag Zoom</button>
<button id="resetZoom">Reset Zoom</button>

<div id="chart" style="width:1000px;height:500px;"></div>

<script>
const chart = echarts.init(document.getElementById('chart'));

const data = [];
for (let i = 0; i < 100; i++) {
    data.push([
        i,
        Math.sin(i / 10) * 10 + Math.random() * 2
    ]);
}

chart.setOption({
    tooltip: {},
    toolbox: {
        feature: {
            dataZoom: {
                yAxisIndex: 'none'
            },
            restore: {}
        }
    },
    xAxis: {
        type: 'value'
    },
    yAxis: {
        type: 'value'
    },
    dataZoom: [
        {
            type: 'inside'
        },
        {
            type: 'slider'
        }
    ],
    series: [
        {
            type: 'line',
            data
        }
    ]
});

document
    .getElementById('enableZoom')
    .addEventListener('click', () => {
        chart.dispatchAction({
            type: 'takeGlobalCursor',
            key: 'dataZoomSelect',
            dataZoomSelectActive: true
        });
    });

document
    .getElementById('disableZoom')
    .addEventListener('click', () => {
        chart.dispatchAction({
            type: 'takeGlobalCursor',
            key: 'dataZoomSelect',
            dataZoomSelectActive: false
        });
    });

document
    .getElementById('resetZoom')
    .addEventListener('click', () => {
        chart.dispatchAction({
            type: 'dataZoom',
            start: 0,
            end: 100
        });
    });
</script>

</body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
}

#chart-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}