ECharts 柱状图顶部显示百分比
1、引入jquery.js和echarts.js
<script src="../jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script> <script src="../echarts.js" type="text/javascript" charset="utf-8"></script>
2、HTML代码
<div id="charts_WCJD" style="width: 800px;height: 600px;"></div>
3、js代码
<script type="text/javascript"> var myChart = echarts.init(document.getElementById('charts_WCJD')); var option = { title:{ text:"ECharts事件" }, legend:{ data: ["销量"] }, tooltip:{ }, label:{ normal:{ show:true, position:"top" }, emphasis:{ show:true, position:"top" } }, xAxis:{ data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis:{ }, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; //计算总数 var sum=0; var arr=option.series[0].data; for(var i=0;i<arr.length;i++){ sum+=arr[i]; } console.log(sum); //101 //计算百分比 option.label.normal.formatter=function(params){return (params.value/sum*100).toFixed(3)+"%";}; option.label.emphasis.formatter=function(params){return (params.value/sum*100).toFixed(3)+"%";}; myChart.setOption(option); </script>
仅此杂文,留待后用。