当前位置:   article > 正文

echarts_tootip自定义更改内容、图例、背景、边框_echarts tooltip 数据修改

echarts tooltip 数据修改

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; // 经过这么一加工,最终返回出去并渲染,最终就出现了我们所看的效果
                },
            },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小丑西瓜9/article/detail/308667
推荐阅读
相关标签
  

闽ICP备14008679号