由于echarts中柱状图,鼠标放上去默认显示的是x轴名称以及y轴值。
而我现在需要再添加一些显示信息。
下面是操作:
在tooltip对象中补充trigger: “axis”,属性,然后再设置formatter。

tooltip : {
   formatter: function (params) {
     // do some thing
     return  “名称:” +params.name
  }
}

通过网页端的debug可以初步判断params结构:
params是所有种的图信息,而不是单种图的信息。由于我的柱状图只有一根柱子,所以直接锁定params[0]。
通过params[0].dataIndex获取柱子索引。
后续还有个问题,如果直接return res。
那么显示是直接一行,我们把要显示的内容放入list中,一个list代表一行,这样可以更加美观

formatter: function (params) {
        // console.log(params[0].dataIndex)
        let list = []
        let listItem = ''
        var index = params[0].dataIndex;
        res = String(NowRoomQualityIndexType[index]) + '\n'
            + "机房质量: " + String(NowRoomQualityIndexData[index]) + "  "
            + '上行丢包率: ' + String(NowRoomUp[index]) + '%\n'
            + '下行丢包率: ' + String(NowRoomDown[index]) + '%\n'
            + 'rtt: ' + String(NowRoomRtt[index]) + '\n';
        list.push(String(NowRoomQualityIndexType[index]));
        list.push("机房质量: " + String(NowRoomQualityIndexData[index]));
        list.push('上行丢包率: ' + String(NowRoomUp[index]));
        list.push('下行丢包率: ' + String(NowRoomDown[index]));
        list.push('rtt: ' + String(NowRoomRtt[index]));
        listItem = list.join('<br>')
        return '<div class="showBox">' + listItem + '</div>'
     }
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐