uCharts 图表

一、使用背景

前端图表的插件库有很多，例如echarts、uCharts等等
echarts 更适合应用于后台管理系统或者pc 端
当微信小程序使用 echarts 并且引用 echarts 他会提示一段话然后报错

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

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

uCharts官网 https://www.ucharts.cn

uCharts git 地址 https://gitee.com/uCharts/uCharts

下载cCharts 地址 https://gitee.com/uCharts/uCharts

下载并在本地引入

三、在微信小程序中使用 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.js
import 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('https://www.ucharts.cn/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 + '盒'}})}}
})

uCharts 图表相关推荐

uCharts图表在小程序中的使用
1.uCharts 简介高性能跨平台图表库,支持H5.APP.小程序(微信小程序.支付宝小程序.钉钉小程序.百度小程序.头条小程序.QQ小程序.360小程序).Vue.Taro等更多支持canvas ...
uniapp使用ucharts图表及问题汇总
uniapp使用ucharts图表及问题汇总本文主要描述如何通过组件的方式引入ucharts图表,并汇总了使用过程中踩到的坑,如层级过高问题.默认显示提示框tooltip.提示框显示内容格式化等等. ...
uniapp 使用秋云uCharts图表组件、echarts图表组件
一.uniapp 使用秋云uCharts图表组件 1.我们的项目是依赖uniapp的vue-cli项目操作:将uni_modules目录复制到src目录,即src/uni_modules. 2.页面 ...
uniapp中秋云uCharts图表组件基础使用
官方文档:秋云uCharts图表组件 1.导入到对应项目中根目录会多出文件夹uni_modules 柱状图基础使用完整代码: <template><view><vie ...
uniapp 中使用图表（秋云uCharts图表组件）
在用uniapp做项目时,遇到要做折线图的需求,但是又不想用echarts,在uniapp中dom操作非常的麻烦.于是找到了一个专门为app而生的图表插件uCharts(秋云uCharts图表组件), ...
微信小程序使用 uCharts 图表
前端图表的插件库有很多 echarts 跟 uCharts - echarts 更适合应用于后台管理系统或者pc 端当小程序使用echarts 并且引用echarts 他会提示一段话然后报错 ...
uni-app 使用uCharts图表插件
1.下载:https://ext.dcloud.net.cn/plugin?id=271 2.使用实例 <template><view class="qiun-column ...
uni-app使用ucharts图表 ##uni-app ##uCharts
需求: 首页需要放一个圆环图显示数据. 查找文档:uni-app插件市场uCharts高性能跨全端图表 https://ext.dcloud.net.cn/plugin?id=271 uCharts官 ...
uni-app、Vue3 + ucharts 图表 H5 无法渲染
当学习成为了习惯,知识也就变成了常识.感谢各位的点赞.收藏和评论. 新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn 文章已收录到 github,欢迎 Watch 和 Star. 简介 ...
ucharts 图表接口数据处理
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.ucharts的数据格式二.使用步骤 1.数据处理总结前言将接口返回的数据做一下简单处理,处理成组件要求的 ...

uCharts 图表

一、使用背景

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

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

uCharts 图表相关推荐

最新文章

热门文章