ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2022-02-19 10:00:47  阅读:272  来源: 互联网

标签:point 微信 程序 let posX posY size echarts contentSize


问题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, // 不超出边界
},

标签:point,微信,程序,let,posX,posY,size,echarts,contentSize
来源: https://www.cnblogs.com/elevens/p/15911947.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有