【uni-app】小程序引入ucharts图表、配置图表样式等

最新推荐文章于 2025-12-26 17:06:34 发布

原创最新推荐文章于 2025-12-26 17:06:34 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #小程序 #echarts

uni-app 专栏收录该内容

1 篇文章

订阅专栏

本文档介绍了如何在uni-app小程序中引入ucharts图表，包括模板、脚本和样式的设置。首先从uni-app插件市场下载并正确导入ucharts，然后在template、script和style部分进行配置。此外，还提供了ucharts官网链接，以供查阅更多图表模板和配置选项。

需要在小程序里加入图表，本来使用echarts，在官网上下载好了文件，但是可能引用方式不对，最后没出来。

一、引入ucharts

于是在uni-app插件市场用了ucharts
ucharts插件下载地址在这里插入图片描述
需要在这里导入到自己的项目，直接下载压缩包再拉进项目没有效果，我怀疑是因为有什么地方没有配置的原因。

导入完多一个组件文件，直接使用插件就可以

template

<view class="charts-box">
	<qiun-data-charts type="area" :opts="opts" :chartData="chartData" />
</view>

script

chartData: {},
opts: {
	color: ['#685efb', '#c6bef0'],
	dataLabel: false,
	legend: {
		position: 'top',
		float: 'right'
	},
	xAxis: {
		disableGrid: true,
		fontColor: '#fff'
	},
	yAxis: {
		gridType: 'dash',
		dashLength: 3,
		data: [{
			unit: '%',
			min: 0
		}]
	},
	extra: {
		area: {
			type: 'curve',
			opacity: 0.8,
			addLine: true,
			width: 2,
			gradient: true,
			activeType: 'hollow'
		}
	}
}

style

.charts-box {
    width: 100%;
    height: 300px;
  }

在这里插入图片描述

二、配置ucharts

如果想要自己配置的话，可以查看官网文件
ucharts官网地址
在演示模块是各种图表的模板，点击查看代码有相关代码供参考
在这里插入图片描述
文档可以查看相关配置，配置图表样式等