Pyecharts SVG 标记使用笔记

原创 已于 2025-01-03 23:10:27 修改 · 759 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#笔记 #Python #pyecharts #数据可视化

于 2025-01-03 16:12:15 首次发布

Pyecharts SVG 标记使用笔记

在数据可视化中，图表的标记点常常用于突出显示重要数据点。Pyecharts 提供了丰富的标记点配置选项，其中使用 SVG 路径来自定义标记点的样式是一个非常强大的功能。本文将详细介绍如何在 Pyecharts 中使用 SVG 路径来定制标记点。

目录

  1. SVG 路径定义
  2. 标记点配置方法
  3. 实际应用示例
  4. 使用技巧
  5. 注意事项

1. SVG 路径定义

SVG 路径以字符串形式定义，可以直接在代码中写入或从外部文件导入。

# SVG路径以字符串形式定义
DOWN_ARROW_PATH = "M511.99011254 141.21142578c10.23376465 0 18.95471191 3.60900903 26.2122798 10.81713891 7.25262451 7.20812988 10.86657691 15.96862769 10.86657763 26.2666626v577.89129615l196.1619873-196.43884254c7.099365-7.00543237 15.90435815-10.61444068 26.34082031-10.61444139 10.61938477 0 19.43426538 3.50518822 26.51385474 10.51062059 7.04498291 7.10430908 10.54522705 15.96862769 10.54522706 26.57318092 0 10.40679908-3.54473877 19.16235352-10.69354248 26.37542748l-259.55694604 259.48278761C531.23156714 879.28833008 522.44635033 882.78857422 512.00988746 882.78857422c-10.45623779 0-19.24145531-3.50024414-26.3704834-10.71331811l-259.55200195-259.48278761C218.94848656 605.37939453 215.36914062 596.62384009 215.36914062 586.21704102c0-10.60949731 3.52496314-19.46887183 10.56994606-26.57318092C232.99395776 552.63842773 241.82861328 549.12829614 252.44799805 549.12829614c10.42163062 0 19.2167356 3.60900903 26.36553931 10.61444068l196.1125493 196.43884253V178.29522729c0-10.30297828 3.60900903-19.05853271 10.88635255-26.2666626C493.05517555 144.81549073 501.80084252 141.21142578 512.02966309 141.21142578h-0.03955055z"

UP_ARROW_PATH = "M512.00988746 141.21142578c10.45623779 0 19.24145531 3.50024414 26.37542748 10.71331811l259.5421145 259.55200196C805.03668189 418.58105492 808.63085938 427.33660865 808.63085938 437.84228516c0 10.60949731-3.53485132 19.46887183-10.56994606 26.46936011-7.02026391 7.00543237-15.88952661 10.60949731-26.50891137 10.60949731-10.44140625 0-19.22167969-3.60900903-26.35565185-10.71331811L549.09863305 267.79370094V845.7097168c0 10.19915748-3.62384057 18.94976782-10.89624071 26.16284179-7.23284888 7.31195068-15.97357177 10.91601563-26.2122798 10.91601563-10.23376465 0-18.959656-3.60900903-26.22216796-10.91601563-7.24273705-7.21307397-10.87646508-15.96862769-10.87646508-26.16284179V267.79370094l-196.10760522 196.41906761C271.65484619 471.31213355 262.87951684 474.92114258 252.41833496 474.92114258c-10.61938477 0-19.45898438-3.60900903-26.4990232-10.60949731C218.86444068 457.31115699 215.36914062 448.45178247 215.36914062 437.84228516c0-10.50567651 3.55462623-19.26123023 10.69354248-26.36553931l259.53717042-259.55200196C492.7288816 144.71166992 501.52398658 141.21142578 511.97033691 141.21142578h0.03955055z"

在这里插入图片描述

2. 标记点配置方法

基本结构

在 Pyecharts 中配置标记点时，可以通过 symbol 参数指定 SVG 路径。

markpoint_opts=opts.MarkPointOpts(
    data=[
        opts.MarkPointItem(
            coord=["Day 10", 115],  # [x坐标, y坐标]
            symbol='path://' + SVG_PATH,  # SVG路径
            symbol_size=20,  # 图标大小
            value="",  # 显示的文本
            itemstyle_opts=opts.ItemStyleOpts(color="red")  # 样式
        )
    ]
)

关键参数说明

  • coord: 标记点位置，格式为 [x坐标, y坐标]
  • symbol: 使用 path:// 前缀 + SVG 路径
  • symbol_size: 控制图标大小
  • value: 标记点显示的文本
  • itemstyle_opts: 控制标记点样式

3. 实际应用示例

以下是一个完整的应用示例，展示了如何在折线图中添加自定义 SVG 标记点。

line_chart.add_yaxis(
    "销量",
    y_data,
    markpoint_opts=opts.MarkPointOpts(
        data=[
            opts.MarkPointItem(
                coord=["Day 10", 115],
                symbol='path://' + DOWN_ARROW_PATH,
                symbol_size=20,
                value="",
                itemstyle_opts=opts.ItemStyleOpts(color="red")
            )
        ]
    )
)

在这里插入图片描述

4. 使用技巧

  1. SVG 路径灵活性: SVG 路径可以是任何有效的 SVG path 数据，支持复杂的图形定制。
  2. 多标记点: 可以在同一图表中添加多个不同的标记点，丰富图表信息。
  3. 大小和样式调整: 通过调整 symbol_size 和 itemstyle_opts 可以实现不同的视觉效果。
  4. 隐藏文本: 设置 value="" 可以隐藏标记点的文本，仅显示图标。

5. 注意事项

  • 路径有效性: 确保 SVG 路径是有效的 path 数据，否则标记点无法显示。
  • 坐标范围: 坐标值必须在数据范围内，否则标记点会显示在图表外或不显示。
  • 路径复用: 建议将 SVG 路径定义为常量，便于复用和维护。

总结

通过本文的介绍，您应该掌握了如何在 Pyecharts 中使用 SVG 路径来自定义标记点的样式。这一功能不仅增强了图表的可读性，还为数据可视化提供了更多的创意空间。希望这些技巧能帮助您在数据可视化项目中取得更好的效果！

【Pyecharts50例】Markpoint/自定义标记点/自定义坐标标记
AwesomeTang
02-18 5845
前言 在图表中，有时候需要将一些特殊的数据标记出来，如下图如所示，我们可以标记出最近一天的收益： MarkPointOpts支持的配置项如下： class MarkPointOpts( # 标记点数据，参考 `series_options.MarkPointItem` data: Sequence[Union[MarkPointItem, dict]] = None, # 标记的图形。 # ECharts 提供的标记类型包括 'circle', 'rect', 'r
SVG 标记 – SVG Marker （10）
https://shixuebin.gitee.io/hexo-blog/
01-26 698
这里是一个简单的标记的视觉效果：可以通过元素创建标记。元素必须嵌套在元素内。元素内通常保存一组可重用的图片定义。
pycharts 折线图上Markpoint/自定义多个标记点
weixin_43585712的博客
03-22 3969
折线图上标记自定义点 逻辑：在折线图上画散点图，利用了图的叠加。 from pandas import DataFrame import pandas as pd import numpy as np from pyecharts.charts import Bar,Pie,Tab,Scatter,Line from pyecharts import options as opts line1= ( Line() .add_xaxis(['1-11','1-12','1-13','1-14
Pyecharts:基本图形的画法
读万卷书 行万里路
01-08 2354
  Pyecharts是一款将Python与Echarts结合的强大的数据可视化工具,本篇主要介绍Pyecharts中基本图形的实现。 1. 线形图   先来看一个最简单的线形图，具体代码如下： from pyecharts.charts import Line from pyecharts import options as opts line=Line(init_opts=opts.InitOpts(width='500px', height='300px')) line.add_xaxis(['1',
pyecharts使用自定义标记
maizeman126的博客
11-28 1487
echarts 的相关文档：https://echarts.apache.org/zh/option.html#series-line.symbol。symbol 可以使用svg path 或者 可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI,用记事本打开 下载的 svg图片 找到path 中的内容 复制到 symbol 的参数中即可。链接如下:'image://http://example.website/a/b.png'【本人新增内容】利用。
pyecharts-导出svg图像
小吴Der
08-27 4418
pyecharts踩坑： pyecharts导出svg图像，执行思路是，先生成html页面，再将html页面转换为svg图像。代码中，必须要注意的是，在声明Bar对象时要传入初始化参数指定导出格式。 这样导出的svg插入word以后背景变为黑色，导出的pdf也是黑色的，具体原因我也不清楚。解决的办法是使用Edge浏览器打开svg以后右键打印，去掉页眉页脚，点击打印保存为pdf。 目前版本的pyecharts（1.9.0）不能通过参数设置添加坐标轴上面和右面的实线边。解决的办法是对x轴和y轴进行扩展，并设置
地图ICON SVG标记（一个标记的svg格式文件）
03-28
高德地图开发自定义marker标签的图标使用 .png .jpg 图标模糊的情况可以采用svg图标来解决模糊度，而使其清晰
SVG精髓-笔记和教程
03-07
最后，SVG精髓的笔记和教程中还包含了实例代码，通过实际的代码示例来展示如何在网页中插入SVG、如何控制SVG图形的样式、如何使用坐标系统变换以及如何创建SVG动画等等。这些笔记和教程是学习SVG技术的宝贵资料，...
8.2 矢量图层点要素单一符号使用一(简单标记和svg标记)
qq_35662333的博客
09-25 773
上一篇教程对矢量图层符号化做了一个整体介绍，并以点图层为例介绍了可以使用的渲染器：无符号（No symbols）单一符号（Single symbol）分类（Categorized）分级（Graduated）基于规则（Rule-based）点分布（Point displacement）点聚合（Point cluster）热度图（Heatmap）本篇介绍如何使用单一符号说明：文章中的示例代码均来自开源项目qgis_cpp_api_apps。
精选资源
geojson2svg:使用内联或外部样式表将geojson渲染为SVG
04-28
在Node或浏览器中使用内联或外部样式表将geojson渲染为SVG （ ） 用法 通过npm npm install geojson-to-svg -S 普通JS // ES5 var geojson2svg = require ( "geojson-to-svg" ) ; // factory // if you want to ...
pyecharts学习4--工具栏自定义
shadowsland的专栏
04-23 4937
pyecharts工具栏自定义 目前使用的pyecharts版本1.7.1 工具栏默认是这样的： .set_global_opts(toolbox_opts=opts.ToolboxOpts(is_show=True) ) 貌似刷子对于这种简单的图例是没什么必要性的，怎么去掉呢？ toolbox自定义 只需要设置toolbox_opts属性，覆盖默认的toolbox配置 想要什么就加什么配置，...
Pyecharts作图，自定义提示框显示信息（加标签）
LiYingtao0909的博客
05-10 3270
Pyecharts画图自定义提示框显示额外信息
关于pyecharts 自定义标签设置后图形不显示的问题
lanzhen001的博客
05-29 833
问题解决的是刚好想到当时写代码的时候用的环境不是常用的，所以切换回常用的环境后发现同样的代码图形可以显示，通过检查pyecharts的版本发现图形不能正常显示的版本是1.1.0，而图形可以正常显示的版本为1.9.0，在进行版本升级之后，问题解决。此次是在进行散点图绘制时，参考官方示例 “Scatter - Scatter_multi_dimension” 进行标签自定义设置时，发现坐标轴没有值，图形无法显示，经过多次确认，代码写法没有问题。
echarts设置标线和最大值最小值
最新发布
uuai
05-25 579
echarts设置标线和最大值最小值。
数据可视化-Echarts
ximingx
05-25 4083
需要注意的是，ECharts的渲染原理是基于浏览器的Canvas或SVG技术实现的，因此在使用ECharts时，需要确保浏览器支持Canvas或SVG技术，并且需要注意图表的性能和兼容性问题。SVG 和 Canvas 这两种使用方式在技术上是有很大的差异的，EChart能够做到同时支持，主要归功于 ECharts 底层库 ZRender 的抽象和实现。在绘制渲染阶段，ECharts会根据布局计算阶段的结果，使用Canvas或SVG等技术，将图表的各个组件和数据绘制出来。具体来说，可以在事件处理函数中调用。
echarts浮点图使用svg图片
全栈小菜鸡
05-18 4021
echarts 中导入svg一开始没有啥思路，只能去看文档，发现有 symbol 可以导入图片，这些svg图片我是放到一个静态服务器上面，然后写入他们的链接，请求数据的时候后端可以直接返回名字，然后拼接一下链接就可以啦 <template> div id="imgicon" :style="{width: '100%', height: `${info_canvas}`}" /> </template> export default { data(){ retu
echarts图例中使用svg path
zxo_apple的博客
04-24 4695
开发echarts时，经常会要求自定义icon，但是由echarts提供的icon类型比较有限，只有几种 icon: ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’ 比如要实现以下格式的legend 首先使用formatter自定义图例名称 let legend = { itemGap: 24, itemWidth: 2, itemHeight: 16, top: 0, icon:
pyecharts基本使用
qq_40925385的博客
03-14 3370
文章目录基本方法 使用前必须先导入需要的图表类 创建图表实例 调用方法修饰图表 from pyecharts import Bar,Line,Pie,Scatter bar = Bar('This is a bar') x = np.arange(12) y = np.random.randint(1,20,12) bar.add('random', x, y) bar.render() 基本...
pyecharts svg
04-23
### PyEcharts生成SVG格式图表的方法 PyEcharts 是一个用于生成交互式数据可视化的 Python 庢库，它基于 ECharts JavaScript 图表库。尽管 PyEcharts 默认生成的是 HTML 文件，但它可以通过一些配置和工具间接支持导出为 SVG 格式的图表。 以下是实现这一目标的具体方式： #### 方法一：通过 `render` 函数生成 HTML 后手动提取 SVG PyEcharts 提供了一个 `render()` 方法来生成 HTML 文件，默认情况下会嵌入 ECharts 的 JS 脚本并渲染图表。如果希望获取 SVG 数据，则可以加载该 HTML 文件并通过浏览器开发者工具找到 `<svg>` 元素的内容[^1]。 ```python from pyecharts.charts import Bar from pyecharts import options as opts bar = ( Bar() .add_xaxis(["A", "B", "C"]) .add_yaxis("Series 1", [10, 20, 30]) .set_global_opts(title_opts=opts.TitleOpts(title="Bar Chart")) ) # 渲染成HTML文件 bar.render("chart.html") ``` 在生成的 `chart.html` 中打开页面后，右键查看源码即可定位到实际的 `<svg>` 部分，并将其复制保存为 `.svg` 文件。 --- #### 方法二：利用 PhantomJS 或 Puppeteer 自动化抓取 SVG 为了自动化此过程，可借助无头浏览器（Headless Browser），例如 **PhantomJS** 或 **Puppeteer** 来动态加载 HTML 并捕获最终渲染完成后的 SVG 内容[^2]。 以下是一个简单的 Puppeteer 实现方案： ```javascript const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); // 加载由 PyEcharts 生成的 HTML 页面 await page.goto('file:///path/to/chart.html', { waitUntil: 'networkidle2' }); // 获取 <svg> 元素内容 const svgContent = await page.evaluate(() => document.querySelector('svg').outerHTML); console.log(svgContent); // 输出 SVG 字符串至控制台或写入文件 await browser.close(); })(); ``` 运行以上脚本将会打印完整的 SVG XML 文本，可以直接存储为 `.svg` 文件。 --- #### 方法三：调整 PyEcharts 导出设置以兼容 SVG 工具链 虽然 PyEcharts 不直接提供 SVG 支持，但其生成的数据结构非常适合与其他可视化框架集成。例如，可以尝试将 JSON 数据传递给专门针对 SVG 设计的前端库（如 D3.js）。这样不仅可以获得更灵活的表现形式，还能轻松应用 CSS 动画或其他增强功能[^3]。 假设我们已经拥有了原始数据集，那么可以在客户端使用如下代码片段创建纯矢量图形表示法： ```html <script src="https://d3js.org/d3.v7.min.js"></script> <svg width="800" height="400"> </svg> <script type="text/javascript"> var dataPoints = [ {"category": "A", "value": 10}, {"category": "B", "value": 20}, {"category": "C", "value": 30} ]; // 使用D3绘制柱状图... let svgNS = "http://www.w3.org/2000/svg"; document.querySelectorAll('svg')[0].appendChild(createBars(dataPoints)); function createBars(points){ let gElement=document.createElementNS(svgNS,"g"); points.forEach((point,index)=>{ var rectElm = document.createElementNS(svgNS,'rect'); rectElm.setAttribute('x',(index*50)+5); rectElm.setAttribute('y','390-(point.value*10)'); rectElm.setAttribute('width','40'); rectElm.setAttribute('height',`${(point.value)*10}`); gElement.appendChild(rectElm); }); return gElement; }; </script> ``` 上述例子展示了如何从服务器端传输过来的基础统计数值转换成本地 DOM 结构中的形状定义集合——即标准的 Scalable Vector Graphics (SVG) 表达模式。 --- ### 注意事项 当考虑性能优化时，应特别注意压缩算法的选择以及是否保留必要的元信息字段等问题。对于复杂的场景而言，可能还需要额外引入第三方插件来进行进一步精简操作[^1]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

d0ublecl1ck_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值