Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.