fanChart.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <template>
  2. <!-- 饼图 -->
  3. <div style="width:100%;height:100%;textAlign:center;margin:-15px 0;" :id="id">
  4. </div>
  5. </template>
  6. <script>
  7. import echarts from "echarts"
  8. export default {
  9. name: "doughnut",
  10. props: {
  11. id: {
  12. type: String,
  13. default: function createRandomId() {
  14. return (Math.random() * 10000000).toString(16).substr(0, 4) + '-' + (new Date()).getTime() + '-' + Math.random().toString().substr(2, 5);
  15. }
  16. },
  17. renderData: {
  18. type: Array,
  19. default: function () {
  20. return []
  21. }
  22. },
  23. type: {},
  24. name: "",
  25. sum: ""
  26. },
  27. data() {
  28. return {
  29. myCharts: null
  30. }
  31. },
  32. created() { },
  33. mounted() {
  34. this.drawDoughnut()
  35. },
  36. methods: {
  37. drawDoughnut() {
  38. let options = {
  39. tooltip: {
  40. trigger: 'item',
  41. formatter: ""
  42. },
  43. series: [
  44. {
  45. // name: '占比',
  46. type: 'pie',
  47. radius: '55%',
  48. center: ['50%', '60%'],
  49. data: this.renderData,
  50. label: {
  51. normal: {
  52. show: true,
  53. position: 'outside',
  54. textStyle: {
  55. fontSize: '11'
  56. }
  57. },
  58. emphasis: {
  59. show: true
  60. }
  61. },
  62. labelLine: {
  63. normal: {
  64. show: true,
  65. length: 20,
  66. lineStyle: {
  67. color: '#999'
  68. }
  69. },
  70. emphasis: {
  71. show: true
  72. }
  73. }
  74. },
  75. ],
  76. }
  77. this.myCharts = echarts.init(document.getElementById(this.id))
  78. this.myCharts.setOption(options)
  79. },
  80. delName(val) {
  81. if (!!val && val.length > 3) {
  82. return val.substring(0, 3) + '...'
  83. } else {
  84. return ''
  85. }
  86. }
  87. },
  88. watch: {
  89. renderData: {
  90. deep: true,
  91. handler: function () {
  92. this.drawDoughnut()
  93. }
  94. }
  95. }
  96. }
  97. </script>
  98. <style>
  99. </style>