PieCharts.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. <template>
  2. <view class="charts-box" style="min-height: 580rpx;">
  3. <qiun-data-charts type="ring" :opts="optsPied" :chartData="chartDataPied" />
  4. </view>
  5. </template>
  6. <script>
  7. export default {
  8. data() {
  9. return {
  10. chartDataPied: {},
  11. optsPied: {
  12. rotate: false,
  13. rotateLock: false,
  14. color: ['#1372FF', '#F89F2A', '#02C493'],
  15. padding: [30, 30, 30, 35],
  16. dataLabel: true,
  17. enableScroll: false,
  18. legend: {
  19. show: true,
  20. position: "bottom",
  21. lineHeight: 25
  22. },
  23. title: {
  24. name: "",
  25. fontSize: 15,
  26. color: "#666666"
  27. },
  28. subtitle: {
  29. name: "",
  30. fontSize: 25,
  31. color: "#7cb5ec"
  32. },
  33. extra: {
  34. ring: {
  35. ringWidth: 25,
  36. activeOpacity: 0.5,
  37. activeRadius: 10,
  38. offsetAngle: 0,
  39. labelWidth: 10,
  40. border: false,
  41. borderWidth: 3,
  42. borderColor: "#FFFFFF"
  43. }
  44. },
  45. },
  46. fromData: {
  47. dateDay: '2024-01',
  48. homestayId: '1744620500506251265'
  49. },
  50. PieChartsList: {},
  51. objList: {}
  52. };
  53. },
  54. onReady() {
  55. setTimeout(() => {
  56. this.objList = wx.getStorageSync('fromData')
  57. this.fromData.dateDay = this.objList.dateDay
  58. this.fromData.homestayId = this.objList.homestayId
  59. console.log('环图0000', this.objList);
  60. }, 2000);
  61. console.log('789465');
  62. setTimeout(() => {
  63. this.getServerData();
  64. }, 3000);
  65. },
  66. methods: {
  67. getServerData() {
  68. this.PieChartsList = this.objList
  69. console.log('环图2222', this.PieChartsList);
  70. this.PieChartsList = {
  71. series: [{
  72. data: [{
  73. "name": "房费",
  74. "value": this.PieChartsList.roomAmount,
  75. "labelText": "房费" + this.PieChartsList.roomRatio + '%'
  76. },
  77. {
  78. "name": "商品",
  79. "value": this.PieChartsList.othersAmount,
  80. "labelText": "商品" + this.PieChartsList.othersRatio + '%'
  81. },
  82. {
  83. "name": "其他",
  84. "value": this.PieChartsList.breakfastAmount,
  85. "labelText": "其他" + this.PieChartsList.breakfastRatio + '%',
  86. },
  87. ],
  88. }],
  89. }
  90. this.chartDataPied = JSON.parse(JSON.stringify(this.PieChartsList));
  91. },
  92. }
  93. };
  94. </script>
  95. <style scoped>
  96. /* 请根据实际需求修改父元素尺寸,组件自动识别宽高 */
  97. .charts-box {
  98. width: 600rpx !important;
  99. height: 560rpx !important;
  100. }
  101. </style>