VUE + Echarts自定义tooltip提示框

代码： 

tooltip: {
  trigger: "axis",
  textStyle: {
    color: "#494949", //文字颜色
    fontSize: 12,//文字大小
  },
  padding: [15, 10, 15, 20],//边距 或： padding: 10
  borderWidth: 1,//边框线粗细
  borderColor: "#DADFF7",//边框线颜色
  backgroundColor: "#FFF",//背景色
  formatter: (params) => {//自定义样式
    let res =
      "<div class='tooldate'>" +
      params[0].axisValue.replace("-", "月") +
      "日</div>";
    params.forEach((item) => {
      res +=
        "<div style='margin-top:4px;'>" +
        item.seriesName +
        "量：<span style='font-weight: bold;font-size:15px;'>" +
        item.data +
        "</span></div>";
    });
    return res;
  },
},

样式： 

/*echarts自定义toolTip框样式 */
.tooldate {
  font-size: 14px;
  position: relative;
  &::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 5px;
    left: -11px;
    width: 6px;
    margin-right: 10px;
    height: 6px;
    border-radius: 50%;
    background-color: #778cff;
  }
}

效果：