Echarts3实例叠加柱状图

最新推荐文章于 2024-05-15 11:06:01 发布

idomyway

最新推荐文章于 2024-05-15 11:06:01 发布

阅读量1w

点赞数 2

分类专栏： Echarts 文章标签： echarts 叠加柱状图 bar

本文链接：https://blog.csdn.net/idomyway/article/details/85217879

版权

Echarts 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

前言

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

实现效果

在这里插入图片描述

实现代码

    思路：
        添加新的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>

idomyway

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
2
评论
Echarts3实例叠加柱状图

前言&nbsp;&nbsp;&nbsp;&nbsp;堆叠柱状图本身是不难实现的，在项目上需求遇到在柱状图上边，添加统计label。实现效果实现代码&nbsp;&nbsp;&nbsp;&nbsp;思路：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;添加新的series放在最上层，让series隐藏，并设置label显示统计
复制链接

扫一扫