canvas教程

在 mpvue 使用 echarts 小程序组件

字号+ 作者:H5之家 来源:H5之家 2018-03-12 15:00 我要评论( )

具体操作下载echarts-for-weixin。把其ec-canvas目录移动到 mpvue 项目的static目录下。对ec-canvas/ec-canvas.js进行小调整,考虑提 pr 到 ec-canvas。修改 rea

具体操作

修改 ready 为异步获取数据。

ready: function () { // 异步获取 setTimeout(() => { if (!this.data.ec) { console.warn('组件需绑定 ec 变量,例:<ec-canvas ' + '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();
  • 创建 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 等相关配置
  • <template> <div> <div> <ec-canvas 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

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • canvas HTML5 新标签 介绍怎么使用 画图作画 WEB(ASP,PHP,...) 2

      canvas HTML5 新标签 介绍怎么使用 画图作画 WEB(ASP,PHP,...) 2

      2018-03-12 09:06

    • canvas裁剪clip()函数的具体使用

      canvas裁剪clip()函数的具体使用

      2018-03-07 13:05

    • HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图

      HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canv

      2018-02-15 16:06

    • Android 中自定义属性(attr.xml,TypedArray)的使用

      Android 中自定义属性(attr.xml,TypedArray)的使用

      2018-02-13 09:40

    网友点评