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);