小程序模板網(wǎng)

在 mpvue 使用 echarts 小程序組件

發(fā)布時(shí)間:2018-05-07 14:49 所屬欄目:小程序開(kāi)發(fā)教程

具體操作

  1. 下載 echarts-for-weixin 。

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

  3. 對(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 變量,例:<ec-canvas id="mychart-dom-bar" '
          + 'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>');
        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();
  1. 創(chuàng)建 pages/bar 頁(yè)面,目錄如下:
.
└── pages
    └── bar
        ├── index.vue
        └── main.js
  1. 在 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'
    }
  }
}
  1. 在 app.vue 中添加 options、template 等相關(guān)配置
<template>
  <div>
    <div class="container">
      <ec-canvas class="canvas" id="mychart-dom-bar" canvas-id="mychart-bar" :ec="ec"></ec-canvas>
    </div>
  </div>
</template>

<script>
const options = {
    // more code ... 
}

export default {
  data () {
    return {
      ec: {
        // 傳 options
        options: options,
      }
    }
  }
}

</script>

<style>
ec-canvas {
  width: 400px;
  height: 400px;
}

</style>

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ōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/24278.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢