赞
踩
echarts_tootip自定义更改内容、图例、背景、边框
代码如下
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, backgroundColor: "#fff", // 提示框背景颜色 textStyle: { fontSize: 14, color: "#505D6F", }, formatter: function (params) { // console.log("--x轴类目对应的参数数组--", params); //显示的提示框中的相关数据 var res = // 字符串形式的html标签会被echarts转换渲染成数据,这个res主要是画的tooltip里的上部分的标题部分 "<div style='margin-bottom:5px;padding:0 18px;width:100%;height:30px;color: #505D6F;;line-height:30px;margin-top:15px;'><p>" + params[0].name + " </p></div>"; res += `<div style="color: #505D6F;background-color:#fff;font-size: 14px; padding:0 12px;line-height: 30px"> <span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${[ params[0].color, // 默认是小圆点,我们将其修改成有圆角的正方形,这里用的是模板字符串。并拿到对应颜色、名字、数据 ]};"></span> ${params[0].seriesName} : ${params[0].value} kVA </div>`; res += `<div style="color: #505D6F;background-color:#fff;font-size: 14px; padding:0 12px;line-height: 30px;margin-bottom:25px;"> <span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${[ params[1].color, // 默认是小圆点,我们将其修改成有圆角的正方形,这里用的是模板字符串。并拿到对应颜色、名字、数据 ]};"></span> ${params[1].seriesName} : ${params[1].value} kVA </div>`; // var box = "<div style='box-shadow: 0px 0px 4px #ddd'>"+res+"</div>" return res; // 经过这么一加工,最终返回出去并渲染,最终就出现了我们所看的效果 }, },
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。