uni-app app 端横屏 展示 echarts 多线拼接 虚实交替

最后效果图：

 

首先APP进入需要横屏的页面:

setTimeout(()=>{
	//#ifdef APP-PLUS
	plus.screen.lockOrientation( 'landscape-primary');//横屏
	//#endif
},1500)

退出页面：

onUnload() {
	//#ifdef APP-PLUS
	plus.screen.lockOrientation( 'portrait-primary');//竖屏
	//#endif
},

 解释为何需要延迟横屏：

uni-app 横屏后退出横屏页面后 重新进其他页面 会造成页面图标、文字放大问题，这个问题uni-app社区里有解释

附连接：

传送门https://ask.dcloud.net.cn/question/99716

然后是echarts 线拼接

实现方式：
通过两条或多条不同样式折线的数据重叠：

//重叠的数据，不需要展示此折线样式的用‘-’代替
series[0].data=[30, 80, 50, '-', '-', '-', '-', '-', '-', '-', '-', '-']

series[1].data: ['-', '-', 50, 60, 70, 30, 55, 50, 40, 39, 38, 39,],//重叠的数据，不需要展示此折线样式的

至于指示器tooltip

.vue页面 我没有找到解决自定义样式的tooltip方法，我只是把虚线的tooltip  隐掉了