uni-app使用图表ucharts

<template>
	<view>
		<view>
			图表页面
			<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" bindtouchstart="touchColumn"></canvas>
		</view>
	</view>
</template>

<script>
	import uCharts from '../utils/u-charts/u-charts.min.js'
	var _self;
	var canvaColumn = null;
	export default {
		data() {
			return {
				title: 'Hello',
				cWidth: '',
				cHeight: '',
			}
		},
		onLoad() {
			_self=this;
			this.cWidth = wx.getSystemInfoSync().windowWidth;
			this.cHeight = 500 / 750 * wx.getSystemInfoSync().windowWidth;
			this.getServerData()
		},
		methods: {
		  //   这里 先暂时 应用 ucharts 里面提供的数据 调取他们的接口 
		  getServerData() {
			wx.request({
			  url: 'https://www.ucharts.cn/data.json',
			  data: {
			  },
			  success: function (res) {
				console.log(res,'-----请求回来的参数')
				let Column = { categories: [], series: [] };
				Column.categories = res.data.data.ColumnB.categories;
				Column.series = res.data.data.ColumnB.series;
				//自定义标签颜色和字体大小
				Column.series[1].textColor = '#00f';
				Column.series[1].textSize = 11;
				_self.showColumn("canvasColumn", Column);
			  },
			  fail: () => {
				console.log("请点击右上角【详情】，启用不校验合法域名");
			  },
			})
		  },
		  showColumn(canvasId, chartData) {
			canvaColumn = new uCharts({
			  $this: _self,
			  canvasId: canvasId,
			  type: 'line',
			  legend: true,
			  fontSize: 11,
			  background: '#FFFFFF',
			  pixelRatio: 1,
			  animation: true,
			  categories: chartData.categories,
			  series: chartData.series,
			  xAxis: {
				disableGrid: true,
			  },
			  yAxis: {  
				//disabled:true
			  },
			  dataLabel: true,
			  width: _self.cWidth ,
			  height: _self.cHeight ,
			  extra: {
				column: {
				  type: 'group',
				  width: _self.cWidth * 0.45 / chartData.categories.length
				}
			  }
			});
		  }
		}
	}
</script>

<style>
	
</style>