Echarts数据可视化第4章 Echarts可视化图 4.2 柱状图

左手的ㄟ右手 2024-03-26 17:46 98阅读 0赞

#### Echarts数据可视化 ####

#### 文章目录 ####

*   *   *  Echarts数据可视化
         *  第4章 Echarts可视化图
         *   *  4.2 柱状图

> Echarts数据可视化：入门、实战与进阶

#### 第4章 Echarts可视化图 ####

##### 4.2 柱状图 #####

柱状图主要用于展示离散数据的频数。

其实非常简单，将series 中的type 设置为 bar即可

option = {
        
      xAxis: {
        
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        
        type: 'value'
      },
      series: [
        {
        
          data: [100, 150, 120, 90, 50, 130, 110],
          type: 'bar'
        }
      ]
    };

渲染效果

![在这里插入图片描述][cce4c8395be34de5a2a511110957feee.png_pic_center]

我们也可以在代码中添加label 以显示具体数值

渲染效果

![在这里插入图片描述][02e80ad2a26444b1a9d352abf4127b86.png_pic_center]

这是简单的柱状图，在实际应用中我们也经常用到聚合柱状图，来更直观的比较各维度的信息。

在原来的代码中加入图例，再新增一批数据，并将x 轴的星期改为不同商场，

option = {
        
      title: {
        
        text: '产品一周销量情况'
      },
      xAxis: {
        
        type: 'category',
        data: [
          'A商场',
          'B商场',
          'C商场',
          'C商场',
          'D商场',
          'E商场',
          'F商场',
          'G商场'
        ]
      },
      yAxis: {
        
        type: 'value'
      },
      legend: {
        
        data: ['A产品', 'B产品']
      },
      series: [
        {
        
          name: 'A产品',
          data: [100, 150, 120, 90, 50, 130, 110],
          type: 'bar',
          label: {
        
            show: true,
            position: 'top'
          }
        },
        {
        
          name: 'B产品',
          data: [120, 130, 110, 70, 60, 110, 140],
          type: 'bar',
          label: {
        
            show: true,
            position: 'top'
          }
        }
      ]
    };

渲染效果

![在这里插入图片描述][c5f5c86cb83b4a8ba2b60dfc42cdb1a4.png_pic_center]

通过这个图，我们就可以比较直观的比较不同商场的不同产品的销售情况了

有时候可能也需要水平聚合柱状图，其实实现很简单，把xAxis和yAxis 中的内容交换，同时将数字label 中的position 由top 改为right 即可

![在这里插入图片描述][6db50669dc09469ea86540948dbe4ca6.png_pic_center]

除了这些柱状图，堆叠柱状图也很常用

来一个不同产品在不同商场销量的堆叠柱状图

option = {
        
      tooltip: {
        
        trigger: 'axis',
        axisPointer: {
        
          type: 'shadow'
        }
      },
      legend: {
        
        data: ['A商场', 'B商场', 'C商场', 'D商场', 'E商场']
      },
      xAxis: {
        
        type: 'value'
      },
      yAxis: {
        
        type: 'category',
        data: ['A产品', 'B产品', 'C产品', 'D产品', 'E产品', 'F产品', 'G产品']
      },
      series: [
        {
        
          name: 'A商场',
          type: 'bar',
          stack: '总量',
          label: {
        
            show: true,
            position: 'inside'
          },
          data: [320, 302, 301, 334, 390, 330, 320]
        },
        {
        
          name: 'B商场',
          type: 'bar',
          stack: '总量',
          label: {
        
            show: true,
            position: 'inside'
          },
          data: [320, 332, 301, 334, 490, 330, 310]
        },
        {
        
          name: 'C商场',
          type: 'bar',
          stack: '总量',
          label: {
        
            show: true,
            position: 'inside'
          },
          data: [220, 182, 191, 234, 290, 330, 310]
        },
        {
        
          name: 'D商场',
          type: 'bar',
          stack: '总量',
          label: {
        
            show: true,
            position: 'inside'
          },
          data: [150, 212, 201, 154, 190, 330, 410]
        },
        {
        
          name: 'E商场',
          type: 'bar',
          stack: '总量',
          label: {
        
            show: true,
            position: 'inside'
          },
          data: [420, 532, 501, 234, 290, 330, 320]
        }
      ]
    };

渲染效果

![在这里插入图片描述][686727cd531846928fcb8fbb42e43363.png_pic_center]

这样5 个商场都堆叠在一起的效果其实是由stack 参数决定的，删掉A 的stack，将BC 的stack 改为总量1

![在这里插入图片描述][713d65814560462d9eaaf221943c353a.png_pic_center]

意思就是stack 参数相同的柱子会堆在一起，如果没有这个参数，即该部分不参与堆叠，独立一个柱子。

[cce4c8395be34de5a2a511110957feee.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1bc55485b8714cefa428ea89e15445b8.png
[02e80ad2a26444b1a9d352abf4127b86.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/3fb93b1e701246fd859ec038dd863c8e.png
[c5f5c86cb83b4a8ba2b60dfc42cdb1a4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/0b4129bfbd6c46529ae83b01654d4196.png
[6db50669dc09469ea86540948dbe4ca6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/858ce1f5216149cf9b64d22d3de9fb69.png
[686727cd531846928fcb8fbb42e43363.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c1e6aca861af48c89c9637bdd72be972.png
[713d65814560462d9eaaf221943c353a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/54095e0d8f8c4042b6a289478db8e97f.png