微信小程序使用echarts遇到的问题

本文主要是介绍微信小程序使用echarts遇到的问题，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

问题1：ec-canvas出现上下滑动页面会漂移

　　解决方法：在标签内加 force-use-old-canvas="true" 

问题2：echarts的tooltip会超出边界

　　解决方法：

// 1、封装的函数方法
export const setTooltipPosition = function (point, params, dom, rect, size) {
  // console.log(params, dom)
  //其中point为当前鼠标的位置，size中有两个属性：viewSize和contentSize，分别为外层div和tooltip提示框的大小
  // 更改提示框的显示位置
  let x = point[0]; //
  let y = point[1];
  // size: 包括 dom 的尺寸和 echarts 容器的当前尺寸，例如：{contentSize: [width, height], viewSize: [width, height]}
  let boxWidth = size.contentSize[0];
  // let boxHeight = size.contentSize[1]; // size里面此处获取不到dom的高度，值为NAN，所以下面指定了一个固定值
  let boxHeight = 50;
  let posX = 0; //x坐标位置
  let posY = 0; //y坐标位置
  
  if (x < boxWidth) { //左边放不开
    posX = 5;
  } else { //左边放的下
    posX = x - boxWidth;
  }

  if (y < boxHeight) { //上边放不开
    posY = 5;
  } else { //上边放得下
    posY = y - boxHeight;
  }
  return [posX, posY];
}

// 2、使用方法
tooltip: {
    show: true,
    trigger: 'axis',
    position: setTooltipPosition, // 不超出边界
},

这篇关于微信小程序使用echarts遇到的问题的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！