完整版echarts实时显示sql数据库数据

最新推荐文章于 2024-07-13 15:08:27 发布

橙子好不好

最新推荐文章于 2024-07-13 15:08:27 发布

阅读量1.2w

点赞数 22

文章标签： echarts dynamic-data sqlsever

本文链接：https://blog.csdn.net/qq_25827785/article/details/103498558

版权

本文提供了一个完整的教程，详细介绍了如何使用 Echarts 实现从 SQL Server 数据库获取并实时显示数据。从新建 web 项目到配置数据库连接、 Dao 实现、Servlet 处理请求，再到 Web.xml 配置，每个步骤都有所涉及，适合初学者学习。通过该教程，读者可以了解如何将动态数据集成到 Echarts 图表中。

摘要由CSDN通过智能技术生成

首先讲一讲！echarts官网很多很多的例子都是静态数据，对于开发者后续的开发确实不太友好，而且网上许多地方都是部分重要代码，对初学者而言也难以整体掌握。当然我也是初学者中的一员，这次成功的实现可视化之后就打算写篇完整的代码提供给初学者学习。

首先新建web项目；
给点初始化dom（记得引入echarts、jquery文件）

<div id="main" style="height:400px;width:600px"></div>

写入echarts主题

<script type="text/javascript">
                var myChart = echarts.init(document.getElementById('main')); 
                myChart.setOption ({
                    title:{
                    	text:'异步数据加载'
                    },
                    legend: {
                        data:['销量']
                    },
                    xAxis : 
                        {
                            data:[]     
                        }
                    ,
                    yAxis : {},
                    series : [
                        {
                            "name":"销量",
                            "type":"bar",   
                            data:[]
                        }
                    ]
                })
         myChart.showLoading();	//上部分为echarts基本实现，下部分为ajax异步获取数据
         var names=[];
         var nums=[];
		 $.ajax({
               type : "post",
               async : true,
               url : "bar.do",  //重点说明！！这个url是后续servlet的映射地址，请相对应。
               data : {},
               dataType : "json",
               success : function(result) {
                          if (result) {
                                  for(var i=0;i<result.length;i++){
                                    names.push(result[i].name);
                                  }
                                  for(var i=0;i<result.length;i++){
                                    nums.push(result[i].num);
                                  }
                     			  myChart.hideLoading();
                     			  myChart.setOption({
                     			  	xAxis:{data:names},
                     			  	series:[{
                     			  		name:'销量',
                     			  		data: nums
                     			  	}]
                     			  })
                           }
                        },
                        error : function(errorMsg) {
				             //请求失败时执行该函数
				         alert("图表请求数据失败!");
				         myChart.hideLoading();
				       }
              
            });       

    </script>

声明一个实体类

public class barBean {
   
	public String name;
	public Integer num;
	public String getName() {
   
		return name;
	}
	public void setName(String name) {
   
		t