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= `

        

          

          

            ${params[0].axisValue}
          
          

            

            

              
              趋势1234
              ${params[0].data}%
              

            
            

            
            

            
            

            
            

          
          

          
          

        
        

` 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); };