ucharts图表设置开启横屏显示

本文主要讲ucharts如何设置横屏显示，下面会贴出关键代码和运行实例，关于关键代码在哪里使用请看实例

关键代码：

rotate:true,

这便是开始ucharts横屏显示的关键，当然除此以外还需要设置盒子及渲染的动态宽高，以下实例已经配置好，你可以对比以下代码与你代码的差异，或直接使用实例，如果你不是使用uniapp开发的话，使用VUE的请将view标签换成div.

直接使用实例的话不要忘记引入ucharts的JS，实例下面有js压缩包可点击下载，请看运行效果：

下面是完整示例：最底部有JS包的压缩包，如果用到可以下载，我是从uniapp运行的,

和vue语法是一样的。关键代码上面已经告诉你了，如果需要用到实例请引入两个对应的JS

<template>
	<view class="qiun-columns">
		<view class="qiun-charts-rotate">
			<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts-rotate" :width="cWidth2*pixelRatio" :height="cHeight2*pixelRatio" :style="{'width':cWidth2+'px','height':cHeight2+'px'}" @touchstart="touchColumn"></canvas>
			<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts-rotate" @touchstart="touchColumn"></canvas>
		</view>
	</view>
</template>
<script>
import uCharts from '@/components/u-charts/u-charts.js';
import { isJSON } from '@/common/checker.js';
var _self;
var canvaColumn = null;
export default {
	data() {
		return {
			cWidth2: '',
			cHeight2: '',
			pixelRatio: 1
		};
	},
	onLoad() {
		_self = this;
		//#ifdef MP-ALIPAY
		uni.getSystemInfo({
			success: function(res) {
				if (res.pixelRatio > 1) {
					//正常这里给2就行，如果pixelRatio=3性能会降低一点
					//_self.pixelRatio =res.pixelRatio;
					_self.pixelRatio = 2;
				}
			}
		});
		//#endif
		this.cWidth2=uni.upx2px(700);
		this.cHeight2=uni.upx2px(1100);
		this.getServerData();
	},
	methods: {
		getServerData() {
			// 使用接口时请将以下4行放入调用接口执行成功后的方法里，并将数据换成接口的数据
			let Column = { categories: [], series: [] };
			Column.categories = ['2012', '2013', '2014', '2015', '2016', '2017'];
			Column.series = [
				{ name: '新成交量3', data: [35, 36, 31, 33, 13, 34] },
				{ name: '新成交量4', data: [18, 27, 21, 24, 6, 28] }
			];
			_self.showColumn('canvasColumn', Column);
		},
		showColumn(canvasId, chartData) {
			canvaColumn = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'column',
				padding: [15, 5, 0, 15],
				legend: {
					show: true,
					padding: 5,
					lineHeight: 11,
					margin: 0
				},
				fontSize: 11,
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				animation: true,
				rotate:true,
				categories: chartData.categories,
				series: chartData.series,
				xAxis: {
					disableGrid: true
				},
				yAxis: {
					data: [
						{
							position: 'right',
							axisLine: false,
							format: val => {
								return val.toFixed(0) + '元';
							}
						}
					]
				},
				dataLabel: true,
				width: _self.cWidth2 * _self.pixelRatio,
				height: _self.cHeight2 * _self.pixelRatio,
				extra: {
					column: {
						type: 'group',
						width:
							(_self.cWidth2 * _self.pixelRatio * 0.45) / chartData.categories.length
					}
				}
			});
		},
		touchColumn(e) {
			canvaColumn.showToolTip(e, {
				format: function(item, category) {
					if (typeof item.data === 'object') {
						return category + ' ' + item.name + ':' + item.data.value;
					} else {
						return category + ' ' + item.name + ':' + item.data;
					}
				}
			});
			canvaColumn.touchLegend(e, { animation: true });
		},
		changeData() {
			if (isJSON(_self.textarea)) {
				let newdata = JSON.parse(_self.textarea);
				canvaColumn.updateData({
					series: newdata.series,
					categories: newdata.categories,
					animation: true
				});
			} else {
				uni.showToast({
					title: '数据格式错误',
					image: '../../../static/images/alert-warning.png'
				});
			}
		}
	}
};
</script>
<style>
/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
.qiun-charts-rotate {
		width: 700upx;
		height: 1100upx;
		background-color: #FFFFFF;
		padding: 25upx;
	}
	
	.charts-rotate {
		width: 700upx;
		height: 1100upx;
		background-color: #FFFFFF;
	}
</style>