Echarts（一、柱状图）

1.引入Echarts的相关.js文件 示例：<script type="text/javascript" src="js/echarts.js"></script> 2.准备一个具备大小（宽高）的DOM 示例：<div id="main" style="width: 600px;height:400px;"></div> 3.通过echarts.init()方法初始化一个echarts实例； 实例：var myChart = echarts.init(document.getElementById('main')); 4.简单实例：

<div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data:['销量'] }, xAxis: { data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script>

2异步动态加载数据

var urls='user2_sexGroup.action'; var myChart3 = echarts.init(document.getElementById('second_left')); myChart3.showLoading({text:'亲，不要急！！正在拼命的读取数据中...'}); $.ajax({ url:urls, dataType:"json", success:function(data){ var json = eval('(' + data + ')'); myChart3.setOption({ title:{ text:json.third }, xAxis: { data: json.first }, series: [{ // 根据名字对应到相应的系列 name: '年龄分布', type: 'bar', data: json.second }] }); myChart3.hideLoading(); } }); // 初始 option var option3 = { /* title: { text:'用户性别分布' }, */ tooltip: {}, legend: { data:['年龄分布'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar',]},//'stack','tiled' restore : {show: true}, saveAsImage : {show: true} } }, xAxis: { data: [] }, yAxis: {}, series: [{ name: '年龄', type: 'bar', data: [] }] }; myChart3.setOption(option3);

后台写法

public String yearGroup(){ List<Long> list=userService.yearGroup(); List<String> list2=userService.selectUserMesOrder(); List<String> list3=new ArrayList(); for(String a:list2){ list3.add(a+"年"); } Map<String,Object> map = new HashMap<String,Object>(); map.put("first", list3); map.put("second", list); map.put("third", "用户年龄分布图"); JSONObject json = JSONObject.fromObject(map);//将map对象转换成json类型数据 results = json.toString();//给result赋值，传递给页面 return "JSONRESULT"; };