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

步骤

下载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.rhkb.cn/news/130721.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java计算机毕业设计基于SpringBoot音乐网项目(附源码讲解)

目录 用户端 第一步:用户注册 第二步:用户登录 第三步:平台首页(可查看平台歌单、歌手详细信息操作等等) 第四步:查看歌单 第五步:歌单详情操作(歌单评价、歌单歌曲下载、歌单…

06-mq

1、消息队列有什么优点和缺点? 优点: 解耦、异步、削峰填谷。 缺点: 系统可用性降低 系统复杂性提高 一致性问题 2、常见消息队列的比较 3、Kafka的特性 1.消息持久化 2.高吞吐量 3.扩展性强(动态)4集群+4台集群…

前端使用H5中draggable实现拖拽排序效果

文章目录 一、实现代码二、实现效果 一、实现代码 <!DOCTYPE html> <style>* {padding: 0;margin: 0;}body {display: flex;width: 100%;height: 100vh;justify-content: center;align-items: center;}.list {display: flex;width: 336px;flex-wrap: wrap}.list-i…

虚拟机Ubuntu操作系统常用终端命令(1)(详细解释+详细演示)

虚拟机Ubuntu操作系统常用终端命令 本篇讲述了Ubuntu操作系统常用的三个功能&#xff0c;即归档&#xff0c;软链接和用户管理方面的相关知识。希望能够得到大家的支持。 文章目录 虚拟机Ubuntu操作系统常用终端命令二、使用步骤1.归档1.1创建档案包1.2还原档案包1.3归档并压缩…

Map和Set及其实现类详解

目录 一, 搜索 1,传统搜索 2,Map和Set模型 二, Map的使用 1,Map接口的继承及实现图 2,Map接口的使用 3,TreeMap和HashMap的使用和对比 1,TreeMap 代码示例 map中插入的数据按照key进行排序 map中插入的数据必须具有可比较性(或者实现了比较器相关接口) ​map中插入…

SSM SpringBoot vue快递柜管理系统

SSM SpringBoot vue快递柜管理系统 系统功能 登录 注册 个人中心 快递员管理 用户信息管理 用户寄件管理 配送信息管理 寄存信息管理 开发环境和技术 开发语言&#xff1a;Java 使用框架: SSM(Spring SpringMVC Mybaits)或SpringBoot 前端: vue 数据库&#xff1a;Mys…

【LeetCode-中等题】59. 螺旋矩阵 II

文章目录 题目方法一&#xff1a;二维数组缩圈填数字方法二&#xff1a; 题目 方法一&#xff1a;二维数组缩圈填数字 定义四个边界条件&#xff0c;每转一圈&#xff0c;把数值填进去&#xff0c;然后缩小一圈&#xff0c;直到不满足条件位置 结束循环条件可以是&#xff1a; …

WxJava开发微信登录、微信支付

WxJava开发微信支付、微信登录 前言一、引入依赖二、修改配置文件三、小程序微信登录1.登录流程时序2.认识openid、unionid和code3.代码实现 四、小程序微信支付1.业务流程图2.签名、私钥、证书、敏感信息加解密说明3.代码实现 前言 WxJava是微信Java开发工具包&#xff0c;支…

【HTML专栏4】常用标签(标题、段落、换行、文本格式化、注释及特殊字符)

本文属于HTML/CSS专栏文章&#xff0c;适合WEB前端开发入门学习&#xff0c;详细介绍HTML/CSS如果使用&#xff0c;如果对你有所帮助请一键三连支持&#xff0c;对博主系列文章感兴趣点击下方专栏了解详细。 博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;HTML/CS…

人脸签到系统 pyQT+数据库+深度学习

一、简介 人脸签到系统是一种基于人脸识别技术的自动签到和认证系统。它利用计算机视觉和深度学习算法来检测、识别和验证个体的面部特征&#xff0c;以确定其身份并记录其出现的时间。这个系统通常用于各种场景&#xff0c;包括企业、学校、会议、活动和公共交通等&#xff0c…

10个值得收藏的3D任务角色下载网站

每个人都喜欢免费的东西。 无论是免费的 3D 角色还是游戏资产&#xff0c;我们都喜欢它们。 以下是可以为你的游戏获取免费 3D 角色的前 10 个网站的列表。 你可以将它们用于多种用途&#xff0c;例如 3D 打印或动画剪辑。 如果需要将下载的3D模型转换为其他格式&#xff0c;可…

学生信息系统(python实现)

#codingutf-8 import os.path filenamestudent.txtdef menm():#菜单界面print(学生管理系统)print(-----------------------------功能菜单-----------------------------)print(\t\t\t\t\t\t1.录入学生信息)print(\t\t\t\t\t\t2.查找学生信息)print(\t\t\t\t\t\t3.删除学生信息…

超越代码行数!如何看待Python在大型项目中的真正价值?

在软件开发的世界里&#xff0c;Python是一门备受喜爱的编程语言&#xff0c;它以其简洁、易读和强大的特性而闻名。然而&#xff0c;就像所有备受关注的事物一样&#xff0c;Python也有其争议性话题。其中之一是关于Python在大型项目中的表现。有些人认为Python并不适合处理大…

探索珠宝商城小程序:商家如何实现线上卖珠宝

近期&#xff0c;微信小程序的发展势头强劲&#xff0c;各行各业都在积极开发自己的小程序&#xff0c;以适应这个数字化的时代。珠宝行业也不例外&#xff0c;许多珠宝品牌都已经推出了自己的小程序&#xff0c;为用户提供了更加便捷、个性化的购物体验。因此&#xff0c;制作…

K8s 多集群实践思考和探索

作者&#xff1a;vivo 互联网容器团队 - Zhang Rong 本文主要讲述了一些对于K8s多集群管理的思考&#xff0c;包括为什么需要多集群、多集群的优势以及现有的一些基于Kubernetes衍生出的多集群管理架构实践。 一、为什么需要多集群 随着K8s和云原生技术的快速发展&#xff0c…

error:03000086:digital envelope routines::initialization error

项目背景 前端vue项目启动突然报错error:03000086:digital envelope routines::initialization error 我用的开发工具是vscode&#xff0c;node版本是v18.17.0 前端项目版本如下↓ 具体报错如下↓ 报错原因 node版本过高 解决方法 1输入命令 $env:NODE_OPTIONS"--op…

安卓绘制原理之 MeasureCache优化了什么?

安卓绘制原理概览_油炸板蓝根的博客-CSDN博客 搜了一下&#xff0c;全网居然没有人提过 measureCache。 在前文中提到过&#xff0c;measure的时候&#xff0c;如果命中了 measureCache&#xff0c;会跳过 onMeasure&#xff0c;同时会设置 PFLAG3_MEASURE_NEEDED_BEFORE_LAYOU…

腾讯云centos7.6安装部署备忘

1.Mysql 1.1 安装mysql wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm rpm -ivh mysql-community-release-el7-5.noarch.rpm yum install mysql-community-server 1.1.1 安装后重启 service mysqld restart 1.1.2 初次安装mysql&#xff0c;root账…

c语言练习题52:写一个函数判断当前机器是大端还是小端

代码&#xff1a; #include<stdio.h> int check_sys() {int a 1;return *(char*)&a;//小端retrun 1 大端return 0&#xff1b; } int main() {if (check_sys() 1) {printf("小端\n");}elseprintf("大端\n"); } 这里首先取a的地址&#xff0c…

喜讯连连!疆程重磅发布全球独家3.6 TFT- LCD AR-HUD及CMS产品及解决方案,并斩获年度TOP10供应商

9月7日至8日&#xff0c;2023世界显示产业大会在成都盛大启幕&#xff0c;同期由BOE&#xff08;京东方&#xff09;承办的“Define the Future 智能座舱生态论坛”&#xff0c;合肥疆程技术有限公司创始人兼总经理康栋受邀出席并发布两款重磅座舱解决方案。 本次论坛以“智能座…