echarts前端如何导入后端数据,形成散点图

echarts前端如何导入后端数据,形成散点图


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        
        <!-- 步骤1  引入ECharts的脚本文件 -->
        <script src="./js/echarts.min.js"></script>
        <script src="./js/jquery-3.4.1.min.js"></script>
    </head>
    <body>
          <!-- 步骤2  为 ECharts 准备一个定义了宽高的 DOM -->
          <div id="main" style="width: 600px;height:400px;"></div>
          
          <script>
          
                // 步骤3  初始化ECharts  基于准备好的dom,初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));
          
                // 步骤4  配置ECharts   指定图表的配置项和数据
                
                // JSON对象  {属性名1:属性值1, 属性名2: 属性值2, 属性名3: 属性值3}
                // JSON数组  [{属性名1:属性值1, 属性名2: 属性值2}, {属性名1:属性值1, 属性名2: 属性值2}, {属性名1:属性值1, 属性名2: 属性值2}]
                
                //定义图表的配置选项的JSON对象
                var option = {
  xAxis: {},
  yAxis: {},
  series: [
    {
      symbolSize: 
      data: 
      type: 'scatter'
    }
  ]
};
          
                // 步骤5 使用刚指定的配置项和数据显示图表
                myChart.setOption(option);
                $.get("http://localhost:8080/getTemperatureList", function(data){
                var max=[],min=[]
                $.each(data,function(index,temperature)){
                max[index]=temperature.max
                min[index]=temperatrue.min
                })
                
                myChart.setOption({
                    
                    series: [
                      {
                        symbolSize: 31,
                        data: data 
                        type: 'scatter'
                      }
                    ]
                    
                });
                }
              </script>
    </body>
</html>


``


![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/593848173556189.png "#left")

找个官网的例子,把后端返回的数据 处理成 和例子一样的就行了

通过接口请求后端数据,拿到数据后处理好格式,放入series data

把后台的数据放到echarts的data中就可以了