echerts动态加载数据

最新推荐文章于 2024-11-17 23:25:11 发布

原创最新推荐文章于 2024-11-17 23:25:11 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echerts

java项目专栏收录该内容

76 篇文章

订阅专栏

本文介绍如何使用ECharts和jQuery实现一个动态更新数据的饼状图，并展示了从前端到后端的数据处理过程。

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

效果图：
这里写图片描述

前端页面以及代码：

<%--
  Created by IntelliJ IDEA.
  User: XX
  Date: 2018/6/20
  Time: 17:10
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/echarts.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.2.1.min.js"></script>
</head>
<body>wew
<div id="chartmain" style="width:600px; height: 400px;"></div>
<script type="text/javascript">

        option = {
            title: {
                text: '某站点用户访问来源',
                subtext: '纯属虚构',
                x: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '60%'],
                    data: [

                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

    function fuzhi(myChart){
        $.ajax({
            contentType : "application/json",
            type : "GET",
            url : "${pageContext.request.contextPath}/ht/ea",
            datatype:'json',
            success : function(data) {
                alert(data);
                //创建一个数组，用来装对象传给series.data，因为series.data里面不能直接鞋for循环
                var sa=[];
                sa=['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'];
                myChart.setOption({
                    title:{
                        text: '某站点用户访问来源',
                        subtext: '纯属虚构'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: sa
                    },
                    series:[
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '60%'],
                            data: data
                        }
                    ]
                });

            }
        });
    }
    //初始化echarts实例
    var myChart = echarts.init(document.getElementById('chartmain'));
        fuzhi(myChart);
    //使用制定的配置项和数据显示图表
    myChart.setOption(option);

</script>
</body>
</html>

里面有多余的代码片段

后台代码块：

 @RequestMapping(value = "/ea", method= RequestMethod.GET)
    @ResponseBody
    private List<Map> eacherts(){
        List<Map> list=new ArrayList();
        List<Eacherts> list1 = eachertsService.findalllist();
        for (int i=0; i< list1.size() ;i++) {
            Map <String, String> map = new HashMap <>();
            map.put("value", Integer.toString(list1.get(i).getCount()));
            map.put("name",list1.get(i).getName());
            list.add(map);
        }
        return list;
    }

请大家哦多多指教