<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %><!DOCTYPE html><head> <meta charset="utf-8"> <title>ECharts</title></head><body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="height:400px"></div><!-- ECharts单文件引入 --><script src="http://echarts.baidu.com/build/dist/echarts.js"></script><script type="text/javascript"> // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载 ], function (ec) { // 基于准备好的dom，初始化echarts图表 var myChart = ec.init(document.getElementById('main')); var option = { title:{ show:true, text:'这是一个柱状图' }, toolbox:{ show:true, //添加页面上的按钮 feature:{ dataView:{ show:true }, restore:{ show:true }, dataZoom:{ show:true }, saveAsImage:{ show:true }, magicType:{ type:['line','bar'] } } }, tooltip: { show: true }, legend: { data:['年龄'] }, xAxis : [ { type : 'category', data : [] } ], yAxis : [ { type : 'value' } ], series : [ { name:'年龄', type:"bar", data:[] } ] }; var names = []; var ages = []; $.ajax({ type:"post", async:true, url:"findAll", data:{}, dataType:"json", success:function (result) { if(result){ for(var i=0;i<result.length;i++){ names.push(result[i].name); } for(var i=0;i<result.length;i++){ ages.push(result[i].age) } myChart.setOption({ xAxis:{ data:names }, series:{ name:'年龄', data:ages } }); } } });// // 为echarts对象加载数据// myChart.setOption(option); } );</script></body>
1 回答
慕无忌5827217
TA贡献7条经验 获得超2个赞
option.series.data=ages;option.series.xAxis=names;myChart.setOption(option); suceess回调方法那边改下试试
添加回答
举报
0/150
提交
取消