【插件、图表】7种图表漂亮丰富uniCharts（附精选源码32套，涵盖商城团购等）

码农园区
128 阅读6分钟

使用unicharts实现折线图、区域图、柱状图、饼状图、雷达图、环形图、可拖动折线图

<template>
	<view class="content">
	    <view @tap="gotoPage('line')" class="list-item">
			<text>折线图</text>
		</view>
	    <view @tap="gotoPage('scrollline')" class="list-item">
			<text>可拖动折线图</text>
		</view>
	    <view @tap="gotoPage('column')" class="list-item">
			<text>柱状图</text>
		</view>
	    <view @tap="gotoPage('pie')" class="list-item">
			<text>饼状图</text>
		</view>
	    <view @tap="gotoPage('ring')" class="list-item">
			<text>环形图</text>
		</view>
	    <view @tap="gotoPage('area')" class="list-item">
			<text>区域图</text>
		</view>
	    <view @tap="gotoPage('radar')" class="list-item">
			<text>雷达图</text>
		</view>
	</view>
</template>

在这里插入图片描述 区域图效果预览： 在这里插入图片描述 区域图主要代码

<template>
	<view class="content">
	   <canvas canvas-id="areaCanvas" class="canvas" @touchstart="touchHandler"></canvas>
	</view>
</template>

<script>
	var uniCharts = require('../../../static/js/uniCharts.js');
	var areaChart = null;
	export default {
		data: {}, 
		onLoad: function (e) {
				var windowWidth = 320;
				try {
					var res = wx.getSystemInfoSync();
					windowWidth = res.windowWidth;
				} catch (e) {
					console.error('getSystemInfoSync failed!');
				}
				
				areaChart = new uniCharts({
						canvasId: 'areaCanvas',
						type: 'area',
						categories: ['1', '2', '3', '4', '5', '6'],
						animation: true,
						series: [{
								name: '成交量1',
								data: [32, 45, null, 56, 33, 34],
								format: function (val) {
										return val.toFixed(2) + '万';
								}
						}],
						yAxis: {
								title: '成交金额 (万元)',
								format: function (val) {
										return val.toFixed(2);
								},
								min: 0,
								fontColor: '#8085e9',
								gridColor: '#8085e9',
								titleFontColor: '#f7a35c'
						},
						xAxis: {
								fontColor: '#7cb5ec',
								gridColor: '#7cb5ec'
						},
						extra: {
								legendTextColor: '#cb2431'
						},
						width: windowWidth,
						height: 200
				});
		},
		methods:{
			touchHandler: function (e) {
					console.log(areaChart.getCurrentDataIndex(e));
					areaChart.showToolTip(e);
			},   
		}
	}
</script>

折线图效果预览 在这里插入图片描述 折线图主要代码

<template>
	<view class="content">
		<canvas canvas-id="lineCanvas" class="canvas" :disable-scroll="true" @touchstart="touchHandler"></canvas>
		<button type="primary" @tap="updateData">更新数据</button>
	</view>
</template>
<script>
	var uniCharts = require('../../../static/js/uniCharts.js');
	var lineChart = null;
	export default {
		data: {
		},
		onLoad: function (e) {
			var windowWidth = 320;
			try {
				var res = uni.getSystemInfoSync();
				windowWidth = res.windowWidth;
			} catch (e) {
				console.error('getSystemInfoSync failed!');
			}
			
			var simulationData = this.createSimulationData();
			lineChart = new uniCharts({
				canvasId: 'lineCanvas',
				type: 'line',
				categories: simulationData.categories,
				animation: true,
				// background: '#f5f5f5',
				series: [{
					name: '成交量1',
					data: simulationData.data,
					format: function (val, name) {
						return val.toFixed(2) + '万';
					}
				}, {
					name: '成交量2',
					data: [2, 0, 0, 3, null, 4, 0, 0, 2, 0],
					format: function (val, name) {
						return val.toFixed(2) + '万';
					}
				}],
				xAxis: {
					disableGrid: true
				},
				yAxis: {
					title: '成交金额 (万元)',
					format: function (val) {
						return val.toFixed(2);
					},
					min: 0
				},
				width: windowWidth,
				height: 200,
				dataLabel: false,
				dataPointShape: true,
				extra: {
					lineStyle: 'curve'
				}
			});
		},
		methods:{
			
			touchHandler: function (e) {
				console.log(lineChart.getCurrentDataIndex(e));
				lineChart.showToolTip(e, {
					// background: '#7cb5ec',
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			},    
			createSimulationData: function () {
				var categories = [];
				var data = [];
				for (var i = 0; i < 10; i++) {
					categories.push('2016-' + (i + 1));
					data.push(Math.random()*(20-10)+10);
				}
				// data[4] = null;
				return {
					categories: categories,
					data: data
				}
			},
			updateData: function () {
				var simulationData = this.createSimulationData();
				var series = [{
					name: '成交量1',
					data: simulationData.data,
					format: function (val, name) {
						return val.toFixed(2) + '万';
					}
				}];
				lineChart.updateData({
					categories: simulationData.categories,
					series: series
				});
			},
		}
	}
</script>

柱状图预览效果 在这里插入图片描述 柱状图主要代码

<template>
	<view class="content">
		<view class="title">
			<text>{{chartTitle}}</text>
			<view v-if="!isMainChartDisplay" class="back-btn" @tap="backToMainChart">返回</view>
		</view>
	    <canvas canvas-id="columnCanvas" class="canvas" @touchstart="touchHandler"></canvas>
	    <view style="text-align:center">点击数据每一项查看详情</view>
	</view>
</template>

<script>
	var uniCharts = require('../../../static/js/uniCharts.js');
	var columnChart = null;
	var chartData = {
	    main: {
	        title: '总成交量',
	        data: [15, 20, 45, 37],
	        categories: ['2012', '2013', '2014', '2015']
	    },
	    sub: [{
	        title: '2012年度成交量',
	        data: [70, 40, 65, 100, 34, 18],
	        categories: ['1', '2', '3', '4', '5', '6']
	    }, {
	        title: '2013年度成交量',
	        data: [55, 30, 45, 36, 56, 13],
	        categories: ['1', '2', '3', '4', '5', '6']
	    }, {
	        title: '2014年度成交量',
	        data: [76, 45, 32, 74, 54, 35],
	        categories: ['1', '2', '3', '4', '5', '6']                
	    }, {
	        title: '2015年度成交量',
	        data: [76, 54, 23, 12, 45, 65],
	        categories: ['1', '2', '3', '4', '5', '6']
	    }]
	};
	export default {
		data: {
				chartTitle: '总成交量',
				isMainChartDisplay: true
		},
		onReady: function (e) {
			var windowWidth = 320;
			try {
			  var res = uni.getSystemInfoSync();
			  windowWidth = res.windowWidth;
			} catch (e) {
			  console.error('getSystemInfoSync failed!');
			}

			columnChart = new uniCharts({
				canvasId: 'columnCanvas',
				type: 'column',
				animation: true,
				categories: chartData.main.categories,
				series: [{
					name: '成交量',
					data: chartData.main.data,
					format: function (val, name) {
						return val.toFixed(2) + '万';
					}
				}],
				yAxis: {
					format: function (val) {
						return val + '万';
					},
					title: 'hello',
					min: 0
				},
				xAxis: {
					disableGrid: false,
					type: 'calibration'
				},
				extra: {
					column: {
						width: 15
					}
				},
				width: windowWidth,
				height: 200,
			});
		},
		methods:{
			setData:function(obj){
				let that = this;
				Object.keys(obj).forEach(function(key){
					 that.$set(that.$data,key,obj[key])

				});
			},
			backToMainChart: function () {
				this.setData({
					chartTitle: chartData.main.title,
					isMainChartDisplay: true
				});
				columnChart.updateData({
					categories: chartData.main.categories,
					series: [{
						name: '成交量',
						data: chartData.main.data,
						format: function (val, name) {
							return val.toFixed(2) + '万';
						}
					}]
				});
			},
			touchHandler: function (e) {
				var index = columnChart.getCurrentDataIndex(e);
				if (index > -1 && index < chartData.sub.length && this.isMainChartDisplay) {
					this.setData({
						chartTitle: chartData.sub[index].title,
						isMainChartDisplay: false
					});
					columnChart.updateData({
						categories: chartData.sub[index].categories,
						series: [{
							name: '成交量',
							data: chartData.sub[index].data,
							format: function (val, name) {
								return val.toFixed(2) + '万';
							}
						}]
					});
		
				}
			},
		}
	}
</script>

<style>
	.title {
		text-align: center;
		position: relative;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.back-btn {
		margin-left: 20rpx;
		color: red;
	}
</style>

饼状图效果预览 在这里插入图片描述

饼状图主要代码

<template>
	<view class="content">
	   <canvas canvas-id="pieCanvas" class="canvas" @touchstart="touchHandler"></canvas>
	</view>
</template>

<script>
	var uniCharts = require('../../../static/js/uniCharts.js');
	var pieChart = null;
	export default {
		data: {}, 
		onLoad: function (e) {
			var windowWidth = 320;
			try {
				var res = wx.getSystemInfoSync();
				windowWidth = res.windowWidth;
			} catch (e) {
				console.error('getSystemInfoSync failed!');
			}

			pieChart = new uniCharts({
				animation: true,
				canvasId: 'pieCanvas',
				type: 'pie',
				series: [{
					name: '成交量1',
					data: 15,
				}, {
					name: '成交量2',
					data: 35,
				}, {
					name: '成交量3',
					data: 78,
				}, {
					name: '成交量4',
					data: 63,
				}, {
					name: '成交量2',
					data: 35,
				}, {
					name: '成交量3',
					data: 78,
				}, {
					name: '成交量4',
					data: 63,
				}, {
					name: '成交量2',
					data: 35,
				}, {
					name: '成交量3',
					data: 78,
				}, {
					name: '成交量3',
					data: 78,
				}],
				width: windowWidth,
				height: 300,
				dataLabel: true,
			});
		},
		methods:{
			touchHandler: function (e) {
					console.log(pieChart.getCurrentDataIndex(e));
			},   
		}
	}
</script>

雷达图预览效果 在这里插入图片描述

雷达图主要代码

<template>
	<view class="content">
	   <canvas canvas-id="radarCanvas" class="canvas"  @touchstart="touchHandler"></canvas>
	</view>
</template>

<script>
	var uniCharts = require('../../../static/js/uniCharts.js');
	var radarChart = null;
	export default {
		data: {}, 
		onLoad: function (e) {
			var windowWidth = 320;
			try {
				var res = wx.getSystemInfoSync();
				windowWidth = res.windowWidth;
			} catch (e) {
				console.error('getSystemInfoSync failed!');
			}
	
			radarChart = new uniCharts({
				canvasId: 'radarCanvas',
				type: 'radar',
				categories: ['1', '2', '3', '4', '5', '6'],
				series: [{
					name: '成交量1',
					data: [90, 110, 125, 95, 87, 122]
				}],
				width: windowWidth,
				height: 200,
				extra: {
					radar: {
						max: 150
					}
				}
			});
		},
		methods:{
			touchHandler: function (e) {
					console.log(radarChart.getCurrentDataIndex(e));
			},   
		}
	}
</script>

环形图预览效果 在这里插入图片描述

环形图主要代码

<template>
	<view class="content">
		<canvas canvas-id="ringCanvas" class="canvas" @touchstart="touchHandler"></canvas>
		<view>调用stopAnimation终止动画，并监听渲染完成事件</view>
		<button type="primary" @tap="updateData" style="margin-top:30rpx">更新title</button>
	</view>
</template>
<script>
	var uniCharts = require('../../../static/js/uniCharts.js');
	var ringChart = null;
	export default {
		data: {
		},     
		onReady: function (e) {
			var windowWidth = 320;
			try {
				var res = uni.getSystemInfoSync();
				windowWidth = res.windowWidth;
			} catch (e) {
				console.error('getSystemInfoSync failed!');
			}

			ringChart = new uniCharts({
				animation: true,
				canvasId: 'ringCanvas',
				type: 'ring',
				extra: {
					ringWidth: 25,
					pie: {
						offsetAngle: -45
					}
				},
				title: {
					name: '70%',
					color: '#7cb5ec',
					fontSize: 25
				},
				subtitle: {
					name: '收益率',
					color: '#666666',
					fontSize: 15
				},
				series: [{
					name: '成交量1',
					data: 15,
					stroke: false
				}, {
					name: '成交量2',
					data: 35,
					 stroke: false
				}, {
					name: '成交量3',
					data: 78,
					stroke: false
				}, {
					name: '成交量4',
					data: 63,
					 stroke: false
				}],
				disablePieStroke: true,
				width: windowWidth,
				height: 200,
				dataLabel: false,
				legend: false,
				background: '#f5f5f5',
				padding: 0
			});
			ringChart.addEventListener('renderComplete', () => {
				console.log('renderComplete');
			});
			setTimeout(() => {
				ringChart.stopAnimation();
			}, 500);
		},
		methods:{
			touchHandler: function (e) {
				console.log(ringChart.getCurrentDataIndex(e));
			},
			updateData: function () {
				ringChart.updateData({
					title: {
						name: '80%'
					},
					subtitle: {
						color: '#ff0000'
					}
				});
			},
		}
	}
</script>

可拖动折线图预览效果 在这里插入图片描述

可拖动折线图主要代码

<template>
	<view class="content">
		<canvas canvas-id="lineCanvas" :disable-scroll="true" class="canvas" @touchstart="touchHandler" @touchmove="moveHandler" @touchend="touchEndHandler"></canvas>
	</view>
</template>
<script>
	var uniCharts = require('../../../static/js/uniCharts.js');
	var lineChart = null;
	var startPos = null;
	export default {
		data: {
		},
		onLoad: function (e) {
			var windowWidth = 320;
			try {
				var res = uni.getSystemInfoSync();
				windowWidth = res.windowWidth;
			} catch (e) {
				console.error('getSystemInfoSync failed!');
			}
			
			var simulationData = this.createSimulationData();
			lineChart = new uniCharts({
				canvasId: 'lineCanvas',
				type: 'line',
				categories: simulationData.categories,
				animation: false,
				series: [{
					name: '成交量1',
					data: simulationData.data,
					format: function (val, name) {
						return val.toFixed(2) + '万';
					}
				}],
				xAxis: {
					disableGrid: false
				},
				yAxis: {
					title: '成交金额 (万元)',
					format: function (val) {
						return val.toFixed(2);
					},
					min: 0
				},
				width: windowWidth,
				height: 200,
				dataLabel: true,
				dataPointShape: true,
				enableScroll: true,
				extra: {
					lineStyle: 'curve'
				}
			});
		},
		methods:{
			touchHandler: function (e) {
				lineChart.scrollStart(e);
			},
			moveHandler: function (e) {
				lineChart.scroll(e);
			},
			touchEndHandler: function (e) {
				lineChart.scrollEnd(e);
				lineChart.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});        
			},
			createSimulationData: function () {
				var categories = [];
				var data = [];
				for (var i = 0; i < 10; i++) {
					categories.push('201620162-' + (i + 1));
					data.push(Math.random()*(20-10)+10);
				}
				return {
					categories: categories,
					data: data
				}
			},
		}
	}
</script>

最后

精选32套源码目录：

python
复制代码
IT之家小程序版客户端(使用 Mpvue 开发，兼容 Web)ithome-lite-master.zip

mpvue 仿网易严选mpvue-shop-master.zip

mpvue-音乐播放器mpvue-music-master.zip

mpvue性能测试与体验miniweibo-master.zip

mpvue改造的日历.zip

mpvue框架仿滴滴出行didi-master.zip

mpVue高仿美团小程序教程mpvue-meituan-master.zip

uni APP自动更新并安装.vue

uni-app nvue沉浸式状态栏(线性渐变色).vue

uni-app 二维码生成器分享wxqrcode.zip

uni-app 侧边导航分类,适合商品分类页面uni-app-left-navigation-master.zip

uni-app 自定义底部导航栏uni-app-bottom-navigation-master.zip

uni-app全局变量的几种实现方式.zip

uni-app的markdown富文本编辑器插件uniapp-markdown-master.zip

uni-app自定义导航栏title-custom.zip

uniapp聊天实例，支持图片，语音，表情.zip

uniapp选择器,包含一级,二级级联,三级级联uniapp-picker-master.zip

vue-mpvue-ChatRobot聊天机器人vue-mpvue-ChatRobot-master.zip

【小程序】CNode社区mpvue-cnode-master.zip

【插件、图表】7种图表漂亮丰富uniCharts.zip

一款播课类小程序, 基于 mpvue 构建mp-podcast-mpvue-master.zip

云档新版小程序端，基于mpvue开发cloud-doc-v2-master.zip

仿uc浏览器列表.vue

仿扎克新闻mpZAKER-master.zip

仿网易云UImusic播放器mpvue-music-master.zip

仿追书神器的小说阅读器小程序wx-book-master.zip

参照米家APP布局和样式,编写的一款智能家居小程序smart-home-master.zip

商城实例mpvue-xbyjShop-master.zip

基于 mpvue 实现豆瓣电影微信小程序mpvue-douban-master.zip

基于mpvue的优酷mpvue-youku-master.zip

校园助手示例SHUhelper-master.zip

类似mui中的chat(聊天窗口)实现uniapp-chat-master.zip

美团外卖(第三方)开源程序mpvue-master.zip

美食搜索mpvue-FG-master.zip

豆瓣平分mpvue-douban-pingfen-master.zip

顶部tabbar.vue

源码截图：

image.png

说明

如果本项目对您有帮助，欢迎 "点赞，关注" 支持一下 谢谢~

源码获取关注公众号「码农园区」，回复 【uniapp源码】

avatar
文章
阅读
粉丝