散点图为例

编写html代码
也可以

<!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('js/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>

引入外部json文件，位于同目录下的Js文件夹

数据为json数据，可以根据情况进行数据修改，数据过大，删了大部分留下小部分作为展示
aqi-beijing.json

截图展示

心得

多看几个echarts图，你会发现数据都来源于data，简单的echarts图的数据很容易看懂，越复杂的数据的data就越多越复杂，echarts入门还是看官网，案例给的很详细，已经到了拿来就用的地步，你要做的就是消化练习。

根据json文件的格式数据，嵌套进echarts里面，echarts都是通过json格式获取数据。

下面会出一个springboot+mybatis+echarts的小的数据展示