【uni-app】小程序引入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官网地址
演示模块是各种图表的模板,点击查看代码有相关代码供参考
在这里插入图片描述
文档可以查看相关配置,配置图表样式等
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/Aohanzzz/article/details/128311069