Echarts数据可视化：图表篇（1）—— 基本柱状图、堆叠柱状图

亦凉 2022-10-01 07:42 1189阅读 0赞

## [项目地址][Link 1] ##

### 介绍 ###

柱状图作为最常见的可视化图表，用于展示一些比较基础的数据，其中分为基本柱状图、堆叠柱状图。通过实现这两种图表，我们将学习到以下内容

*  基本柱图
    
     *  坐标轴X、Y轴绘制
     *  维度、度量设置
 *  堆叠柱状图
    
     *  坐标轴指示器
     *  图例切换
     *  堆叠定义
     *  标记线

### 基本柱图分析 ###

假设我们需要在白纸上画出一个柱状图，首先我们会绘制坐标轴，然后再去绘制对应的柱子。这也符合大多数情况下我们使用Echarts绘制图表的流程。柱状图使用的是直角坐标系，包含X、Y轴，柱状图的X轴一般表示的文字类型的值，Y轴则是数量类型的值。为了方便我们之后的理解，文字类型的称为 *维度* ；数值类型的称为 *度量*

#### 柱状图绘图顺序 ####

所以我们现在的基本柱状图的绘图顺序可以理解为

*  1.  设置X轴及其对应的维度
 *  1.  设置Y轴及其对应的度量

在Echarts中，基本柱状图的绘图单元对应的配置项关系表如下

#### 柱状图绘图单元配置表 ####

<table> 
 <thead> 
  <tr> 
   <th style="text-align:center;">绘图单元</th> 
   <th style="text-align:center;">配置项</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="text-align:center;">X轴</td> 
   <td style="text-align:center;"><a href="https://link.juejin.im?target=https%3A%2F%2Fwww.echartsjs.com%2Foption.html%23xAxis" rel="nofollow">xAxis</a></td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">X轴对应维度</td> 
   <td style="text-align:center;"><a href="https://link.juejin.im?target=https%3A%2F%2Fwww.echartsjs.com%2Foption.html%23xAxis.data" rel="nofollow">xAxis.data</a></td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">Y轴</td> 
   <td style="text-align:center;"><a href="https://link.juejin.im?target=https%3A%2F%2Fwww.echartsjs.com%2Foption.html%23yAxis" rel="nofollow">yAxis</a></td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">Y轴对应度量</td> 
   <td style="text-align:center;"><a href="https://link.juejin.im?target=https%3A%2F%2Fwww.echartsjs.com%2Foption.html%23series-bar" rel="nofollow">series[i].data</a></td> 
  </tr> 
 </tbody> 
</table>

#### 柱状图绘图单元配置表分析 ####

为什么维度与度量的配置项不同？我们来结合Echarts提供的配置项手册以及基本柱状图的代码来分析一下

在Echarts配置项手册中，xAxis与yAxis除了配置名称不一样，其余都是一样的。示例代码对应属性及说明如下：

在设置了x、y轴及x轴的维度后。图表会出现基本的坐标轴。然后需要设置y轴的度量数据。

柱状图/条形图 通过柱形的高度/条形的宽度来表现数据的大小。当设置了维度轴后，另外一个轴对应的就是度量轴。度量轴的数据需要在series里进行设置，series代表的是数据系列数组。数组里的每个元素都代表了一组度量数据。示例代码对应属性及说明如下：

#### 柱状图示例代码分析 ####

那么现在结合基本柱状图的代码再来分析一下，代码如下

let chart = this.$refs.chart;
    echarts.init(chart).setOption({
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
        }]
    });
    复制代码

X轴：xAxis的type为category，说明x轴为维度轴。xAxis的data就是指的维度轴的数据

Y轴：yAxis的type为value，说明y轴为度量轴。而度量轴的数据需要在series配置中进行设置。

series\[i\]的type为bar时，代表此系列图表为柱状/条形图，而data则对应着度量数据

#### 柱状图实现效果 ####

### 堆叠柱状图分析 ###

堆叠柱状图指的是同一个柱形上，可能有多个细分子类的数据。我们在柱状图的基础上，继续配置提示框、图例、网格、标记线。生成可配置性更高的堆叠柱状图。

#### 堆叠柱状图绘图顺序 ####

*  1.  设置提示框
 *  1.  设置图例
 *  1.  设置网格
 *  1.  设置X轴及维度数据
 *  1.  设置Y轴
 *  1.  设置数据系列度量数据
    
     *  1.  设置堆叠
     *  1.  设置标记线
     *  1.  设置柱条宽度

#### 堆叠柱状图绘图单元配置表 ####

<table> 
 <thead> 
  <tr> 
   <th style="text-align:center;">绘图单元</th> 
   <th style="text-align:center;">配置项</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="text-align:center;">提示框</td> 
   <td style="text-align:center;"><a href="https://link.juejin.im?target=https%3A%2F%2Fwww.echartsjs.com%2Foption.html%23tooltip" rel="nofollow">tooltip</a></td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">图例</td> 
   <td style="text-align:center;"><a href="https://link.juejin.im?target=https%3A%2F%2Fwww.echartsjs.com%2Foption.html%23legend" rel="nofollow">legend</a></td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">网格</td> 
   <td style="text-align:center;"><a href="https://link.juejin.im?target=https%3A%2F%2Fwww.echartsjs.com%2Foption.html%23grid" rel="nofollow">grid</a></td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">X轴</td> 
   <td style="text-align:center;"><a href="https://link.juejin.im?target=https%3A%2F%2Fwww.echartsjs.com%2Foption.html%23xAxis" rel="nofollow">xAxis</a></td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">X轴对应维度</td> 
   <td style="text-align:center;"><a href="https://link.juejin.im?target=https%3A%2F%2Fwww.echartsjs.com%2Foption.html%23xAxis.data" rel="nofollow">xAxis.data</a></td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">Y轴</td> 
   <td style="text-align:center;"><a href="https://link.juejin.im?target=https%3A%2F%2Fwww.echartsjs.com%2Foption.html%23yAxis" rel="nofollow">yAxis</a></td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">堆叠</td> 
   <td style="text-align:center;"><a href="https://link.juejin.im?target=https%3A%2F%2Fwww.echartsjs.com%2Foption.html%23series-bar.stack" rel="nofollow">series[i].stack</a></td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">图表标线</td> 
   <td style="text-align:center;"><a href="https://link.juejin.im?target=https%3A%2F%2Fwww.echartsjs.com%2Foption.html%23series-bar.markLine" rel="nofollow">markLine</a></td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">柱条宽度</td> 
   <td style="text-align:center;"><a href="https://link.juejin.im?target=https%3A%2F%2Fwww.echartsjs.com%2Foption.html%23series-bar.barWidth" rel="nofollow">barWidth</a></td> 
  </tr> 
 </tbody> 
</table>

#### 堆叠柱状图单元配置表分析 ####

提示框（tooltip）作为图表辅助组件，也称为指示器，可以展示数据的更多指标信息。有不同类型：分别为全局、坐标系、系列、数据项。示例代码对应属性及说明如下：

<table> 
 <thead> 
  <tr> 
   <th style="text-align:center;">属性名称</th> 
   <th style="text-align:center;">含义</th> 
   <th style="text-align:center;">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="text-align:center;">trigger</td> 
   <td style="text-align:center;">提示触发类型</td> 
   <td style="text-align:center;">item：数据项图形触发； axis：坐标轴触发 ；none：不触发</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">axisPointer</td> 
   <td style="text-align:center;">坐标轴指示器配置项</td> 
   <td style="text-align:center;">在坐标轴指示器中生效</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">axisPointer.type</td> 
   <td style="text-align:center;">指示器类型</td> 
   <td style="text-align:center;">line:直线型; shadow:阴影型; none:无; cross:十字准星型</td> 
  </tr> 
 </tbody> 
</table>

图例（legend）组件使用在存在多个数据系列的场景下，可以点击图例控制该系列数据的显示情况，示例代码对应属性及说明如下：

网格（grid）在图表容器内的组件，用于设置图表网格的位置、样式等状态，示例代码对应属性及说明如下：

<table> 
 <thead> 
  <tr> 
   <th style="text-align:center;">属性名称</th> 
   <th style="text-align:center;">含义</th> 
   <th style="text-align:center;">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="text-align:center;">left、right、bottom、top</td> 
   <td style="text-align:center;">离容器各方向距离</td> 
   <td style="text-align:center;">可以为具体像素值、百分比、居中格式（left、center、right）</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">containLabel</td> 
   <td style="text-align:center;">网格是否包含坐标轴的刻度标签</td> 
   <td style="text-align:center;">可用于防止标签溢出</td> 
  </tr> 
 </tbody> 
</table>

堆叠（stack）应用于柱状图的图表时，会使柱形的高度进行堆叠。示例代码对应属性及说明如下：

图表标线（markLine）可以在图表上进行绘制直线。示例代码对应属性及说明如下：

<table> 
 <thead> 
  <tr> 
   <th style="text-align:center;">属性名称</th> 
   <th style="text-align:center;">含义</th> 
   <th style="text-align:center;">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="text-align:center;">lineStyle</td> 
   <td style="text-align:center;">标线的样式</td> 
   <td style="text-align:center;">可设置标线颜色、宽度、类型等属性</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">lineStyle.type</td> 
   <td style="text-align:center;">标线类型</td> 
   <td style="text-align:center;">solid：实线；dashed：虚线；dotted：点</td> 
  </tr> 
  <tr> 
   <td style="text-align:center;">data</td> 
   <td style="text-align:center;">标线的数据数组</td> 
   <td style="text-align:center;">每个数组项可以是两个值的数组，代表线的、终点</td> 
  </tr> 
 </tbody> 
</table>

#### 堆叠柱状图示例代码分析 ####

let option = {
        tooltip : {
            trigger: 'axis',
            axisPointer : {            
                type : 'shadow'        
            }
        },
        legend: {
            data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'直接访问',
                type:'bar',
                data:[320, 332, 301, 334, 390, 330, 320]
            },
            {
                name:'邮件营销',
                type:'bar',
                stack: '广告',
                data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
                name:'联盟广告',
                type:'bar',
                stack: '广告',
                data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'视频广告',
                type:'bar',
                stack: '广告',
                data:[150, 232, 201, 154, 190, 330, 410]
            },
            {
                name:'搜索引擎',
                type:'bar',
                data:[862, 1018, 964, 1026, 1679, 1600, 1570],
                markLine : {
                    lineStyle: {
                        type: 'dashed'
                    },
                    data : [
                        [{
        type : 'min'}, {
        type : 'max'}]
                    ]
                }
            },
            {
                name:'百度',
                type:'bar',
                stack: '搜索引擎',
                data:[620, 732, 701, 734, 1090, 1130, 1120]
            },
            {
                name:'谷歌',
                type:'bar',
                stack: '搜索引擎',
                data:[120, 132, 101, 134, 290, 230, 220]
            },
            {
                name:'必应',
                type:'bar',
                stack: '搜索引擎',
                data:[60, 72, 71, 74, 190, 130, 110]
            },
            {
                name:'其他',
                type:'bar',
                stack: '搜索引擎',
                data:[62, 82, 91, 84, 109, 110, 120]
            }
        ]
    };
    复制代码

提示框：tooltip设置在全局option下，且trigger（触发类型）为坐标轴触发。当悬浮到坐标轴上时，会出现阴影型的提示信息，因为axisPointer的type值为shadow，代表指示器类型为阴影型

图例：legend的data为数组，表示此图表包含这些数据系列：'直接访问','邮件营销','联盟广告','视频广告','搜索引擎','百度','谷歌','必应','其他'

网格：位置信息说明网格在容器中，左边距偏移3%，右边距偏移4%，底部偏移3%。containLabel值为true说明网格包含了坐标轴的标签

X、Y轴分析与基本柱状图一致

数据系列：series数组中，每一个数组项对应着图例（legend）中的每一项。其中，邮件营销、联盟广告、视频广告系列对应的stack（堆叠属性）均为广告，百度、谷歌、必应、其他系列对应的stack均为搜索引擎，所以图表存在两种堆叠柱形。

图表标线：搜索引擎系列中的markLine配置项设置了标线的样式。lineStyle的type为dashed说明标线的格式为虚线，data数组中type分别为特殊标注类型的最小值和最大值，所以起点为搜索引擎系列的最小值，终点为最大值

#### 堆叠柱状图实现效果 ####

### 思考&练习 ###

1.  如何实现基础条形图？
2.  如何实现并列柱图？（多个数据系列的柱形组合图表）
3.  如何实现堆叠条形图？
4.  如何标线堆叠下的平均值？

转载于:https://juejin.im/post/5cb4a4ade51d456e8602c5d1

[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fa244784740%2Fecharts-study