<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.common.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具有大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var res = [{ "timeline": 1545447600000, "value": 58.0 }, { "timeline": 1545451200000, "value": 54.0 }, { "timeline": 1545454800000, "value": 51.0 }, { "timeline": 1545458400000, "value": 53.0 }, { "timeline": 1545462000000, "value": 59.0 }, { "timeline": 1545465600000, "value": 58.0 }, { "timeline": 1545469200000, "value": 51.0 }, { "timeline": 1545472800000, "value": 52.0 }, { "timeline": 1545476400000, "value": 55.0 }]; var res2 = [{ "timeline": 1545454800000, "value": 55.0 }, { "timeline": 1545458400000, "value": 59.0 }, { "timeline": 1545462000000, "value": 39.0 }, { "timeline": 1545465600000, "value": 28.0 }, { "timeline": 1545469200000, "value": 81.0 }, { "timeline": 1545472800000, "value": 62.0 }, { "timeline": 1545476400000, "value": 45.0 }]; var myChart = echarts.init(document.getElementById('main')); var data = []; res.forEach((item)=>{ var time = new Date(item.timeline); var formatedTime = [time.getFullYear(), time.getMonth() + 1, time.getDate()].join('-')+' '+[time.getHours(),time.getMinutes()+'0',time.getSeconds()+'0'].join(':'); var obj = {name:formatedTime,value: [formatedTime,item.value]}; data.push(obj); }) var data2 = []; res2.forEach((item)=>{ var time = new Date(item.timeline); var formatedTime = [time.getFullYear(), time.getMonth() + 1, time.getDate()].join('-')+' '+[time.getHours(),time.getMinutes()+'0',time.getSeconds()+'0'].join(':'); var obj = {name:formatedTime,value: [formatedTime,item.value]}; data2.push(obj); }) // 指定图表的配置项和数据
var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { type: 'time', splitLine: { show: false } }, yAxis: { type: 'value', boundaryGap: [0, '100%'], splitLine: { show: false } }, series: [{ name: '销量', type: 'line', // showSymbol:false,
data: data, }, { name: '销量2', type: 'line', // showSymbol:false,
data: data2, }], }; // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option); </script>
</html>