完整版echarts实时显示sql数据库数据_java中sql查出来的数据用echarts图展示

**

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

**

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

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

3. 写入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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

4. 声明一个实体类

public class barBean {
   
	public String name;
	public Integer num;
	public String getName() {
   
		return name;
	}
	public void setName(String name) {
   
		this.
1
2
3
4
5
6
7
8
9
10