echarts tooltip formatter自定义_玩转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://http://xxx.xxx.xxx/a/b.png'

URL 为 dataURI ，一般为base64格式，例如：