pieChart.vue 826 B

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. <!-- 饼图 -->
  2. <template>
  3. <view class="charts-box">
  4. <view class="charts-box-title">{{ title }}</view>
  5. <qiun-data-charts type="pie" :canvas2d="true" :ontouch="true" :chartData="chartData" :opts="opts" />
  6. </view>
  7. </template>
  8. <script>
  9. export default {
  10. props: {
  11. chartData: {
  12. type: Object,
  13. default: () => {
  14. return {}
  15. }
  16. },
  17. title: {
  18. type: [String, Number],
  19. default: ''
  20. },
  21. opts: {
  22. type: Object,
  23. default: () => {
  24. return {
  25. dataLabel: false,
  26. legend: {
  27. position: 'right',
  28. lineHeight: 20
  29. }
  30. }
  31. }
  32. }
  33. },
  34. data() {
  35. return {}
  36. }
  37. }
  38. </script>
  39. <style lang="scss" scoped>
  40. .charts-box {
  41. background-color: #fff;
  42. border-radius: 5px;
  43. padding: 18px 15px;
  44. &-title {
  45. text-align: center;
  46. margin-bottom: 10px;
  47. }
  48. }
  49. </style>