[JavaScript知识库] echarts自定义tooltip样式

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> echarts自定义tooltip样式 -> 正文阅读

[JavaScript知识库]echarts自定义tooltip样式

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