返回

专注连锁门店会员营销管理系统

线上+线下+进销存+收银+会员
HiShop > Hi小程序 > 小程序开发 > 开发实例 >

在 mpvue 使用 echarts 小程序组件

2020-07-14 作者:黄珊

  具体操作

  在 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

线上+线下+进销存+收银+会员门店零售管理好帮手

  • 极速收银管理

    门店能实现快速收银,提升门店经营效率。

  • 进销存管理

    系统自带进销存管理,更好管理库存销售。

  • 软硬件一体化

    配备收银硬件一站式整体服务。

收 银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款

获取报价
【本站声明】

1、本网站发布的该篇文章,目的在于分享电商知识及传递、交流相关电商信息,以便您学习或了解电商知识,请您不要用于其他用途;
2、该篇文章中所涉及的商标、标识的商品/服务并非来源于本网站,更非本网站提供,与本网站无关,系他人的商品或服务,本网站对于该类商标、标识不拥有任何权利;
3、本网站不对该篇文章中所涉及的商标、标识的商品/服务作任何明示或暗示的保证或担保;
4、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责,仅系客观性描述,如您需要了解该类商品/服务详细的资讯,请您直接与该类商品/服务的提供者联系。

推荐文章

门店系统 获取报价 立即咨询 免费试用