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>