Echarts3实例叠加柱状图

太过爱你忘了你带给我的痛 2021-09-17 10:00 407阅读 0赞

### 前言 ###

堆叠柱状图本身是不难实现的，在项目上需求遇到在柱状图上边，添加统计label。

### 实现效果 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70]

### 实现代码 ###

思路：  
        添加新的series放在最上层，让series隐藏，并设置label显示统计label  
        tooltip隐藏最后一列

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            html,body{
                height: 100%;
            }
            *{
                margin: 0px;
                height: 0px;
            }
            #chartDiv{
                width: 650px;
                height: 370px;
                border: 1px solid red;
            }
        </style>
        <script src="js/echarts.min.js"></script>
    </head>
    <body>
    <div id="chartDiv"></div>
        <script>
            var chartDiv = echarts.init(document.getElementById('chartDiv'));
            var option = option = {
                title:{
                    text:"带统计的堆叠柱状图"
                },
                legend: {
                    data:['百度','谷歌','必应','其他']
                },
                tooltip : {//过滤掉统计的series
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },
                    formatter: function(params){
                        var res=params[0].name+"<br/>";
                        for(let i=0;i<params.length-1;i++){
                            res+=params[i].seriesName+":"+params[i].value+"<br/>"
                        }
                        return res;
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : ['周一','周二','周三','周四','周五','周六','周日']
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
    
                    {
                        name:'百度',
                        type:'bar',
                        barWidth : 35,
                        stack: '搜索引擎',
                        data:[620, 732, 701, 734, 1090, 1130, 1120]
                    },
                    {
                        name:'谷歌',
                        type:'bar',
                        stack: '搜索引擎',
                        data:[120, 132, 101, 134, 290, 230, 220]
                    },
                    {
                        name:'必应',
                        type:'bar',
                        stack: '搜索引擎',
                        data:[60, 72, 71, 74, 190, 130, 110]
                    },
                    {
                        name:'其他',
                        type:'bar',
                        stack: '搜索引擎',
                        data:[62, 82, 91, 84, 109, 110, 120]
                    },
                    {
                        name:'统计',
                        type:'bar',
                        stack: '搜索引擎',
                        data:[0.3, 0.6, 0.9, 0.84, 0.36, 0.11, 0.66],//模拟数据
                        label: {
                            normal: {
                                offset:[0, -10],//左右，上下
                                show: true,
                                position: 'insideLeft',
                                formatter:function(params){
                                    if(params.data==0){
                                        return "0%";
                                    }else{
                                        return params.data*100+"%";
                                    }
                                },
                                fontSize:14,
                                fontWeight:'bold',
                                textStyle:{ color:'#199ED8' }
                            }
                        },
                        itemStyle:{
                            normal:{
                                color:'rgba(128, 128, 128, 0)'
                            }
                        },
                    }
                ]
            };
            chartDiv.setOption(option);
        </script>
    
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lkb215d2F5_size_16_color_FFFFFF_t_70]: /images/20210726/e93378b9f995491e86a8bbf0ecd104f6.png