JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/echarts/dist/echarts.min.js"></script>
<div id="chart" style="width:300px;height:300px"></div>
<button id="btn">切换数据</button>
JavaScript
let data1 = []
for (let i = 1; i < 1441; i++) {
data1.push(Math.random()*100)
}
let data2 = []
for (let j = 1; j < 1441; j++) {
data2.push(0)
}
let data3 = []
for (let j = 1; j < 1441; j++) {
data3.push(j)
}
var myChart = echarts.init(document.getElementById('chart'));
var btn = document.getElementById('btn')
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: data3
},
yAxis: {},
series: [{
name: '销量',
type: 'line',
data: data1
}],
dataZoom: [{
type: 'slider',
start: 2,
end: 5
}]
};
myChart.setOption(option);
btn.addEventListener('click', function () {
console.log('change', data2)
myChart.setOption({
series: [{
name: '销量',
type: 'line',
data: data2
}]
});
})