echarts踩坑记

我快要哭了,怎么都做不出来了。无论是按照网上的教程还是把以前的代码放进现在的项目,都会报错。我不知道问题究竟在何处。npm也是一个坑,让我心态崩溃。现在我都还没有解决这个问题。引入一个echarts库怎么这么困难?

TypeError: $gwx is not a function

又要哭了,原来不是echarts的问题,问题很早就出现了。现在是在真机上运行就报错了。这种关头了,却发生了如此大的问题。

现在的问题可以让我崩溃——浏览器可以正常编译,但是手机就不行了。我怎么办呢?只有从头新建一个,再把一起拿的代码一点一点移过去了。唉,以后一定要经常在手机端调试


uni-app出了一个自定义组件模式,这个我必须要注意一下,感觉和echarts有关系

呜呜呜,终于是正常编译了,原因:

之前为了测试echarts,在me页面copy了代码,结果出问题后没有删除,出错。

后来发现了,选择全删除,又出错。

补了根标签,又报错,原来是因为<template></template>标签里面至少得放一个<view></view>标签才行。总算是恢复原样了。可是到头来,我还是不会echarts。

我成功了!引入终于成功了,没想到真的是编译模式的问题。之前不知怎的就开启了自定义组件编译模式。虽然这个模式更好,但是对echarts的写法有了新的要求。所以我暂时先不研究新模式,先把echarts引入再说。

注意,echarts页面的样式必须是:

page,

view {

display: flex;/* uni-app默认使用flex布局。因为flex布局有利于跨更多平台,尤其是采用原生渲染的平台。如不了解flex布局,请参考http://www.w3.org/TR/css3-flexbox/。若不需要flex布局可删除本行*/

}

page {

min-height: 100%;

}

.container {

flex: 1;

}

否则不会显示



再度更新:

echarts在uni-app中的使用,即使是成功引入,你也得把样式也好,否则就是显示不出来。

未使用自定义编译模式,把官方的echarts项目里面的echarts、mpvue-echarts和zrender放进自己项目的根目录。用npm如果网络不好可能会心态爆炸。现在我也不想再尝试了。

然后在想要引入的页面这样写:

<view class="ring-diagram">

<view class="canvasView">

<mpvue-echarts :echarts="echarts" :onInit="onInit" />

</view>

</view>

这时的为了保持文档结构,后面会给出样式

.ring-diagram {

width: 95%;

height: 600upx;//给出canvas的大小

background: white;

margin: 20upx;

}

page,//只有再flex下才能显示

.ring-diagram {

display: flex;

}

page {

min-height: 100%;

}

.container,

.canvasView {

flex: 1;

}

js部分可以参考uni-app官方的文档,如果想改变图标可以去echarts官网看实例里面的代码。

http://ask.dcloud.net.cn/question/62769

uni-echarts的官方例子,未使用自定义组件模式编译

https://echarts.baidu.com/examples/

//echarts的官方例子,里面有使用代码

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

友情链接更多精彩内容