创新互联ECharts教程：ECharts象形柱图

象形柱图在 ECharts 系列中使用series[i]-pictorialBar表示，它利用图片和形状表现数据，具体来说它既可以用图形的长宽变形表现数据，也可以用图形的个数、甚至是图形的颜色、透明度变化表现数据。

成都创新互联于2013年创立，是专业互联网技术服务公司，拥有项目网站制作、成都网站建设网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元秦淮做网站,已为上家服务,为秦淮各地企业和个人服务,联系电话:028-86922220

象形柱图是可以设置各种具象图形元素（如图片、SVG PathData 等）的柱状图。往往用在信息图中。用于有至少一个类目轴或时间轴的直角坐标系上。

在下面的这个例子中，右边的两座山分别是一个图片，而最左侧的纸是由多个图片堆加成的，象形柱图会根据它们所在系列对应的数值，决定其高度。配合动画效果，能够实现很好的视觉效果，效果图如下，您可以点击图片下方的链接来编辑该实例：

点击编辑实例 》》

象形柱图布局

象形柱图可以被想象为：它首先是个柱状图，但是柱状图的柱子并不显示。这些柱子我们称为『基准柱（reference bar）』，根据基准柱来定位和显示各种象形图形（包括图片）。

每个象形图形根据基准柱的定位，是通过 symbolPosition、symbolOffset 来调整其于基准柱的相对位置。

参见例子：

点击编辑实例 》》

可以使用 symbolSize 调整大小，从而形成各种视图效果。

参见例子：

点击编辑实例 》》

象形图形类型

每个图形可以配置成『单独』和『重复』两种类型，即通过 symbolRepeat 来设置。

• 设置为 false（默认），则一个图形来代表一个数据项。
• 设置为 true，则一组重复的图形来代表一个数据项。

参见例子：

点击编辑实例 》》

每个象形图形可以是基本图形（如 'circle', 'rect', ...）、SVG PathData、图片，参见：symbolType。

参见例子：

点击编辑实例 》》

可以使用 symbolClip 对图形进行剪裁。

参见例子：

点击编辑实例 》》

象形柱图使用实例

圣诞节快到了，您可以使用象形柱图方便地实现以下这个驯鹿和交通方式的速度对比图。下图包含两个系列，一个是显示在上方的交通方式矢量图标，象形柱图默认会将每个图标放在对应值所在位置的下方，通过 symbolSize 指定图标大小；另一个系列是显示在图标下方的山峰，在不指定 symbolSize 的情况下，将填充满所在的“柱子”，因而就有了图示效果：

点击编辑实例 》》

除此之外，象形柱图还可以用同一图形的个数表现数值，实现类似 ECharts 圣诞活动页中一群小精灵的效果。

网站栏目：创新互联ECharts教程：ECharts象形柱图
分享地址：http://www.shufengxianlan.com/qtweb/news27/154427.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联