开源教程在线编辑器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个 ECharts 实例</title>
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
    
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var base = +new Date(2014, 9, 3);
		var oneDay = 24 * 3600 * 1000;
		var date = [];

var data = [Math.random() * 150];
		var now = new Date(base);

function addData(shift) {
		    now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
		    date.push(now);
		    data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);

if (shift) {
		        date.shift();
		        data.shift();
		    }

now = new Date(+new Date(now) + oneDay);
		}

for (var i = 1; i < 100; i++) {
		    addData();
		}

option = {
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: date
		    },
		    yAxis: {
		        boundaryGap: [0, '50%'],
		        type: 'value'
		    },
		    series: [
		        {
		            name:'成交',
		            type:'line',
		            smooth:true,
		            symbol: 'none',
		            stack: 'a',
		            areaStyle: {
		                normal: {}
		            },
		            data: data
		        }
		    ]
		};

setInterval(function () {
		    addData(true);
		    myChart.setOption({
		        xAxis: {
		            data: date
		        },
		        series: [{
		            name:'成交',
		            data: data
		        }]
		    });
		}, 500);
		
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option)
    </script>
</body>