echarts 自定义tooltip结构以及样式

效果图

1、自定义tooltip结构

   var myChart2 = echarts.init(document.getElementById('Fan'));
    var option2 = {
        tooltip: {
            trigger: 'axis',
            extraCssText: 'border-color:#C7D1E0;  overflow: hidden;box-shadow: none;',
            formatter: function (val) {
                // 自定义tooltip结构
                return ` <p class="echartsTooltipHeader">2021/10/08 09:15:12</p>
                        <div class="echartsTooltipContent">
                            <span class="echartsTooltipColor" style="background: ${val[0].color} "></span> <span class="echartsTooltipName">${val[0].axisValue}</span><span
                                class="echartsTooltipValue">${val[0].value}%</span>
                        </div>  `
            }
        },
        grid: {
            left: '0',
            right: '0',
            bottom: '3%',
            top: '32px',
            containLabel: true
        },
        color: ['#539DFF'],
        xAxis: {
            type: 'category',
            data: ['Fan-1', 'Fan-2', 'Fan-3', 'Fan-4'],
        },
        yAxis: {
            name: '%',  
            type: 'value',
            nameTextStyle: {
                padding: [0, 0, 0, -30]
            }
        },
        series: [
            {
                name: 'Direct',
                type: 'bar',
                barWidth: '60%',
                barWidth: 18,//柱图宽度
                data: [10, 52, {
                    value: 200,
                    itemStyle: {
                        color: '#FF877E'
                    }
                }, 334]
            }
        ]
    };
    myChart2.setOption(option2);

2、tooltip的自定义样式

/* echarts图表 tooltip自定义样式 */
.echartsTooltipHeader {
  height: 36px;
  line-height: 36px;
  width: 112%;
  text-align: center;
  border-radius: 2px 2px 0px 0px;
  border-bottom: 1px solid #C7D1E0;
  font-size: 16px;
  font-weight: 400;
  padding: 0 16px;
  color: #444747;
  box-sizing: border-box;

  background: #F0F2F5;
  margin: -10px 0 16px  -10px;
}

.echartsTooltipContent {
  display: flex;
  align-items: center;
}

.echartsTooltipColor {
  width: 12px;
  height: 12px;
  /* background: #FF9F30 ; */
  border-radius: 2px;
  display: inline-block;
  margin-right: 8px;
}

.echartsTooltipName {
  font-size: 14px;
  font-weight: 400;
  color: #9DA6B3;
}

.echartsTooltipValue {
  font-size: 16px;
  font-weight: bold;
  color: #444747;
  margin-left: 14px;
}