微信小程序打开Echart是空白页面?

今天刚学使用Echart图表,把步骤写下来,

1.首先去git上拉一个文件

网址: https://github.com/ecomfe/echarts-for-weixin

下载后打开




使用时,把 ec-canvas 文件复制到项目中


再把需要的对应的图表给引进来,就能使用了,但运行起来,页面会是空白的,百度了一下,是wxss的文件少了一些样式。把下面这些复制上去。

/**index.wxss**/

ec-canvas {

  width: 100%;

  height: 100%;

}

ec-canvas {

  width: 100%;

  height: 100%;

}

.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;

}

.picker-pos {

  margin-top: -130rpx;

  margin-left: 150rpx;

  color: blueviolet;

}

再次运行,就会发现图表就会出现啦。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,696评论 1 92
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 10,140评论 0 26
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 8,916评论 0 6
  • 大多数的商城类小程序都有这个功能,点击“全部订单”,“待付款”,“待发货”,“待收货”,“已完成”,会跳转页面且跳...
    帅男一枚_4f74阅读 5,345评论 0 0
  • 今天是什么日子 起床:固定的六点的手机闹钟,还有同时广播的收音机,把我从睡梦中叫醒。 就寝:现在正是就寝时间,躺在...
    辛苦快乐阅读 1,508评论 0 0

友情链接更多精彩内容