echarts集成 实例-包含柱状图、悬浮提示、文本提示

echarts的集成实例其实很多的，官方网站也有，在这里呢我就备注一下，记一下。

   下面简单集成一个柱状图，主要分为三步曲：

        

1 .首先引入js

<script type="text/javascript" src="<c:url value="/lib/echarts/echarts-all.js"/>"></script>
	 <script type="text/javascript" src="<c:url value="/lib/echarts/config.js"/>"></script>

2.html 定义一个块，用于放图形

<div id="echarts" style="height:580px;width:100%"></div>

3.在js里面为图形添加内容

var myChart = echarts.init(document.getElementById("echarts"));
option = {
	    title : {
	        text: 'XXXX'
	       
	    },
	    tooltip : {//鼠标悬浮弹窗提示
	       /*  trigger: 'axis' */
	    	trigger : 'item',
	    	  show:true,
	          showDelay: 0,
	          hideDelay: 0,
	         transitionDuration:0, 
	         backgroundColor : 'rgba(255,0,255,0.7)',
	         borderColor : '#f50',
	         borderRadius : 8,
	         borderWidth: 2,
	         padding: 10,    // [5, 10, 15, 20]
	         formatter: function (params,ticket,callback) {
	            // console.log(params);
	             var res = params[1]+   '<br/>'+"XX人数"+' : ' + params[2];
	             return res;
	         }
	    },
	    calculable : false,
	    xAxis : [
	        {
	            type : 'value',
	            boundaryGap : [0, 0.01]
	        }
	    ],
	    yAxis : [
	        {
	            type : 'category',
	            data : nameList/* ['巴西','印尼','美国','印度','中国','世界人口(万)'] */
	        }
	    ],
	    series : [
	        {
	            name:'XX人数',
	            type:'bar',
	            data:countList,/* [23, 1, 13, 15, 34, 68] */
	            
	            itemStyle : {
					normal : {
						color : (function() {
							var zrColor = zrender.tool.color;
							return zrColor.getLinearGradient(0, 80, 0, 500,
									[ [ 0, 'purple' ],
											[ 0.5, 'orangered' ],
											[ 1, 'orange' ] ])
						})(),
						label : {
							show : true,
							position : 'right' /* ,
							formatter: function (params,ticket,callback) {
					             console.log(params);
					             var res =  params.data+"人";
					             return res;
					         } */
						}
					},
					emphasis : {
						label : {
							show : true,
							textStyle : {
								color : 'orange',
								fontWeight : 'bold'
							}
						}
					}
				}
	        } 
	    ]
	};

myChart.setOption(option);