微信小程序 - uCharts 图表

一、使用背景

前端图表的插件库有很多，例如echarts、uCharts等等

echarts 更适合应用于后台管理系统 或者pc 端

当微信小程序使用 echarts 并且引用 echarts 他会提示一段话 然后报错

小程序“文件体积超过 500KB，已跳过压缩以及 ES6 转 ES5 的处理，手机端使用过大的 js 库影响性能。”

二、uCharts高性能跨平台图表库

uCharts官网

uCharts git 地址uCharts: 高性能跨平台图表库，支持H5、APP、小程序（微信小程序、支付宝小程序、钉钉小程序、百度小程序、头条小程序、QQ小程序、快手小程序、360小程序）、Vue、Taro等更多支持canvas的框架平台，支持饼图、圆环图、线图、柱状图、山峰图、区域图、雷达图、圆弧进度图、仪表盘、K线图、条状图、混合图、玫瑰图、漏斗图、词云图、时序图、散点图、气泡图、地图等常见图表。

下载cCharts 地址uCharts: 高性能跨平台图表库，支持H5、APP、小程序（微信小程序、支付宝小程序、钉钉小程序、百度小程序、头条小程序、QQ小程序、快手小程序、360小程序）、Vue、Taro等更多支持canvas的框架平台，支持饼图、圆环图、线图、柱状图、山峰图、区域图、雷达图、圆弧进度图、仪表盘、K线图、条状图、混合图、玫瑰图、漏斗图、词云图、时序图、散点图、气泡图、地图等常见图表。

下载并在本地引入

三、在微信小程序中使用 uCharts 基本案例

将其封装成微信小程序的组件

<view class="pie-columns"><view class="pie-charts" style="width: {{ cWidth }}px;height:{{ cHeight }}px"><canvas canvas-id="canvasPie" id="canvasPie" class="charts" style="width: {{ cWidth }}px;height:{{ cHeight }}px" ontouchstart="touchPie"></canvas></view></view>

page {width: 750rpx;overflow-x: hidden;}.pie-columns {display: flex;flex-direction: column !important;justify-content: flex-start !important;align-items: flex-start !important;}.pie-charts {box-sizing: border-box;}.charts {box-sizing: border-box;}

// components/line-chart/line-chart.jsimport uCharts from '../../libs/uCharts/u-charts.js'var canvaPie = nullconst request = require('../../request.js')const { $get } = requestComponent({/*** 组件的属性列表*/properties: {tabIndex: {type: String || Number,value: 0,observer: function(newVal, oldVal) {}},},/*** 组件的初始数据*/data: {cWidth: '',cHeight: '',pixelRatio: 1},attached (){this.setData({cWidth: wx.getSystemInfoSync().windowWidth/2,cHeight: 150})this.getServerData()},/*** 组件的方法列表*/methods: { // 获取网络数据getServerData(){let _this = this$get('/data.json',{},res => {if(res.code == 0){} else {let Pie = {}if(this.data.tabIndex == 0) {Pie = {series: [{name: '自己销售',data: 50,color: '#009DA8',textColor: '#333333',textSize: 9}, {name: '一级合伙人销售',data: 200,color: '#EB7D78',textColor: '#333333',textSize: 9}, {name: '二级合伙人销售',data: 500,color: '#FDE18E',textColor: '#333333',textSize: 9}]}} else if(this.data.tabIndex == 2){Pie = {series: [{name: '一级合伙人',data: 50,color: '#EB7D78',textColor: '#333333',textSize: 9}, {name: '二级合伙人',data: 200,color: '#FDE18E',textColor: '#333333',textSize: 9}]}}_this.showPie("canvasPie",Pie)}})},showPie(canvasId,chartData){let _this = thiscanvaPie = new uCharts({$this: _this,canvasId: canvasId,type: 'pie',fontSize: 9,legend: {show: false,// position: 'right',// float: 'center',// itemGap: 10,// padding: 1,// lineHeight: 26,// margin: 25,// borderWidth :1},dataLabel: false,// dataPointShape: true,background: '#FFFFFF',pixelRatio: _this.data.pixelRatio,series: chartData.series,animation: true,width: _this.data.cWidth * _this.data.pixelRatio,height: _this.data.cHeight * _this.data.pixelRatio,extra: {pie:{labelWidth: 3,border: true,borderWidth: 1,ringWidth : 15}}}) },touchPie(e) {canvaPie.showToolTip(e, {format: function (item) {return item.name + item.data + '盒'}})}}})