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>
相关推荐
小小小小宇2 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊2 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习3 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖3 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖3 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水4 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐4 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06274 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121384 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴5 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript