关于echarts - 复杂悬浮框的一些心得

本文主要分享 echarts 与 es6模板字符串 的应用。也可以直接看第4条结果

关于悬浮框，查看官方文档 可以看到 tooltip的几种配置方法：

官网：https://echarts.apache.org/v4/zh/option.html#tooltip
1, 字符串模板

模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。然后在拼接一些简单的字符串。这样就可以很方便的展示一些较为简单的悬浮框如下图：

2.稍有样式要求呢？

样式少的 可以直接写在代码里（如下）
（经过探索，样式只能写在函数体内）

3.但是样式更多了，怎么办呢？（效果如下）

如果还写内联样式，就会非常庞大（代码如下）
曾经的代码、较难维护、可读性较差

4.最后我想分享的：
有了前面很多次开发echarts的经验，这次开发的时候（需求图如下）

我突然想到可以用es6字符串模板的方式，将样式割离出来、而且效果还不错：
样式：
返回的字符串代码：

这样结构 更加清晰了，修改起来也很容易。所以分享给需要的小伙伴，如果有更好的方法，欢迎一起讨论一起切磋