uCharts图表在小程序中的使用

最新推荐文章于 2025-05-31 22:01:11 发布

原创最新推荐文章于 2025-05-31 22:01:11 发布 · 2.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #微信小程序 #javascript

小程序同时被 2 个专栏收录

5 篇文章

订阅专栏

Echarts的一些使用技巧

4 篇文章

订阅专栏

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  
			}  
		}
	}

在这里插入图片描述

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