PieChartDepartment.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. <template>
  2. <div :class="className" :style="{height:height,width:width}" />
  3. </template>
  4. <script>
  5. import echarts from 'echarts'
  6. require('echarts/theme/macarons') // echarts theme
  7. import resize from './mixins/resize'
  8. import { debounce } from '@/utils'
  9. // eslint-disable-next-line no-unused-vars
  10. const animationDuration = 6000
  11. export default {
  12. mixins: [resize],
  13. props: {
  14. className: {
  15. type: String,
  16. default: 'chart'
  17. },
  18. width: {
  19. type: String,
  20. default: '100%'
  21. },
  22. height: {
  23. type: String,
  24. default: '350px'
  25. },
  26. autoResize: {
  27. type: Boolean,
  28. default: true
  29. },
  30. pieDeptData: {
  31. type: Object,
  32. required: true
  33. }
  34. },
  35. data() {
  36. return {
  37. chart: null
  38. }
  39. },
  40. watch: {
  41. pieDeptData: {
  42. deep: true,
  43. handler(val) {
  44. this.setOptions(val)
  45. console.log('watch拿到的val', val)
  46. }
  47. }
  48. },
  49. mounted() {
  50. this.$nextTick(() => {
  51. this.initChart()
  52. })
  53. },
  54. beforeDestroy() {
  55. if (!this.chart) {
  56. return
  57. }
  58. this.chart.dispose()
  59. this.chart = null
  60. },
  61. methods: {
  62. initChart() {
  63. this.chart = echarts.init(this.$el, 'macarons')
  64. this.setOptions(this.pieDeptData)
  65. // console.log('methods拿到的pieDeptData', this.pieDeptData)
  66. },
  67. setOptions({ DeptData, text } = {}) {
  68. // console.log('setOptions拿到的DeptData', DeptData)
  69. this.chart.setOption({
  70. title: {
  71. text: text + '月部门统计',
  72. subtext: '',
  73. x: 'center'
  74. },
  75. tooltip: {
  76. trigger: 'item',
  77. formatter: '{a} <br/>{b} : {c} ({d}%)'
  78. },
  79. legend: {
  80. orient: 'vertical',
  81. left: 'left',
  82. data: ['', '', '', '', '']
  83. },
  84. series: [
  85. {
  86. name: text + '月',
  87. type: 'pie',
  88. radius: '55%',
  89. center: ['50%', '60%'],
  90. data: DeptData,
  91. // data: [
  92. // { value: 335, name: '直接访问' },
  93. // { value: 310, name: '邮件营销' },
  94. // { value: 234, name: '联盟广告' },
  95. // { value: 135, name: '视频广告' },
  96. // { value: 1548, name: '搜索引擎' }
  97. // ],
  98. itemStyle: {
  99. emphasis: {
  100. shadowBlur: 10,
  101. shadowOffsetX: 0,
  102. shadowColor: 'rgba(0, 0, 0, 0.5)'
  103. }
  104. }
  105. }
  106. ]
  107. })
  108. const that = this
  109. // 点击饼图拿到对应内容
  110. this.chart.on('click', function(params) {
  111. // console.log(params)
  112. that.$emit('chartClickDept', params.name)
  113. })
  114. }
  115. }
  116. }
  117. </script>