Popular blog tags

微信小程序的画图组件生态介绍

微信小程序的画图可以分为两大类,一类是微信官方的画布,名叫canvas,可以直接用来画图。另外一大类是以canvas为基础,为丰富其功能进行扩展的库。

1.canvas 是微信官方的原生画布组件。

https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

1.1微信小程序canvas画布自适应屏幕大小

https://blog.csdn.net/reoak/article/details/81201708

 

2.以canvas为基础进行扩展,微信小程序有许多图表库,如:Echarts、Tau Charts、ChartJS。

 

 

1.简介

wxcharts是微信小程序图表插件之一,基于canvas绘制,体积小巧。

2.下载地址wxcharts.js

https://github.com/xiaolin3303/wx-charts/

 

3.引入wxchart.js

// miniprogram/pages/stock/pankou/index.js

var wxCharts = require('../../wxcharts/wxcharts.js');

Page({
pieChart = new wxCharts({
      animation: true,
      canvasId: 'pieCanvas',
      type: 'pie',
      series: [{
        name: '成交量1',
        data: 15,
      }, {
        name: '成交量2',
        data: 35,
      }, {
        name: '成交量3',
        data: 78,
      }, {
        name: '成交量4',
        data: 63,
      }, {
        name: '成交量2',
        data: 35,
      }, {
        name: '成交量3',
        data: 78,
      }, {
        name: '成交量4',
        data: 63,
      }, {
        name: '成交量2',
        data: 35,
      }, {
        name: '成交量3',
        data: 78,
      }, {
        name: '成交量3',
        data: 78,
      }],
      width: windowWidth,
      height: 300,
      dataLabel: true,
    });

 

 

<!--miniprogram/pages/stock/pankou/index.wxml-->
<text>miniprogram/pages/stock/pankou/index.wxml</text>
<view class="container">
    <canvas canvas-id="pieCanvas" class="canvas" style="height:300px" bindtouchstart="touchHandler"></canvas>
</view>

 

 

 

 

3.微信小程序demo推荐:股票;动态分时图、K线图

http://www.wxapp-union.com/forum.php?mod=viewthread&tid=2428&fromuid=2

项目地址及下载: https://github.com/Shaman05/wxCharts