使用Echarts总结之——使用柱状图和地图与后台数据交互

一、引入js

当然首先肯定是要引入相关的echart,

简单的开发基本上一个<script language="javascript" type="text/javascript" src="${base}/echarts/dist/echarts-all.js"></script>就足够了

至于需要哪些echart相关文件放入到项目中，通过官网下载echarts(这里是echarts-2.27)，将build目录下所有文件拷贝到项目中，然后引用echarts-all.js就可以

二、开发

      1》开发柱状图：

                1、jsp或html页面，写一个存放图的地方

                           如：<div id="myEchart" style="height:500px;"></div>

            2、js内容：主要也就是调用主要的option，这个可以直接从Echat自带的实例中获取，用哪个取哪个

                        如柱状图例子：

                                var myChart,option;

                                function queryDataTest(){

                                              //获取图表位置

                                              myChart = echarts.init(document.getElementById("myEchart"));

                                              option = {..........}//这里内容可以直接从Echat自带的列子中取

                                              myChart.setOption(option);//将图表内容格式内容放入到myChart位置
                                              myChart.hideLoading();  
                                              getChartData();//aja后台交互

                                }

                               //后台交互

                              function   getChartData(){

                                       //获得图表的options对象
                                       var options = myChart.getOption();

                                       var param1 = $("#param1 ").val();
                                       var param2= $("#param2").val();

                                       var _data = {"param1":param1,.....};这里可以加请求的参数

                                        //通过ajax获取数据
                                       $.ajax({

                                                   type:"post",

                                                   async:false,

                                                   url:base + "/monitor/RegUser_test.do",//请求路径

                                                  dataType:"json",//返回数据形式为json

                                                  data:_data,

                                                  success:function(result){

                                                             if(result){

                                                                      options.legend.data = result.legend;  //legend赋值数据

                                                                      options.xAxis[0].data=  result[0].xdata；//x轴赋值数据

                                                                      options.series[0].data= result[0].data；//y轴赋值数据

                                                                      myChart.hideLoading(); 

                                                                      myChart.setOption(options);

                                                             }

                                                   }，

                                                  error:function(errorMsg){
                                                             alert("图表请求数据失败啦!");
                                                             myChart.hideLoading();
                                                   }

                                       })

                              }

                      

               3.java 后台代码

                                 List<EchartData> echartDataList = new ArrayList<EchartData>();

                                 EchartData echart = new EcharData();

                                  echart.setLegend("增长量");

                                  echart.setXdata(new ArrayList<String>(Arrays.asList("北京","天津".................)));//里面值填充数组 datas = new String[]{"北京","天津"....}

                                  echart.setData(new ArrayList<Integer>(Arrays.asList(2,7,8....)));//里面值填充数组 datas = new Integer[]{2,7,8.....}

                                  echartDataList.add(echart);

                                  return JSONArray.fromOjbect(echartDataList);//将值一json格式返回

                       EchartData.java 代码

                                      private Stringlegend;

                                      private List<String> xdata;

                                      private List<Integer>data;

                                      public EchartData(){}

                                      public EchartData(String legend, List<String> xdata, List<Integer> data){

                                                    this.legend = legend;

                                                    ......

                                      }

                                      生成get /set  

 OK 效果图：

        1》开发地图：

                步骤都一样，赋值的时候

                           关键是在赋值的时候，地图 的数据是  data:[{name:'北京',value:20}............]这样的形式name和value,并且省直辖市的名称必须按照自带的名称一样，不然数据出不来，顺序可以随便排序

                          注：省份字段名（北京, 天津, 上海, 重庆, 河北, 河南, 云南, 辽宁, 黑龙江, 湖南, 安徽, 山东, 新疆, 江苏, 浙江, 江西, 湖北, 广西, 甘肃, 山西, 内蒙古, 陕西, 吉林, 福建, 贵州, 广东, 青海, 西藏, 四川, 宁夏, 海南, 台湾, 香港, 澳门）

                             java后台代码：可以用一个list封装数据

                               List<DataAnlysPicDomain>  dataAnlysList = regUserService.getDataAnlysList(参数);

                              JSONArray.fromObject(dataAnlysList);

                             DataAnlysPicDomain.java

                                         private String name;

                                         private Integer value;

                                         get set方法

                                在ajax请求直接

                                     success:function(result){

                                                  if(result){
                                                       options.series[0].data = result;//赋值
                                                        myChart.hideLoading();  
                                                        myChart.setOption(options);
                                                     }

                                      }