我快要哭了,怎么都做不出来了。无论是按照网上的教程还是把以前的代码放进现在的项目,都会报错。我不知道问题究竟在何处。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的官方例子,里面有使用代码