mpvue-echarts（mpvueecharts怎么压缩）

本篇文章给大家谈谈mpvue-echarts，以及mpvueecharts怎么压缩对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、在vue 中使用百度echarts
• 2、mpvue 使用echarts---mpvue-echarts
• 3、vue e charts 初始化没有按照最大宽度渲染

在vue 中使用百度echarts

前言：在vue2.0中使用 百度echarts 有三种解决方案。

这样每次都要获取图表dom元素 然后通过setOption渲染数据，最后在mounted中初始化枣明。很麻烦。

vue-echarts 是ECharts 的 Vue.js 组件，基于 ECharts v4.1.0 + 开发，依赖 Vue.js v2.2.6 +，意思就是可以直接把echarts实例当中vue中的组件来使用，不用每次都获取dom、挂在dom，轻档岩厅松使用echarts的所用功能。。。

v-charts 是基于vue2二次封装的图表组件行隐库，功能没有echarts多 但也够用了，官网很详细，这里用一个官网例子说明问题。

以上，可跟据需求选用，如果需求简单可直接用 v-charts

[img]

mpvue 使用echarts---mpvue-echarts

mpvue-echarts地蠢猛址孝档橘巧团

mpvue-echarts

$ cnpm install mpvue-echarts

$ cnpm install echarts

vue e charts 初始化没有按照最大宽度渲染

this.$refs.chart.resize()这个是官网给的自适应方法，

这里的核心是$nextTick,页面渲染完成后执行这个自适应函数

2）窗口变化时适应

window.addEventListener("resize", this.resizeTheChart);//这句在mounted中

methods中：

resizeTheChart() {

if (this.$refs this.$refs.echarts1) {

this.$refs.echarts1.resize();

}

这里时给窗口添加自适应函数监听，有了这句改变屏幕大小时，画布也会随着改变。

总结

网上给的自适应解决方案全都是只给出了尘段谨窗口自适应的问题，事实上也能解决窗口自适应，但是第一次渲染的时候会出现不适应的问题，这就要用nextTick去解决。

查了一下，这个下载的vue-echarts他给的默认长宽是600px*400px，如果外等盒子的长宽比这个小的话那么就会超出，而这个自适应燃闷函数本身是解决这个问题的，但是它貌似是异步的，如果只单单在mounted中写一次，那它会在画布生成前执行一次，就不派基能达到想要的效果。

关于mpvue-echarts和mpvueecharts怎么压缩的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。