Echarts/highcharts:图表库的模型框架---pie/bar折线图

1.导入 Echarts/highcharts资源文件

2.在html中准备一个层

<div id="container" style="min-width:700px;height:400px"></div>

3. 找到折线图的静态代码

<script type="text/javascript">
    $(function () {

        $('#container').highcharts({
            title: {
                text: 'cn年度销售报表',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: cn.mysql',
                x: -20
            },
            xAxis: {
                categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
            },
            yAxis: {
                title: {
                    text: '万($)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '万($)'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: 'cn',
                data: [29.9, 71.5, 36.4, 49.2, 14.0, 16.0, 15.6, 28.5, 26.4, 14.1, 95.6, 54.4]
            }]
        });

    });
</script>

将如上copy至html

4.运行。

即可看到折线图的效果。

当然，仅仅是这样，仍然是不够的。

下面，动态加载从数据库中拿取的数据。

<script type="text/javascript">
    $.post('bar.action', function (result) {
        $('#container').highcharts({
            series: [{
                name: 'cn',
                data: result.value
            }]
        });
    }, 'json')
</script>

如上，即可将Ajax加载的数据放到折线图中展示。

@ResponseBody
    @RequestMapping("bar")
    public Map<String, Object> bar() {
        Map<String, Object> map = new HashMap<>();
        double[] values = {23, 13.9, 13.1, 12, 24.3, 43.3, 45, 23.9, 33.3, 25, 26.9, 10};
        map.put("value", values);
        return map;
    }

这是SpringMVC模式下产生的格式数据

当然，values可以是从数据库里查出的list

high：

<div align="center">
     <div id="container" style="width: 800px; height: 500px;"></div>
</div>

<script type="text/javascript">
  		Highcharts.chart('container', {
		chart: {
				type: 'line'
		},
		title: {
				text: '全球各大洲人口增长历史及预测'
		},
		subtitle: {
				text: '数据来源: 世界国联'
		},
		xAxis: {
				categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
				tickmarkPlacement: 'on',
				title: {
						enabled: false
				}
		},
		yAxis: {
				title: {
						text: '十亿'
				},
				labels: {
						formatter: function () {
								return this.value / 1000;
						}
				}
		},
		tooltip: {
				split: true,
				valueSuffix: ' 百万'
		},
		plotOptions: {
				area: {
						stacking: 'normal',
						lineColor: '#666666',
						lineWidth: 1,
						marker: {
								lineWidth: 1,
								lineColor: '#666666'
						}
				}
		},
		series: [{
				name: '亚洲',
				data: [502, 635, 809, 947, 1402, 3634, 5268]
		}, {
				name: '非洲',
				data: [106, 107, 111, 133, 221, 767, 1766]
		}, {
				name: '欧洲',
				data: [163, 203, 276, 408, 547, 729, 628]
		}, {
				name: '美洲',
				data: [18, 31, 54, 156, 339, 818, 1201]
		}, {
				name: '大洋洲',
				data: [2, 2, 2, 6, 13, 30, 46]
		}]
});
</script>

静态的图表，数据格式相差无几。

pie：

<script type="text/javascript">
        // 绘制图表
        var myChart = echarts.init(document.getElementById('pie'));
       myChart.setOption({
       title:{
                text:'神天股东分红表'
            },
       tooltip : {
       show : 'true'
            },
      series : [{
            type: 'pie',
            data:[
            
            ]
        }
    ]
})

  </script>
  
<script type="text/javascript">
$(function() {
$.post(
		'pie.do',
		function(result){
			myChart.setOption( {
				series : {
					data : result
				}
			});
		},'json'
	)
})
</script>

这是pie饼图

JSONArray json=new JSONArray();
		
		List<User> list=DataDao.queryAllUser();
		for (User user : list) {
			JSONObject obj=new JSONObject();
			obj.put("value",user.getUmoney());
			obj.put("name", user.getUname());
			json.add(obj);
		}
		
//		int[] in={11, -2, 93, 13, 35};
//		String[] str={"³ÄÉÀ", "ÑòëÉÀ", "Ñ©·ÄÉÀ", "¿ã×Ó", "¸ß¸úЬ"};
		
//		for(int i=0;i<in.length;i++){
//			JSONObject obj=new JSONObject();
//			obj.put("value",in[i]);
//			obj.put("name", str[i]);
//			json.add(obj);
//		}
		
		resp.setContentType("text/plain;charset=utf-8");
        PrintWriter out=resp.getWriter();
		out.print(json.toJSONString());

这是转发fastjson封装的json、

后面会有更高级的转发方式