uniapp小程序通过引入js使用ucharts

一、下载

在gitee下载ucharts.min.js放到项目中，我是放到util文件夹里面
gitee下载链接

二、写ucharts组件

我写的这个是雷达图，需要其他图只需要修改配置项即可，附上
ucharts文档

<template>
	<view class="qiun-columns">
		<view class="qiun-charts" >
			<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
		</view>
	</view>
</template>

<script>
	// 引入uCharts 方法组件。
	import uCharts from '@/util/ucharts.min.js';
	// 定义全局变量
	var _self;
	var canvaLineA=null;
	export default {
		data() {
			return {
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
			}
		},
		// 页面加载执行的函数
		onLoad() {
			_self = this;
			// uni.upx2px(750) 这是uni-app自带的自适应，以750的尺寸为基准。动态变化
			this.cWidth=uni.upx2px(750);
			this.cHeight=uni.upx2px(500);
			this.getServerData();
		},
		methods: {
			// 获取数据，发请求 （我这里写死）
			getServerData(){
				setTimeout(() => {
					this.chartData = {
						categories: ["维度1","维度2","维度3","维度4","维度5","维度6"],
            series: [
              {
                name: "成交量1",
                data: [90,110,165,195,187,172],
                legendShape: 'rect' // 图例样式
              },
              {
                name: "成交量2",
                data: [190,210,105,35,27,102],
                legendShape: 'rect'
              }
            ]
					}
					_self.showLineA("canvasLineA", this.chartData);
				}, 800)
			},
			// 展示图标的函数 接收参数，一个块的id,一个数据
			showLineA(canvasId,chartData){
				canvaLineA=new uCharts({
					$this:_self,
					canvasId: canvasId,
					// 图标类型
					type: 'radar',
					fontSize:11,
					legend:{
            show:true
          },
					dataLabel:true,
					dataPointShape:true,
					background:'#FFFFFF',
					// pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					context:uni.createCanvasContext(canvasId, _self), // 这里很重要
					color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
            radar: {
              gridType: "circle",
              gridColor: "#CCCCCC",
              gridCount: 3,
              opacity: 0.2,
              max: 200,
							gridEval: 0
            }
          }
				});
      },
			// 点击图表显示的内容
			touchLineA(e) {
				// 使用声明的变量canvaLineA
				canvaLineA.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			}
		}
	}
</script>

<style scoped>
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
	
	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
</style>

三、在需要使用的地方引入该组件

实现效果