注册登录

在 mpvue 使用 echarts 小程序组件

2020-07-14|HiShop|阅读量:
导读:具体操作 下载echarts-for-weixin。 把其 ec-canvas 目录移动到 mpvue 项目的 static 目录下。 对 ec-canvas/ec-canvas.js 进行小调整,考虑提 pr 到 ec-canvas。 修改 ready 为异步获取数据。 ready: function (...
在 mpvue 使用 echarts 小程序组件

  具体操作

  在 mpvue 使用 echarts 小程序组件。下载echarts-for-weixin。

  把其ec-canvas目录移动到 mpvue 项目的static目录下。

  对ec-canvas/ec-canvas.js进行小调整,考虑提 pr 到 ec-canvas。

  修改 ready 为异步获取数据。

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

  创建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 等相关配置

  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

文章来源:https://www.hishop.com.cn/xiaocx/show_52698.html

<海商(www.hishop.com.cn)是国内知名商城系统及商城网站建设提供商,其中销客多小程序系统为商家提供小程序商城开发、小程序分销系统、微分销系统、商城系统、电商网站建设、微信分销系统、小程序商城等多端商城及电子商务行业解决方案>

小程序产品推荐
  • HiShop小程序商城开发
    提供零售小程序、多用户小程序、社区团购小程序、o2o小程序、分销小程序、抖音/头条小程序等多种业态的小程序开发解决方案,助力企业降低获客成本,实现流量快速变现,功能强大的小程序商城系统帮助商家快速抢占社交电商红利。详情