console
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ECharts</title>
</head>
<body>
<div id="main" style="width: 100%;height:400px;"></div>
<script type="text/javascript">
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
let base = +new Date(1988, 9, 3);
let oneDay = 24 * 3600 * 1000;
let dataA = [[base, Math.random() * 300]];
for (let i = 1; i < 100; i++) {
let now = new Date((base += oneDay));
dataA.push([+now, Math.round((Math.random() - 0.5) * 20 + dataA[i - 1][1])]);
}
let base1 = +new Date(1988, 9, 3);
let dataB = [[base, Math.random() * 400]];
for (let i = 1; i < 100; i++) {
let now = new Date((base1 += oneDay));
console.log("dddd",+now)
dataB.push([+now, Math.round((Math.random() - 0.5) * 20 + dataB[i - 1][1])]);
}
let series = [];
let series1 = {
name: 'Fake Data',
type: 'line',
smooth: true,
symbol: 'none',
data:dataA
}
let series2 = {
name: 'Fake Data2',
type: 'line',
smooth: true,
symbol: 'none',
data:dataB
}
series.push(series1);
series.push(series2);
option = {
tooltip: {
trigger: 'axis',
position: function (pt) {
return [pt[0], '10%'];
}
},
title: {
left: 'center',
text: 'Large Ara Chart'
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'time',
boundaryGap: false
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%']
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 20
},
{
start: 0,
end: 20
}
],
series: series
};
option && myChart.setOption(option);
</script>
</body>
</html>