微信小程序echart图片不显示 问题解决

简介: 微信小程序echart图片不显示 问题解决

1.问题描述:

echart图片不显示

图片:

2.解决方法:

2.1第一步

wxml中的ec-canvas组件添加宽高样式:style="width: 100%; height: 500px;"

原本代码:

<view class="container">
  <ec-canvas id="mychart-dom-graph" canvas-id="mychart-graph" ec="{{ ec }}"></ec-canvas>
</view>

修改后代码:

<view class="container">
  <ec-canvas id="mychart-dom-graph" style="width: 100%; height: 500px;" canvas-id="mychart-graph" ec="{{ ec }}"></ec-canvas>
</view>

2.2第二步

给wxss外层容器添加以下样式:

.container {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
  
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   box-sizing: border-box;
 } 

2.2效果

目录
相关文章
|
5天前
|
机器学习/深度学习 小程序 前端开发
微信小程序——实现对话模式(调用大模型图片生成)
微信小程序——实现对话模式(调用大模型图片生成)
57 3
|
5天前
|
小程序 容器
小程序图片水平垂直居中显示在view中
小程序图片水平垂直居中显示在view中
|
5天前
|
存储 开发框架 JavaScript
uniapp、vue、小程序、js图片转base64 示例代码
uniapp、vue、小程序、js图片转base64 示例代码
45 0
|
5天前
【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
54 0
|
5天前
|
小程序 开发者
体验版小程序为何无法访问云端服务器后端接口(请求失败...(已完美解决附加图片))?
体验版小程序为何无法访问云端服务器后端接口(请求失败...(已完美解决附加图片))?
25 0
|
5天前
|
小程序 JavaScript
微信小程序长按识别图片二维码功能
微信小程序长按识别图片二维码功能
46 0
|
5天前
|
移动开发 JavaScript
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片
62 0
|
5天前
|
开发框架 JavaScript 小程序
uniapp、vue、小程序、js图片转base64 示例代码
uniapp、vue、小程序、js图片转base64 示例代码
|
5天前
|
文字识别 小程序 开发工具
mPaaS小程序问题之调用选图片的时候报错如何解决
mPaaS小程序是阿里巴巴移动平台服务(mPaaS)推出的一种轻量级应用解决方案,旨在帮助开发者快速构建跨平台的小程序应用;本合集将聚焦mPaaS小程序的开发流程、技术架构和最佳实践,以及如何解决开发中遇到的问题,从而助力开发者高效打造和维护小程序应用。
42 0
|
5天前
|
SQL 前端开发 数据可视化
前后端分离项目知识汇总(微信支付,Echart)
前后端分离项目知识汇总(微信支付,Echart)
29 0

热门文章

最新文章