echarts与java后台交互生成饼图

原创于 2020-04-18 14:42:14 发布 · 2.3k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#java #js

前端专栏收录该内容

175 篇文章

订阅专栏

本文详细介绍如何使用百度的ECharts插件创建动态饼图，包括前后端交互、配置选项及数据处理，适合初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在是大数据的时代，传统的表格已经很难满足要求，因为相比图表来说，传统的表格难于在一个大的角度大的视角下去观察数据，分析数据，而现在的图表技术的发展恰好能适应现在的需要，在一些决策系统，元数据系统，数据分析系统等系统里面，图表技术可谓是屡见不鲜了。当然，图表的插件有很多种，今天我们说的我们国产的一个插件，是百度公司的，用过一段时间，还是挺不错的。一开始迷茫的地方无非就是怎么和后台交互呢？都有哪些配置？在动态获取数据之后又该怎么让图表发生变化？其实，千篇一律，不管哪些图表插件，哪种图表类型，处理都是一样的：

1.怎么和后台交互？图表插件肯定会提供改变图表配置的函数，你只需要把配置定义好，这个配置可能是个json对象，也可能是xml格式。通过ajax与后台交互动态获取自己的配置就可以了。

2.有哪些配置，当然每种图表插件都是不一样的，可以查询该插件的文档，如果感觉文档不想看，感觉头大，没关系，找个简单例子能实现功能就行了，修修改改，慢慢就把配置学会了。echarts配置参考：http://echarts.baidu.com/option.html

3.下载echarts3.x请到echarts官网下载：http://echarts.baidu.com/download.html,可以定制各种图表，大家初学，直接下载最全的那种就可以了，以免用到某个图表时，却会报错没有这种类型的图表。如下是下载截图：

现在废话不多说了，看一个简单的例子，实现从后台获取数据，并生成echarts的饼图。以下是效果图：

前端代码：

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>echarts</title>
    <link rel="stylesheet" href="<%=request.getContextPath()%>/rs/bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="<%=request.getContextPath()%>/rs/js/jquery-1.12.4.min.js">
    </script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="<%=request.getContextPath()%>/rs/bootstrap/js/bootstrap.min.js" ></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/rs/echarts/echarts.common.min.js">
    </script>
    <style type="text/css">
        #storepie{
            width:400px;
            height:400px;
            margin:100px auto;
        }
    </style>
</head>
<body>
            <div id="storepie"></div>
</body>
</html>

<script>
            //echarts实例所在元素div#storepie必须要有宽高设置才能显示
            var storePie = echarts.init($('#storepie').get(0));
            var storeOption = {//饼图配置
                title: {
                    text: '存储(T)',
                    left:'center',
                    textStyle:{
                        color:"#000",
                        fontSize:15,
                        fontWeight:'normal'
                    },
                    subtext:'',
                    subtextStyle:{
                        color:"#aaa",
                        fontSize:12,
                        fontWeight:'normal'
                    },
                    itemGap:300
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{b} :<br>{c}<br> {d}%"
                },
                legend: {
                    bottom: 10,
                    data: [],
                    itemGap:10
                },
                color:['#5b9bd5','#ed7d31','#2f4554'],
                series : [
                    {
                        name: '存储(T)',
                        type: 'pie',
                        radius : '66%',//[0, '75%']
                        center: ['50%', '42%'],//圆心相对于容器的位置
                        data:[],
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        label: {//饼图旁边的指示文字
                            normal: {
                                formatter:'{c}\n{d}%'
                            },
                            emphasis: {//鼠标放上去的时候触发
                                show: false
                            }
                        }
                    }
                ]
            };
            //通过setOption函数把配置赋予storePie,这时候因为没数据，所以饼图是不显示的
            storePie.setOption(storeOption);


            storePie.showLoading();//让饼图处于加载状态
            $.post('getData').done(function (data) {
                storePie.hideLoading();//加载完成
                //通过setOption函数把需要修改的配置赋予storePie，其他配置不需要再写一遍了
                storePie.setOption({
                    title:{
                        subtext:data.total
                    },
                    legend: {
                        data: data.legend
                    },
                    series: [{
                        name: '存储(T)',
                        data:data.data
                    }]
                });
            });
        </script>

如果以上配置有什么不明白的，可以参考上边给出的文档去查询一下，不然就试着改改，看看会发生什么变化，就可以了。后台java代码：

@RequestMapping("/getData") @ResponseBody
public  Map<String, Object> getData(HttpServletRequest request){
   Map<String, Object> retMap=new HashMap<String, Object>();
   List<String> legendList=new ArrayList<String>();
   legendList.add("存储a");
   legendList.add("存储b");
   legendList.add("存储c");
   retMap.put("legend",legendList);
   List<Map<String,Object>> dataList=new ArrayList<Map<String,Object>>();
   Map<String, Object> dataMap1=new HashMap<String, Object>();
   dataMap1.put("name","存储a");
   dataMap1.put("value",100.85);
   Map<String, Object> dataMap2=new HashMap<String, Object>();
   dataMap2.put("name","存储b");
   dataMap2.put("value",70.15);
   Map<String, Object> dataMap3=new HashMap<String, Object>();
   dataMap3.put("name","存储c");
   dataMap3.put("value",80);
   dataList.add(dataMap1);
   dataList.add(dataMap2);
   dataList.add(dataMap3);
   retMap.put("data",dataList);
   retMap.put("total","存储总计:251T");
   return  retMap;
}

好，这样一个能够与java交互的echarts实例就做好了，其他类型的图表也都类似，只是配置项可能稍有不同.