echarts.js的几个实用点

百度的echarts是一个非常全面好用的图表类插件，唯一被诟病的就是其文档，虽然对API和配置有作说明，但是却不够详细或者说的不清晰。

这里整理了几个我在开发使用中使用的实用点，分享并供自己以后查阅。

1、禁止高亮

在使用map展示信息时，对于没有某种属性的省份，当鼠标悬停时不对该省高亮显示

这时可以使用echarts的API中的action.downplay。

假如map的实例变量为chart_map,则有如下代码可用

chart_map.on("mouseover", function (params) {
  if (params.data.value === undefined) {
    chart_map.dispatchAction({
      type: 'downplay'
    });
  }
});

2、坐标轴刻度标签不同颜色显示

在股票、期货等的分时线展示时需要用红绿颜色来表示坐标轴的刻度标签，如下图：

                

在echarts的配置项中，xAxis和yAxis中关于坐标轴刻度标签的相关设置axisLabel，其中的color可以接受js方法控制返回的颜色。

参考代码如下：

axisLabel: {
  textStyle: {
    color: function (value, index) {
      let a = (otherParams.top + otherParams.bottom) / 2;
      if (value > a) {
        return 'red';
      }
      else if (value < a) {
        return 'green';
      }
      else {
        return '#8392A5';
      }
    }
  },
  formatter: (param) => {
    return parseFloat(param.toFixed(2))
  }
}

3、tooltip 的type 为cross时，不显示标签

在echarts中，当使用cross（十字星）时，坐标轴指示器的文本标签默认显示，而且设置label的show为false也不起作用。在这种情况下，如果想不显示指示器文本标签可以转换思路将标签设置为透明也可以达到相同的效果。
代码如下：

效果如下图：

暂时先整理这几个，以后继续补充。

更多的请参考echarts官网