当前位置: 首页 > 工具软件 > uCharts > 使用案例 >

uCharts图表横屏竖屏切换

任宾鸿
2023-12-01

继上篇之后。。。。

补充一下:刷新图表的方法还可以通过reshow参数进行控制

<qiun-data-charts 
      type="line"
      :opts="opts"
	  :onzoom="true"
      :chartData="chartData"
      :ontouch="true"
	  :reshow="isShowRotate"
    />

这里我用isShowRotate来控制刷新,监听每次uCharts横屏/竖屏展示时的事件;

rotateIt(){
		// 横屏/竖屏切换主要控制 opts.rotate 参数,Boolean
		  this.opts.rotate = !this.rotateY
		  // if (this.rotateY) {//横屏显示5年
			 //  this.opts.xAxis.itemCount = 4
		  // } else {
			 //  this.opts.xAxis.itemCount = 5
		  // }
		  this.rotateY = !this.rotateY
		  this.isShowRotate = true // 刷新图表
		  setTimeout(()=>{
			  this.isShowRotate = false
		  },500)
	  },
 类似资料: