LineOne.vue 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <template>
  2. <view class="charts-box">
  3. <qiun-data-charts type="area" :opts="revenueOpts" :chartData="revenueChartData" />
  4. </view>
  5. </template>
  6. <script>
  7. export default {
  8. data() {
  9. return {
  10. // 公司营收
  11. revenueChartData: {},
  12. revenueOpts: {
  13. color: ["#4B98FE"],
  14. padding: [15, 15],
  15. dataLabel: false,
  16. xAxis: {
  17. disableGrid: true,
  18. },
  19. yAxis: {
  20. // gridColor: "rgba(230,230,230,0.6)",
  21. gridColor: "rgba(200,200,200,0.6)",
  22. disabled: false,
  23. disableGrid: false,
  24. gridType: 'dash',
  25. dashLength: '4',
  26. data: [{
  27. axisLineColor: "#FFFFFF",
  28. min: 0,
  29. }],
  30. },
  31. legend: {
  32. show: false,
  33. position: "top",
  34. float: "right",
  35. },
  36. extra: {
  37. area: {
  38. type: "curve",
  39. opacity: 0.8,
  40. addLine: true,
  41. width: 1,
  42. gradient: true,
  43. },
  44. },
  45. },
  46. dataList: [],
  47. list: {},
  48. fromData: {
  49. dateDay: '2024-01',
  50. homestayId: '1744620500506251265'
  51. },
  52. objList: {}
  53. }
  54. },
  55. onReady() {
  56. this.objList = wx.getStorageSync('fromData')
  57. console.log('交易趋势33333333', this.objList);
  58. this.fromData.dateDay = this.objList.dateDay
  59. this.fromData.homestayId = this.objList.homestayId
  60. // this.drawRevenueCharts();
  61. },
  62. methods: {
  63. // 交易趋势
  64. drawRevenueCharts() {
  65. this.list = this.objList
  66. console.log('交易趋势33333333', this.list);
  67. if (this.list != {}) {
  68. this.list.checkedInChant.forEach(item => {
  69. this.dataList.push(item.checkedInRatio)
  70. })
  71. }
  72. let list1 = {
  73. categories: [
  74. "01-01", "", "", "", "", "", "",
  75. "01-08", "", "", "", "", "", "",
  76. "01-15", "", "", "", "", "", "",
  77. "01-22", "", "", "", "", "", "",
  78. "01-29", "", ""
  79. ],
  80. series: [{
  81. name: "收入",
  82. data: this.dataList,
  83. legendShape: "circle",
  84. color: "#4088FE",
  85. pointShape: "none",
  86. }, ],
  87. }
  88. this.revenueChartData = JSON.parse(JSON.stringify(list1));
  89. },
  90. }
  91. }
  92. </script>
  93. <style lang="scss" scoped>
  94. .charts-box {
  95. width: 630rpx;
  96. height: 388rpx;
  97. }
  98. </style>