uCharts图表在小程序中的使用

uCharts是一款高性能跨平台图表库,支持多种平台如H5、APP及各大主流小程序框架等。该图表库提供了丰富的图表类型,包括饼图、线图、柱状图等,并且支持自定义配置项来满足不同场景的需求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.uCharts

简介
高性能跨平台图表库,支持H5、APP、小程序(微信小程序、支付宝小程序、钉钉小程序、百度小程序、头条小程序、QQ小程序、360小程序)、Vue、Taro等更多支持canvas的框架平台,支持饼图、圆环图、线图、柱状图、区域图、雷达图、圆弧进度图、仪表盘、K线图、条状图、混合图、玫瑰图、漏斗图、词云图、时序图、散点图、气泡图、地图。

uCharts—gitee
uCharts—官网

效果展示

uCharts图表
在这里插入图片描述

2.uCharts使用以及相关的配置

1.快速上手

快速上手

在这里插入图片描述

2.相关配置

在线生成工具
在这里插入图片描述
在这里插入图片描述
修改一些默认的内容
在这里插入图片描述

<qiun-data-charts id="echart" type="arcbar" :opts="options" :chartData="chartData" style="width: 180rpx;height: 180rpx" />
	export default {
		data() {
			return {
				options: {
					"title": {
						"name": "",
						"fontSize": 25,
						"color": "#00FF00"
					},
					"subtitle": {
						"name": "",
						"fontSize": 15,
						"color": "#666666"
					},
					fontSize: 10,
					extra: {
						arcbar: {
							type: 'circle',
							width: 4,
							startAngle: 1.5,
							endAngle: 1.5
						}
					}
				}	
			}
		}
    }

在这里插入图片描述

上面的数字样式定位在圆弧图表会产生一个问题:在手机和真机测试的时候,canvas会穿透,canvas会在最顶层,将需要定位在canvas上的内容使用cover-view进行包裹

cover-view

当横坐标的文字过长,将文字进行倾斜

	options: {
		xAxis: {
			rotateLabel: true,
			axisLabel: {  
				interval:0,  
				rotate:30  
			}  
		}
	}

在这里插入图片描述

很多配置直接在在线生成工具的左侧配置中勾选,右侧会有对应的效果,可自行查看对应的效果

在支付宝小程序使用ucharts可以通过`<canvas>`标签和`canvas`绘图的方式来实现。具体步骤如下: 1. 下载并引入uCharts库,可以将下载好的文件夹放在项目的`utils`文件夹下,然后在需要使用的页面对应的`js`文件中引入,并创建绘图对象,例如: ```javascript import uCharts from '../../utils/u-charts/u-charts.min.js'; Page({ data: { chartData: null, pixelRatio: 1, windowWidth: 320 }, onLoad() { let windowWidth = 320; try { const res = wx.getSystemInfoSync(); windowWidth = res.windowWidth; this.setData({ pixelRatio: res.pixelRatio, windowWidth: windowWidth }); } catch (e) { console.error('获取系统信息失败:', e); } const chartData = { categories: ['1月', '2月', '3月', '4月', '5月', '6月'], series: [{ name: '成交量', data: [10, 20, 30, 40, 50, 60] }, { name: '成交额', data: [100, 200, 300, 400, 500, 600] }] }; this.setData({ chartData: chartData }); const context = wx.createCanvasContext('chart'); const chart = new uCharts({ $this: this, canvasId: 'chart', type: 'column', width: windowWidth, height: 200, pixelRatio: this.data.pixelRatio, legend: { show: true, position: 'top', fontSize: 14, fontFamily: 'Arial', fontWeight: 'bold', fontColor: '#666', lineHeight: 20 }, dataLabel: { show: true, formatter: (name, value) => { return value; }, fontSize: 12, fontFamily: 'Arial', fontWeight: 'normal', fontColor: '#666', lineHeight: 20, margin: 10 }, xAxis: { data: chartData.categories, axisLine: { show: true, lineColor: '#ccc', lineWidth: 1 }, axisTick: { show: true, lineColor: '#ccc', lineWidth: 1, length: 5, spacing: 5 }, axisLabel: { show: true, fontSize: 12, fontFamily: 'Arial', fontWeight: 'normal', fontColor: '#666', rotate: 0 }, boundaryGap: true }, yAxis: { axisLine: { show: true, lineColor: '#ccc', lineWidth: 1 }, axisTick: { show: true, lineColor: '#ccc', lineWidth: 1, length: 5, spacing: 5 }, axisLabel: { show: true, fontSize: 12, fontFamily: 'Arial', fontWeight: 'normal', fontColor: '#666', rotate: 0 }, splitLine: { show: true, lineColor: '#ccc', lineWidth: 1, type: 'solid' } }, series: chartData.series, animation: true, animationDuration: 1000, animationEasing: 'linear' }); chart.draw(); } }); ``` 2. 在小程序页面的`wxml`文件中添加`<canvas>`标签,例如: ```html <canvas id="chart" style="width:{{windowWidth}}px;height:200px;"></canvas> ``` 其中,`id`是`canvas`的唯一标识符,`style`属性用于设置`canvas`的宽度和高度。 3. 在小程序页面的`wxss`文件中设置`<canvas>`标签的样式,例如: ```css canvas { width: 100%; height: 100%; } ``` 4. 在小程序页面的`js`文件中实现`canvas`的绘图逻辑,例如: ```javascript const context = wx.createCanvasContext('chart'); context.beginPath(); context.setStrokeStyle('#000000'); context.setLineWidth(2); context.moveTo(0, 0); context.lineTo(100, 100); context.stroke(); context.draw(); ``` 以上就是在支付宝小程序使用uCharts绘制图表的基本流程,具体的图表样式和配置可以根据需求进行调整。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值