echart-order.vue 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
  1. <template>
  2. <view class="echart-content">
  3. <view class="echart-title">
  4. <view class="e-icon e2"><text class="iconfont icon-dingdan"></text></view> <view class="e-name">订单</view>
  5. </view>
  6. <view class="echart-search">
  7. <view class="echart-search-text">
  8. <view class="search-text">所有:<text>¥{{ orderTotalAmount }}({{ orderTotal }}个)</text></view>
  9. <view class="search-text">当前范围:<text>¥{{ orderData.orderScopeTotalFee }}({{ orderData.orderScopeNum }}个)</text></view>
  10. </view>
  11. <view class="echart-search-date">
  12. <view class="echart-search-date-input">
  13. <picker
  14. mode="date"
  15. :value="date"
  16. :start="startDate"
  17. :end="endDate"
  18. @change="bindStartDateChange($event, 0)"
  19. >
  20. <text class="input-text">{{ orderData.startTime }}</text>
  21. </picker>
  22. <text class="iconfont icon-riqi"></text>
  23. </view>
  24. <view class="line">-</view>
  25. <view class="echart-search-date-input">
  26. <picker
  27. mode="date"
  28. :value="date"
  29. :start="startDate"
  30. :end="endDate"
  31. @change="bindEndDateChange($event, 0)"
  32. >
  33. <text class="input-text">{{ orderData.endTime }}</text>
  34. </picker>
  35. <text class="iconfont icon-riqi"></text>
  36. </view>
  37. </view>
  38. <view class="echart-search-time">
  39. <view
  40. class="time-tab"
  41. v-for="(time, index) in timeList"
  42. :class="{ current: current === index }"
  43. :key="index"
  44. @click="handleTimeClick(time.current, index, 0)"
  45. >{{ time.label }}</view
  46. >
  47. </view>
  48. </view>
  49. <view class="echart-mains">
  50. <view class="echart-mains-none" v-if="isEmpty">
  51. <image
  52. class="none-image"
  53. src="https://static.caimei365.com/app/img/bg/icon_echart_none@2x.png"
  54. mode=""
  55. ></image>
  56. <view class="none-text">暂无数据</view>
  57. </view>
  58. <view class="echart-mains-data" v-else>
  59. <qiun-data-charts type="pie" :opts="opts" :chartData="orderChartData" :errorShow="false" />
  60. </view>
  61. </view>
  62. </view>
  63. </template>
  64. <script>
  65. import { mapState, mapMutations } from 'vuex'
  66. import chartMixin from './mixins/chart.mixin.js'
  67. export default {
  68. mixins: [chartMixin],
  69. props:{
  70. clubId:{
  71. type:Number,
  72. default:0
  73. },
  74. totalAmount:{
  75. type:Number,
  76. default:0
  77. },
  78. totalNum:{
  79. type:Number,
  80. default:0
  81. }
  82. },
  83. data() {
  84. return {
  85. isEmpty:false,
  86. current: 0,
  87. orderChartData:null,
  88. orderTotal:0,
  89. orderTotalAmount:0,
  90. orderData:{
  91. startTime: '',
  92. endTime: '',
  93. orderScopeNum:0,
  94. orderScopeTotalFee:0,
  95. },
  96. params:{
  97. clubId:0,// 机构id
  98. dateType:3,// 日期类别 0日 1月 2半年 3全年
  99. startTime:'',// 开始时间
  100. endTime:'',// 结束时间
  101. type:0 // 统计类别 0订单 1搜索关键词 2咨询记录 3访问记录 4初始状态
  102. },
  103. opts: {
  104. timing: 'easeOut',
  105. duration: 50,
  106. rotate: false,
  107. rotateLock: false,
  108. color: [
  109. '#1890FF',
  110. '#91CB74',
  111. '#FAC858',
  112. '#EE6666',
  113. '#73C0DE',
  114. '#3CA272',
  115. '#FC8452',
  116. '#9A60B4',
  117. '#ea7ccc'
  118. ],
  119. padding: [5, 5, 5, 5],
  120. fontSize: 13,
  121. fontColor: '#666666',
  122. dataLabel: true,
  123. dataPointShape: true,
  124. dataPointShapeType: 'solid',
  125. touchMoveLimit: 60,
  126. enableScroll: false,
  127. enableMarkLine: false,
  128. legend: {
  129. show: false,
  130. position: 'bottom',
  131. lineHeight: 25,
  132. float: 'bottom',
  133. padding: 5,
  134. margin: 5,
  135. backgroundColor: 'rgba(0,0,0,0)',
  136. borderColor: 'rgba(0,0,0,0)',
  137. borderWidth: 0,
  138. fontSize: 12,
  139. fontColor: '#666666',
  140. hiddenColor: '#CECECE',
  141. itemGap: 10
  142. },
  143. title: {
  144. name: '订单总量',
  145. fontSize: 12,
  146. color: '#666666',
  147. offsetX: 0,
  148. offsetY: 0
  149. },
  150. subtitle: {
  151. name: '70%',
  152. fontSize: 12,
  153. color: '#7cb5ec',
  154. offsetX: 0,
  155. offsetY: 0
  156. },
  157. extra: {
  158. pie:{
  159. activeOpacity: 0.5,
  160. activeRadius: 10,
  161. offsetAngle: 0,
  162. labelWidth: 15,
  163. border: true,
  164. borderWidth: 3,
  165. borderColor: "#FFFFFF",
  166. customRadius: 60,
  167. linearType: "none"
  168. },
  169. tooltip: {
  170. showBox: true,
  171. showArrow: true,
  172. showCategory: false,
  173. borderWidth: 0,
  174. borderRadius: 0,
  175. borderColor: '#000000',
  176. borderOpacity: 0.7,
  177. bgColor: '#000000',
  178. bgOpacity: 0.7,
  179. gridType: 'solid',
  180. dashLength: 4,
  181. gridColor: '#CCCCCC',
  182. boxPadding: 3,
  183. fontSize: 12,
  184. lineHeight: 20,
  185. fontColor: '#FFFFFF',
  186. legendShow: true,
  187. legendShape: 'auto',
  188. splitLine: true,
  189. horizentalLine: false,
  190. xAxisLabel: false,
  191. yAxisLabel: false,
  192. labelBgColor: '#FFFFFF',
  193. labelBgOpacity: 0.7,
  194. labelFontColor: '#666666'
  195. }
  196. }
  197. }
  198. }
  199. },
  200. created() {
  201. this.params.clubId = this.clubId
  202. console.log('orderTotal',this.orderTotal)
  203. this.orderTotal = this.totalNum
  204. this.orderTotalAmount = this.totalAmount
  205. this.userClubPortrait(0)
  206. },
  207. methods: {
  208. handleTimeClick(dateType,index,type) {
  209. //年月日点击
  210. console.log('dateType', dateType)
  211. this.current = index
  212. this.params.dateType = dateType
  213. this.params.startTime = ''
  214. this.params.endTime = ''
  215. this.userClubPortrait(type)
  216. },
  217. async userClubPortrait(type){
  218. this.params.type = type
  219. try {
  220. const res = await this.UserService.userClubPortrait(this.params)
  221. const data = res.data
  222. this.orderData.orderScopeNum = data.portrait.orderScopeNum
  223. this.orderData.orderScopeTotalFee = data.portrait.orderScopeTotalFee
  224. this.orderData.startTime = this.params.startTime = data.portrait.startTime
  225. this.orderData.endTime = this.params.endTime = data.portrait.endTime
  226. if(data.order){
  227. this.isEmpty = false
  228. this.getSetOrderData(data.order)
  229. }else{
  230. this.isEmpty = true
  231. }
  232. } catch (error) {
  233. this.$util.msg(error.msg, 2000)
  234. }
  235. },
  236. getSetOrderData(data) {
  237. //模拟从服务器获取数据时的延时
  238. setTimeout(() => {
  239. //模拟服务器返回数据,如果数据格式和标准格式不同,需自行按下面的格式拼接
  240. let res = {
  241. series: [
  242. {
  243. format: 'pieDemo1',
  244. data: data.orderList
  245. }
  246. ]
  247. }
  248. this.orderChartData = JSON.parse(JSON.stringify(res))
  249. }, 500)
  250. }
  251. },
  252. onShow() {}
  253. }
  254. </script>
  255. <style lang="scss"></style>