首先先看下圖片
前端代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 引入 layui.css --> <link rel="stylesheet" href="layui/css/layui.css"> <!-- 引入 layui.js --> <script src="layui/layui.js"></script> <!-- 引入 echarts.js --> <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <div> <form class="layui-form" action="" onsubmit="return false"> <div class="layui-inline"> <label class="layui-form-label">請輸入年份</label> <div class="layui-input-inline"> <input type="text" name="year" class="layui-input"> </div> </div> <div class="layui-inline"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="formSearch">搜索</button> </div> </div> </form> </div> <!-- 為ECharts准備一個具備大小（寬高）的Dom --> <div id="main" style="width: 600px;height:400px;align-content: center"></div> <script type="text/javascript"> // 基於准備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById('main')); layui.use(['util', 'layer', 'table', 'form', 'jquery', 'laydate'], function () { var util = layui.util , layer = layui.layer , table = layui.table , $ = layui.jquery , laydate = layui.laydate , form = layui.form; //搜索一下 form.on('submit(formSearch)', function (data) { // layer.msg(JSON.stringify(data.field)); console.log(data.field.year); $.ajax({ url: '/VisitServlet', type: 'GET', data: { 'year': data.field.year, }, success: function (res) { console.log(res.data); var list = res.data; //發生 改變 圖標 myChart.setOption({ series: [ { name: res.name, type: res.type, // 設置圖表類型為餅圖 radius: '55%', // 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的 55% 長度。 data: (function () { var res = []; for (var i = 1; i <= 12; i++) { res.push({ //通過把result進行遍歷循環來獲取數據並放入Echarts中 name: i + "月", value: list[i] }); } return res; })() } ] }); }, dataType: 'json' }); }); }); </script> </body> </html>
思考：
參考菜鳥教程實例，主要是data怎樣遍歷，上面是定義了res數組，將數據push到數組中並返回
參考博客：https://blog.csdn.net/m0_37116405/article/details/55095929