首先我使用的技术框架的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 自定义图片的更多相关文章

  1. echarts中关于自定义legend图例文字

    formatter有两种形式: - 模板 - 回调函数 模板 使用字符串模板,模板变量为图例名称 {name} formatter: 'Legend {name}' 回调函数 formatter: f ...

  2. 给font awesome中加入自定义图片

    工具:http://icomoon.io 在线工具 http://www.inkscape.org/en/download/windows/ 下载安装 参考教程 http://birchenough. ...

  3. ueditor 百度编辑器 自定义图片上传路径和格式化上传文件名

    今天项目中需要自定义图片上传的保存路径,并且不需要按照日期自动创建存储文件夹和文件名,我的ueditor版本是1.3.6.下面记录一下我配置成功的方法,如果有什么不对的地方欢迎指出,共同学习: 1:我 ...

  4. echarts中饼图的legend自定义icon图片(扇形为例)

    效果图: 代码: 问题:// icon: "pin", // 这个字段控制形状 类型包括 circle,rect ,roundRect,triangle,diamond,pin,a ...

  5. echarts之legend-改变图例的图标为自定义图片

    legend:{ show:true, orient:'horizontal', borderColor:'#df3434', borderWidth:2, data:[ { name:'蒸发量', ...

  6. Echarts的legend改变图例图标为自定义图片

    当折线图时,legend默认时rect形式,如果需要改图例形状,可以自己设置legend的icon属性 legend: { icon:'stack' }, 1.自定义每个图例样式:为data的每个对象 ...

  7. 在xcode中新建项目使用Image.xcassets时不显示自定义图片

    这个很简单,先在Images.xcassets中设置一个LaunchImage,然后再项目设置的general-->App Icons and Launch Images-->Launch ...

  8. echarts 中 柱图 、折线图、柱图层叠

    app.title = '折柱混合'; option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: ...

  9. ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave由于鼠标移动速度过快导致问题解决办法

    记录两个项目开发中遇到的问题,一个是ECharts外部调用保存为图片操作,一个是workflow工作流连接曲线onmouseenter和onmouseleave事件由于鼠标移动过快触发问题. 一.外部 ...

随机推荐

  1. Docker-Bridge Network 03 自定义网络

    本节介绍自定义bridge network的自定义网络. 1.前言2.创建自定义网络2.1 创建网络2.2 指定网段创建网络3.创建容器3.1 指定网络创建容器3.2 指定IP创建容器4.通信4.1 ...

  2. stand up meeting 12/23/2015

    part 组员                工作              工作耗时/h 明日计划 工作耗时/h    UI 冯晓云  基本完成单词本显示页面的设计和实现    4 完善页面切换   ...

  3. stand up meeting 11/20/2015

    3组员 今日工作 工作耗时/h 明日计划 计划耗时/h 冯晓云 将输出string里的翻译合理取分为动名词等各种词性,按约定格式返回,按热度排列,但每一个词性下的解释仍然是由“$$”分词:对于查询词为 ...

  4. Websocket直播间聊天室教程 - GoEasy快速实现聊天室

    最近两年直播那个火啊,真的是无法形容!经常有朋友问起,我想实现一个直播间聊天或者我想开发一个聊天室, 要如何开始呢? 今天小编就手把手的教你用GoEasy做一个聊天室,当然也可以用于直播间内的互动.全 ...

  5. 1327C - Game with Chips (构造)

    题目大意:一个n*m的棋盘上有k个棋子,k个棋子相互关联,可以一起向上向下向左向右,当碰到边界时,如果继续移动会发生越界,那么该棋子会保持不动,其余棋子继续移动.问能否在2*n*m的移动次数内,使各个 ...

  6. jmeter 聚合报告参数解释

    label:每个请求的名称 样本:发送给服务器的请求数量 平均值:平均响应时间,默认情况下是单个 Request 的平均响应时间,当使用了 Transaction Controller 时,也可以以T ...

  7. 文字检测模型EAST应用详解 ckpt pb的tf加载,opencv加载

    参考链接:https://github.com/argman/EAST (项目来源) https://github.com/opencv/opencv/issues/12491  (遇到的问题)    ...

  8. Linux网络编程(2)

    Preview 基于上一篇博客,本文将继续展开TCP面向连接的,客户端以及服务端各自需要进行的操作,我们按照真实TCP连接的顺序,分别阐述客户端socket(), connect()以及服务端sock ...

  9. 2019-2020-1 20199310《Linux内核原理与分析》第四周作业

    1.问题描述 在前面的文章中,已经接触过一些Linux内核的知识,本文将进一步从Linux内核源代码的目录结构入手,在Oracle VM VirtualBox的Linux环境中构造一个简单的操作系统M ...

  10. 学习笔记-CTF密码相关

    RSA共模攻击 RSA基本原理 ①  选择两个大的质数p和q,N=pq: ②  根据欧拉函数,求得r=(p-1)(q-1): ③  选一个小于r的整数e,求得e关于模r的模反元素d: ④  将p和q的 ...