首页 > 代码库 > Echarts 的样例

Echarts 的样例

jsp页面:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  	<meta charset="utf-8">
	<title>Echarts</title>
  
  <script type="text/javascript" src="http://www.mamicode.com/js/esl.js"></script>
  
  <script type="text/javascript" src="http://www.mamicode.com/js/jquery-2.1.0.min.js"></script>
  </head>
  <body>
    <div id="main" style="height:500px"></div>
    
     <div>
         <span id=‘wrong-message‘ style="color:red"></span>
         <span id=‘hover-console‘ style="color:#1e90ff"></span>
         <span id=‘console‘ style="color:#1e90ff">Event Console</span>
     </div>
      
      <!--echarts 包 -->
    <script type="text/javascript" src="http://www.mamicode.com/js/echarts.js"></script>

    <script type="text/javascript">
    	
    	//路径配置
    	require.config({
    		paths:{
	    		//zrender:‘./zrender/src‘,
	    		 echarts: ‘./js‘,
	    		 //"jquery":"./js/jquery-2.1.0.min"
	    		}
    	});
    	
    	var data_array=[12,47,39,45,30,20];
    	var str_array=["江西","福建","北京","黑龙江","海南","安徽"];
    	
    	
    	//设置主要样式
    	require(
	    	[
	    		‘echarts‘,
	    		‘echarts/chart/bar‘,
	    		‘echarts/chart/line‘,
	    		//‘jquery‘
	    	],
	    	function(ec){ 
	    		 //初始化echart对象
	    		   var myChart = ec.init(document.getElementById(‘main‘));//ec.init( $("#main")));// 
	    		
	    		var option={
	    		
	    		//标题
	    		title:{
	    			show:true,
	    			//主标题
	    			text:"省份基地数量 ",
	    		 	link:"http://www.baidu.com",
	    			target:"blank",
	    			textStyle:{
	    				color:"#9932CC"
	    			}, 
	    			//副标题
	    			subtext:"**机密**",
	    			 sublink:‘www.google.com‘,
	    			subtarget:‘self‘,
	    			subtextStyle:{
	    				color:"#8F8F8F",
	    				fontSize:16,
	    				align:‘center‘
	    			},
	    			//位置
	    			x:‘left‘,
	    			y:‘top‘,
	    			textAlign:‘left‘,
	    			//颜色
	    			backgroundColor:"#FFD39B",
	    			padding:2,
	    			//主副标题纵向间隔
	    			itemGap:3,
	    			borderWidth:1
	    		},
	    		
	    		//提示栏
	    		tooltip:{
	    			show:true,
	    			//zlevel:1,
	    			//	z:3,
	    			//触发类型
	    			trigger:‘axis‘,//默觉得‘item‘
	    			//延时
	    			//showDelay:1000,	    			
	    			enterable:true,	    			
	    			//颜色
	    			backgroundColor:"#AB82FF",
	    			
	    			testStyle:{
	    			  color: ‘yellow‘,
			            decoration: ‘none‘,
			            fontFamily: ‘Verdana, sans-serif‘,
			            fontSize: 15,
			            fontStyle: ‘italic‘,
			            fontWeight: ‘bold‘
	    			},
	    			//坐标轴指示器
	    			axisPointer:{
	    				 type: ‘line‘,
						    lineStyle: {
						        color: ‘#48b‘,
						        width: 2,
						        type: ‘solid‘
						    },
						    crossStyle: {
						        color: ‘#1e90ff‘,
						        width: 1,
						        type: ‘dashed‘
						    },
						    shadowStyle: {
						        color: ‘rgba(150,150,150,0.3)‘,
						        width: ‘auto‘,
						        type: ‘default‘
						    }
						},
	    			
	    			
	    			//内容格式化  
	    			formatter:function(params,ticket,callback)
	    			{	    			
	    			//处理提示框显示的信息
	    				console.log(params);
	    					var res=params[0].name+‘<br/>‘;
	    					for(var i=0;i<params.length;i++)
	    					{
	    						res+=params[i].seriesName+‘:‘+params[i].value;
	    						
	    					}
	    				//模拟异步回调
	    				setTimeout(function()
	    				{
	    					callback(ticket,res);
	    					
	    				},500)
	    				return "loading";
	    			}
	    			
	    		//formatter: "{b}<br/>{a}:{c}"
	    		},
	    		
	    		//工具箱
	    		toolbox:{
	    			show:true,
	    			orient:‘vertical‘,
	    			x:‘right‘,
	    			y:‘top‘,
	    			itemSize:20,
	    			
	    			//特征
	    			feature:{
	    					 mark : {
							        show : true,
							        title : {
							            mark : ‘辅助线开关‘,
							            markUndo : ‘删除辅助线‘,
							            markClear : ‘清空辅助线‘
							        },
							        lineStyle : {
							            width : 2,
							            color : ‘#1e90ff‘,
							            type : ‘dashed‘
							        }
							    },
							    dataZoom : {
							        show : true,
							        title : {
							            dataZoom : ‘区域缩放‘,
							            dataZoomReset : ‘区域缩放后退‘
							        }
							    },
							    dataView : {
							        show : true,
							        title : ‘数据视图‘,
							        readOnly: false,
							        lang: [‘数据视图‘, ‘关闭‘, ‘刷新‘]
							    },
							    magicType: {
							        show : true,
							        title : {
							            line : ‘折线图切换‘,
							            bar : ‘柱形图切换‘,
							            stack : ‘堆积‘,
							            tiled : ‘平铺‘,
							            force: ‘力导向布局图切换‘,
							            chord: ‘和弦图切换‘,
							            pie: ‘饼图切换‘,
							            funnel: ‘漏斗图切换‘
							        },
							        //为各个切换试图单独设置option
							      /*   option: {
							            // line: {...},
							            // bar: {...},
							            // stack: {...},
							            // tiled: {...},
							            // force: {...},
							            // chord: {...},
							            // pie: {...},
							            // funnel: {...}
							        },*/
							        type : [‘line‘, ‘bar‘ ,‘stack‘, ‘tiled‘] 
							    },
							    restore : {
							        show : true,
							        title : ‘还原‘
							    },
							    saveAsImage : {
							        show : true,
							        title : ‘保存为图片‘,
							        type : ‘png‘,
							        lang : [‘点击保存‘]
							    }
							}							    
							
					
						     /*    feature : {
						            mark : {show: true},
						            dataView : {show: true, readOnly: false},
						            magicType : {show: true, type: [‘line‘, ‘bar‘, ‘stack‘, ‘tiled‘]},
						            restore : {show: true},
						            saveAsImage : {show: true}
						        }       */         
	    		},
	    		
	    	//图例   		
	    		  legend: {
                        data:str_array,//[‘销量‘]
                        //selectMode:‘multiple‘,
                        //selected:{
                        //	‘江西‘:false
                       // }
                    },
	    		xAxis:[
		    		{	    			
		    			type:‘category‘,	    			
		    			data:str_array
		    		}
	    		],
	    		yAxis:[
		    		{
		    			type:‘value‘
		    		}
	    		],
	    		/*  timeline:{  //时间轴
	    			 data:[
				            ‘2002-01-01‘,‘2003-01-01‘,‘2004-01-01‘,
				            ‘2005-01-01‘,‘2006-01-01‘,‘2007-01-01‘,
				        ],
				        checkpointStyle:{
								    symbol : ‘auto‘,
								    symbolSize : ‘auto‘,
								    color : ‘auto‘,
								    borderColor : ‘auto‘,
								    borderWidth : ‘auto‘,
								    label: {
								        show: false,
								        textStyle: {
								            color: ‘red‘
								        }
								    }
								}              
				        
				         label : {
				            formatter : function(s) {
				                return s.slice(0, 4);
				            }
				        },
				        autoPlay : true, 
				        playInterval : 1000
	    		
	    		}, */
	    		 
	    		//数据系列,一个图表可能包括多个系列,每个系列可能包括多个数据
	    		 series:[
                        {
                            name:"数量",
                            type:"bar",
                            data:data_array,
                            itemStyle: {normal: {areaStyle: {type: ‘default‘}}}
                            
                        },
                        {
                        name:"数量",
                        type:"line",
                        data:data_array
                        
                        }
                        
                    ]

	    		};//end of option
	    	
	    		myChart.setOption(option);	  
	    		
	    		
	    		
	    		
	    		//事件命名统一挂载到require(‘echarts/config‘).EVENT
	    		var ecConfig = require(‘echarts/config‘);
	    		//绑定事件
				myChart.on(ecConfig.EVENT.CLICK, eConsole1); 
				
				//事件响应函数处理
					function eConsole1(param) {
					    var mes = ‘【‘ + param.type + ‘】‘;
					    if (typeof param.seriesIndex != ‘undefined‘) {
					        mes += ‘  seriesIndex : ‘ + param.seriesIndex;
					        mes += ‘  dataIndex : ‘ + param.dataIndex;
					    }
					    if (param.type == ‘hover‘) {
					        document.getElementById(‘hover-console‘).innerHTML = ‘Event Console : ‘ + mes;
					  	 	alert(mes);
					    }
					    else {
					        document.getElementById(‘console‘).innerHTML = mes;
					        alert(mes);
					    }
					    console.log(param);
					};
					 		    		
	    	}//end of function
 
    );//end of require
	    		
	    		
    </script>   
  </body>
</html>


Echarts 的样例