doughnut.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <template>
  2. <div style="width:100%;height:100%;" :id="id">
  3. </div>
  4. </template>
  5. <script>
  6. import echarts from "echarts"
  7. export default {
  8. name: "doughnut",
  9. props: {
  10. id: {
  11. type: String,
  12. default: function createRandomId() {
  13. return (Math.random() * 10000000).toString(16).substr(0, 4) + '-' + (new Date()).getTime() + '-' + Math.random().toString().substr(2, 5);
  14. }
  15. },
  16. renderData: {
  17. type: Array,
  18. default: function() {
  19. return []
  20. }
  21. }
  22. },
  23. data() {
  24. return {
  25. myCharts: null
  26. }
  27. },
  28. created() {},
  29. mounted() {
  30. this.drawDoughnut()
  31. },
  32. methods: {
  33. drawDoughnut() {
  34. console.log(this.renderData, "renderData")
  35. let options = {
  36. tooltip: {
  37. trigger: 'item',
  38. formatter: "{b}: ({d}%)"
  39. },
  40. legend: {
  41. orient: 'horizontal',
  42. x: 'center', // 'center'
  43. data: this.renderData.map(item => {
  44. return item.name
  45. })
  46. },
  47. graphic: {
  48. type: 'text',
  49. left: 'center',
  50. top: 'center',
  51. style: {
  52. text: '数据源\n1111',
  53. textAlign: 'center',
  54. fill: '#000',
  55. width: 30,
  56. height: 30
  57. }
  58. },
  59. series: [{
  60. name: '',
  61. type: 'pie',
  62. radius: ['40%', '60%'],
  63. itemStyle: {
  64. normal: {
  65. label: {
  66. show: true,
  67. textStyle: {
  68. color: '#3c4858',
  69. fontSize: "9"
  70. },
  71. formatter: function(val) { //让series 中的文字进行换行
  72. console.log(val,val)
  73. return val.name.split("-")[0];
  74. }
  75. },
  76. title: {
  77. text: 'aaaa'
  78. },
  79. labelLine: {
  80. show: false,
  81. lineStyle: {
  82. color: '#3c4858'
  83. }
  84. }
  85. },
  86. emphasis: {
  87. shadowBlur: 5,
  88. shadowOffsetX: 0,
  89. shadowColor: 'rgba(0, 0, 0, 0.5)',
  90. textColor: '#000'
  91. }
  92. },
  93. // data: [{
  94. // value: 20,
  95. // name: "1"
  96. // },
  97. // {
  98. // value: 20,
  99. // name: "2"
  100. // },
  101. // {
  102. // value: 15,
  103. // name: "3"
  104. // }
  105. // ]
  106. data: this.renderData
  107. }],
  108. color: ['#9DA2D6', '#FBACA1', '#FFE37F']
  109. }
  110. this.myCharts = echarts.init(document.getElementById(this.id))
  111. this.myCharts.setOption(options)
  112. },
  113. },
  114. watch: {
  115. renderData: {
  116. deep: true,
  117. handler: function() {
  118. this.drawDoughnut()
  119. }
  120. }
  121. }
  122. }
  123. </script>
  124. <style>
  125. </style>