修改echarts的tooltip样式

在这里插入图片描述

    let option={
         title:{
              text:'反馈问题处\n理不及时',// 使用\n可以文字换行,
              left:'30%',  
              top:'50%',
              textStyle:{
                   color:'#fff',
                   fontSize:10
              },
          tooltip:{
                trigger:'item',
                backgroundColor:'#017D7D‘,  // 修改背景颜色
                borderColor:'#66FFFF',  // 修改字体颜色
                formatter:function(params){  //使用formatter函数修改需要的样式
                        let res=""
                        res+='<div>'+
                                 '<div style="color:'#fff';padding:10% 1%;font-size:12px">'+'<span style="display:inline-block;width:0px;height:0px;border:4px solid #fff;border-color:transparent transparent transparent #66FFFF">'+'</span>'+params.serieName+'-'+'<span>'+params.name+'</span>'+'</div>'+
                                 '<div style="padding:18% 1% 1% 1%;background:linear-gradient(90deg,#000303 0%, rgba(0,11,18,0.00) 100%)">'+'<span style="color:#fff;font-family:SourceHanSansCN-Bold;font-size:20px;letter-spacing:1.25px;font-weight:700;padding-left:10%">'+params.value+'</span>'+'</div>'
                                 +'</div>'
                          return res
                }
          }
    }
Logo

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

更多推荐