echarts堆叠柱状图

最新推荐文章于 2024-05-15 11:06:01 发布
最新推荐文章于 2024-05-15 11:06:01 发布
阅读量3.9k 收藏 11
点赞数 2
分类专栏： 前端 文章标签： 前端 echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44505797/article/details/124495515
版权

先看一下效果，根据echarts官网上的堆叠柱状图属性及其他的方法得到下面的效果
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ECharts</title>
  <script src="https://lib.baomitu.com/echarts/4.7.0/echarts.js"></script>
</head>
<body>
  <div id="main" style="width: 1000px;height:800px;"></div>
  <script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
    var a = [{
      "time": "2022-04-10",
      "cstotal": 100,
      "qztotal": 100,
      "child": {
        "莲花街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "福保街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "梅林街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "福田街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "沙头街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "南园街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "华强北街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "园岭街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "华富街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "香蜜湖街道": {
          "cstotal": 10,
          "qztotal": 10,
        }
      }
    }, {
      "time": "2022-04-11",
      "cstotal": 100,
      "qztotal": 100,
      "child": {
        "莲花街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "福保街道": {
          "cstotal": 11,
          "qztotal": 11,
        },
        "梅林街道": {
          "cstotal": 9,
          "qztotal": 9,
        },
        "福田街道": {
          "cstotal": 8,
          "qztotal": 8,
        },
        "沙头街道": {
          "cstotal": 12,
          "qztotal": 12,
        },
        "南园街道": {
          "cstotal": 15,
          "qztotal": 15,
        },
        "华强北街道": {
          "cstotal": 15,
          "qztotal": 15,
        },
        "园岭街道": {
          "cstotal": 1,
          "qztotal": 1,
        },
        "华富街道": {
          "cstotal": 9,
          "qztotal": 9,
        },
        "香蜜湖街道": {
          "cstotal": 20,
          "qztotal": 20,
        }
      }
    },{
      "time": "2022-04-12",
      "cstotal": 100,
      "qztotal": 100,
      "child": {
        "莲花街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "福保街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "梅林街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "福田街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "沙头街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "南园街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "华强北街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "园岭街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "华富街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "香蜜湖街道": {
          "cstotal": 10,
          "qztotal": 10,
        }
      }
    },{
      "time": "2022-04-13",
      "cstotal": 100,
      "qztotal": 100,
      "child": {
        "莲花街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "福保街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "梅林街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "福田街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "沙头街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "南园街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "华强北街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "园岭街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "华富街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "香蜜湖街道": {
          "cstotal": 10,
          "qztotal": 10,
        }
      }
    },{
      "time": "2022-04-14",
      "cstotal": 100,
      "qztotal": 100,
      "child": {
        "莲花街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "福保街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "梅林街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "福田街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "沙头街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "南园街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "华强北街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "园岭街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "华富街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "香蜜湖街道": {
          "cstotal": 10,
          "qztotal": 10,
        }
      }
    },{
      "time": "2022-04-15",
      "cstotal": 100,
      "qztotal": 100,
      "child": {
        "莲花街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "福保街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "梅林街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "福田街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "沙头街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "南园街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "华强北街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "园岭街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "华富街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "香蜜湖街道": {
          "cstotal": 10,
          "qztotal": 10,
        }
      }
    },{
      "time": "2022-04-16",
      "cstotal": 100,
      "qztotal": 100,
      "child": {
        "莲花街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "福保街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "梅林街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "福田街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "沙头街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "南园街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "华强北街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "园岭街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "华富街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "香蜜湖街道": {
          "cstotal": 10,
          "qztotal": 10,
        }
      }
    },{
      "time": "2022-04-17",
      "cstotal": 100,
      "qztotal": 100,
      "child": {
        "莲花街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "福保街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "梅林街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "福田街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "沙头街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "南园街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "华强北街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "园岭街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "华富街道": {
          "cstotal": 10,
          "qztotal": 10,
        },
        "香蜜湖街道": {
          "cstotal": 10,
          "qztotal": 10,
        }
      }
    }]
    var b = []

    var option = {
      tooltip: {
        trigger: 'axis',
        // formatter:'{c}%',
        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
          type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
        },
        formatter: function (params) {//这里就是控制显示的样式
          console.log(params)
          let relVal = params[0].name;
          let value = 0;
          for (let i = 0, l = params.length; i < l; i++) {
            value += params[i].value;
          }
          for (let i = 0, l = params.length; i < l; i++) {
            //marker 就是带颜色的小圆圈 seriesName x轴名称  value  y轴值 后面就是计算百分比
            relVal += '<br/>' + params[i].marker + params[i].seriesName + '  : 数量 : '
              + parseFloat(isNaN(params[i].data.num) ? 0 : params[i].data.num) + ', 百分比 : '
              + (100 * parseFloat(isNaN(params[i].value) ? 0 : params[i].value) / parseFloat(value)).toFixed(2) + "%";
          }
          return relVal;
        }
      },
      legend: {
        textStyle: {
          color: "#4FA0FF",
          fontSize: "10px"
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: ['10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日']
        }
      ],
      yAxis: [
        {
          type: "value",
          name: "数量百分比",
          position: 'left',
          alignTicks: true,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#B5B7BA"
            }
          },
          axisLabel: { //y轴设置为%
            show: true,
            interval: 'auto',
            formatter: '{value} %',
          },
          splitLine: { show: false }
        }
      ],
      series: [
        {
          name: '福保街道',
          barWidth: 20,
          type: 'bar',
          symbol: 'rect',
          symbolSize: [30, 10],
          symbolRepeat: true,
          color: "#309EF8",
          stack: 'jd',
          label: {
            show: true,
            position: 'insideLeft',//在左边显示
            formatter: '{c}%'// 给计算后的数值添加%
          },
          data: initData('fbjd'),
          z: 1,
        },
        {
          name: '福田街道',
          barWidth: 20,
          type: 'bar',
          symbol: 'rect',
          symbolSize: [30, 10],
          symbolRepeat: true,
          color: "#3066F8",
          stack: 'jd',
          label: {
            show: true,
            position: 'insideLeft',//在左边显示
            formatter: '{c}%'// 给计算后的数值添加%
          },
          data: initData('ftjd'),
          z: 1,
        },
        {
          name: '华福街道',
          barWidth: 20,
          type: 'bar',
          symbol: 'rect',
          symbolSize: [30, 10],
          symbolRepeat: true,
          color: "#6230F8",
          stack: 'jd',
          label: {
            show: true,
            position: 'insideLeft',//在左边显示
            formatter: '{c}%'// 给计算后的数值添加%
          },
          data: initData('hfjd'),
          z: 1,
        },
        {
          name: '华强北街道',
          barWidth: 20,
          type: 'bar',
          symbol: 'rect',
          symbolSize: [30, 10],
          symbolRepeat: true,
          color: "#B130F8",
          stack: 'jd',
          label: {
            show: true,
            position: 'insideLeft',//在左边显示
            formatter: '{c}%'// 给计算后的数值添加%
          },
          data: initData('hqbjd'),
          z: 1,
        },
        {
          name: '莲花街道',
          barWidth: 20,
          type: 'bar',
          symbol: 'rect',
          symbolSize: [30, 10],
          symbolRepeat: true,
          color: "#A190FF",
          stack: 'jd',
          label: {
            show: true,
            position: 'insideLeft',//在左边显示
            formatter: '{c}%'// 给计算后的数值添加%
          },
          data: initData('lhjd'),
          z: 1,
        },
        {
          name: '梅林街道',
          barWidth: 20,
          type: 'bar',
          symbol: 'rect',
          symbolSize: [30, 10],
          symbolRepeat: true,
          color: "#90CFFF",
          stack: 'jd',
          label: {
            show: true,
            position: 'insideLeft',//在左边显示
            formatter: '{c}%'// 给计算后的数值添加%
          },
          data: initData('mljd'),
          z: 1,
        },
        {
          name: '南园街道',
          barWidth: 20,
          type: 'bar',
          symbol: 'rect',
          symbolSize: [30, 10],
          symbolRepeat: true,
          color: "#BFFFBD",
          stack: 'jd',
          label: {
            show: true,
            position: 'insideLeft',//在左边显示
            formatter: '{c}%'// 给计算后的数值添加%
          },
          data: initData('nyjd'),
          z: 1,
        },
        {
          name: '沙头街道',
          barWidth: 20,
          type: 'bar',
          symbol: 'rect',
          symbolSize: [30, 10],
          symbolRepeat: true,
          color: "#FFDCBD",
          stack: 'jd',
          label: {
            show: true,
            position: 'insideLeft',//在左边显示
            formatter: '{c}%'// 给计算后的数值添加%
          },
          data: initData('stjd'),
          z: 1,
        },
        {
          name: '香蜜湖街道',
          barWidth: 20,
          type: 'bar',
          symbol: 'rect',
          symbolSize: [30, 10],
          symbolRepeat: true,
          color: "#FF7F7F",
          stack: 'jd',
          label: {
            show: true,
            position: 'insideLeft',//在左边显示
            formatter: '{c}%'// 给计算后的数值添加%
          },
          data: initData('xmhjd'),
          z: 1,
        },
        {
          name: '园岭街道',
          barWidth: 20,
          type: 'bar',
          symbol: 'rect',
          symbolSize: [30, 10],
          symbolRepeat: true,
          color: "#FFD370",
          stack: 'jd',
          label: {
            show: true,
            position: 'insideLeft',//在左边显示
            formatter: '{c}%'// 给计算后的数值添加%
          },
          data: initData('yljd'),
          z: 1
        },
      ]
    };

    //使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    //计算各数据占比
    function initData(val) {
      var serie = [];
      for (var i = 0; i < a.length; i++) {
        var num = 0
        if (val == 'fbjd') {
          num = a[i].child.福保街道.qztotal
        } else if (val == 'ftjd') {
          num = a[i].child.福田街道.qztotal
        } else if (val == 'hfjd') {
          num = a[i].child.华富街道.qztotal
        } else if (val == 'hqbjd') {
          num = a[i].child.华强北街道.qztotal
        } else if (val == 'lhjd') {
          num = a[i].child.莲花街道.qztotal
        } else if (val == 'mljd') {
          num = a[i].child.梅林街道.qztotal
        } else if (val == 'nyjd') {
          num = a[i].child.南园街道.qztotal
        } else if (val == 'stjd') {
          num = a[i].child.沙头街道.qztotal
        } else if (val == 'xmhjd') {
          num = a[i].child.香蜜湖街道.qztotal
        } else if (val == 'yljd') {
          num = a[i].child.园岭街道.qztotal
        }
        var total = (parseFloat(a[i].child.福保街道.qztotal) + parseFloat(a[i].child.福田街道.qztotal) + parseFloat(a[i].child.华富街道.qztotal)
          + parseFloat(a[i].child.华强北街道.qztotal) + parseFloat(a[i].child.莲花街道.qztotal) + parseFloat(a[i].child.梅林街道.qztotal)
          + parseFloat(a[i].child.南园街道.qztotal) + parseFloat(a[i].child.沙头街道.qztotal) + parseFloat(a[i].child.香蜜湖街道.qztotal)
          + parseFloat(a[i].child.园岭街道.qztotal)).toFixed(2);
        var numcount = Percentage(num, total)
        serie.push({ num: num, value: numcount });
      }
      return serie;
    }

    //定义计算方法
    function Percentage(num, total) {
      return (Math.round(num / total * 10000) / 100);// 小数点后两位百分比
    }

  </script>
</body>
</html>
ViTa柠柠茶
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
hcharts实现堆叠柱形图
qq_38822390的博客
04-04 196
原型图类似如下： <!DOCTYPE > <html> <head> <meta charset="utf-8"><link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico"> ...
pyecharts-柱状图
YiBochun-Blog
05-23 6256
如果直接from pyecharts import Bar，会发现报错TypeError: 'module' object is not callable，这是因为pyecharts版本更新后，导入模块的方式也变了。 输出html文件 bar.render() 运行代码后，图片会以html文件保存。 from pyecharts.charts import Bar from pyecharts i...
Echarts柱形图堆叠
热门推荐
Sunshine_Jian的博客
11-04 2万+
应用场景：一些柱形图在数据量比较多的时候，横向排列受到挤压，导致柱形图，变的非常细，影响整体的效果。所以应该将柱形图堆叠起来，这样就会好很多。 先上效果图： 关键字：series-stack //数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。 var option = { series: [ { name: "钢铁侠", type: "bar",//柱状图 ...
echarts——柱状堆叠图
小兔崽子的博客
01-20 2226
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实现可视化堆叠柱状图
最新发布
A_z2019的博客
05-15 785
echarts实现堆叠柱状图
echarts 柱状堆叠图（图例和x轴都是动态的）
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
09-01 1万+
echarts 柱状堆叠图 echarts 柱状堆叠图（图例和x轴都是动态的）
ECharts -堆叠柱状图
weixin_43102784的博客
01-18 2912
ECharts 教程 基础篇 ECharts数据可视化实验室，解读适合使用场景 官网 项目简介：ECharts 是一款由百度前端技术部开发的，基于 Javascript 的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。涵盖各行业图表，满足各种需求。 项目地址：https://gitee.com/echarts/echarts 现在公司刚分配一个任务，需要用到 echarts堆叠柱状图处理缺陷报表问题，以前也没有接触过，所以一边学习ECharts官网上的中文API（http://
echarts入门 常用图表（柱状堆叠图）
weixin_45818290的博客
08-29 2620
echarts堆叠图柱状图效果图。
echarts横向堆叠柱状图.zip
10-11
标题 "echarts横向堆叠柱状图.zip" 提示我们将讨论如何在 ECharts 中创建横向堆叠柱状图。与传统的垂直堆叠柱状图相比，横向堆叠柱状图将X轴作为分类轴，Y轴作为数值轴，使数据更容易在水平方向上比较。 描述中提到...
堆叠柱状图按照百分比显示.rar
08-20
首先，要创建堆叠柱状图，你需要在 ECharts 配置项中设置 `series` 参数。每个 `series` 对象代表一个数据系列，对于堆叠柱状图，每个系列的数据应该是分组的，即每个数据点包含了所有类别的值。例如： ```...
堆叠图_echarts_柱状堆叠图_
09-29
实现堆叠柱状图通常涉及以下几个步骤： 1. 数据准备：首先，你需要收集和整理数据，确保数据包含所有需要展示的类别和子类别。数据应为结构化的JSON或数组格式，其中每个条目包含类别、子类别以及对应的值。 2. ...
echarts横向柱状图
10-12
设置echarts多个柱状图重叠或者叠加情况，堆叠是数据不会叠加，可以设置堆叠(stack)，否则没有，是叠加横向柱状图，柱形图显示数值，以及设置隐藏一段方案（关联和不关联）,鼠标移动上去显示的提示内容，动态改变...
利用Echarts实现堆叠柱状图
beaAcmen的博客
10-16 2万+
利用Echarts实现堆叠柱状图
echarts 堆叠柱状图多柱堆叠，每条柱子堆叠内容以及数量不同
cocos2dx zzzzz
10-21 2221
在使用echarts堆叠柱状图的时候，常规堆叠柱状图每条柱子的堆叠种类是相同的，在开发中遇到了这样的一个需求：有多个分公司，每个公司污染物类型差距很大，有些公司有这几个污染物，有些公司又没有这几个污染物，这就导致堆叠的时候echarts的series堆叠的种类以及数据无法对应到每一个公司，用echarts现有的堆叠柱状图无法满足，所以吭哧吭哧鼓捣了一早上，最终还是实现了这个需求。
echarts实现堆叠柱状图
qq_40860137的博客
08-03 8110
1、引入echarts并在main.js中全局安装 npm install echarts --save 在main.js中全局注册 import echarts from "echarts"; Vue.prototype.$echarts = echarts; 2、用echarts绘制一个堆叠柱状图 // html <div id="main" ref="echarts" class="mt-40" v-show="!noData"></div>; ..
ECharts 实现重叠柱状图
旭东怪的博客
10-12 1万+
1 使用详解 （1）series.z 说明： 折线图组件的所有图形的 z 值。控制图形的前后顺序。 z 值小的图形会被 z 值大的图形覆盖。z 相比 zlevel 优先级更低，而且不会创建新的 Canvas。 （2）series.barGap 说明： 不同系列的柱间距离，为百分比（如 '30%'，表示柱子宽度的 30%）。 如果想要两个系列的柱子重叠，可以设置 barGap 为 '-100%'。这在用柱子做背景的时候有用。 在同一坐标系上，此属性会被多个 'bar' 系列共享。此属性应设置
【echarts】stack实现堆叠柱状图
芳草萋萋鹦鹉洲哦
07-27 6978
同个类目轴上系列配置相同的stack值可以堆叠放置，stack只支持堆叠于‘value’和‘log’类型的类目轴上。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值