修改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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐