echarts实现【堆叠柱状图】和【堆叠条形图】

白桃与猫

已于 2023-06-08 22:15:26 修改

阅读量900

点赞数

分类专栏： echarts 文章标签： echarts 前端 javascript

于 2023-06-08 22:11:31 首次发布

本文链接：https://blog.csdn.net/qq_52395343/article/details/131116968

版权

echarts 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. 堆叠柱状图

在这里插入图片描述
配置项：

var option = {
  title: {},
  tooltip: {
    // formatter:'{value}个'
  },
  xAxis: {
    name:'设备名',
    type: 'category',
    data: ['设备1', '设备2', '设备3', '设备4'],
    axisLabel:{
      rotate:50,//倾斜角度
    }
  },
  yAxis: {
    type: 'value',
    // 1. x轴每个刻度线加单位
    // axisLabel:{
    //   formatter:'{value}个'
    // }
    //2. x轴上方加单位
    name: '数量/个'
  },
  series: [
    {
      name: '高危',
      type: 'bar',
      stack: 'type',//stack设置成同一个值，就会进行堆叠
      data: [2, 3, 2, 1],
      itemStyle: {
        //改变柱子颜色
        color: '#F53F3F'
      }
    },
    {
      name: '中危',
      type: 'bar',
      stack: 'type',
      data: [4, 2, 2, 3],
      itemStyle: {
        //改变柱子颜色
        color: '#F99057'
      }
    },
    {
      name: '低危',
      type: 'bar',
      stack: 'type',
      data: [2, 1, null, 3],
      itemStyle: {
        //改变柱子颜色
        color: '#FADC6D'
      }
    },
    {
      name: '安全',
      type: 'bar',
      stack: 'type',
      data: [1, 2, 2, 2],
      itemStyle: {
        //改变柱子颜色
        color: '#9FD4FD'
      }
    }
  ]
};

2. 堆叠条形图

在这里插入图片描述
配置项：

var option = {
  title: {},
  tooltip: {
    // formatter:'{value}个'
  },
  xAxis: {
    name:'数量/个',
    type: 'value',
   
  },
  yAxis: {
    type: 'category',
    name: '设备名',
     data: ['设备1', '设备2', '设备3', '设备4'],
  },
  series: [
    {
      name: '高危',
      type: 'bar',
      stack: 'type',
      data: [2, 3, 2, 1],
      itemStyle: {
        //改变柱子颜色
        color: '#F53F3F'
      }
    },
    {
      name: '中危',
      type: 'bar',
      stack: 'type',
      data: [4, 2, 2, 3],
      itemStyle: {
        //改变柱子颜色
        color: '#F99057'
      }
    },
    {
      name: '低危',
      type: 'bar',
      stack: 'type',
      data: [2, 1, null, 3],
      itemStyle: {
        //改变柱子颜色
        color: '#FADC6D'
      }
    },
    {
      name: '安全',
      type: 'bar',
      stack: 'type',
      data: [1, 2, 2, 2],
      itemStyle: {
        //改变柱子颜色
        color: '#9FD4FD'
      }
    }
  ]
};