关闭

web轻巧的图表表示数据——echart

135人阅读 评论(0) 收藏 举报
分类:
官方原例(官网-http://echarts.baidu.com/):
<!DOCTYPE html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>ECharts</title>
</head>
<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 = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['销量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"销量",
                            "type":"bar",
                            "data":[51, 20, 40, 10, 10, 20]
                        }
                    ]
                };
        
                // 为echarts对象加载数据 
                myChart.setOption(option); 
            }
        );
</script>
<body>
	<div id="div">
		被越过的青春,被打碎的瓶子,被挥散的混沌,被释放的梦魇,我想那些都与我们无关。就像它每天为她衔来洼处的水,她慢慢为它开一朵花。很久以前的认识,延误到现在。
	</div>
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:400px"></div>
</body>

这个例子还是很好理解的。所以可以看出echart用起来很方便。

下面是我自己做项目的时候的扩展:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${site.shortName}</title>
<script type="text/javascript" src="${resSys}/jquery-1.9.1.min.js"></script>
<link type="text/css" rel="stylesheet" href="/${res}/css/index.css" />
<script type="text/javascript" src="/${res}/js/index.js"></script>
<script type="text/javascript">
	function _export(){
		var tableForm = document.getElementById("jvForm");
		tableForm.action="${base}/org_count/inner/o_export.jspx";
		tableForm.onsubmit=null;
		tableForm.submit();
	}

	function _back(){
		var tableForm = document.getElementById("jvForm");
		tableForm.action="${base}/org_count/inner_super/v_list.jspx";
		tableForm.onsubmit=null;
		tableForm.submit();
	}

</script>
</head>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
	var myChart;
    // 路径配置
    require.config({
        paths: {
			echarts: 'http://echarts.baidu.com/build/dist'
        }
    });
	 // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
            ],
            function (ec) {
                // 基于准备好的dom,初始化echarts图表
                myChart = ec.init(document.getElementById('main'));                 
                               var option = {
                    title : {
					        text: '单位统计'
    				},
                    tooltip: {
                        show: true
                    },
                    legend: {
                    
                        data:[
	                       [#if yearList ?? && yearList?size gt 0]
	              				[#list yearList as y]	                       
                       			 ${y.name}+"年",              
		                        [/#list]
				            [/#if]
                        ]
                    	},
                    
                    xAxis : [
                        {
                            type : 'category',
                            data : [                            
                            [#if orgList ?? && orgList?size gt 0]
              				[#list orgList as o]
              				"${o.name}",
              				[/#list]
              				[/#if]
              			 ]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                    [#if yearList ?? && yearList?size gt 0]
              				[#list yearList as y]		                      	              							
						                        {		                        
						                            "name":${y.name}+"年",
						                            "type":"bar",
						                            "data":[						                             
						                             [#if orgList ?? && orgList?size gt 0]
              										 [#list orgList as o]
              										  [#assign flag=0?number]						                            		                          		
								                            [#if list ?? && list?size gt 0]
								              				[#list list as l]
								              					[#if y.id==l.year.id&&o.id==l.org.id]
								              						${l.times!0},
								              						[#assign flag=1]								              														              														              													              												              													              						
							              						[/#if]							              														              				
							              					[/#list]							              												              					
									              			[/#if]
									              			[#if flag?number==0]0,[/#if]									              												              												              												              			
								              		 [/#list]
				             					  [/#if]								              					              				
						              			]		              			
						                    },						                        		                       		
                           [/#list]
		             [/#if]
                                               
                    ],                                       
                };
        
                // 为echarts对象加载数据 
                myChart.setOption(option);
                //getData();
            }
        ); 
</script>

<body>
<form id="jvForm" method="post">
	<input type="hidden" id="id" name="id" value="" />
		<input type="hidden" id="order" name="order" value="${order!}" />
	<div class="total">
		[#include "../include/top.html"/]
		<div class="mainbody">
			[#include "../include/channel.html"/]
			<div class="webnews">
				<span>当前位置:</span><a href="${base}/">首页</a> > 单位统计
			</div>
			<div class="sjCon">
				<div class="sj_main">
				<div>
					<a style="margin-right: 10px;float: right;" href="javascript:_back();">表格模式</a>					
					<a style="margin-right: 10px;float: right;" href="javascript:_export();">导出</a>
				</div>
   						 <div id="main" style="height:400px"></div>				
				</div>
			</div>
		</div>
		[#include "../include/footer.html"/]
	</div>
</form>
</body>
</html>



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:9966次
    • 积分:311
    • 等级:
    • 排名:千里之外
    • 原创:21篇
    • 转载:6篇
    • 译文:0篇
    • 评论:0条