在mpvue中怎么使用echarts小程序組件

這篇文章主要講解了“在mpvue中怎么使用echarts小程序組件”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“在mpvue中怎么使用echarts小程序組件”吧！

　　具體操作

　　在 mpvue 使用 echarts 小程序組件。下載echarts-for-weixin。

　　把其ec-canvas目錄移動(dòng)到 mpvue 項(xiàng)目的static目錄下。

　　對(duì)ec-canvas/ec-canvas.js進(jìn)行小調(diào)整，考慮提 pr 到 ec-canvas。

　　修改 ready 為異步獲取數(shù)據(jù)。

　　ready: function () {

　　// 異步獲取

　　setTimeout(() => {

　　if (!this.data.ec) {

　　console.warn('組件需綁定 ec 變量，例：');

　　return;

　　}

　　if (!this.data.ec.lazyLoad) {

　　this.init();

　　}

　　}, 10)

　　}

　　為 init 添加接收 options 傳參

　　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) {

　　// 添加接收 options 傳參

　　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();

　　創(chuàng)建pages/bar頁面，目錄如下：

　　.

　　└── pages

　　└── bar

　　├── index.vue

　　└── main.js

　　在 main.js 中引入微信小程序的自定義組件

　　import Vue from 'vue'

　　import App from './index'

　　const app = new Vue(App)

　　app.$mount()

　　// 添加 config json

　　export default {

　　config: {

　　// 這兒添加要用的小程序組件

　　usingComponents: {

　　'ec-canvas': '../../../static/ec-canvas/ec-canvas'

　　}

　　}

　　}

　　在 app.vue 中添加 options、template 等相關(guān)配置

　　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

感謝各位的閱讀，以上就是“在mpvue中怎么使用echarts小程序組件”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)在mpvue中怎么使用echarts小程序組件這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！