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事件由于鼠标移动过快触发问题. 一.外部 ...
随机推荐
- Docker-Bridge Network 03 自定义网络
本节介绍自定义bridge network的自定义网络. 1.前言2.创建自定义网络2.1 创建网络2.2 指定网段创建网络3.创建容器3.1 指定网络创建容器3.2 指定IP创建容器4.通信4.1 ...
- stand up meeting 12/23/2015
part 组员 工作 工作耗时/h 明日计划 工作耗时/h UI 冯晓云 基本完成单词本显示页面的设计和实现 4 完善页面切换 ...
- stand up meeting 11/20/2015
3组员 今日工作 工作耗时/h 明日计划 计划耗时/h 冯晓云 将输出string里的翻译合理取分为动名词等各种词性,按约定格式返回,按热度排列,但每一个词性下的解释仍然是由“$$”分词:对于查询词为 ...
- Websocket直播间聊天室教程 - GoEasy快速实现聊天室
最近两年直播那个火啊,真的是无法形容!经常有朋友问起,我想实现一个直播间聊天或者我想开发一个聊天室, 要如何开始呢? 今天小编就手把手的教你用GoEasy做一个聊天室,当然也可以用于直播间内的互动.全 ...
- 1327C - Game with Chips (构造)
题目大意:一个n*m的棋盘上有k个棋子,k个棋子相互关联,可以一起向上向下向左向右,当碰到边界时,如果继续移动会发生越界,那么该棋子会保持不动,其余棋子继续移动.问能否在2*n*m的移动次数内,使各个 ...
- jmeter 聚合报告参数解释
label:每个请求的名称 样本:发送给服务器的请求数量 平均值:平均响应时间,默认情况下是单个 Request 的平均响应时间,当使用了 Transaction Controller 时,也可以以T ...
- 文字检测模型EAST应用详解 ckpt pb的tf加载,opencv加载
参考链接:https://github.com/argman/EAST (项目来源) https://github.com/opencv/opencv/issues/12491 (遇到的问题) ...
- Linux网络编程(2)
Preview 基于上一篇博客,本文将继续展开TCP面向连接的,客户端以及服务端各自需要进行的操作,我们按照真实TCP连接的顺序,分别阐述客户端socket(), connect()以及服务端sock ...
- 2019-2020-1 20199310《Linux内核原理与分析》第四周作业
1.问题描述 在前面的文章中,已经接触过一些Linux内核的知识,本文将进一步从Linux内核源代码的目录结构入手,在Oracle VM VirtualBox的Linux环境中构造一个简单的操作系统M ...
- 学习笔记-CTF密码相关
RSA共模攻击 RSA基本原理 ① 选择两个大的质数p和q,N=pq: ② 根据欧拉函数,求得r=(p-1)(q-1): ③ 选一个小于r的整数e,求得e关于模r的模反元素d: ④ 将p和q的 ...