[JavaScript知识库] Java ssm画饼图利用echarts动态获取数据

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Java ssm画饼图利用echarts动态获取数据 -> 正文阅读

[JavaScript知识库]Java ssm画饼图利用echarts动态获取数据

前言
我是找了一天多的资料终于哈自己弄好了希望读者不要入坑
第一步：
在这里插入图片描述
如上图我圈出来的就是一定要有的东西。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