uniapp中uchart

<template>
	<view class="bg-gray radius line-gray margin text-center padding-top-sm padding-bottom">
		<view class="text-lg">
			全息心理档案总体图
		</view>
		<!-- 折线图 -->
		<view class="qiun-charts">
			<view class="canvas"><canvas canvas-id="canvasLine0" id="canvasLine" class="charts"></canvas></view>
		</view>
		<view class="qiun-charts">
			<view class="canvas"><canvas canvas-id="canvasLine1" id="canvasLine1" class="charts"></canvas></view>
		</view>
		<view class="qiun-charts">
			<view class="canvas"><canvas canvas-id="canvasLine2" id="canvasLine2" class="charts"></canvas></view>
		</view>
		<view class="qiun-charts">
			<view class="canvas"><canvas canvas-id="canvasLine3" id="canvasLine3" class="charts"></canvas></view>
		</view>
		<view class="qiun-charts">
			<view class="canvas"><canvas canvas-id="canvasLine4" id="canvasLine4" class="charts"></canvas></view>
		</view>
		<view class="qiun-charts">
			<view class="canvas"><canvas canvas-id="canvasLine4" id="canvasLine5" class="charts"></canvas></view>
		</view>
		<!-- 雷达图 -->
		<view class="qiun-charts">
			<view class="canvas"><canvas canvas-id="canvasRadar" id="canvasRadar" class="charts"></canvas></view>
		</view>
	</view>
</template>
 
<script>
import uCharts from '../../wxkj/ucharts.js';
var _self;
var canvasLine = null;
export default {
	name: 'transaction',
	data() {
		return {
			Backstage:{
				id:12312321,
				appUserId:21312,
				data:{
					// 因子得分
					n:{
						anxiety:[22,34,56],
					},
					a:{
						altruism:[34,23,45],
					}
					
				},
				// 因子准确度
				accuracy:{
					n:{
						anxiety:[22,34,56],
					},
					a:{
						altruism:[37,23,4],
					}
				},
				createTime:123230000002
			}
		};
	},
	methods: {
		toJSON(){},
		// 折线图
		getServerData() {
			let json = {
				success: true,
				data:[
					
					{
					categories: ['2-23', '2-24', '2-25', '2-26'],
					series: [{
								data: [10, 8, 25, 37],
							},
							{
								data: [10, 38, 15, 57],
							}],
					},
					{
					categories: ['2-29', '2-24', '2-25', '2-26'],
					series: [{
								data: [66, 8, 25, 37],
							},
							{
								data: [10, 38, 15, 57],
							}],
					},
					{
					categories: ['2-29', '2-24', '2-25', '2-26'],
					series: [{
								data: [66, 8, 25, 37],
							},
							{
								data: [10, 38, 15, 57],
							}],
					},
					{
					categories: ['2-29', '2-24', '2-25', '2-26'],
					series: [{
								data: [66, 8, 25, 37],
							},
							{
								data: [10, 38, 15, 57],
							}],
					},
					{
					categories: ['2-29', '2-24', '2-25', '2-26'],
					series: [{
								data: [66, 8, 25, 37],
							},
							{
								data: [10, 38, 15, 57],
							}],
					},
					{
					categories: ['2-29', '2-24', '2-25', '2-26'],
					series: [{
								data: [66, 8, 25, 37],
							},
							{
								data: [10, 38, 15, 57],
							}],
					},
					]
			};
			
			let Line = [{},{},{},{},{},{}];
			for(let i = 0; i < json.data.length;i++){
				Line[i].categories = json.data[i].categories;
				Line[i].series = json.data[i].series;
				_self.showLineA('canvasLine' + i, Line[i]);
			}
		},
		
		// 雷达图的调用
		rand(){
			let json = {
				data:{
				categories: ['维度1', '维度2', '维度3', '维度4', '维度5', '维度6'],
					series: [{
						name: '成交量1',
						data: [90, 110, 165, 195, 187, 172]
					}, {
						name: '成交量2',
						data: [190, 210, 105, 35, 27, 102]
					}]
				}
			
			}
			let Radar = {categories:[],series:[]};
			Radar.categories = json.data.categories;
			Radar.series = json.data.series;
			console.log(Radar.series);
			_self.showRadar("canvasRadar",Radar);
		},
		
		//折线图基本配置
		showLineA(canvasId,chartData) {
			canvasLine = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'line',
				colors:['#16A085', '#BDC3C7'],//两条线的颜色
				fontSize: 11,//字体大小
				legend: {
					show: false,//下方图例是否显示
				},
				dataLabel: false,//显示小数点上的数据
				dataPointShape: true,
				pixelRatio: _self.pixelRatio,
				categories: chartData.categories,
				series: chartData.series,
				animation: true,
				xAxis: {
					disable:true,
					disableGrid:true,
				},
				yAxis: {
					gridType: 'solid',
					gridColor: '#CCCCCC',
					max:100,
					min:0,
					//return什么y轴就显示什么
					format: val => {
						return val.toFixed(0)
					}
				},
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				extra: {
					line: {
						type: 'straight'//折线图中的线为直线
					}
				}
			});
		},
		
		// 雷达图基本配置
		showRadar(canvasId,chartData){
			canvaRadar = new uCharts({
				$this:_self,
				canvasId: canvasId,
				type: 'radar',
				fontSize:11,
				legend:{show:false},
				pixelRatio:_self.pixelRatio,
				animation: true,
				dataLabel: true,
				categories: chartData.categories,
				series: chartData.series,
				width: _self.cWidth*_self.pixelRatio,
				height: _self.cHeight*_self.pixelRatio,
				extra: {
					radar: {
						max: 200
					}
				}
			});
		}
		
		
	},
	onLoad() {
		_self = this;
		this.cWidth = uni.upx2px(690);
		this.cHeight = uni.upx2px(500);
		this.pixelRatio = 1;
		this.getServerData();
		this.rand();
	},
};
</script>
 
<style>
/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
.charts  {
		width: 690upx;
		height: 500upx;
		margin: 30rpx auto;
	}

</style>