uni-app使用图表ucharts

朴灿烈づ我的快乐病毒、 2023-01-07 13:28 300阅读 0赞

<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>