EChart tooltip formatter使用

来源:互联网 发布:炉石传说 知乎 编辑:程序博客网 时间:2024/05/18 01:20

使用formatter方法—实现显示框内容为自己定义的另一层数据
这里写图片描述
就是显示框中显示的,cpu、内存、硬盘为实际数据,而纵坐标显示的百分比。

默认情况下是也是显示百分比,在这里做个自定义:

解析代码tooltip: {        trigger: 'axis',        formatter: function (datas) {        var res = datas[0].name + '<br/>'        for (var i = 0, length = datas.length; i < length; i++) {           res += datas[i].seriesName + ':'                + datas[i].data.originValue + '<br/>'         }         return res       }   },
数据源显示数据内容:series.data的格式数组项通常为数值:[12, 34, 56, ..., 10, 23]------------------------------------------------------------当某类目对应数据不存在时(ps:'不存在' 不代表值为 0),可用'-'表示,无数据在折线图中表现为折线在该点断开,在柱状图中表现为该点无柱形,如:[12, '-', 56, ..., 10, 23]------------------------------------------------------------当需要对个别内容进行个性化定义时,数组项可用对象,如:[    12, 34,    {     value : 56,     tooltip:{},//自定义特殊tooltip,仅对该item有效,详见tooltip     itemStyle:{}//自定义特殊itemStyle,仅对该item有效,详见itemStyle    },    ..., 10, 23]

具体官方地址如下:
http://echarts.baidu.com/echarts2/doc/doc.html#SeriesData
EChart API
http://echarts.baidu.com/option.html#visualMap

原创粉丝点击