ECharts单柱状图、多柱状图、堆叠柱状图

最新推荐文章于 2024-07-31 14:40:54 发布
最新推荐文章于 2024-07-31 14:40:54 发布
阅读量7.7k 收藏 24
点赞数 8
分类专栏： 前端 echarts 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39895109/article/details/107413762
版权

数据格式

var data = {
   "titleList": [
        "商超门店",
        "教育培训",
        "房地产",
        "生活服务",
        "汽车销售",
        "旅游酒店",
        "五金建材"
    ],
    "oneList": [
        23,
        28,
        0,
        28,
        12,
        13,
        25
    ],
    "twoList": [
        8,
        29,
        34,
        14,
        0,
        4,
        8
    ],
    "otherList": [
        14,
        16,
        26,
        27,
        0,
        2,
        5
    ]
}

具体代码：

单柱状图，只显示一个

  function echarts_1(data) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart1'));

        option = {
            //  backgroundColor: '#00265f',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '0%',
                top: '10px',
                right: '0%',
                bottom: '4%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: data.titleList,
                // data: ['商超门店', '教育培训', '房地产', '生活服务', '汽车销售', '旅游酒店', '五金建材'],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },

                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    // rotate:50,
                    show: true,
                    splitNumber: 15,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                    //formatter: '{value} %'
                    show: true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1	)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                    }
                }
            }],
            series: [
                {
                    type: 'bar',
                    data: data.oneList,  //数据格式
                    // data: [200, 300, 300, 900, 1500, 1200, 600],
                    barWidth: '35%', //柱子宽度，修改可调整
                    // barGap: 1, //柱子之间间距
                    itemStyle: {
                        normal: {
                            color: '#2f89cf',
                            opacity: 1,
                            barBorderRadius: 5,  //柱子的菱角，数据越大越圆
                        }
                    }
                }

            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

 

双柱状图，显示2个柱状图，区别仅在于 “series ”中多了一串数据

  function echarts_2(data) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart2'));

        option = {
            //  backgroundColor: '#00265f',
            //展示右上角的标签显示，series中的name需与这边一致，否则不进行展示
            legend: {
                data: ['内部', '外部'],
                type: "plain",
                right: '2%',  //展示位置，具体可查看api
                textStyle: {
                    color: 'rgba(255,255,255,.5)',  //文字颜色
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {type: 'shadow'}
            },
            grid: {
                left: '0%',
                top: '10px',
                right: '0%',
                bottom: '4%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: data.titleList,
                // data: ['浙江', '上海', '江苏', '广东', '北京', '深圳', '安徽'],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },

                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    // rotate:50,
                    show: true,
                    splitNumber: 15,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                    //formatter: '{value} %'
                    show: true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1	)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                    }
                }
            }],
            series: [
                {

                    type: 'bar',
                    name : "内部",
                    data: data.oneList,
                    // data: [1500, 1200, 600, 200, 300, 300, 900],
                    barWidth: '35%', //柱子宽度
                    // barGap: 1, //柱子之间间距
                    itemStyle: {
                        normal: {
                            color: '#2f89cf', //柱子颜色
                            opacity: 1,
                            barBorderRadius: 5,
                        }
                    }
                },
                {

                    type: 'bar',
                    name : "外部",
                    data: data.twoList,
                    // data: [1500, 1200, 600, 200, 300, 300, 900],
                    barWidth: '35%', //柱子宽度
                    // barGap: 1, //柱子之间间距
                    itemStyle: {
                        normal: {
                            color: '#27d08a', //柱子颜色
                            opacity: 1,
                            barBorderRadius: 5,  //柱子菱角
                        }
                    }
                }

            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

 

堆叠柱状图，同双柱状图的区别在于“series”中增加一个“stack”属性

  function echarts_2(data) {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart2'));

        option = {
            //  backgroundColor: '#00265f',
            legend: {
                data: ['内部', '外部'],
                type: "plain",
                right: '2%',
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {type: 'shadow'}
            },
            grid: {
                left: '0%',
                top: '10px',
                right: '0%',
                bottom: '4%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: data.titleList,
                // data: ['浙江', '上海', '江苏', '广东', '北京', '深圳', '安徽'],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },

                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    // rotate:50,
                    show: true,
                    splitNumber: 15,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
            }],
            yAxis: [{
                type: 'value',
                axisLabel: {
                    //formatter: '{value} %'
                    show: true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1	)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                    }
                }
            }],
            series: [
                {

                    type: 'bar',
                    name : "内部",
                    stack : "堆叠",  //设置堆叠柱状图的属性，需堆叠的柱子名称需相同
                    data: data.oneList,
                    // data: [1500, 1200, 600, 200, 300, 300, 900],
                    barWidth: '35%', //柱子宽度
                    // barGap: 1, //柱子之间间距
                    itemStyle: {
                        normal: {
                            color: '#2f89cf', //柱子颜色
                            opacity: 1,
                            barBorderRadius: 1,
                        }
                    }
                },
                {

                    type: 'bar',
                    name : "外部",
                    stack : "堆叠", //设置堆叠柱状图的属性，需堆叠的柱子名称需相同
                    data: data.twoList,
                    // data: [1500, 1200, 600, 200, 300, 300, 900],
                    barWidth: '35%', //柱子宽度
                    // barGap: 1, //柱子之间间距
                    itemStyle: {
                        normal: {
                            color: '#27d08a', //柱子颜色
                            opacity: 1,
                            barBorderRadius: 1,  //柱子菱角
                        }
                    }
                }

            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

 

堆叠柱状图若想查看总数，可在设置一栏进行数据的相加，这样既可进行总数的查看

    function echarts_2(data) {
        var result =[];  //总数
        var maxNum = 0;  //最大数值，为了界面好看的，可不设置
        for(var i = 0; i < data.titleList.length;i++) {
            var sumNum = data.oneList[i] + data.twoList[i]
            result.push(sumNum)
            maxNum = sumNum >= maxNum ? sumNum : maxNum;
        }

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart2'));

        option = {
            //  backgroundColor: '#00265f',
            legend: {
                data: ['内部', '外部'],
                type: "plain",
                right: '2%',
                textStyle: {
                    color: 'rgba(255,255,255,.5)',
                }
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {type: 'shadow'}
            },
            grid: {
                left: '0%',
                top: '10px',
                right: '0%',
                bottom: '4%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: data.titleList,
                // data: ['浙江', '上海', '江苏', '广东', '北京', '深圳', '安徽'],
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                        width: 1,
                        type: "solid"
                    },
                },

                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    // rotate:50,
                    show: true,
                    splitNumber: 15,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
            }],
            yAxis: [{
                type: 'value',
                max: Math.round(maxNum * 1.2), //设置纵坐标的最大数据为多少，目的是怕数据过大把展示图进行重叠
                axisLabel: {
                    //formatter: '{value} %'
                    show: true,
                    textStyle: {
                        color: "rgba(255,255,255,.6)",
                        fontSize: '12',
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "rgba(255,255,255,.1	)",
                        width: 1,
                        type: "solid"
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,.1)",
                    }
                }
            }],
            series: [
                {

                    type: 'bar',
                    name : "内部",
                    stack : "堆叠",
                    data: data.oneList,
                    // data: [1500, 1200, 600, 200, 300, 300, 900],
                    barWidth: '35%', //柱子宽度
                    // barGap: 1, //柱子之间间距
                    itemStyle: {
                        normal: {
                            color: '#2f89cf', //柱子颜色
                            opacity: 1,
                            barBorderRadius: 1,
                        }
                    }
                },
                {

                    type: 'bar',
                    name : "外部",
                    stack : "堆叠",
                    data: data.twoList,
                    // data: [1500, 1200, 600, 200, 300, 300, 900],
                    barWidth: '35%', //柱子宽度
                    // barGap: 1, //柱子之间间距
                    itemStyle: {
                        normal: {
                            color: '#27d08a', //柱子颜色
                            opacity: 1,
                            barBorderRadius: 1,  //柱子菱角
                        }
                    }
                },
                {
                    name: "总数",
                    type: "line", //使用线性图
                    symbolSize:1,
                    symbol:'circle',
                    itemStyle: {
                        normal: {
                //线性图的颜色，最后一个数值是透明度,这里设置为0不让查看到，不然界面很丑
                            color: "rgba(252,120,48,0)", 
                            barBorderRadius: 0,
                        }
                    },
                    data: result
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

 

附上echarts的api：

https://echarts.apache.org/zh/option.html#title

宸0313
关注
  • 8
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts多柱状图练习demo
06-14
Echarts多柱状图 （柱子类型分类） 本地数据练习demo
echarts——柱状堆叠图
小兔崽子的博客
01-20 2298
1.示例图 2.echarts配置 var data = { area: ['3G', '4G', '5G-SA', '5G-NSA'], legend: ['华为', '中兴', '烽火', '瑞斯'], data: [ [320, 302, 901, 634], [320, 302, 301, 334], [320, 302, 301, 334], [320, 302, 301, 334], ],
echarts：多组柱状-图
qq_41390184的博客
04-13 6547
本文介绍了如何使用Echarts绘制多组柱状图。首先需要准备好要绘制的数据，然后在HTML页面中创建一个图表容器，并引入Echarts库文件。接着，在JavaScript代码中使用Echarts的API来绘制图表，包括设置图表的各种属性和数据系列等。最后，将option配置项应用到图表容器中，即可完成图表的绘制。
echarts柱状图——堆叠、多柱堆叠，并在顶部展示总和
最新发布
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
07-31 1238
主要介绍echarts柱状图实现堆叠、多柱堆叠，并在顶部展示总和
echarts-单柱状图
牛栏山矿泉水
06-03 163
1、问题背景 制作一个柱状图，用来统计某商店一年的销售量 2、实现源码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;echarts-单柱状图&lt;/title&gt; &lt;script type="text/ja
Echarts柱形图堆叠
热门推荐
Sunshine_Jian的博客
11-04 2万+
应用场景：一些柱形图在数据量比较多的时候，横向排列受到挤压，导致柱形图，变的非常细，影响整体的效果。所以应该将柱形图堆叠起来，这样就会好很多。 先上效果图： 关键字：series-stack //数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。 var option = { series: [ { name: "钢铁侠", type: "bar",//柱状图 ...
echarts 柱状堆叠图（图例和x轴都是动态的）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
09-01 1万+
echarts 柱状堆叠图 echarts 柱状堆叠图（图例和x轴都是动态的）
echarts 堆叠柱状图多柱堆叠，每条柱子堆叠内容以及数量不同
cocos2dx zzzzz
10-21 2437
在使用echarts堆叠柱状图的时候，常规堆叠柱状图每条柱子的堆叠种类是相同的，在开发中遇到了这样的一个需求：有多个分公司，每个公司污染物类型差距很大，有些公司有这几个污染物，有些公司又没有这几个污染物，这就导致堆叠的时候echarts的series堆叠的种类以及数据无法对应到每一个公司，用echarts现有的堆叠柱状图无法满足，所以吭哧吭哧鼓捣了一早上，最终还是实现了这个需求。
数据可视化高级技术Echarts(堆叠柱状图)
m0_63181360的博客
04-08 4051
下面定义了五种数据，分别定义了五个不太的名字来设定，再分别在各个数据下设定stack（名称为total）更改为三列，即设置三个不同的stack名称（total，total11，total22）即在series中将设置stack即可。其他设置与普通柱状图相同，语法：相同名称的数据会堆叠起来，不同则会新生成一列。数据堆叠，同个类目轴上系列配置相同的。相同（相同的堆叠，不同的新生成一列）stack名称相同（直接堆叠）类型的类目轴上，不持。stack:"名称"
echarts堆叠柱状图(顶端圆角）.rar
07-30
echarts实现堆叠柱状图(顶端圆角），并统计总数，自定义柱体颜色
堆叠图_echarts_柱状堆叠图_
09-29
4. 创建配置项：使用JavaScript编写ECharts的配置项，定义图表的类型（如'bar'表示柱状图）、数据、堆叠方式（如'stacked'表示堆叠）以及其他视觉样式和交互选项。 ```javascript var option = { tooltip: { ...
使用echarts实现双向柱状图
09-02
1、文件夹下载下来后直接双击html文件即可... 2、项目中多次使用，保证稳定； 3、代码中有详细的介绍说明； 4、可以单独拿出来作为插件使用； 5、echarts基本图例里面不存这个图形; 6、有问题欢迎留言，看到会解答；
echarts横向堆叠柱状图.zip
10-11
堆叠柱状图是一种特殊类型的柱状图，它允许我们在同一坐标轴上展示多个相关系列的数据，使得每个柱子由不同数据系列堆叠而成，从而方便地对比各个系列在总值中的相对贡献。 标题 "echarts横向堆叠柱状图.zip" 提示...
echarts漂亮的柱状图按月统计
07-20
在这个“echarts漂亮的柱状图按月统计”项目中，我们将探讨如何利用ECharts来创建一个美观且实用的柱状图，以按月展示统计数据。 首先，`index.html`是网页的主文件，它通常包含了HTML结构以及对其他资源（如CSS...
ECharts -堆叠柱状图
weixin_43102784的博客
01-18 2935
ECharts 教程 基础篇 ECharts数据可视化实验室，解读适合使用场景 官网 项目简介：ECharts 是一款由百度前端技术部开发的，基于 Javascript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。涵盖各行业图表，满足各种需求。 项目地址：https://gitee.com/echarts/echarts 现在公司刚分配一个任务，需要用到 echarts堆叠柱状图处理缺陷报表问题，以前也没有接触过，所以一边学习ECharts官网上的中文API（http://
echarts入门 常用图表（柱状堆叠图）
weixin_45818290的博客
08-29 2678
echarts堆叠图柱状图效果图。
使用echarts实现多组柱状图堆叠
吾日三省吾身
12-14 1436
使用echarts实现多组柱状图堆叠
Echarts.js（二）：多系列柱状图
foreverzwl
07-30 5536
多系列柱状图大部分与多系列折线图相似 一、简单html布局 简单的html如下： <!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>多系列柱状图</title> </head> <st...
Echarts 3D柱形图和3D堆叠柱形图实现
z1076233241的博客
05-28 4121
这个图本身组成部分多样，一组双柱图（蓝绿柱子），由10个部分构成，解释其中一个（蓝色），一个由3个菱形，2个直边构成。3个菱形为上、中、底部，2个直边为背景虚化的柱子，和蓝颜色柱子，绿色柱子同理。其中，直边的图形利用两种颜色，深浅不一进行渲染，出现了类似于直边的效果。最后吐槽，我原本想实现的柱形图，是上方为平行四边形的类型的柱形图，但发现，Echarts自带的图形中，没有平行四边形，得自己画或者去官方那里放入图片进行代码的生成导出，于是放弃，使用这种网上查找的大多数人使用的菱形进行操作。
echarts多柱状图堆叠
09-15
要实现echarts的多柱状图堆叠，你可以使用echarts的series配置项中的stack属性来实现。下面是一个示例代码： ```javascript // 初始化echarts实例 var myChart = echarts.init(document.getElementById('chart')); // 配置项 var option = { // x轴数据 xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E'] }, // y轴数据 yAxis: { type: 'value' }, // 数据系列 series: [ { name: '系列1', type: 'bar', stack: '总量', // 设置stack属性为同一个值，表示堆叠在一起 data: [10, 20, 30, 40, 50] }, { name: '系列2', type: 'bar', stack: '总量', // 设置stack属性为同一个值，表示堆叠在一起 data: [20, 30, 40, 50, 60] }, { name: '系列3', type: 'bar', stack: '总量', // 设置stack属性为同一个值，表示堆叠在一起 data: [30, 40, 50, 60, 70] } ] }; // 使用配置项显示图表 myChart.setOption(option); ``` 这段代码会生成一个堆叠的多柱状图，其中有三个数据系列（系列1、系列2、系列3），它们的数据会在同一条x轴上堆叠显示。你可以根据自己的需求修改x轴、y轴以及数据系列的内容和样式。记得在页面中添加一个具有唯一id的div元素，用于显示图表（上述代码中的"chart"）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值