Echarts 提示组件

1.封装提示组件

默认的提示组件一般预先设定好了一定的格式，例如数据颜色，数据名称和值等等，如图：

如果想要个样式一样，但是数据可以自定义的组件，就需要进行封装，封装需要做到以下两点：

• 布局：每行分为3个元素，分为左中右3列，左侧圆点，中间系列名称，右侧数值，此外还有颜色，间距等等
• 数据：数据需要动态获取，包括系列名称，当前数值，当前颜色，当前X轴的值

CSS代码如下：

<style>
    .tooltip-title{
        font-size:12px;
    }
    .tooltip-item{
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        padding:0;
    }
    .tooltip-item .tooltip-round{
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 10px;
        height: 10px;
        border-radius: 50%;
        content: "";
        /* background-color: #fff; */
    }
    .tooltip-item .tooltip-left{
        margin:0 20px 0 15px;
        font-size: 12px;
    }
    .tooltip-item .tooltip-right{
        font-size: 14px;
        color: black;
    }
</style>

js代码;

setToolTip(params){
    var html = `<div class="tooltip-title">${params[0].axisValue}</div>`
    for(var i=1;i<params.length;i++){
          var name = params[i].seriesName
          var index = params[i].dataIndex
          var color = params[i].color
          //读取原始数据
          var value = this.StepYieldDataObj[name][index]
              html += (`<div class="tooltip-item"><span class="tooltip-round" style="background-color: ${color};"></span><span class="tooltip-left">${params[i].seriesName}</span><span class="tooltip-right">${value}</span></div>`)
          }
         //包裹一层外容器
         html = `<div class="tooltip-box">${html}</div>`
         return html
}

调用:

tooltip:{
    trigger:"axis",
    formatter:function(params){
           //this=>window that=vm
           var result =  that.setToolTip(params)
            return result
    }
},

Echarts 提示组件

原文：https://www.cnblogs.com/OrochiZ-/p/14816690.html