Java ssm画饼图利用echarts动态获取数据

趙鯤朙

于 2021-07-10 14:28:52 发布

阅读量788

点赞数 1

分类专栏：笔记文章标签： java ssm js

本文链接：https://blog.csdn.net/weixin_44807674/article/details/118634536

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文档介绍如何使用AmCharts库创建一个动态且交互式的饼图，展示PL0词法分析统计结果。首先，作者强调了关键文件如html、input和jsp的重要性，并提供了代码示例，展示了如何设置标题、数据源、动画效果等。接着，提到了数据获取的URL以及饼图所依赖的JavaScript库。最后，给出了项目的下载链接。

摘要由CSDN通过智能技术生成

前言
我是找了一天多的资料终于哈自己弄好了希望读者不要入坑
第一步：
在这里插入图片描述
如上图我圈出来的就是一定要有的东西。html就是页面了input是数据输入我做的是一个PL0词法分析统计统计单词的类别。pieChart.jsp就是饼图的页面。先上结果再贴代码

十分的好看，动态又Q弹。鼠标放上去还有东西显示。接下来就是jsp的代码。


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>饼状图</title>
    <link rel="stylesheet" href="/AmCharts/charts/style.css" type="text/css"/>
    <script type="text/javascript" src="/AmCharts/js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="/AmCharts/charts/amcharts.js"></script>
    <script type="text/javascript" src="/AmCharts/charts/pie.js"></script>
    <script type="text/javascript" src="/AmCharts/charts/serial.js"></script>
</head>
<script>
    var chart1;
    var chartData1;
    AmCharts.ready(function () {
        $.getJSON("/AmCharts/getBillNumByRoomType", null, function (data) {
            console.log(data);

            chart1 = new AmCharts.AmPieChart();  // 饼状图

            chart1.addTitle("饼图", 16);  // 添加标题
            chart1.dataProvider = data; //指定数据来源，一般指向一个数组对象
            chart1.titleField = "name"; //饼状每一块的标题
            chart1.valueField = "number"; //饼状每一块的值
            chart1.sequencedAnimation = true;  //指定动画应该被排序还是所有对象应该同时出现。
            chart1.startEffect = "elastic";   //动画效果。可能的值是:easeoutsin, easeinsin, elastic, bounce
            chart1.innerRadius = "30%";
            chart1.startDuration = 2;  //Duration of the animation, in seconds.
            chart1.labelRadius = 15;
            chart1.balloonText = "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>";//节点显示的文本内容
            chart1.depth3D = 10; //设置为3d图像的厚度值
            chart1.angle = 15;  //角度，当设置图像为3d图时使用该属性，默认为0
            chart1.write("chartdiv");
        });
    });
    
</script>
<body>
      <div id="chartdiv" style="height:600px;width:900px;float: left;"></div>
</body>
</html>

每一块饼图的标题和值都在pojo里面封装成一个类来保存数据
在这里插入图片描述

注意看我圈起来的这些是要一模一样的要不然jsp找不到数据就不会显示结果
接下来就是动态的获取数据了

获取数据的url （包名+controller的@RequestMapping的value）注意我的没有写@Autowired是因为那个PL0ServiceImpl是在操作txt不是在操作数据库所以不写。前面记得加注解@RestController默认返回数据就是json
在这里插入图片描述
画饼图的依赖文件都在我圈起来的地方。
项目链接：https://download.csdn.net/download/weixin_44807674/20155006

趙鯤朙

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Java ssm画饼图利用echarts动态获取数据

前言我是找了一天多的资料终于哈自己弄好了希望读者不要入坑第一步：如上图我圈出来的就是一定要有的东西。html就是页面了input是数据输入我做的是一个PL0词法分析统计统计单词的类别。pieChart.jsp就是饼图的页面。先上结果再贴代码十分的好看，动态又Q弹。鼠标放上去还有东西显示。接下来就是jsp的代码。<%@ page contentType="text/html;charset=UTF-8" language="java" %><html><hea
复制链接

扫一扫

专栏目录