记录一些eCharts使用时候的一些坑
一、在eCharts坐标轴上添加图片
在需要添加图片的坐标轴中（xAxis,yAxis）中的axisLabel属性中用formatter定义在坐标轴中每一项的显示的数据的格式。
image.png
如图所示，用富文本语法，第一个value表示该项的名字，加号后面代表该项对应的类（css样式）名。类名在后面定义。一般这两个名字写一致就可以，但是因为在坐标轴上需要显示中文，而类名又不能是中文，所以需要将他们的对应关系写上。
然后在axisLabel下的rich中定义图片和字体的样式。
image.png
这样就可以在坐标轴上显示图片了。
二、颜色渐变的使用
echarts官方文档中目前还没有相关的介绍，要实现这个效果需要用到内置的渐变色生成器，echarts.graphic.LinearGradient
itemStyle: {
normal: {
barBorderRadius: 7,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color: "#00caca"
},
{
offset: 1,
color: "#00ca9e"
}
])
}
}
在series的itemStyle下定义渐变属性，这个函数接受5个参数，前四个表示渐变色的起止位置，分别对应右下左上，0010表示从左侧开始。后边的数组用于配置颜色的渐变过程，offset范围是0到1，表示起始位置和结束位置，上面代码表示开始是#00caca颜色，到结束变成#00ca9e颜色，当然也可以配置比如offset=0.5时候的颜色。
三、阴影效果以及相应的tootip问题
这个效果其实是在柱状图的每个bar下面加个阴影，就类似于进度条似的效果，直接上图吧。
image.png
这种效果的实现原理是将两个bar重叠在一起。将阴影部分的bar设置为最大值就好了。实现重叠需要将barGap设置为-100%。
这时候问题来了，如果我设置了tootip的trigger为axis，那么效果将会是这样。
image.png
他会将最大值也一并显示。如果我们不设置trigger，效果会是这样。
image.png
效果是放到阴影处就会显示最大值，其他情况正常。
为了只显示正常数据，我的做法是把trigger设置成axis，然后对显示的数据用formatter进行处理。
formatter: function(params) {
let result = "";
// console.log(params);
result =
params[1].name +
'</br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
params[1].color.colorStops[0].color +
'"></span>' +
params[1].seriesName +
":" +
params[1].value;
return result;
}
formatter的用法可以在官方文档中找到。
