动态生成饼状图

最新推荐文章于 2024-06-23 13:00:46 发布

bug罗

最新推荐文章于 2024-06-23 13:00:46 发布

阅读量751

点赞数

本文链接：https://blog.csdn.net/qq_33543227/article/details/99626578

版权

1：页面

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <title>Echart展示</title>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
    <script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>


    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
    <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
</head>
<body style="height: 100%; margin: 0">

<div id="container" style="height: 100%"></div>

<script type="text/javascript">
    $(document).ready(function(){
        $.ajax({
            contentType : "application/json",
            type : "GET",
            url : "ProductInfo",
            dataType : "json",
            success : function(data) {
                var shuzu=[];
                var company=[];
                var kk=[];
                for(var a=0;a<data.length;a++){
                    //注意，这里的eval函数特别关键，可将后端返回的Json字符串，装有json字符串元素的list集合转为js可用的对象
                    company[a]=data[a].name;
                }

                var dom = document.getElementById("container");
                var myChart = echarts.init(dom);
                var app = {};
                option = null;
                option = {
                    title : {
                        text: '某站点用户访问来源',
                        subtext: '纯属虚构',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: company
                    },
                    series : [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:data,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                ;
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            }});
    });
</script>
</body>
</html>

2：controller

  @RequestMapping(value = "ProductInfo",method = RequestMethod.GET)
    @ResponseBody
    public List<Product> ProductInfo(){
        List<Product> productList=productService.getProductList();
        return productList;
    }