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

news2024/10/6 0:34:20

使用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>

说明

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

源码获取关注公众号「码农园区」，回复 【uniapp源码】
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1258167.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Lazada测评怎么做？

Lazada测评怎么做？

国内电商行业的发展日趋激烈&#xff0c;卖家想要脱颖而出非常困难&#xff0c;许多卖家选择入驻跨境电商平台开店&#xff0c; 跨境电商平台吸引了许多卖家入驻&#xff0c;而最近有很多朋友在私信问我关于Lazada测评的一些事情 Lazada产品测评流程步骤 怎么测评 这个怎么测…
阅读更多...
ZYNQ PL 中断请求

ZYNQ PL 中断请求

1 中断概念 中断学习 2 ZYNQ 中断框图 上图为 zynq 中断分布框图。可以看到部分 PL 到 PS 部分的中断&#xff0c;经过中断控制分配器&#xff08;ICD&#xff09;&#xff0c; 同时进入 CPU1 和 CPU0。查询下面表格&#xff0c;可以看到 PL 到 PS 部分一共有 20 个中断可以使…
阅读更多...
计算机毕业设计|基于SpringBoot+MyBatis框架的电脑商城的设计与实现（订单和AOP）

计算机毕业设计|基于SpringBoot+MyBatis框架的电脑商城的设计与实现（订单和AOP）

计算机毕业设计|基于SpringBootMyBatis框架的电脑商城的设计与实现&#xff08;订单和AOP&#xff09; 该项目分析着重于设计和实现基于SpringBootMyBatis框架的电脑商城。首先&#xff0c;通过深入分析项目所需数据&#xff0c;包括用户、商品、商品类别、收藏、订单、购物车…
阅读更多...
中科亿海微除法器（DIVIDE）

中科亿海微除法器（DIVIDE）

技术背景 技术概述 FPGA实现除法运算是一个比较复杂的过程&#xff0c;因为硬件逻辑与软件程序的区别。如果其中一个操作数为常数&#xff0c;可以通过简单的移位与求和操作代替&#xff0c;但用硬件逻辑完成两变量间除法运算会占用较多的资源&#xff0c;电路结构复杂&#xf…
阅读更多...
文件加密软件哪个好？文件加密软件大盘点

文件加密软件哪个好？文件加密软件大盘点

在使用电脑时&#xff0c;我们需要将机密文件、个人隐私等数据存放在电脑中。为了保护文件的安全&#xff0c;我们需要使用文件加密软件来进行保护。那么&#xff0c;文件加密软件哪个好呢&#xff1f;下面我们就来盘点一下。 超级加密3000 超级加密3000是一款专业的数据加密软…
阅读更多...
office tool plus工具破解word、visio等软件步骤

office tool plus工具破解word、visio等软件步骤

第一步&#xff1a;下载工具 破解需要用到office tool plus软件 office tool plus软件下载地址&#xff1a;Office Tool Plus 官方网站 - 一键部署 Office 选择其中一个下载到本地&#xff08;本人选择的是第一个的云图小镇下载方式&#xff09; 第二步&#xff1a;启动工具 …
阅读更多...
APP项目的推广方法

APP项目的推广方法

APP项目的成功与否与其推广策略密切相关&#xff0c;综合使用这些推广方法&#xff0c;可以帮助APP项目更广泛地被认知&#xff0c;吸引更多的用户&#xff0c;并提高应用在市场中的竞争力。以下是一些常用的APP推广方法&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公…
阅读更多...
echarts 通用线性图

echarts 通用线性图

echarts 通用线性图 getLineData() {const myChart echarts.init(this.$refs.chartDom);const option {tooltip: {trigger: axis,},legend: {show: false,textStyle: {fontSize: 14, //字体大小color: #ffffff, //字体颜色},data: [AAA, BBB],},grid: {show: true,left: 10%,…
阅读更多...
借助arthas 性能调优全过程

借助arthas 性能调优全过程

使用 arthas 的trace 命令分析方法耗时瓶颈&#xff1a; 可以看出 bindReloadZoneTimeLimite 耗时最久&#xff0c; 通过分析Bind 底层&#xff0c;将业务粒度进行拆分&#xff0c;加入并发执行 再次使用arthas 追踪单个方法耗时时间&#xff1a; 核心耗时方法&#xff0c…
阅读更多...
pc数据通过插槽来设置启用未启用

pc数据通过插槽来设置启用未启用

使用三元表达式 <el-table-column prop"state" label"启用" width"180"><template v-slot"{ row }"><span>{{row.state 1 ? "已启用" : row.state 0 ? "未启用" : "无"}}</sp…
阅读更多...
一加7Pro为PixelExperience系统编译kernelsu

一加7Pro为PixelExperience系统编译kernelsu

前言 之前写了一篇文章为一加七Pro(LineageOs17.1 4.14内核版本)编译KernelSu&#xff0c;最近想换个系统玩玩&#xff0c;因为我发现我自己编译的系统总是被某些APP风控了&#xff0c;比如淘宝有些活动就参与不了。 正好可以试试PixelExperience&#xff0c;顺便为PixelExpe…
阅读更多...
Shopee买家号想要多开怎么解决？

Shopee买家号想要多开怎么解决？

拥有多个Shopee买家号有很多优势。多账号可以帮助卖家获得更多流量、还能帮助提供关键词排名、提高销量等。 但是要管理多个Shopee买家号并非易事。面对不同账号的登录、注销和切换&#xff0c;可能会花费大量的时间和精力。而且&#xff0c;Shopee平台对于使用同一IP地址同时登…
阅读更多...
淘宝平台商品详情平台订单接入说明

淘宝平台商品详情平台订单接入说明

一 文档说明 本文档面向对象为电商平台商品详情数据和订单进行管理的第三方开发者或自研商家 二 支持范围 目前API已经支持订单的接单、取消、退单处理等操作。如果您的订单管理需求现有API不能满足&#xff0c;可以联系我们提出API需求。 参数说明 通用参数说明 参数不要乱…
阅读更多...
[学习笔记]IK分词器的学习

[学习笔记]IK分词器的学习

IK分词器有几种模式 # 测试分词器 POST /_analyze {"text":"黑马程序员学习java太棒了","analyzer": "standard" }# 测试分词器 POST /_analyze {"text":"黑马程序员学习java太棒了","analyzer": &quo…
阅读更多...
2023机器人灵巧手的分类与商业化应用及未来市场规模分析报告

2023机器人灵巧手的分类与商业化应用及未来市场规模分析报告

今天分享的是机器人系列深度研究报告&#xff1a;《2023机器人灵巧手的分类与商业化应用及未来市场规模分析报告》。 &#xff08;报告出品方&#xff1a;深度行业分析研究&#xff09; 报告共计&#xff1a;26页 1 灵巧手是人形机器人重要的运控交互部件&#xff0c;近年来海…
阅读更多...
Node——事件的监听与触发

Node——事件的监听与触发

Node.js是由事件驱动的&#xff0c;每个任务都可以当作一个事件来处理&#xff0c;本贴将对Node.js中的events模块及其中处理事件的类EventEmitter的使用进行详细讲解。 1、EventEmitter对象 在JavaScript中&#xff0c;通过事件可以处理许多用户的交互&#xff0c;比如鼠标…
阅读更多...
定制网站软件app对企业的优势有哪些？|小程序搭建

定制网站软件app对企业的优势有哪些？|小程序搭建

定制网站软件app对企业的优势有哪些&#xff1f;|小程序搭建 定制网站软件和App对企业来说有许多优势。本文将探讨其中的一些重要优势。 首先&#xff0c;定制网站软件和App能够为企业提供个性化的解决方案。通过定制开发&#xff0c;企业可以根据自身的需求和目标来设计和构建…
阅读更多...
【23真题】罕见211！数一配英二！

【23真题】罕见211！数一配英二！

今天分享的是23年合肥工业大学833的信号与系统数字信号处理试题及解析。合工大833考数一英二&#xff0c;这样的搭配还是很少见的。 本套试卷难度分析&#xff1a;22年合肥工业大学833考研真题&#xff0c;我也发布过&#xff0c;若有需要&#xff0c;戳这里自取!平均分为80和…
阅读更多...
操作指南 | 如何使用API3请求链下数据

操作指南 | 如何使用API3请求链下数据

API3是一种去中心化解决方案&#xff0c;用于向智能合约平台提供传统且可扩展的API服务&#xff0c;使开发者能够访问如喂价和QRNG等链下资源。 API3由DAO管理&#xff0c;致力于在智能合约功能中轻松访问各种有用数据。 构建者在Moonbeam上可以访问不同的API3服务&#xff1…
阅读更多...
HTML5原生视频播放器组件video的videocontrolslist属性详解

HTML5原生视频播放器组件video的videocontrolslist属性详解

HTML5提供了内置的视频播放控件，其中videocontrolslist是其中一个很有用的属性。videocontrolslist属性可以用于告诉浏览器在视频播放过程中应该显示哪些默认的用户界面控件。下面我们将从几个方面来介绍videocontrolslist的详细使用。 一、启用videocontrolslist videocont…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023