uniapp 微信小程序使用图表

使用的是秋云 ucharts 直接在hbuilder插件市场进行下载导入项目中,多端支持

下载地址秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场

导入成功后这里就能看到导入的插件啦

导入项目后就可以直接在页面中通过组件使用了 不需要其余配置 使用简单

参考案例

复制代码
<template>
	<view class="content">
		<view class="chart-box">
			<qiun-data-charts 
				type="column"
				:opts="opts"
				:chartData="chartData"
			/>
		</view>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '秋云图表示例',
				chartData: {},
				opts: {
					color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE"],
					padding: [15, 15, 0, 5],
					legend: {
						show: true,
						position: "top",
						float: "center"
					},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [
							{
								min: 0
							}
						]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						}
					}
				}
			}
		},
		onLoad() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				// 模拟数据
				let res = {
					categories: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
					series: [
						{
							name: "销量",
							data: [35, 8, 25, 37, 4, 20, 30]
						},
						{
							name: "访问量",
							data: [70, 40, 65, 100, 44, 68, 90]
						}
					]
				};
				this.chartData = {
					categories: res.categories,
					series: res.series
				};
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.chart-box {
		width: 100%;
		height: 500rpx;
		margin-top: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
		margin-top: 30rpx;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
相关推荐
打不着的大喇叭37 分钟前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
zengzehui39 分钟前
uniapp启动图被拉伸问题
uni-app
无我Code43 分钟前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
susnm1 小时前
Dioxus 与数据库协作
前端·rust
优雅永不过时_v1 小时前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript