uCharts图表在小程序中的使用

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

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