为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 echarts饼图，柱状图，折线图动态获取数据

echarts饼图，柱状图，折线图动态获取数据

标签：
Java

项目路径
图片描述

饼图动态获取数据的两种方式
前台代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery.min.js"></script> 
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/echarts.min.js"></script> //引入两个js文件
</head>
<body>

//展示图的div，需要设置宽度高度，以及设置id
<div id="main" style="width: 1000px;height:700px"></div>  

<script type="text/javascript">  
    var myChart = echarts.init(document.getElementById('main')); 
    option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data:[]
            },
            series : []       
        };
      //加载数据  
      jQuery.ajax({  
        url:"index/getPieData.do",  //访问后台的路径
        type:'get',  
        dataType:'json',  
        success:function(jsons){  
            var Item = function(){  
                return {  
                    name:'',
                    type:'pie',//柱状图
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[]
                    }  
                };  
            var Series = [];  
            var arr = [];
            for(var i=0;i < jsons.legends.length;i++){  
                var it = new Item();  
                it.name = jsons.legends[i]; 
                arr.push({
                    name :  jsons.nameList[i],
                    value : jsons.valueList[i]
                  }); 
                it.data = arr;
                Series.push(it);  
            }  
                        option.legend.data = jsons.legends;   // 设置legend
                        option.series = Series; // 设置图表  
                        myChart.setOption(option);// 重新加载图表  
        },  
        error:function(){  
            alert("数据加载失败！请检查数据链接是否正确");  
        }  
    });   
        // 初次加载图表(无数据)   
        myChart.setOption(option);   
    </script> 
</body>
</html>

后台的代码

package com.controller;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.client.util.Data;

@Controller
@RequestMapping("index/")
public class EchartsController {
@RequestMapping("getPieData.do")
@ResponseBody
public Map<String,Object> getPieDataByFree(){
     Map<String,Object> map = new HashMap<String,Object>();
     List<Integer> valueList =new ArrayList<Integer>();
     valueList.add(123);
     valueList.add(456);
     List<String> nameList =new ArrayList<String>();
     nameList.add("直接访问");
     nameList.add("邮件营销");
     String [] legends = {"直接访问","邮件营销"};
     map.put("legends", legends);    
     map.put("nameList", nameList);  
     map.put("valueList", valueList);    
    return map;
}

}

第二种方式（前台，后台的数据格式与上面的一样）

<div id="main" style="width: 1000px;height:700px"></div>  

<script type="text/javascript">  
  var myChart = echarts.init(document.getElementById('main')); 
    option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data:(function(){
                    var arr=[];
                    $.ajax({
                         type : "post",
                         async : false, //同步执行
                         url : "index/getPieData.do",
                         dataType : "json", //返回数据形式为json
                         success : function(result) {
                           if (result) {
                                for(var i=0;i<result.legends.length;i++){
                                arr.push(result.legends[i]); 
                             }    
                           }
                        },
                            error : function(errorMsg) {
                                 alert("不好意思,图表请求数据失败啦!");
                                 myChart.hideLoading();
                               }
                      })
                        return arr;
                      })()
            },
            series : [
                               {
                                   name:'访问来源',
                                   type:'pie',
                                   radius : '55%',
                                   center: ['50%', '60%'],
                                   data : (function(){
                                   var arr=[];
                                   $.ajax({
                                        type : "post",
                                        async : false, //同步执行
                                        url : "index/getPieData.do",
                                        dataType : "json", //返回数据形式为json
                                        success : function(result) {
                                          if (result) {
                                               for(var i=0;i<result.nameList.length;i++){
                                               arr.push({
                                                 name :  result.nameList[i],
                                                 value : result.valueList[i]
                                               }); 

                                            }    
                                          }
                                       },
                                           error : function(errorMsg) {
                                                alert("不好意思,图表请求数据失败啦!");
                                                myChart.hideLoading();
                                              }
                                     })
                                       return arr;
                                     })() 

                              }
                           ]
        };
        // 初次加载图表(无数据)   
        myChart.setOption(option);   
   </script>

折线图和柱状图的获取数据

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/jquery.min.js"></script> 
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/echarts.min.js"></script>
</head>
<body>

<div id="main" style="width: 1000px;height:700px"></div>  

<script type="text/javascript">  

    var myChart = echarts.init(document.getElementById('main')); 
    option = {  
            title: {// 图表标题，可以通过show:true/false控制显示与否，还有subtext:'二级标题',link:'http://www.baidu.com'等  
                text: '实例'  
            },  
            tooltip : {// 这个是鼠标浮动时的工具条，显示鼠标所在区域的数据，trigger这个地方每种图有不同的设置，见官网吧，一两句说不清楚  
                trigger: 'axis'  
            },  
            legend: {
                data:[]  
            },  
            toolbox: {  
                feature: {  
                    saveAsImage: {}// 工具，提供几个按钮，例如动态图表转换，数据视图，保存为图片等  
                }  
            },  
            grid: {  
                left: '3%',  
                right: '4%',  
                bottom: '3%'// 这几个属性可以控制图表上下左右的空白尺寸，可以自己试试。  
               // containLabel: true  
            },  
            xAxis : [  
                {  
                    type : 'category',  
                    boundaryGap : true, //柱状图这么显示，折线图显示为false
                    data : []// X轴的定义  
                }  
            ],  
            yAxis : [  
                {  
                    type : 'value'// Y轴的定义  
                }  
            ],  
            series : []// 这里就是数据了  
        };  
      //加载数据  
      jQuery.ajax({  
        url:"index/getData.do",  
        type:'get',  
        dataType:'json',  
        success:function(jsons){  
            var Item = function(){  
                return {  
                    name:'',  
                    type:'bar', //柱状图这么显示，折线图为line 
                    data:[]  
                    }  
                };  
            var legends = [];  
            var Series = [];  
            var json = jsons.list;  
            for(var i=0;i < json.length;i++){  
                var it = new Item();  
                it.name = json[i].name;  
                legends.push(json[i].name);  
                it.data = json[i].datas;  
                Series.push(it);  
            }  

                   option.xAxis[0].data = jsons.xdata;   //这块必须要写xAxis[0]
                    option.legend.data = legends;  
                        option.series = Series; // 设置图表  
                       myChart.setOption(option);// 重新加载图表  
        },  
        error:function(){  
            alert("数据加载失败！请检查数据链接是否正确");  
        }  
    });  
        // 初次加载图表(无数据)   
        myChart.setOption(option);   
    </script> 
</body>

</html>

后台代码

package com.controller;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.client.util.Data;

@Controller
@RequestMapping("index/")
public class EchartsController {

@RequestMapping("getData.do")
@ResponseBody
public Map<String,Object> getDataByFree(){
     Map<String,Object> map = new HashMap<String,Object>();
     Integer[] data1 = {120, 132, 101, 134, -90, 230, 210};  
     Integer[] data2 = {20, 232, 11, -144, 90, 30, 90};  
     String [] xdata ={"a","b","c","d","e","f","g"};

     map.put("xdata",xdata);

     List<Data> list =new ArrayList<Data>();

     Data data = new Data();
     data.setName("测试数据1");
     data.setDatas(data1);

     Data data22 = new Data();
     data22.setName("测试数据2");
     data22.setDatas(data2);
     list.add(data);
     list.add(data22);

     map.put("list", list);  
     return map;
}

}

package com.client.util;

public class Data {

    public String name;
    public Integer [] datas;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public Integer[] getDatas() {
        return datas;
    }
    public void setDatas(Integer[] datas) {
        this.datas = datas;
    }

}
点击查看更多内容
发表于 2018.01.26 15:31， 共 14496 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
5人点赞

若觉得本文不错，就分享一下吧！

评论

作者其他优质文章

正在加载中

爱总结的小仙女

JAVA开发工程师
手记
篇
粉丝
57
获赞与收藏
437

关注作者，订阅最新文章

阅读免费教程

感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消