商城系統(tǒng) 注冊(cè)

在 mpvue 使用 echarts 小程序組件

2020-07-14|HiShop
導(dǎo)讀:具體操作 下載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 (...

  具體操作

  在 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

電話咨詢 預(yù)約演示 0元開店