layout.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. <template>
  2. <view class="content">
  3. <qiun-title-bar title="在swiper中使用"/>
  4. <swiper style="height: 330px;" :indicator-dots="true">
  5. <swiper-item>
  6. <view class="charts-box">
  7. <qiun-data-charts type="line" :chartData="chartsDataColumn1" :canvas2d="true" canvasId="swiperida" :inScrollView="true" :pageScrollTop="pageScrollTop"/>
  8. </view>
  9. </swiper-item>
  10. <swiper-item>
  11. <view class="charts-box">
  12. <qiun-data-charts type="column" :chartData="chartsDataColumn1" :canvas2d="true" canvasId="swiperidb" :inScrollView="true" :pageScrollTop="pageScrollTop"/>
  13. </view>
  14. </swiper-item>
  15. <swiper-item>
  16. <view class="charts-box">
  17. <qiun-data-charts type="area" :chartData="chartsDataColumn1" :canvas2d="true" canvasId="swiperidc" :inScrollView="true" :pageScrollTop="pageScrollTop"/>
  18. </view>
  19. </swiper-item>
  20. </swiper>
  21. <qiun-title-bar title="在scroll-view中使用"/>
  22. <scroll-view style="height: 400px;" :scroll-y="true">
  23. <view class="charts-box">
  24. <!-- 如果您的scroll-view可能和我这个一样,既有页面滚动,还有scroll-view滚动,这种情况下,需要动态传入offsetTop的值为页面滚动条滚动的距离 -->
  25. <qiun-data-charts type="column" :chartData="chartsDataColumn1" canvasId="scroll-viewid" :inScrollView="true" :pageScrollTop="pageScrollTop"/>
  26. </view>
  27. <view style="height: 300px;background: #1890FF;">
  28. </view>
  29. </scroll-view>
  30. <qiun-title-bar title="父元素fixed定位"/>
  31. <view class="botton-box">
  32. <button class="uni-button" type="default" @click="openfixed">点击显示弹出层</button>
  33. </view>
  34. <qiun-title-bar title="组件套组件示例(尽量别这么用)"/>
  35. <test-charts :pageScrollTop="pageScrollTop"/>
  36. <qiun-title-bar title="使用v-for生成图表"/>
  37. <view class="charts-box" v-for="(item, index) in listA" :key="item.id">
  38. <!-- 建议循环使用时,加上key值 -->
  39. <qiun-data-charts :key="item.id" :type="item.type" :chartData="item.chartData" :animation="false"/>
  40. </view>
  41. <qiun-title-bar title="使用v-for生成图表2"/>
  42. <view class="charts-box" v-for="(item, index) in listB" :key="item.id">
  43. <!-- 建议循环使用时,加上key值 -->
  44. <qiun-data-charts :key="item.id" :type="item.type" :chartData="item.chartData" :canvas2d="true" :canvasId="item.id" :animation="false"/>
  45. </view>
  46. <view class="fix-class" v-if="fixedzt">
  47. <view class="fix-bottom">
  48. <view class="close-title" @click="openfixed">点击此处关闭弹窗</view>
  49. <qiun-title-bar title="父元素fixed定位"/>
  50. <view class="charts-box">
  51. <qiun-data-charts type="area" :chartData="chartsDataColumn1" :canvas2d="true" canvasId="fixedcanvasid" :inScrollView="true" :pageScrollTop="pageScrollTop"/>
  52. </view>
  53. </view>
  54. </view>
  55. </view>
  56. </template>
  57. <script>
  58. //下面是演示数据,您的项目不需要引用,数据需要您从服务器自行获取
  59. import demodata from '@/mockdata/demodata.json';
  60. export default {
  61. data() {
  62. return {
  63. chartsDataColumn1: {},
  64. pageScrollTop:0,
  65. fixedzt:false,
  66. absolutezt:false,
  67. listA:[],
  68. listB:[]
  69. };
  70. },
  71. onReady() {
  72. //模拟从服务器获取数据
  73. this.getServerData()
  74. //模拟v-for数据变化
  75. setTimeout(() => {
  76. this.listA=[
  77. {id:"xlsldkfjiw1",type:'area',chartData:JSON.parse(JSON.stringify(demodata.Column))},
  78. {id:"docldkfjiw2",type:'line',chartData:JSON.parse(JSON.stringify(demodata.Line))},
  79. {id:"pptldkfjiw3",type:'column',chartData:JSON.parse(JSON.stringify(demodata.Column))}
  80. ]
  81. this.listB=[
  82. {id:"xlsldkfjiw4b",type:'area',chartData:JSON.parse(JSON.stringify(demodata.Column))},
  83. {id:"docldkfjiw5b",type:'line',chartData:JSON.parse(JSON.stringify(demodata.Line))},
  84. {id:"pptldkfjiw6b",type:'column',chartData:JSON.parse(JSON.stringify(demodata.Column))}
  85. ]
  86. },5000)
  87. },
  88. onPageScroll(e) {
  89. this.pageScrollTop = e.scrollTop
  90. },
  91. methods: {
  92. getServerData() {
  93. setTimeout(() => {
  94. //因部分数据格式一样,这里不同图表引用同一数据源的话,需要深拷贝一下构造不同的对象
  95. //开发者需要自行处理服务器返回的数据,应与标准数据格式一致,注意series的data数值应为数字格式
  96. this.chartsDataColumn1=JSON.parse(JSON.stringify(demodata.Column))
  97. this.listA=[
  98. {id:"xlsldkfjiw1",type:'line',chartData:JSON.parse(JSON.stringify(demodata.Line))},
  99. {id:"docldkfjiw2",type:'column',chartData:JSON.parse(JSON.stringify(demodata.Column))},
  100. {id:"pptldkfjiw3",type:'area',chartData:JSON.parse(JSON.stringify(demodata.Line))}
  101. ]
  102. this.listB=[
  103. {id:"xlsldkfjiw4b",type:'line',chartData:JSON.parse(JSON.stringify(demodata.Line))},
  104. {id:"docldkfjiw5b",type:'column',chartData:JSON.parse(JSON.stringify(demodata.Column))},
  105. {id:"pptldkfjiw6b",type:'area',chartData:JSON.parse(JSON.stringify(demodata.Line))}
  106. ]
  107. }, 1500);
  108. },
  109. openfixed(){
  110. this.fixedzt = !this.fixedzt
  111. },
  112. openabsolute(){
  113. }
  114. }
  115. };
  116. </script>
  117. <style>
  118. .content {
  119. display: flex;
  120. flex-direction: column;
  121. flex: 1;
  122. }
  123. .charts-box {
  124. width: 100%;
  125. height: 300px;
  126. }
  127. .botton-box{
  128. display: flex;
  129. align-items: center;
  130. justify-content: center;
  131. height: 80px;
  132. }
  133. .fix-class{
  134. position: fixed;
  135. top:0;
  136. height: 100vh;
  137. width: 100vw;
  138. background: rgba(0,0,0,0.3);
  139. }
  140. .fix-bottom{
  141. position: fixed;
  142. bottom:0;
  143. height: 400px;
  144. width: 100vw;
  145. border-radius: 15px 15px 0px 0px;
  146. background: #FFFFFF;
  147. }
  148. .close-title{
  149. border-bottom: 1px solid #999999;
  150. text-align: center;
  151. line-height: 30px;
  152. height: 30px;
  153. }
  154. </style>