eCharts系列①

记录一些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的用法可以在官方文档中找到。