AI销管
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符
 
 
 
 

123 行
2.2 KiB

  1. <template>
  2. <view class="dailyDetail">
  3. <view class="title">
  4. <view class="text">
  5. <text class="h1">01月27日接待指标概览数据报告</text>
  6. <text class="h4">生成时间:2022-01-27 01:22</text>
  7. </view>
  8. </view>
  9. <view class="donutChart">
  10. <qiun-data-charts
  11. :key="000"
  12. type="ring"
  13. :chartData="chartData"
  14. :canvas2d="true"
  15. :canvasId='wangxiaohuahahahahaha000'
  16. :opts='opts'
  17. background="#FFFFFF"/>
  18. </view>
  19. </view>
  20. </template>
  21. <script>
  22. export default {
  23. data() {
  24. return {
  25. chartData: {
  26. series: [{
  27. data: [{
  28. "name": "明显下跌",
  29. "value": 9
  30. },
  31. {
  32. "name": "明显上涨",
  33. "value": 8
  34. },
  35. {
  36. "name": "稳定",
  37. "value": 8
  38. }
  39. ]
  40. }
  41. ],
  42. },
  43. opts:{
  44. "legend":{
  45. "show": false,
  46. },
  47. "title": {
  48. "name": "总共",
  49. "fontSize": 18,
  50. "color": "#666666"
  51. },
  52. "subtitle":{
  53. "name": "9个",
  54. "fontSize": 14,
  55. },
  56. "extra": {
  57. "title": {
  58. "name": "总共",
  59. },
  60. "ring": {
  61. "ringWidth":50,
  62. "centerColor": "#FFFFFF",
  63. "activeOpacity": 0.5,
  64. "activeRadius": 10,
  65. "offsetAngle": 0,
  66. "customRadius": 0,
  67. "labelWidth": 12,
  68. "border": false,
  69. "borderWidth": 3,
  70. "borderColor": "#FFFFFF",
  71. "linearType": "none",
  72. },
  73. }
  74. }
  75. }
  76. },
  77. methods: {
  78. }
  79. }
  80. </script>
  81. <style lang="scss">
  82. .dailyDetail {
  83. background: #F3F3F3;
  84. // position: relative;
  85. .title {
  86. // position: fixed;
  87. top: 0;
  88. padding: 26rpx 0 0;
  89. width: 100%;
  90. height: 300rpx;
  91. background-color: #008EF2;
  92. text {
  93. display: flex;
  94. flex-direction: column;
  95. justify-content: center;
  96. align-items: center;
  97. color: #FFFFFF;
  98. }
  99. .h1 {
  100. font-size: 40rpx;
  101. font-weight: bold;
  102. }
  103. .h4 {
  104. font-size: 30rpx;
  105. font-weight: bold;
  106. }
  107. }
  108. .donutChart {
  109. width: 100%;
  110. }
  111. }
  112. </style>