<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>五分钟上手之散点图</title> <!-- 引入 echarts.js --> <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script> <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div style="height: 500px;width: 1000px;" id="main"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById("main")); var x_data = [1,2,3,4] var y_data = [1,20,3,40] myChart.setOption({ title : { /*text : '睡眠质量监测', textStyle:{ fontSize:12, }*/ }, tooltip : { trigger : 'axis' }, xAxis : { data : x_data }, yAxis : { splitLine : { show : false } }, /* toolbox : { left : 'center', feature : { dataZoom : { yAxisIndex : 'none' }, restore : {}, saveAsImage : {} } },*/ dataZoom : [ { startValue : '2014-06-01' }, { type : 'inside' } ], visualMap : { top : 10, right : 10, pieces : [ { gt : 1, lte : 2, label:'浅睡', color : '#ff9933' }, { gt : 2, lte : 3, label:'深睡', color : '#cc0033' }, { gt : 3, lte : 4, label:'熟睡', color : '#660099' } ], outOfRange : { color : '#999' } }, series : { name : '睡眠', type : 'line', data : y_data, markLine : { silent : true, data : [ { yAxis : 1 }, { yAxis : 2 }, { yAxis : 3 } ] } } }); myChart.setOption(option) </script> </body> </html>
模拟数据
json数据
https://echarts.baidu.com/examples/data/asset/data/aqi-beijing.json
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>五分钟上手之散点图</title> <!-- 引入 echarts.js --> <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script> <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div style="height: 500px;width: 1000px;" id="main"></div> <script type="text/javascript"> var myChart = echarts.init(document.getElementById("main")); $.get('aqi-beijing.json', function (data) { myChart.setOption({ title : { /*text : '睡眠质量监测', textStyle:{ fontSize:12, }*/ }, tooltip : { trigger : 'axis' }, xAxis : { data: data.map(function (item) { return item[0]; }) }, yAxis : { splitLine : { show : false } }, /* toolbox : { left : 'center', feature : { dataZoom : { yAxisIndex : 'none' }, restore : {}, saveAsImage : {} } },*/ dataZoom : [ { startValue : '2014-06-01' }, { type : 'inside' } ], visualMap : { top : 10, right : 10, pieces : [ { gt : 1, lte : 2, label:'浅睡', color : '#ff9933' }, { gt : 2, lte : 3, label:'深睡', color : '#cc0033' }, { gt : 3, lte : 4, label:'熟睡', color : '#660099' } ], outOfRange : { color : '#999' } }, series : { name : '睡眠', type : 'line', data: data.map(function (item) { return item[1]; }), markLine : { silent : true, data : [ { yAxis : 1 }, { yAxis : 2 }, { yAxis : 3 } ] } } }); }) myChart.setOption(option) </script> </body> </html>
