echarts | 自定义ECharts提示框组件

一、吐槽

其实官方给出的提示框是很奈斯的，但是对于要求比较严格的UI来说，可能不太能满足， 比如给数据添加单位（人天，小时，百分号等），又或者统一提示框的样式，文字大小以及弹窗尺寸和间距等

echarts自带的提示框

改造如下

二、改造

formatter: function (params){
 return '自定义的提示框'
}

通过打印信息可以看到 params参数可以拿到柱状图相关的数据信息

然后就可以开心的写代码了

代码如下：

 tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: function (params) {
          const axisValue = params[0]?.axisValue
          const value1 = params[0]?.value ? params[0]?.value + "%" : "0%"
          const value2 = params[1]?.value ? params[1]?.value + "%" : "0%"
          const value3 = params[2]?.value ? params[2]?.value + "%" : "0%"
          return `<div><div style="font-size:10px;color: #000000;">${axisValue}</div><div style="display: flex;flex-direction: row;align-items: center;width:130px; justify-content: space-between;font-size:10px;"><div style="display:flex;flex-direction: row;align-items:center;"><div style="width:4px;height:4px;background:#FE6D46;border-radius:2px;margin-right:5px"></div><span>处理及时率</span></div><span style="font-weight:500;">${value1}</span></div><div style="display: flex;flex-direction: row;align-items: center;width:130px; justify-content: space-between;font-size:10px;"><div style="display:flex;flex-direction: row;align-items:center;"><div style="width:4px;height:4px;background:#3AD595;border-radius:2px;margin-right:5px"></div><span>修复质量</span></div><span style="font-weight:500;">${value2}</span></div><div style="display: flex;flex-direction: row;align-items: center;width:130px; justify-content: space-between;font-size:10px;"><div style="display: flex;flex-direction: row;align-items: center;"><div style="width:4px;height:4px;background:#FF9E4C;border-radius:2px;margin-right:5px"></div><span>回归及时率</span></div><span style="font-weight:500;">${value3}</span></div></div>`;
        }

      },

具体使用可自行参考： www.w3cschool.cn/echarts_tut…