echartsformatter加⼊html标签_玩转ECharts之实现“⾃定义图
标”
前⾔
玩转ECharts系列，主要为⼤家讲解我们基于ECharts如何实现企业级⼤屏项⽬中较为常⽤的各种奇奇怪
怪的图表，接下来我们将通过⼏篇⽂章从基础图表开始为⼤家详细讲解实现这些图表样式的⼀些“⼩⼼机”。
导读
阅读完此⽂，你会了解基于ECharts：
1、如何实现能够动态配置颜⾊的图标
2、如何通过⾃定义图标写条形图
背景
在使⽤ECharts绘制折线图时，为了丰富图表的视觉表达，设计师们常常会为视图搭配上不同的图标。但ECharts官⽅所提供的预置图标样式却是有限的，⽆法匹配设计师们的创造性。
如下图所⽰，通常这样的需求需要使⽤3个不同颜⾊的icon资源，设计师需要提供多个图标切图，当数据颜⾊序列数量不固定时，需要的图标数量不可控，研发同学⼜控制不了颜⾊，由此可见，当形状相同颜⾊不同时，我们可以使⽤⼀个icon资源来解决这件事，接下来，笔者将说明如何使⽤⾃定义图标来解决上述问题，需求可以拆解为：
1.图标颜⾊需要能够动态与数据相匹配，并能够在指定位置⾃定义（不同的位置颜⾊不同）；
2.在折线图节点、legend和tooltip中，图标能够统⼀。
知识点
查阅ECharts官⽅⽂档可知，⾃定义图标的返回值有2种（series.line中可以使⽤函数的形式返回，但返回的字符串还是需要符合以下格式）：
URL
通过 'image://url' 设置为图⽚，其中 URL 为图⽚的链接，或者 dataURI。
URL 为图⽚链接，例如：
'image:///a/b.png'
URL 为 dataURI ，⼀般为base64格式，例如：
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAA path
通过 'path://' 将图标设置为任意的⽮量路径，例如：
'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z
M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3
⽐较这两种⽅法（如下表所⽰），可以发现它们各⾃的优缺点都⼗分明显，但似乎没有哪⼀种⽅式能够满⾜我们的需求。
但是实际上，dataURI存在⼀个不同于常见的“使⽤base64转码”的“隐藏”配置⽅式，不仅好⽤、还可读。也就是笔者在本篇⽂章中要
重点介绍的：将svg格式⽂件转换为CSS的url()可以内联的svg代码。
基础实现
单折线⽰例
⾸先，我们准备⼀张svg格式的图标（可以直接去各⼤图标库⾥⼀）。
⽰例图标:
CSS的url()可⽤的svg内联代码配置⽅式为：
'data:image/svg+xml;utf8,'
加上经过encodeURIComponent() 转译的完整的SVG代码主体(即整个<svg />节点)。
然后，为了能够在ECharts中使⽤，还需要按照ECharts的需要在这段代码之前加上image://
let icon = '<svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="/2000/svg" p-id="9125" xmlns:xlink="/1999 icon = encodeURIComponent(icon) // 转译
icon = 'data:image/svg+xml;utf8,' + icon // 添加url前缀
icon = 'image://' + icon // 添加ECharts需要的前缀
将我们拼接好的图标运⽤到折线图中，得到如下效果。
可以看到，这种⽅式最⼤限度的保留了svg的⽂件格式，也就⼀定程度上保证了图⽚⽂件的易读和易写性。
多折线⽰例
svg图当然，仅仅是这样并不能满⾜我们的需求，在有多组数据时，我们提出要求：图标外圈的光晕部分，颜⾊与数据保持⼀致，但内圈的颜⾊不变。这就显出了保持原本svg格式的好处：我们可以很容易的到外圈的颜⾊样式信息 ：fill="#FF6E6E"，并在代码中动态的修改它。
为了⽅便修改，将代码块中需要替换的颜⾊部分⽤ __color标识出来，即，将fill="#FF6E6E" 变成 fill="#__color"，之后在代码中动态替换为对应的颜⾊。
需要注意的是，我们使⽤的图标字符串是经过转码的，因此，这⾥的 #__color 以及⽤来替换的颜⾊也需要转码。
let myTag = '#__color'
myTag = encodeURIComponent(myTag)
let currentColor = '#FF0' // 当前颜⾊
currentColor= encodeURIComponent(currentColor)
const symbol = place(myTag, currentColor)
为了保证在视图、legend和tooltip中图标样式的统⼀，还需要配置⼀下tooltip中的formatter，将⾃定义的图标配置到<img/>节点上。
扩展实现
实际上，这样的⾃定义节点除了可以帮助我们让视图变得更好看，还能⽤在很多其他的地⽅。⽐如，在legend中动态绘制长条图。
通过⼿写svg，并将其转换为⾃定义图标添加到legend中，可以做到图例项的选取交互和数据表达两不误。
核⼼代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。