Vue+Echarts可视化大屏系统前端条形图设计(附代码)

各位同学，大家好。上节课，我们讲解了Vue+Echarts+Express前端部分echarts和axios引用。这节课程，我们讲解使用echarts设计条形图的方法。

01 项目相关理论介绍

什么是条形图

条形图（bar chart）是用宽度相同的条形的高度或长短来表示数据多少的图形。条形图可以横置或纵置，纵置时也称为柱形图（column chart）。此外，条形图有简单条形图、复式条形图等形式。

条形图是以易于人们阅读、理解、分析和记忆的视觉形式汇总、显示信息和数据的理想方式。条形图使用条形（矩形 2D、3D 或圆柱形）表示不同类别或组中的数据，条形图的长度与其表示的值成正比，并将它们放置在彼此之间的固定距离处。当某些属性指定为值数组时，此方法非常方便使用，因此每个值都按顺序用于绘制相应的条形。

条形图的应用场景

条形图主要用于多个分类间的数据（大小、数值）的对比，可以用来显示一段时间内的数据变化或显示各项之间的比较情况，条形图简单直观，很容易根据图形的长短看出值的大小，易于比较各组数据之间的差别。

适用场景包括：

1.数量统计。

2.频率统计。

3.适用于分类数据对比。

4.垂直条形图最多不超过12个分类(也就是12个柱形)，横向条形图最多不超过30个分类。如果垂直条形图的分类名太长，那么建议换成横向条形图。

条形图不适用场景

条形图不适合用于表达趋势的数据，这种数据更适合用折线图或者面积图，也不适合用于表达占比的数据，这种数据更适合用于饼图。

02 项目开发实战

接下来，我们给大家讲解项目开发实战。

未完待续。

我是源动君，带领大家一起进步，谢谢观看。