Echarts 折线图自定义toolTip内容及位置

const trendFunc = () => {
  option = {
    title: {
      text: ""
    },
    grid: {
      left: 45,
      top: 30,
      right: 10
    },
    tooltip: {
      trigger: "axis",
      extraCssText:"z-index:10",
      position: function (point: any, params: any, dom: any, rect: any, size: any) {
        //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
        var x = point[0]; //
        var y = point[1];
        var boxWidth = size.contentSize[0];
        var boxHeight = size.contentSize[1];
        var posX = 0; //x坐标位置
        var posY = 0; //y坐标位置

        if (x < boxWidth) {
          //左边放不开
          posX = 5;
        } else {
          //左边放的下
          posX = x - boxWidth;
        }

        if (y < boxHeight) {
          //上边放不开
          posY = 5;
        } else {
          //上边放得下
          posY = y - boxHeight;
        }
        return [posX, posY];
      },
      formatter: function (params: any) {
        var res= `<div>
        <div style="margin: 0px 0 0;line-height:1;">
          <div style="margin: 0px 0 0;line-height:1;">
          <div style="font-size:14px;color:#666;font-weight:400;line-height:1;">
            ${params[0].axisValue}
          </div>
          <div style="margin: 10px 0 0;line-height:1;">
            <div style="margin: 0px 0 0;line-height:1;">
            <div style="margin: 0px 0 0;line-height:1;">
              <span style="float:left;display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#2D95ED;"></span>
              <span style="float:left;text-align:left;font-size:14px;color:#666;font-weight:400;margin-left:2px">趋势1234</span>
              <span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">${params[0].data}%</span>
              <div style="clear:both"></div>
            </div>
            <div style="clear:both"></div>
            </div>
            <div style="margin: 10px 0 0;line-height:1;">
            </div>
            <div style="clear:both"></div>
            </div>
            <div style="clear:both"></div>
          </div>
          <div style="clear:both"></div>
          </div>
          <div style="clear:both"></div>
        </div>
        </div>`
        return res;
      }
    },
    legend: {
      icon: "circle",
      itemHeight: 10,
      itemWidth: 10,
      itemGap: 10,
      orient: "horizontal",
      left: "center",
      bottom: "0",
      data: ["趋势1234"]
    },
    toolbox: {},
    xAxis: {
      type: "category",
      boundaryGap: false,
      axisLabel: {
        interval: 0,
        rotate: 40
      },
      data: trendData.trendDate
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value}%"
      }
    },
    series: [
      {
        name: "趋势1234",
        type: "line",
        data: trendData.trendValue,
        itemStyle: {
          color: "#2D95ED"
        }
      },
    ]
  };
  loading.value = false;
  var chartDom = document.getElementById("main2") as HTMLElement;
  var myChart = echarts.init(chartDom);
  option && myChart.setOption(option);
};