一：
???<!-- 引入 echarts.js --> ???<script type="text/javascript" src="echarts.min.js"></script> ???<!-- 引入jquery.js --> ???<script type="text/javascript" src="jquery-1.12.3.js"></script>
二：
<!-- 为ECharts准备一个具备大小（宽高）的Dom --> ???<div id="main" style="width: 600px;height:400px;"></div>
三：
function showView(){ ???????????$("#view").show(); ???????????????????????//初始化echarts实例 ???????????var myChart = echarts.init(document.getElementById(‘view‘)); ???????????// 显示标题，图例和空的坐标轴 ????????????myChart.setOption({ ????????????????title: { ????????????????????text: ‘异步数据加载示例‘ ????????????????}, ????????????????tooltip: {}, ????????????????legend: { ????????????????????data:[‘注册数量‘] ????????????????}, ????????????????xAxis: { ????????????????????data: [] ????????????????}, ????????????????yAxis: {}, ????????????????series: [{ ????????????????????name: ‘注册数量‘, ????????????????????type: ‘bar‘, ????????????????????data: [] ????????????????}] ????????????}); ??????????myChart.showLoading(); ???//数据加载完之前先显示一段简单的loading动画 ???????????var names=[]; ???//日期数组（实际用来盛放X轴坐标值） ???????????var nums=[]; ???//注册数量数组（实际用来盛放Y坐标值） ????????????????????????$.ajax({ ???????????????type: "POST", ???????????????dataType: "JSON", ???????????????url:"${pageContext.request.contextPath}/back/customerData/getViewList.action", ???????????????success:function(data){ ???????????????????if(data.rows){ ????????????????????????for(var i=0;i<data.rows.length;i++){ ???????????????????????????????names.push(data.rows[i].registTime); ???//挨个取出类别并填入类别数组 ????????????????????????????} ????????????????????????for(var i=0;i<data.rows.length;i++){ ?????????????????????????????????????nums.push(data.rows[i].registerDay); ???//挨个取出类别并填入类别数组 ????????????????????????????} ????????????????????????myChart.hideLoading(); ???//隐藏加载动画 ????????????????????????myChart.setOption({ ???????//加载数据图表 ???????????????????????????xAxis: { ???????????????????????????????data: names ???????????????????????????}, ???????????????????????????series: [{ ???????????????????????????????// 根据名字对应到相应的系列 ???????????????????????????????name: ‘注册数量‘, ???????????????????????????????data: nums ???????????????????????????}] ???????????????????????????}) ???????????????????}else{ ???????????????????????msgShow("系统提示", "数据查询错误", "warning"); ???????????????????} ???????????????}, ???????????}); ????????????????????????//使用制定的配置项和数据显示图表 ???????????myChart.setOption(option); ???????}四：后台Action
public void getViewList() throws Exception{ ???????????????String sql = " ???SELECT DATE_FORMAT(f.registDate, ‘%Y-%m-%d‘) AS registTime,COUNT(f.flowingId) AS registerDay" ???????????????+" ???????FROM shop_invitation_flowerwater AS f" ???????????????+" ???????GROUP BY registTime"; ???????????????customerList = customerDataService.findListMapBySql(sql); ???????????????Map<String, Object> jsonMap = new HashMap<String, Object>();// 定义map ???????jsonMap.put("rows", customerList); ???????????????????????????// rows键 存放每页记录 list ???????JsonConfig jsonConfig = new JsonConfig(); ???????jsonConfig.registerJsonValueProcessor(Date.class, new JSONFormatDate("yyyy-MM-dd HH:mm:ss")); ???????JSONObject jo = JSONObject.fromObject(jsonMap, jsonConfig);// 格式化result ???????jo.accumulate("isSuccess","true"); ???????response.setContentType("text/html;charset=utf-8"); ???????PrintWriter out = response.getWriter(); ???????out.println(jo.toString()); ???????out.flush(); ???????out.close(); ???????????}Echarts通过Ajax实现动态数据加载
原文地址：https://www.cnblogs.com/zhan1995/p/8317376.html