数据可视化高级技术Echarts(堆叠柱状图)

目录

一.如何实现

二.代码展示

1.stack名称相同(直接堆叠)

[2. stack名称不相同(相同的堆叠,不同的新生成一列)](#2. stack名称不相同(相同的堆叠,不同的新生成一列))


一.如何实现

数据堆叠,同个类目轴上系列配置相同的 stack 值可以堆叠放置。即在series中将设置stack即可。其他设置与普通柱状图相同,参考文章:数据可视化高级技术Echarts(快速上手&柱状图&进阶操作)-CSDN博客

语法:相同名称的数据会堆叠起来,不同则会新生成一列

stack:"名称"

注:目前 stack 只支持堆叠于 'value' 和 'log' 类型的类目轴上,不持 'time' 和 'category' 类型的类目轴。

二.代码展示

1.stack名称相同(直接堆叠)

下面定义了五种数据,分别定义了五个不太的名字来设定,再分别在各个数据下设定stack(名称为total)

复制代码
option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  series: [
    {
      name: 'Direct',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 302, 301, 334, 390, 330, 320]
    },
    {
      name: 'Mail Ad',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Affiliate Ad',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ad',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [150, 212, 201, 154, 190, 330, 410]
    },
    {
      name: 'Search Engine',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [820, 832, 901, 934, 1290, 1330, 1320]
    }
  ]
};

2. stack名称不相同(相同的堆叠,不同的新生成一列)

更改为三列,即设置三个不同的stack名称(total,total11,total22)

复制代码
option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  series: [
    {
      name: 'Direct',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 302, 301, 334, 390, 330, 320]
    },
    {
      name: 'Mail Ad',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Affiliate Ad',
      type: 'bar',
      stack: 'total11',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ad',
      type: 'bar',
      stack: 'total11',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [150, 212, 201, 154, 190, 330, 410]
    },
    {
      name: 'Search Engine',
      type: 'bar',
      stack: 'total22',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [820, 832, 901, 934, 1290, 1330, 1320]
    }
  ]
};
相关推荐
small陀螺2 分钟前
STM32笔记(CAN通信协议详解)
笔记
小满zs1 小时前
Zustand 第四章(中间件)
前端·react.js
顽强卖力2 小时前
数据分析六部曲?
大数据·数据挖掘·数据分析
GalaxyPokemon2 小时前
LeetCode - 2. 两数相加
java·前端·javascript·算法·leetcode·职场和发展
swan4162 小时前
SCAU期末笔记 - 数据分析与数据挖掘题库解析
笔记·数据挖掘·数据分析
头疼的程序员3 小时前
MySQL学习之触发器
学习·mysql
ThreeYear_s4 小时前
基于FPGA的PID算法学习———实现PI比例控制算法
学习·算法·fpga开发
dualven_in_csdn4 小时前
搞了两天的win7批处理脚本问题
java·linux·前端
你的人类朋友5 小时前
✍️【Node.js程序员】的数据库【索引优化】指南
前端·javascript·后端
小超爱编程6 小时前
纯前端做图片压缩
开发语言·前端·javascript