echarts 修改tooltip默认样式

修改后效果如图

 

 

            tooltip: {
                // trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis'
                trigger: "item",
                showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
                hideDelay: 20, // 隐藏延迟，单位ms
                backgroundColor: "rgba(1,172,253,0.7)", // 提示框背景颜色
                borderColor:'rgb(1,172,253)',
                textStyle: {
                    fontSize: 14,
                    color: "#fff",
                },
                // formatter:'{b0}<br />{c}'
                formatter: function (params) {
                    //console.log("--x轴类目对应的参数数组--", params); //显示的提示框中的相关数据
                    var res = // 字符串形式的html标签会被echarts转换渲染成数据，这个res主要是画的tooltip里的上部分的标题部分
                    "<div style='margin-bottom:5px;padding:0 12px;width:100%;height:24px;color:#03EDFC;;line-height:24px;'><p>" +
                    params.name +
                    " </p></div>";
                    res += `<div style="color: #fff;font-size: 14px; padding:0 12px;line-height: 24px">
                        <span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${[
                            params.color, // 默认是小圆点，我们将其修改成有圆角的正方形，这里用的是模板字符串。并拿到对应颜色、名字、数据
                        ]};"></span>
　　　　　　　　　　　　　　
                        ${params.value}
                        </div>`;
                    return res; // 经过这么一加工，最终返回出去并渲染，最终就出现了我们所看的效果
                },
            },

代码中的params.name与params.value按自己的具体数据修改，下面为当前数据。