在uni-app框架中简单实现数据可视化

最新推荐文章于 2024-10-11 21:34:22 发布

qq253423846

最新推荐文章于 2024-10-11 21:34:22 发布

阅读量3.8k

点赞数 4

本文链接：https://blog.csdn.net/qq_40609692/article/details/99692655

版权

图表库的选择

大家都知道前端实现数据可视化可以使用echarts、antV、F2.js、等等图表库都能实现数据的可视化。

但是由于需要实现跨平台、多端运行。我们在这里选择uCharts。肯定你要问为什么要选择这个呢？

uCharts相比F2.js和Echarts的复杂的设置，uCharts几乎可是实现傻瓜式的配置

Echarts在跨端使用更复杂、uCharts只需要简单的`canvas`标签轻松区别搞定，简单易于维护。

uCharts可以实现简单的改造后的插件可以跨端使用、支持H5、小程序（微信/支付宝/百度/头条/钉钉）调用简单方便、性能体验极好、支持入场动画、支持单页多页图表。下面跟着我一起来实现吧

1. 下载uCharts图表库

进入这个地址： https://ext.dcloud.net.cn/plugin?id=271 下载图表库，将其导入到uniapp项目中

使用下列两步都可以

并将其导入到项目中放在components目录下

2. 在项目中使用uCharts

在自己的页面中导入u-charts.js 文件

import uCharts from '../../components/u-charts/u-charts.js'

然后就可以在template中写上一个canvas标签使用了

<view class="qiun-charts" >
	<canvas canvas-id="canvasPie" id="canvasPie" class="charts" @touchstart="touchPie">            
    </canvas>
</view>

暂时在data字段中写上自己的假数据

data() {
	return {
		chartData: {
		"series": [{
			"name": "一班",
			"data": 50
			}, {
			"name": "二班",
			"data": 30
			}, {
			"name": "三班",
			"data": 20
			}, {
			"name": "四班",
			"data": 18
			}, {
			"name": "五班",
			"data": 8
		}]
	    }
    }
},

初始化uCharts

new uCharts({
	$this:this,
	canvasId: canvasId,
	type: 'pie',
	fontSize:11,
	legend:{show:true},
	background:'#FFFFFF',
	pixelRatio:1,
	series: chartData.series,
	animation: true,
	width: this.cWidth,
	height: this.cHeight,
	dataLabel: true,
	extra: {
		pie: {
		  labelWidth:15
		}
	},
});

就是这么简单就可显示图标啦