【echarts】如何将iconfont转换成echart所需的path路径 echarts折线图、柱状图如何设置自定义svg图标

news2024/12/24 0:35:17

步骤

下载iconfont图标到本地,用浏览器打开,右键查看源代码,或者用开发IDE软件打开,找到path d=...,这个就是我们要传递给echart的icon的值。

在这里插入图片描述
在这里插入图片描述

代码示例:

legend: {
      data: data?.map((item) => item.companyName),
      selectedMode: true, // 当selectedMode为false时,tooltip不生效!!!【巨坑】
      icon: 'path://M42,8.5 C42.8284271,8.5 43.5,9.17157288 43.5,10 C43.5,10.8284271 42.8284271,11.5 42,11.5 C35.8883895,11.5 32.0936192,12.8449819 29.7619812,15.3885869 C28.0373078,17.2700488 27.2535726,19.2375848 26.0644683,23.9296711 L25.7304159,25.2507287 C24.4779324,30.1177632 23.5588794,32.3374253 21.4494812,34.6385869 C18.4873692,37.8699819 13.8883895,39.5 7,39.5 C6.17157288,39.5 5.5,38.8284271 5.5,38 C5.5,37.1715729 6.17157288,36.5 7,36.5 C13.1116105,36.5 16.9063808,35.1550181 19.2380188,32.6114131 C20.9626922,30.7299512 21.7464274,28.7624152 22.9355317,24.0703289 L23.2695841,22.7492713 C24.5220676,17.8822368 25.4411206,15.6625747 27.5505188,13.3614131 C30.5126308,10.1300181 35.1116105,8.5 42,8.5 Z',
      itemWidth: 30,
      itemHeight: 30,
      left: 0,
      type: 'scroll',
      // pageFormatter: '', // 隐藏翻页的数字
      pageButtonItemGap: 2, // 翻页按钮的两个之间的间距
      pageIconColor: '#6495ed', // 翻页下一页的三角按钮颜色
      pageIconInactiveColor: '#aaa', // 翻页(即翻页到头时)
      pageIconSize: 7, // 翻页按钮大小
      pageButtonGap: 10, // 翻页按钮与图例的间距
      orient: 'horizontal',
      pageIcons: {
        horizontal: [
          'path://M58.9668995833333 84.5129995833333L112.2976925 125.5366866666667C121.4175704166667 132.55197725 134.4977091666667 130.8458722083333 141.5129995833334 121.7259941666667C144.3144195833334 118.0841483333333 145.8333333333334 113.6183570833333 145.8333333333334 109.0236866666667L145.8333333333334 26.9763133333333C145.8333333333334 15.4703808333333 136.5059320833334 6.14298 125 6.14298C120.4053295833334 6.14298 115.9395383333334 7.66189375 112.2976925 10.4633133333333L58.9668995833333 51.4870004166667C49.8470216666667 58.5022908333333 48.1409166666667 71.5824295833333 55.1562075 80.7023075C56.2560975 82.1321645833333 57.5370425 83.4131095833333 58.9668995833333 84.5129995833333z',
          'path://M137.7581054166667 85.1290041666667L86.85854125 120.36716375C77.3984533333333 126.91645525 64.4202875 124.55678875 57.8709958333333 115.0967008333333C55.4589158333333 111.612585 54.1666666666667 107.4757525 54.1666666666667 103.2381595833333L54.1666666666667 32.7618404166666C54.1666666666667 21.2559079166667 63.4940679166667 11.9285070833333 75 11.9285070833333C79.2375929166667 11.9285070833333 83.3744254166667 13.22075625 86.85854125 15.63283625L137.7581054166667 50.8709958333333C147.2181929166667 57.4202875 149.5778595833334 70.3984533333333 143.0285679166667 79.85854125C141.60285625 81.9179029166667 139.8174670833333 83.7032920833333 137.7581054166667 85.1290041666667z',
        ],
      },
      formatter(name) {
        // 超过指定字符省略显示
        return name.length > 6 ? `${name.substr(0, 6)}...` : name;
      },
      tooltip: {
        show: true,
      },
    },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1006608.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Fiddler抓http数据

目录 参考博客 一、Fiddler配置二、分析Http请求1. Http消息结构简介1.1 Request请求消息1.2 Response响应消息 2. 分析Get接口2.1 请求示例2.2 查看Get请求2.3 查看Get响应 3 分析Post接口 参考博客 一、Fiddler配置 首先需要对Fiddler抓取Https请求进行相关配置&#xff1a…

【九章斩题录】C/C++:判定字符是否唯一

精品题解 🔥 《九章斩题录》 👈 猛戳订阅 面试题 01.01. 判定字符是否唯一 ✅ 模板:C语言 class Solution { public:bool isUnique(string astr) {} }; 💭 思考:《程序员面试金典》里的题,这题和剑指Off…

typescript错误代码 error TS2451: 无法重新声明块范围变量“age”。ts(2451)

今天心血来潮写ts教程的时候发现一个问题,如下 短短的两行代码,竟然都报错,无法重新声明块范围变量age\。明明与其他文件没有相互依赖,却会提示 [ts] 无法重新声明块范围变量“age”。。且该文件目录夹下,也没有其他文件。为什么会有这个报错呢&#xff…

NZ系列工具NZ03:利用右键进行筛选操作

【分享成果,随喜正能量】生活就是这样,别人看的是结果,而自己撑的却是整个过程。曾经的微笑,是一种心情,现在的微笑,只不过是一种表情。如果情绪不能用言语说出来,那就去吹吹风吧。。 我的教程…

Python爬虫被封ip的解决方案

目录 一、网站反爬虫机制有哪些 二、Python爬虫被封ip的原因 三、爬虫被封IP怎么解决 四、代码示例 在爬虫程序运行过程中,被封禁IP地址是常见的问题之一。这通常是由于目标网站采取了反爬虫机制,例如限制单个IP地址的请求频率或识别请求特征等。当爬…

-60V -40V -100V 30A 50A 100A P管大电流 正极,负极做关断的电路图 解决方案N沟道,P沟道MOSFET开关电路图介绍

P沟道MOS管工作原理以及参数?中广芯源提供原理图纸,估计对需求者有帮助。 P沟道MOS管工作原理:金属氧化物半导体场效应(MOS)晶体管可分为N沟道与P沟道两大类, P沟道硅MOS场效应晶体管在N型启衡旅硅衬底悄凳上有两个P区&#xff0…

【80天学习完《深入理解计算机系统》】第十五天 4.1 Y86-64指令集与Verilog HDL

专注 效率 记忆 预习 笔记 复习 做题 欢迎观看我的博客,如有问题交流,欢迎评论区留言,一定尽快回复!(大家可以去看我的专栏,是所有文章的目录)   文章字体风格: 红色文字表示&#…

【GNN 03】PyG

工具包安装: 不要pip安装 https://github.com/pyg-team/pytorch_geometrichttps://github.com/pyg-team/pytorch_geometric import torch import networkx as nx import matplotlib.pyplot as pltdef visualize_graph(G, color):plt.figure(figsize(7, 7))plt.xtic…

10分钟学会Hive之用户自定义函数UTF开发

1. 用户自定义函数概述 用户自定义函数简称UDF,源自于英文user-defined function。自定义函数总共有3类,是根据函数输入输出的行数来区分的,分别是: UDF(User-Defined-Function)普通函数&#xff…

Excel 公式函数:学习基本示例

数据准备 对于本教程,我们将使用以下数据集。 家居用品预算 S / N项目数量价格小计价格适中吗?1芒果96002橘子312003番茄125004食用油565005汤力水133900 房屋建筑项目时间表 S/NITEM开始日期结束日期持续时间(天)1调查土地0…

C++项目实战——基于多设计模式下的同步异步日志系统-⑧-日志落地类设计

文章目录 专栏导读抽象基类StdoutSink类设计FileSink类设计RollBySizeSink类设计日志落地工厂类设计日志落地类整理日志落地拓展测试RollByTimeSink类设计测试代码测试完整代码 专栏导读 🌸作者简介:花想云 ,在读本科生一枚,C/C领…

React框架下如何集成H.265网页流媒体视频播放器EasyPlayer.js?

H5无插件流媒体播放器EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器,可支持多种流媒体协议播放,可支持H.264与H.265编码格式,性能稳定、播放流畅,能支持WebSocket-FLV、HTTP-FLV,HLS(m3u8&#…

Segment Anything Model(SAM)论文解读

一、引言 在这项工作中,作者的目标是建立一个图像分割的基础模型。也就是说,寻求开发一个提示模型,并使用一个能够实现强大泛化的任务在广泛的数据集上对其进行预训练。有了这个模型,使用即时工程解决新数据分布上的一系列下游分…

《C++ primer plus》精炼(OOP部分)——对象和类(3)

学习是人类的天性,持续学习是人类的本能。 文章目录 抽象数据类型(ADT)--------------------------第11章:使用类--------------------------运算符重载运算符重载限制 抽象数据类型(ADT) 类的思想很适合用…

狼的传说小游戏

欢迎来到程序小院 狼的传说 玩法: 鼠标左键选择能防御、战斧、风暴3%、滚石10%、藤曼5%、冰柱5%、飞跃10%、三叶草20%、钢叉15%,消灭所有敌人,不同关卡不同敌人,快去闯关消灭敌人吧^^。开始游戏https://www.ormcc.com/play/gameS…

Redis 事务 - 监控测试

Redis 基本事务操作 Redis事务本质:一组命令的集合!一个事务中的所有命令都会被序列化,在事务执行过程的中,会按照顺序执行! Redis事务是一组Redis命令的有序集合,这些命令在事务中按照顺序执行&#xff0…

昆明草海隧道湿地公园,荻花盛开,又一个网红打卡地

昆明,这座美丽的城市,总是带给人们无尽的惊喜。其中,草海隧道湿地公园更是备受游客青睐。而如今,这里已经成为了一处网红打卡地,吸引了无数游客前来观赏。 一、网红打卡地,草海隧道湿地公园草海隧道湿地公园…

【IEEE会议征稿】第三届电子信息工程与计算机技术国际学术会议(EIECT 2023)

第三届电子信息工程与计算机技术国际学术会议(EIECT 2023) 2023 3rd International Conference on Electronic Information Engineering and Computer Technology 随着科学技术的高速发展,计算机技术革新日新月异,其智能化、网络…

三分钟教会你快速使用SpringBoot整合第三方登录

前言 在我们生活中无时无刻都在使用第三方登录,如QQ登录、微信登录等,今天教你如何快速使用springboot整合第三方登录,下面教程以Gitee为例 1. 我们借助JustAuth组件来完成第三方登录 Justauth官网:https://www.justauth.cn/ …

数据在内存中的存储——练习3

题目&#xff1a; 3.1 #include <stdio.h> int main() {char a -128;printf("%u\n",a);return 0; }3.2 #include <stdio.h> int main() {char a 128;printf("%u\n",a);return 0; }思路分析&#xff1a; 首先二者极其相似%u是无符号格式进行…