echarts柱图自定义为硬币堆叠的形式
看这标题，可能会有一些人不太明白，那么直接上图，就是柱图展示形式如下图（兼容IE8）
要想实现这样展示效果。我们想用echarts直接实现不行的，即使是纹理填充也不可行的，但是我们可以借助echarts柱图展示来进行二次操作来现实。那么如何实现呢？
下面我们开始讲解：
1.思路：
从设计图中，我们要知道蓝色部分随着值的变化而变化，而灰色部分高度是不变的。
我们可以通过把柱图的透明度设为0，然后获取每根柱图的高度，每根柱图的位置，然后创建一个元素，把获取到每根柱图的高度和位置赋给这个元素,通过设置元素背景图片填充样式来实现
2.根据上面的思路，那就开始着手了，直接上代码
先把样式设置好：
<style> *{margin: 0;padding: 0;} .bar-p,.bar-g{ position: absolute; z-index: 9999; width:22px ;/*柱图的宽度*/ } .bar-p>span,.bar-g>span{ position: absolute; left: 50%; width: 80px; text-align: center; margin-left: -40px; margin-top: -18px; } .bar-g>span{ color: #808182; } .bar-p>span{ color: #0b7cd1; } .bar-p{background: url("../img/bar.png") repeat-y 50% 100%;} /*灰色的在这里高度是固定的，不管多大值*/ .bar-g{background: url("../img/bar1.png") no-repeat 50% 100%;height: 5px!important;} </style>
html和js代码：
<div id="main" style="width: 60%; height: 500px;margin:10px auto;"></div> <script> /* * @echarts3版本：v3.2.2 * */ var option=null,xAxisData=[],numData=[],numData1=[]; for(var i=1;i<9;i++){ xAxisData.push('币种'+i); if(i>=6) numData[i-1]=-10; else numData[i-1]=i*20; numData1[i-1]=Math.abs(numData[i-1]); } option = { color: ['#3398DB'], tooltip : { trigger: 'item', formatter:'{b}：{c}', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', data : xAxisData, axisLine:{ lineStyle:{ color:'#ccc' } }, axisTick:false // 坐标轴刻度不显示的话直接这样 } ], yAxis : [ { type : 'value', axisLabel:{ show:false }, splitLine:{ lineStyle:{ color:'#ddd' } }, axisLine:{ show:false }, axisTick:false // 坐标轴刻度不显示的话直接这样 } ], series : [ { type:'bar', barWidth: 22, data:numData1, itemStyle:{ normal:{ opacity:0 } } } ] }; var myChart = echarts.init(document.getElementById('main')); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); /* * getModel() echarts模型的获取 * getSeriesByIndex(i) 这个i表示series的下标，现在的series只有一个 所以直接是0 * */ var model=myChart.getModel(), layer=model.getSeriesByIndex(0), layouts=layer._data._itemLayouts;// 获取每根柱图的位置和高度和宽度 var div=document.getElementById('main').getElementsByTagName('div')[0]; // 获得div var elem,height=document.getElementById('main').offsetHeight,bottom=height-layouts[0]['y']; for(var i= 0,len=layouts.length;i<len;i++){ elem=document.createElement('div'); if(numData[i]<0) elem.className='bar-g'; else elem.className='bar-p'; elem.style.bottom=bottom+'px'; elem.style.left=layouts[i]['x']+'px'; elem.style.height=Math.abs(layouts[i]['height'])+'px'; elem.innerHTML='<span>'+numData[i]+'</span>'; div.appendChild(elem); } </script>
运行结果如下：
其实上面的js代码是实现了这个效果，但是有一个问题，就是for循环输出div的，每次循环都是从document中创建一个div,其实这样是不可取的，而且每次都要设置样式！
所以我们应该通过从innerHTML来输出会更好，因为我们的代码就是要简洁、性能优化得最好、条理清晰，更少的代码做更多的事情等！
所以我们要改成下面这样的：
<script> /* * @echarts3版本：v3.2.2 * */ var option=null,xAxisData=[],numData=[],numData1=[]; for(var i=1;i<9;i++){ xAxisData.push('币种'+i); if(i>=6) numData[i-1]=-10; else numData[i-1]=i*20; numData1[i-1]=Math.abs(numData[i-1]); } option = { color: ['#3398DB'], tooltip : { trigger: 'item', formatter:'{b}：{c}', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis : [ { type : 'category', data : xAxisData, axisLine:{ lineStyle:{ color:'#ccc' } }, axisTick:false // 坐标轴刻度不显示的话直接这样 } ], yAxis : [ { type : 'value', axisLabel:{ show:false }, splitLine:{ lineStyle:{ color:'#ddd' } }, axisLine:{ show:false }, axisTick:false // 坐标轴刻度不显示的话直接这样 } ], series : [ { type:'bar', barWidth: 22, data:numData1, itemStyle:{ normal:{ opacity:0 } } } ] }; var myChart = echarts.init(document.getElementById('main')); // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); /* * getModel() echarts模型的获取 * getSeriesByIndex(i) 这个i表示series的下标，现在的series只有一个 所以直接是0 * */ var model=myChart.getModel(), layer=model.getSeriesByIndex(0), layouts=layer._data._itemLayouts;// 获取每根柱图的位置和高度和宽度 var div=document.getElementById('main').getElementsByTagName('div')[0]; // 获得div var elem="",height=document.getElementById('main').offsetHeight,bottom=height-layouts[0]['y']; for(var i= 0,len=layouts.length;i<len;i++){ elem+='<div class="'+(numData[i]<0?'bar-g':'bar-p')+ '"style="bottom:'+bottom+'px;left:'+layouts[i]['x']+'px;height:'+Math.abs(layouts[i]['height'])+'px;">'+ '<span>'+numData[i]+'</span>'+ '</div>'; } div.appendChild(document.createElement('div')); div.getElementsByTagName('div')[0].innerHTML=elem; </script>
运行结果如下：
