How to use echarts Mini Program component in mpvue
This article mainly explains "how to use echarts Mini Program components in mpvue", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "how to use echarts Mini Program components in mpvue" bar!
Concrete operation
Use the echarts Mini Program component in mpvue. Download echarts-for-weixin.
Move its ec-canvas directory to the static directory of the mpvue project.
Make a small adjustment to ec-canvas/ec-canvas.js and consider mentioning pr to ec-canvas.
Change ready to get data asynchronously.
Ready: function () {
/ / get asynchronously
SetTimeout () = > {
If (! this.data.ec) {
Console.warn ('component needs to bind ec variable, for example:')
Return
}
If (! this.data.ec.lazyLoad) {
This.init ()
}
}, 10)
}
Add receive options pass parameters for init
Var query = wx.createSelectorQuery () .in (this)
Query.select ('.ec-canvas') .boundingClientRect (res = > {
If (typeof callback = = 'function') {
This.chart = callback (canvas, res.width, res.height)
}
Else if (this.data.ec & & this.data.ec.onInit) {
This.chart = this.data.ec.onInit (canvas, res.width, res.height)
}
Else if (this.data.ec & & this.data.ec.options) {
/ / add receiving options to transmit parameters
Const ec = this.data.ec
Function initChart (canvas, width, height) {
Const chart = echarts.init (canvas, null, {
Width: width
Height: height
})
Canvas.setChart (chart)
Chart.setOption (ec.options)
Return chart
}
This.chart = initChart (canvas, res.width, res.height)
}
}) .exec ()
Create a pages/bar page in the following directory:
.
└── pages
└── bar
├── index.vue
└── main.js
Introducing WeChat Mini Programs's custom components into main.js
Import Vue from 'vue'
Import App from'. / index'
Const app = new Vue (App)
App.$mount ()
/ / add config json
Export default {
Config: {
/ / add Mini Program components to be used here
UsingComponents: {
'ec-canvas':'.. / static/ec-canvas/ec-canvas'
}
}
}
Add options, template and other related configurations to app.vue
Build Setup
# install dependencies
Npm install
# serve with hot reload at localhost:8080
Npm run dev
# build for production with minification
Npm run build
# build for production and view the bundle analyzer report
Npm run build-report
Thank you for reading, the above is the content of "how to use echarts Mini Program components in mpvue". After the study of this article, I believe you have a deeper understanding of how to use echarts Mini Program components in mpvue, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
