找回密码
 立即注册

QQ登录

只需一步,快速开始

[工具插件] 一款用于微信小程序开发中的图表组件,使用者可以快速...

[复制链接]
查看: 582|回复: 55
最佳答案
0 

6

主题

6

帖子

140

积分

新人求带

积分
140
 楼主| 发表于 2019-9-19 15:12:21 | 显示全部楼层 |阅读模式
本项目是基于微信小程序开发的图表插件,以及使用的示例。

开发者可以通过微信组件化方式配置 CHCharts,快速开发图表,满足各种可视化需求。

Demo 展示
demo.gif

使用 CHCharts

首先,下载本项目。

其中,ch-canvas 是我们提供的组件,其他文件是如何使用该组件的示例。

引入组件
微信小程序的项目创建可以参见微信公众平台官方文档。

在创建项目之后,拷贝 ch-canvas 目录到新建的项目下,然后做相应的调整。

具体可以参考 pages/rose 目录下的几个文件的写法。下面,我们具体地说明。

创建图表
首先,在 pages/rose 目录下新建以下几个文件:rose.js、 rose.json、 rose.wxml、 rose.wxss。并且在 app.json

pages 中增加 'pages/rose/rose'。

rose.json 配置如下:
  1. {
  2.   "usingComponents": {
  3.     "ch-canvas": "../../ch-canvas/ch-canvas"
  4.   }
  5. }
复制代码
然后,pages/rose/rose.wxml 中使用 <ch-canvas> 组件。

如 rose.wxml 中:
  1. <view class='container'>
  2.   <ch-canvas canvasId='rose' id='rose'></ch-canvas>
  3. </view>
复制代码
最后,在 rose.js 中配置相关参数、数据就可以在页面中显示出图表了。

rose.js 配置如下:
  1. var data = [
  2.   { name: '甜甜圈', value: 50, color: '#80e0ed' },
  3.   { name: '冰淇淋', value: 40, color: '#9197ed' },
  4.   { name: '棒棒糖', value: 30, color: '#eddf5c' },
  5.   { name: '奶茶', value: 60, color: '#e4ff99' },
  6.   { name: '抹茶蛋糕', value: 50, color: '#baffad' },
  7.   { name: '蛋挞', value: 20, color: '#afee9d' }
  8. ]

  9. Page({
  10.   onLoad: function(options) {
  11.     var options = {
  12.       data: data,
  13.       legend: '{c}',
  14.       chartRatio: 0.95,
  15.       style: 'rose',
  16.       showLegend: true,
  17.       showLabel: true,
  18.       animation: true
  19.     }
  20.     this.roseComp = this.selectComponent('#rose')
  21.     this.roseComp.setOptions(options)
  22.     this.roseComp.initChart(320, 213)
  23.   }
  24. })
复制代码
最近更新(v2.0.0)
  • 增加了 K 线图、优化了线图坐标。
  • 增加了多层环状图。
  • 增加了仪表盘、矩形树图、漏斗图。


CHCharts-wechat-master.zip (1.14 MB, 下载次数: 97)
回复

使用道具 举报

最佳答案
0 

0

主题

42

帖子

717

积分

略知一二

积分
717
发表于 2019-9-20 09:59:18 | 显示全部楼层
感谢分享!
回复

使用道具 举报

最佳答案
0 

0

主题

66

帖子

74

积分

等待验证会员

积分
74
发表于 2019-9-23 14:37:31 | 显示全部楼层
谢谢分享资料
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

603

帖子

372

积分

等待验证会员

积分
372
发表于 2019-9-30 08:53:48 | 显示全部楼层
首先,下载本项目。
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

603

帖子

372

积分

等待验证会员

积分
372
发表于 2019-9-30 08:53:52 | 显示全部楼层
首先,下载本项目。
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

603

帖子

372

积分

等待验证会员

积分
372
发表于 2019-9-30 08:53:54 | 显示全部楼层
首先,下载本项目。
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

603

帖子

372

积分

等待验证会员

积分
372
发表于 2019-9-30 08:53:56 | 显示全部楼层
首先,下载本项目。
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

603

帖子

372

积分

等待验证会员

积分
372
发表于 2019-9-30 08:53:58 | 显示全部楼层
首先,下载本项目。
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

603

帖子

372

积分

等待验证会员

积分
372
发表于 2019-9-30 08:54:01 | 显示全部楼层
首先,下载本项目。
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

603

帖子

372

积分

等待验证会员

积分
372
发表于 2019-9-30 08:54:03 | 显示全部楼层
首先,下载本项目。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com