echarts 中 symbol 自定义图片
首先我使用的技术框架的VUE,当然该方法在其他框架也是适用的,这点大家注意一下~
在官方文档里面,修改标记的图形(symbol)的方法有三种:
一:ECharts 提供的标记类型有 'circle'
, 'rect'
, 'roundRect'
, 'triangle'
, 'diamond'
, 'pin'
, 'arrow'
, 'none';例:
symbol: 'pin'
二:可以通过 'image://url'
设置为图片,其中 URL 为图片的链接,例:symbol: 'image://https://b-gold-cdn.xitu.io/v3/static/img/45.b99ea03.svg'
三:可以通过 图片base64位编码
设置图片,例:symbol:"image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7"
而一般我们的图片格式都是jpg或者png格式的,所以对于第三种方法,我们需要把jpg/png的图片格式转换为base64编码,转换工具我这里给大家提供一种:https://www.bejson.com/convert/image_to_svg/,
转成功之后,将保存的SVG文件用文本文档打开,如图:我们的目标是href后面的一大串编码,需要注意到是,这一串编码是很大的,我转了几个都达到10K左右(手打苦笑),所以如果可以,还是建议大家使用第二种方法。
版权声明:本文为博主原创文章,转载需注明出处。https://www.cnblogs.com/silent007/p/10825232.html
*********************************** END ***********************************
echarts 中 symbol 自定义图片的更多相关文章
- echarts中关于自定义legend图例文字
formatter有两种形式: - 模板 - 回调函数 模板 使用字符串模板,模板变量为图例名称 {name} formatter: 'Legend {name}' 回调函数 formatter: f ...
- 给font awesome中加入自定义图片
工具:http://icomoon.io 在线工具 http://www.inkscape.org/en/download/windows/ 下载安装 参考教程 http://birchenough. ...
- ueditor 百度编辑器 自定义图片上传路径和格式化上传文件名
今天项目中需要自定义图片上传的保存路径,并且不需要按照日期自动创建存储文件夹和文件名,我的ueditor版本是1.3.6.下面记录一下我配置成功的方法,如果有什么不对的地方欢迎指出,共同学习: 1:我 ...
- echarts中饼图的legend自定义icon图片(扇形为例)
效果图: 代码: 问题:// icon: "pin", // 这个字段控制形状 类型包括 circle,rect ,roundRect,triangle,diamond,pin,a ...
- echarts之legend-改变图例的图标为自定义图片
legend:{ show:true, orient:'horizontal', borderColor:'#df3434', borderWidth:2, data:[ { name:'蒸发量', ...
- Echarts的legend改变图例图标为自定义图片
当折线图时,legend默认时rect形式,如果需要改图例形状,可以自己设置legend的icon属性 legend: { icon:'stack' }, 1.自定义每个图例样式:为data的每个对象 ...
- 在xcode中新建项目使用Image.xcassets时不显示自定义图片
这个很简单,先在Images.xcassets中设置一个LaunchImage,然后再项目设置的general-->App Icons and Launch Images-->Launch ...
- echarts 中 柱图 、折线图、柱图层叠
app.title = '折柱混合'; option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: ...
- ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave由于鼠标移动速度过快导致问题解决办法
记录两个项目开发中遇到的问题,一个是ECharts外部调用保存为图片操作,一个是workflow工作流连接曲线onmouseenter和onmouseleave事件由于鼠标移动过快触发问题. 一.外部 ...
随机推荐
- day28作业
import os import uuid import pickle from conf import settings class School: def __init__(self,name,a ...
- @SessionAttributes 的使用
@SessionAttributes 注解只用作用在 类 上,作用是将指定的 Model 的键值对保存在 session 中.可以让其他请求共用 session 中的键值对. 指定保存的属性名 作用是 ...
- 最新超详细VMware虚拟机安装完整教程
一.基础介绍 VMWare虚拟机软件是一个“虚拟PC”软件,它使你可以在一台机器上同时运行二个或更多Windows.DOS.LINUX系统.与“多启动”系统相比,VMWare采用了完全不同的概念.多启 ...
- vue如何添加jquery?
1.首选通过npm安装jquery? 2.在build/webpack.base.conf文件当中引入jquery <pre>module.exports = { ... resolve: ...
- 如何防止CDN防护被绕过
当攻击者发现目标站点存在CDN防护的时候,会尝试通过查找站点的真实IP,从而绕过CDN防护.我们来看一个比较常见的基于公有云的高可用架构,如下:CDN(入口层)->WAF(应用层防护)-> ...
- 每天都在用,但你知道 Tomcat 的线程池有多努力吗?
这是why的第 45 篇原创文章.说点不一样的线程池执行策略和线程拒绝策略,探讨怎么让线程池先用完最大线程池再把任务放到队列中. 荒腔走板 大家好,我是 why,一个四川程序猿,成都好男人. 先是本号 ...
- jdbc-手写Java方法连接数据库
一.关键四元素 ① com.mysql.jdbc.Driver mysql数据库连接jar包. 获取途径: 链接:https://pan.baidu.com/s/1SFcjuu ...
- sql注入原理+mysql相关知识点
什么是SQL注入 sql就是经常说的数据库,而sql注入就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令.SQL注入是比较常见的网络攻击 ...
- tp5--开启与关闭调试模式
https://www.cnblogs.com/finalanddistance/p/8906000.html TP5 显示错误信息 在TP5中,我们运行的代码有错误无法执行时,只显示页面错误,而 ...
- Windows系统自带的ODBC Data Sources的配置及使用
一直不明白ODBC是个什么东东,虽然一次次碰到,却从没用过,看Wikipedia上的描述,可以访问各种数据库.Excel.CSV等,可以剥离数据库和操作系统依赖,简直神乎其神.不过这样的描述太抽象概括 ...