【Echarts】堆积柱状图

最新推荐文章于 2023-11-02 09:26:42 发布
最新推荐文章于 2023-11-02 09:26:42 发布
阅读量596 收藏 1
点赞数
分类专栏： # ECharts 文章标签： Echarts 柱状图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hutuyaoniexi/article/details/124023036
版权

1、效果

2、jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

%>

<!DOCTYPE HTML>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>案件推送列表</title>

    <jsp:include page="/page/hcbh/api/module.jsp"></jsp:include>

    <script type="text/javascript" src="<%=path %>/page/hcbh/api/taskpush/stats/echarts-5.3.1.js"></script>

    <script type="text/javascript" src="<%=path %>/page/hcbh/api/taskpush/stats/zhzx.js"></script>

</head>

<body>

<%--    <div id="status" style="width: 600px;height:400px;"></div>--%>

    <div id="zt" style="width: 600px;height:400px;"></div>

</body>

3、javascript

$(document).ready(function() {

    stats_zt();

});



/**

 * 按专题统计

 */

function stats_zt(){

    var url = "/gds/query/list.do";

    var data = {

        "c":"stats_ztmc"

    };

    var res =  ajaxData(url,data);



    // 基于准备好的dom，初始化echarts实例

    var myChart = echarts.init(document.getElementById('zt'));



    if(res.length === 0){

        //无数据展示

        myChart.setOption({

            title: {

                text: '暂无数据',

                x: 'center',

                y: 'center',

                textStyle: {

                    color: '#65ABE7',

                    fontWeight: 'normal',

                    fontSize: 16

                }

            }

        });

    }else{

        var dataAxis = []; //X轴name

        var dataYcz = []; //y轴-已处置

        var dataWcz = [];//y轴-未处置



        for (var i in res) {

            dataAxis.push(res[i].ztmc);

            dataYcz.push(res[i].ycz);

            dataWcz.push(res[i].wcz)

        }



        //绘制图表

        myChart.setOption({

            title:{

               text: '各专题处置情况统计',

               textAlign:'center',

               top:'4%',

               left:'50%'

            },

            tooltip: {

                trigger: 'axis',

                axisPointer: {

                    type: 'shadow'

                },

                formatter: function (params) {

                    var relVal = params[0].name;

                    for (var i = 0, l = params.length; i < l; i++) {

                        relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + '%'

                    }

                    return relVal;

                }

            },

            legend: {

                    top:'90%' //图例置底

            },

            grid: {

                left: '3%',

                containLabel: true

            },

            xAxis: [

                {

                    type: 'category',

                    axisLabel: {//x轴文字的配置

                        show: true,

                        interval: 0,//使x轴文字显示全

                    },

                    data: dataAxis

                }

            ],

            yAxis: [

                {

                    type: 'value',

                    axisLabel: {

                        show: true,

                        interval: 'auto',

                        formatter: '{value}.0%'

                    },

                    show: true

                }

            ],

            series: [

                {

                    name: '已处置',

                    type: 'bar',

                    stack: 'Ad',

                    emphasis: {

                        focus: 'series'

                    },

                    label:{

                        show:true,

                        formatter:function(params){

                            return params.value+'%';

                        }

                    },

                    data:dataYcz

                },

                {

                    name: '未处置',

                    type: 'bar',

                    stack: 'Ad',

                    emphasis: {

                        focus: 'series'

                    },

                    label:{

                        show:true,

                        color:'#fff',

                        formatter:function(params){

                            return params.value+'%';

                        }

                    },

                    itemStyle:{ //修改柱状图颜色

                        normal:{

                            color:'#E98344'

                        }

                    },

                    data: dataWcz

                }

            ]

        });

    }

    window.onresize = myChart.resize;

}

4、数据

请叫我背影男神
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Echarts柱形图堆叠
Sunshine_Jian的博客
11-04 2万+
应用场景：一些柱形图在数据量比较多的时候，横向排列受到挤压，导致柱形图，变的非常细，影响整体的效果。所以应该将柱形图堆叠起来，这样就会好很多。 先上效果图： 关键字：series-stack //数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。 var option = { series: [ { name: "钢铁侠", type: "bar",//柱状图 ...
echarts中堆叠柱状图实现顶部显示总量
weixin_30756499的博客
07-10 2774
option = { tooltip : { trigger: 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'shadow' // 默认为直线，可选为：'line' | 'shadow' } }, legend: { data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应',...
【Echarts】横向柱状图
bug制造者
04-06 3280
2、jsp <%@ page language="java"contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <% String path =request.getContextPath(); %> <!DOCTYPEHTML> <htmlxmlns="http://www.w3.or...
echarts——柱状堆叠图
小兔崽子的博客
01-20 2087
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柱状堆积图
HuLuWa1997的博客
05-18 415
option3: { color: ['#2777EC', '#F7B500', '#8C64D7'], legend: { data: ['进行中', '已完成', '已终审项目'], top: '3%', left: '20%' }, grid: { x: '7%', y: '15%', x2: '3%', ..
vue-echarts5:动态排序柱状图
04-16
动态柱状图排序 # 克隆项目 git clone # 进入项目目录 cd * # 安装依赖 npm install # 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=...
echarts堆叠柱状图(顶端圆角）.rar
07-30
echarts实现堆叠柱状图(顶端圆角），并统计总数，自定义柱体颜色
堆叠柱状图按照百分比显示.rar
08-20
echarts的堆叠柱状图，按照百分比显示，且占满整行，全网搜了一下，没有发现所想要的，于是自己写了一个，可能比较麻烦些，如果有需要的可以下载看一下。
echart实现3D柱状图效果
01-31
echart.js实现动态3D效果，酷炫的效果，值得研究看看哈
散点图实现多列堆积柱状图X轴标签居中
06-23
excel散点图，实现多列堆积柱状图X轴标签居中。
echarts 堆叠柱状图多柱堆叠，每条柱子堆叠内容以及数量不同
cocos2dx zzzzz
10-21 1992
在使用echarts堆叠柱状图的时候，常规堆叠柱状图每条柱子的堆叠种类是相同的，在开发中遇到了这样的一个需求：有多个分公司，每个公司污染物类型差距很大，有些公司有这几个污染物，有些公司又没有这几个污染物，这就导致堆叠的时候echarts的series堆叠的种类以及数据无法对应到每一个公司，用echarts现有的堆叠柱状图无法满足，所以吭哧吭哧鼓捣了一早上，最终还是实现了这个需求。
ECharts -堆叠柱状图
weixin_43102784的博客
01-18 2880
ECharts 教程 基础篇 ECharts数据可视化实验室，解读适合使用场景 官网 项目简介：ECharts 是一款由百度前端技术部开发的，基于 Javascript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。涵盖各行业图表，满足各种需求。 项目地址：https://gitee.com/echarts/echarts 现在公司刚分配一个任务，需要用到 echarts堆叠柱状图处理缺陷报表问题，以前也没有接触过，所以一边学习ECharts官网上的中文API（http://
echarts 堆叠柱状图 顶部添加合计
Z_Gleng的博客
07-21 3211
echarts 堆叠柱状图 顶部添加合计
echarts 柱状堆叠图（图例和x轴都是动态的）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
09-01 9889
echarts 柱状堆叠图 echarts 柱状堆叠图（图例和x轴都是动态的）
echarts横向多组柱状图（百分比显示）
weixin_60924822的博客
06-06 2040
【代码】echarts横向多组柱状图（百分比显示）
echarts之含百分比的横向柱状图
qq_43519782的博客
03-01 2934
需求： 鼠标移入： 1、容器： <div id="bar" style="width: 700px; height: 380px; background: rgba(2, 15, 43, 0.7)"></div> 2、在methods中 methods:{ bar() { function contains(arr, dst) { var i = arr.length; while ((i -= 1)) {
echart柱状百分比
qq_42112979的博客
08-29 1444
echarts百分比横向柱状图样式要求一、样式二、使用步骤1.引入库2.html总结 要求 一个横向的百分比柱状图 一、样式 就这么一个样式，所占百分比被我隐藏了 二、使用步骤 1.引入库 代码如下（这里用了bootstracp等框架）： <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0"> &
echarts柱状堆叠，多种类型，多柱子，动态渲染
weixin_42186815的博客
11-02 225
需求：需要根据一个下拉选择框，选则年，月，日，传不同的参数，根据值不同动态渲染数据，并且多种类型对比，同一年的放一起对比，并且需要排除掉接口没有返回的日期，做数据处理。显示的图形是这样的，x轴会动态变化的，上面说了是根据是日期类型来显示的，这里我是按月筛选的。其中最难的就是组合数据那一部分，因为我的请况比较多，所以组合起来稍微复杂。模拟数据：根据自己业务情况来修改，我这里时间有3种类型。工作中遇到的开发需求，记录一下，希望对其他人有帮助。准备echarts 容器和页面。安装echarts：可以参考。
用Echarts绘制折线图-----堆积面积图和堆积折线图
dongdouzin的博客
06-16 3695
堆积折线图的作用是用于显示每一数据所占大小随时间或有序类别而变化的趋势，展示的是部分与整体的关系。 堆积面积图是在折线图中添加面积图，属于组合图形中的一种。堆积面积图又被称为堆积区域图，它强调数量随时间而变化的趋势，用于引起人们对总值趋势的注意。与堆积折线图不同，堆积面积图可以更好地显示有很多类别或数值近似的数据。 在ECharts中，实现堆积的重要参数为stack。只要将stack的值设置为相同，两组就会堆积；相反，若将stack的值设置为不相同，则不会堆积。 利用某商城一周内电子产品的销量数据绘制堆积
echarts堆积柱状图
最新发布
12-05
以下是使用Echarts绘制堆积柱状图的示例代码： ```javascript // 引入 ECharts 主模块 var echarts = require('echarts/lib/echarts'); // 引入柱状图和提示框等组件 require('echarts/lib/chart/bar'); require('echarts/lib/component/tooltip'); require('echarts/lib/component/title'); // 初始化图表 var myChart = echarts.init(document.getElementById('main')); // 配置项 var option = { title: { text: '堆积柱状图示例' }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } }, legend: { data: ['数据1', '数据2', '数据3'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: { type: 'category', data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'] }, yAxis: { type: 'value' }, series: [ { name: '数据1', type: 'bar', stack: '总量', data: [120, 132, 101, 134, 90, 230, 210] }, { name: '数据2', type: 'bar', stack: '总量', data: [220, 182, 191, 234, 290, 330, 310] }, { name: '数据3', type: 'bar', stack: '总量', data: [150, 232, 201, 154, 190, 330, 410] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); ``` 以上代码会生成一个堆积柱状图，其中包含三组数据，每组数据都堆积在一起。你可以根据自己的需求修改数据和配置项，以生成符合自己需求的堆积柱状图。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值