数据可视化!全面了解象形柱形图!

本文介绍了象形柱形图的概念、适用场景和优劣势,并通过pyecharts库展示了如何画制象形柱形图,包括普通图像和通过json文件显示图标的方法。内容涵盖图形的代码实现、图形效果展示及json数据交换格式在图形表示中的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录

前言

 一.普通图像画制象形柱形图

1.象形柱形图是什么?它有什么适用场景?

2.柱形象形图有什么优劣势?

3.导入库

4.最终具体代码

5.图形效果

  二.通过json文件显示图标

1.什么是json文件?

2.导入库

 3.最终代码

 三.总结


前言

        象形柱图它利用SVG图片和形状来表现数据,能够让数据展现更加贴近数据故事背景,视觉表达更为丰富生动。你可以通过新增的内置多种图案快速实现数据形态的修饰,同时结合图案的个性化设置效果搭配来改变数据的展现效果今天让我们来学习一下象形柱形图,加深对它的了解吧。

 一.普通图像画制象形柱形图

1.象形柱形图是什么?它有什么适用场景?

象形柱图(Pictorial Bar)是属于柱形图的一种,用象形图的方式来展示,象形图是通过其与物理对象的图画相似来表达其意义的表意文字。象形柱图的整体适用范围和柱形图一致,象形柱图比起实际的应用,更多的是符合人们不同审美的需求,用更形象的图案去展示数据。

象形柱图和柱形图的使用方法一致,主要用于多个分类间的数据(大小、数值)的对比,可以用来显示一段时间内的数据变化或显示各项之间的比较情况,柱形图简单直观,易于比较各组数据之间的差别。

2.柱形象形图有什么优劣势?


优势:相较于普通柱形图,象形柱图更加美观,在表现数据的同时也能通过图形表达数据之外的含义。
缺点:象形柱图不适合用于表达趋势的数据,这种数据更适合用折线图或者面积图;也不适合用于表达占比的数据,这种数据更适合用于饼图。

3.导入库

代码如下(示例):

from pyecharts import options as opts
from pyecharts.charts import PictorialBar

注意:

        如果还没有pyecharts库的话,我们windows中搜索anaconda prompt打开,运行下述代码:

pip install pyecharts

        或使用清华镜像下载(建议使用这个):

 pip install pyecharts -i https://pypi.tuna.tsinghua.edu.cn/simple

4.最终具体代码

from pyecharts import options as opts
from pyecharts.charts import PictorialBar

c = (
    PictorialBar()
    .add_xaxis(["reindeer", "ship", "plane", "train", "car"])
    .add_yaxis(
        "",
        [
            {'value':1,'symbol':'image://小猪佩奇.jpg'},
            {'value':2,'symbol':'image://小猪佩奇2.jpg'},
            {'value':3,'symbol':'image://小猪佩奇3.jpg'},
            {'value':4,'symbol':'image://小猪佩奇4.jpg'},
            {'value':5,'symbol':'image://小猪佩奇5.jpg'},
        ],
        label_opts=opts.LabelOpts(is_show=False), # 不显示数据标签
        symbol_size=50, # 图形大小
        symbol_repeat="fixed",# 是否用重复图形表示柱形
        symbol_offset=[0, 0], # 图形的偏移
        is_symbol_clip=True, # 是否剪切图形
    )
    .reversal_axis()
    .set_global_opts(
        title_opts=opts.TitleOpts(title="PictorialBar-Vehicles in X City"),
        xaxis_opts=opts.AxisOpts(is_show=False),
        yaxis_opts=opts.AxisOpts(
            axistick_opts=opts.AxisTickOpts(is_show=False),
            axisline_opts=opts.AxisLineOpts(
                linestyle_opts=opts.LineStyleOpts(opacity=0)
            ),
        ),
    )
)
c.render_notebook()

使用.add_xaxis([ ])画制图形的x轴参数,

使用.add_yaxis([  ])画制图形的y轴参数,因为这里我们使用图形,因此没有定义。

传入自己想要的图片来勇于表示柱形,在这里,我使用的是小猪佩奇的图片

使用render_notebook进行渲染

在这里要注意传入的图片图形,需要与我们的代码文件处于同一位置!大家还可以通过其他的配置样式,来修改我们的图形参数。

基本语法可以参考以下网站:

https://gallery.pyecharts.org/#/PictorialBar/pictorialbar_multi_custom_symbols

5.图形效果

 二.通过json文件显示图标

1.什么是json文件?

“.json”是用来存储简单的数据接口和对象的文件;json是一种轻量级的数据交换格式,基于ECMAScript的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据,用于许多web应用程序来进行数据交换。

2.导入库

代码如下(示例):

import json

from pyecharts import options as opts
from pyecharts.charts import PictorialBar

with open("symbol.j
<think>好的,我现在需要帮助用户解决在ECharts中实现象形柱状图的问题。首先,我需要回忆一下用户提供的引用内容,看看是否有相关的信息可以提取。 根据引用[1],Pyecharts中绘制象形柱状图主要使用Bar类,并且提到了基本的参数设置,比如标题、宽高等。不过用户问的是ECharts,不是Pyecharts,但两者可能有相似之处,因为Pyecharts是基于ECharts的。所以可能需要区分两者的不同,但用户提供的引用中也有提到ECharts的象形柱图,比如引用[2]和[3]。 引用[2]提到象形柱图可以用同一图形的个数表现数值,类似于小精灵的效果。引用[3]详细说明了如何自定义样式,特别是使用symbol属性设置图形类型,或者通过图片链接来替换图形,比如使用image://url。引用[4]则是一个简单的示例,提到了需要替换x轴数据和系列数据。 用户的问题是如何在ECharts中实现象形柱状图,并需要示例教程。首先,我需要整理ECharts中象形柱图的配置方法。根据引用中的信息,象形柱图属于Bar系列的一种,通过设置type为'pictorialBar',或者使用symbol属性来定义图形。 需要确认ECharts的官方文档中是否有相关配置,但根据引用内容,可以推断出基本的步骤:创建Bar实例,设置xAxis和yAxis,添加系列时指定type为'pictorialBar',并配置symbol参数。此外,引用[3]提到可以使用图片作为symbol,所以需要展示如何用图片链接。 可能还需要注意数据项的配置,比如每个柱子的symbol、symbolSize等。另外,引用[3]中的示例代码使用了symbol: 'image://url',所以需要演示这一点。 接下来,要确保示例代码的正确性,可能需要参考ECharts的官方文档,但根据用户提供的引用,可以构造一个基本的示例。例如,设置x轴的数据,y轴的数据,然后在series中添加pictorialBar类型的系列,并指定symbol为图片或内置形状。 另外,引用[4]提到需要替换xAxis.data和series.data,所以示例中应该包括这些部分。同时,引用[3]中的图片示例显示,使用图片作为柱子,所以可能需要展示如何通过image://来引入图片。 总结步骤: 1. 引入ECharts库。 2. 创建图表实例。 3. 配置x轴和y轴。 4. 添加pictorialBar系列,设置symbol和相关属性。 5. 设置其他全局选项,如标题。 6. 渲染图表。 需要检查是否存在可能的错误,比如是否正确使用type参数,或者是否需要引入额外的插件。根据引用内容,似乎不需要额外插件,直接配置即可。 最后,生成相关问题,可能需要考虑象形柱图的样式自定义、动态数据更新、性能优化等,基于引用中的信息,比如symbol类型、图片使用、数据替换等。</think>以下是在ECharts中实现象形柱状图的详细步骤及示例: ### 一、基础实现步骤 1. **初始化图表容器** ```html <div id="main" style="width: 600px;height:400px;"></div> <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script> ``` 2. **配置核心参数** ```javascript const chart = echarts.init(document.getElementById('main')); const option = { xAxis: { data: ['苹果', '香蕉', '橘子', '西瓜', '芒果'] }, yAxis: {}, series: [{ type: 'pictorialBar', symbol: 'circle', // 内置基础形状 symbolSize: [30, 15], // 尺寸控制[宽度,高度] data: [120, 200, 150, 80, 70] }] }; chart.setOption(option); ``` ### 二、进阶图片应用 使用自定义图片作为柱体: ```javascript series: [{ type: 'pictorialBar', symbol: 'image://https://example.com/icon.png', // 在线图片地址 symbolSize: [40, 40], symbolOffset: [0, -15], // 位置偏移调整 data: [120, 200, 150, 80, 70] }] ``` ### 三、复合柱状效果 组合基础柱形与象形元素: ```javascript series: [ { // 底层普通柱状 type: 'bar', itemStyle: { color: '#a0d911' }, data: [120, 200, 150, 80, 70] }, { // 上层象形装饰 type: 'pictorialBar', symbol: 'diamond', symbolSize: [35, 15], symbolPosition: 'end', zlevel: 2, data: [120, 200, 150, 80, 70] } ] ``` ### 四、动态效果配置 添加动画和交互: ```javascript series: [{ type: 'pictorialBar', symbol: 'rect', symbolRepeat: true, // 开启图形重复 symbolMargin: 2, // 图形间隔 symbolClip: true, // 裁剪超范围图形 symbolBoundingData: 100, // 基准值 animationDuration: 2000 // 动画时长 }] ``` [^1]: 基础参数设置参考Pyecharts实现逻辑 [^2]: 图形重复功能借鉴圣诞活动页设计 [^3]: 图片应用方法来自CSDN技术社区 [^4]: 数据替换原则参考Echarts官方示例
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值