微信小程序引用echarts，微信PC端打开小程序不显示canvas

最新推荐文章于 2024-04-28 18:12:30 发布
最新推荐文章于 2024-04-28 18:12:30 发布
阅读量1.4k 收藏 2
点赞数 1
分类专栏： 前端常用方法 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/small_IT_lang/article/details/116920737
版权

出现的问题

在pc端ec-canvas组件不显示内容
如图，红框内是一个饼图，但是未显示
在这里插入图片描述

出现原因

pc端不支持2d，echarts插件在电脑端也不显示，但是echarts有解决方案。

解决方案

在echarts组件中加入 force-use-old-canvas=“true” 即可

<view class="container">
  <ec-canvas
   id="mychart-dom" 
   canvas-id="mychart-bar"
    ec="{{ ec }}"
    force-use-old-canvas="true"
    ></ec-canvas>
</view>

原文链接https://developers.weixin.qq.com/community/develop/doc/000a2c9b5a4a40c3e97a907d25ec00?_at=1586435654144

前端学习之旅
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
uniapp微信小程序使用Echarts组件
07-28
uniapp微信小程序使用Echarts组件,使用实例 <echarts class="uni-ec-canvas" ref="echarts2" :option="option" canvasId="echarts1" id='echarts2'></echarts>
解决微信小程序引用echarts视图模糊的问题
03-29
在小程序项目中需要用到echarts图表 但是展示的时候遇到了问题 图表高度失真 体验感非常差 (此图片来源于网络，如有侵权，请联系删除! ) 经过一番查找实验，终于找到了解决方案 下面上代码！ function initChart(canvas, width, height,dpr) { const chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr //解决小程序视图模糊的问题，必写 }); canvas.setChart(chart); var checkName
vue中echarts渲染不出来的问题
qq_一望损莓苔的博客
04-16 1万+
1、查看是否是DOM结构复杂还未渲染出来数据已经更新，使用this.nextTick(()=>{}) 2、canvas需要设置固定大小 3、数据更新后，图表重绘 let canvasChart = echarts.init(document.getElementById(canvasStyles.dom)) window.onresize = () => { return ...
echarts画饼图，option中有数据，但绘制没有显示，canvas都不存在。求解
qq_43408287的博客
08-03 5258
eharts画饼图，有数据，但没有绘制canvas画布，显示视图空白，找半天没找到原因。求大神解惑！！！ ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190802235910880.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG...
echarts加载时不稳定，偶尔出现canvas高度为零的现象
mayusunshine的博客
12-11 2394
背景 在开发过程中会遇到，echarts图表有时加载正常，有时加载不出来，检查代码发现，canvas高度为零。 解决方法 <div id="sbyxxEchart" style="width: 470px;height: 220px"></div> 在行间设置宽高
PC版的微信小程序 echarts 图表不显示的问题修复
sinat_33255495的博客
01-04 1564
问题描述 pc端ec-canvas组件不显示内容，报错如下： 问题触发原因 查看报错发现是无法获取node节点，通过研究发现其实是pc端不支持canvas 2d。 解决方案 我们只需要在ec-canvas组件里写上 force-use-old-canvas="true"即可 <ec-canvas id="{{ chartLineId }}" canvas-id="{{ canvasId }}" force-use-old-canvas="true"> </ec-canvas>
头痛了很久的Echarts绘图不显示问题终于解决了
热门推荐
代码的女朋友的博客
04-17 2万+
头痛了很久的Echarts绘图不显示问题终于解决了！
echarts拓扑图_ECharts整合HT for Web的网络拓扑图应用
weixin_39887961的博客
11-21 258
ECharts图形组件在1.0发布的时候我就已经有所关注，今天在做项目的时候遇到了图标的需求，在HT for Web上也有图形组件的功能，但是在尝试了下具体实现后，发现HT for Web的图形组件是以矢量的格式来呈现的，在展现上可以有很多的自定义和数据绑定等特性，但是其在交互的设计上就显得比较弱势。因此我就在想，是否可在项目中将ECharts图形组件代替HT for Web的图形组件呢，在对EC...
解决微信小程序、uni-app echars/canvas层级过高问题
L15550932101的博客
05-04 3219
在微信小程序中使用echars图表时，图表会覆盖到其他元素上边，这是因为canvas为小程序原生组件，层级最高。使用微信小程序的cover-view来覆盖canvas组件时不一定生效，并且会有很多问题，只需要为echars标签添加。就可以让echars的层级降低。
微信小程序不支持Echarts中tooltip的解决方法
CoderW
07-14 1万+
echrts在微信小程序上不支持tooltip的解决方法
微信小程序遍历Echarts图表实现多个饼图
01-03
如何在微信小程序中使用Echarts可以看我的另一个教程：点击查看 首先看一个简单的例子 1.wxml文件 <ec id=mychart-dom-bar canvas-id=mychart-bar ec={{> 2.js文件 import * as echarts from '../../common/ec-...
微信小程序Echarts覆盖正常组件问题解决
01-03
最近公司的项目中需要在小程序内使用echarts组件来展示数据，同时因为使用了自定义导航栏以及蒙版层，导致Echarts图形覆盖于所有组件的上方，不符合设计要求。  尝试解决的思路：  z-index：Echarts使用的是微信...
微信小程序在ios下Echarts图表不能滑动的问题解决
10-16
主要介绍了微信小程序在ios下Echarts图表不能滑动的解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,下面我们来一起学习下吧
智慧药房系统源码解析：开发高效医保购药小程序教学
wy15564849548的博客
04-27 481
智慧药房系统由前端和后端两部分组成。医保购药小程序则是智慧药房系统的一个重要应用场景，其功能主要包括药品浏览、医保结算、在线咨询等。
陪诊小程序的市场潜力与发展趋势研究
2402_83689311的博客
04-24 559
随着社会的快速发展和人口老龄化的加剧，医疗服务需求日益增长，而陪诊服务作为医疗服务的重要补充，正逐渐受到人们的关注和青睐。陪诊小程序利用互联网技术，将陪诊服务与用户需求紧密连接，提高了服务的便捷性和效率。他们往往需要更加细致的照顾和陪伴，而陪诊小程序能够提供专业的陪诊服务，满足老年人的需求。随着技术的不断创新和市场的不断拓展，陪诊小程序将在未来医疗服务领域发挥更加重要的作用，为人们的生活带来更多便利和舒适。通过拓展海外市场，引入国际先进的陪诊服务理念和模式，提升陪诊小程序的国际竞争力。
扭蛋机小程序对市场的发展有哪些推动作用？
guanpinkeji的博客
04-25 870
近几年，扭蛋机发展的非常迅猛。扭蛋机市场的发展具有非常大的潜力，通过不断创新发展，满足消费者的需求，让扭蛋机变得更加有趣。目前，在市场需求增长和科学技术的进步下，扭蛋机进行了创新发展，与互联网进行融合，打造线上扭蛋机小程序，在市场的激烈竞争中，能够让企业稳占市场。5、线上平台利用互联网技术，可以实现商家人力物力的减少，降低运营成本，进行统一管理，也能更好实现营销策略，提高利润收益。3、扭蛋机小程序为企业打造了专属的品牌形象，企业可以通过小程序与知名IP合作，推出品牌专属的商品，提高企业的品牌形象。
（四）小程序学习笔记——自定义组件
最新发布
qq_43498878的博客
04-28 538
默认插槽：具名插槽：组件A组件B具名插槽options: {},})在自定义的wxss文件中，不允许使用标签选择器、ID 选择器、属性选择器。请使用class类选择器。子选择器（.a>.b）只能用于view 和子组件，用于其他组件（标签）可能会导致样式失效。继承样式，例如：color、font 等都会从组件外继承。（除继承样式外）全局样式、组件所在页面的样式文件中的样式都对自定义组件 无效。
洗鞋店上门预约小程序
zhuainiukeji888的博客
04-27 416
该系统凭借先进的技术支撑，实现了在线支付、智能推送等多样化功能，让你感受到前所未有的便捷。同时，我们注重用户体验，力求为你提供简单、直观的操作体验，让你在洗鞋的过程中享受到轻松愉快的时光。洗鞋上门预约小程序，一款针对洗鞋行业的移动应用，让你轻松享受洗鞋的便捷服务。简洁明了的操作界面，让你快速下单，享受高效的洗鞋体验。此外，该系统支持二次开发，你可以根据自己的需求进行定制，实现更加个性化的服务。洗鞋上门预约小程序，让你在繁忙的生活中轻松找到洗鞋的好帮手，为你的生活带来更多便利。
家政服务小程序：家政行业的数字化转型
guanpinkeji的博客
04-28 245
用户在寻找家政人员时可以清晰了解服务人员的信息，查看服务人员的犯罪记录、健康状况、技能，以及其他用户对工作人员的评价，解决用户对服务人员不了解的问题，降低服务中所产生的问题。为满足大众对家政服务的多样需求，家政市场与互联网技术相融合，构建数字化家政系统，将传统的找家政人员模式搬到线上，满足不同家庭的家政需求，为大众带来有保障的家政服务，提高服务效率，完善家政行业的产业链。未来，家政行业将陆续进行数字化转型，线上家政服务能够在技术的支持下继续满足居民的多样需求，促进行业的快速发展，推动家政企业的发展。
微信小程序使用 echarts 配置 安徽地图
12-03
以下是微信小程序使用 ECharts 配置安徽地图的步骤： 1.首先，需要在微信小程序中引入 ECharts 库。可以通过官方提供的地址引入，也可以下载到本地后引入。 2.在 wxml 文件中添加 canvas 标签，并设置 id 和 style，如下所示： ```html <canvas id="mychart" style="width: 100%; height: 100%;"></canvas> ``` 3.在 js 文件中引入 ECharts 库，并初始化图表，代码如下： ```javascript import * as echarts from '../../ec-canvas/echarts'; Page({ data: { ec: { lazyLoad: true // 延迟加载 } }, onLoad: function (options) { this.initChart(); }, initChart: function () { // 获取组件 this.selectComponent('#mychart').init((canvas, width, height) => { // 初始化图表 const chart = echarts.init(canvas, null, { width: width, height: height }); chart.setOption(this.getOption()); // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问 this.chart = chart; return chart; }); }, getOption: function () { // 配置项 var option = { // 地图类型 series: [{ type: 'map', map: '安徽' }] }; return option; }, onUnload: function () { // 页面卸载时销毁图表 if (this.chart) { this.chart.dispose(); } } }) ``` 4.在 getOption 函数中，需要设置地图类型为安徽，代码如下： ```javascript getOption: function () { // 配置项 var option = { // 地图类型 series: [{ type: 'map', map: '安徽' }] }; return option; }, ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值