echarts设置图标悬浮窗_徐川江的博客_新浪博客

   个人对echarts不怎么熟悉，今天碰到需求，设置数据的悬浮窗，要求鼠标移到点上(这里是折线图)显示该点的X和Y轴信息，如图：

只要把echarts的tooltip进行设置就ok了

tooltip: {

      trigger: "axis",

      formatter: "{a}
{b}:{c}",

      backgroundColor : '#fff',

textStyle : {

color : '#000'

},

      borderColor : '#9933cc',

  borderWidth : 1,//边框

  position : function(a) {//悬浮窗到点的距离

a[0] = a[0] - 63;

return a;

},

  },

    如果只显示Y轴不显示X轴的数据，将formatter表达式去掉{b}即可。

    根据上图可以发现上图中显示的数据(X轴)共有10天的数据，如果不对echarts的xAxis的axisLabel进行设置那么这里X轴显示的是30 31 01 02 ....  08这10天的数据，如果要显示上图的形式那么久需要对X轴的 axisLabel进行设置，配置如下：

                                          xAxis : [{

type : "category",

splitLine : {

show : true

},

splitArea : {

show : false

},

data : days,

axisLabel:{

interval:1,//一个X轴间隔中显示一个点的数据

},

boundaryGap: false,  

axisLine : {

lineStyle : {

color : '#d0d0d0',

width : 1

}

}

}],

   可以看到上面讲 interval属性设置成为了1，意思是两个距离之间存在一个点，比如上面这样30  和  01 之间存在31的数据(没有显示出点)， boundaryGap属性：表示从X轴的0的位置开始。

   更多属性就不一一介绍了，可以参考官网的api    http://echarts.baidu.com/option.html#title