pie.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. <template>
  2. <div ref="dom" class="charts chart-pie"></div>
  3. </template>
  4. <script>
  5. import echarts from 'echarts'
  6. import tdTheme from './theme.json'
  7. import { on, off } from '@/libs/tools'
  8. echarts.registerTheme('tdTheme', tdTheme)
  9. export default {
  10. name: 'ChartPie',
  11. props: {
  12. subtext: String,
  13. // 图表标题
  14. text: {
  15. type: String,
  16. default: ''
  17. },
  18. // 数据值
  19. value: {
  20. type: Array,
  21. default: function () {
  22. return []
  23. }
  24. },
  25. // 查询时间
  26. searchData: {
  27. type: Array,
  28. default: function () {
  29. return []
  30. }
  31. },
  32. // 圆环中心标题
  33. title: {
  34. type: String,
  35. default: ''
  36. },
  37. // 圆环中心金额
  38. total: {
  39. type: [Number, String],
  40. default: 0
  41. },
  42. // 圆环各类型颜色
  43. color: {
  44. type: Array,
  45. default: function () {
  46. return []
  47. }
  48. },
  49. // x轴标签旋转角度
  50. xAxisRotate: {
  51. type: Number,
  52. default: 0
  53. }
  54. },
  55. watch: {
  56. total: {
  57. handler (nVal, oVal) {
  58. // console.log(nVal, 'total111111111')
  59. // 为防止当为0时不执行函数
  60. if (nVal !== '') {
  61. this.pageInit()
  62. }
  63. },
  64. deep: true,
  65. immediate: true // 代表如果在 wacth 里声明了 xAxisData 之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行
  66. }
  67. },
  68. data () {
  69. return {
  70. dom: null // echarts实例
  71. }
  72. },
  73. methods: {
  74. resize () {
  75. this.dom.resize()
  76. },
  77. pageInit () {
  78. this.$nextTick(() => {
  79. const legend = this.value.map(_ => _.name)
  80. const option = {
  81. color: this.color,
  82. title: [{
  83. text: '{name|' + this.title + '}\n{val|' + this.formatNumber(this.total) + '}',
  84. top: 'center',
  85. left: 'center',
  86. textStyle: {
  87. rich: {
  88. name: {
  89. fontSize: 14,
  90. fontWeight: 'normal',
  91. color: '#666666',
  92. padding: [10, 0]
  93. },
  94. val: {
  95. fontSize: 24,
  96. fontWeight: 'bold',
  97. color: '#333333'
  98. }
  99. }
  100. }
  101. }],
  102. tooltip: {
  103. trigger: 'item',
  104. formatter: '{b} : {c} ({d}%)'
  105. },
  106. legend: {
  107. orient: 'horizontal',
  108. left: 'center',
  109. bottom: 'bottom',
  110. padding: 5,
  111. data: legend
  112. },
  113. series: [
  114. {
  115. type: 'pie',
  116. radius: ['35%', '50%'],
  117. center: ['50%', '50%'],
  118. avoidLabelOverlap: true, // 在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠
  119. hoverAnimation: false,
  120. label: {
  121. normal: {
  122. formatter: params => {
  123. return (
  124. '{icon|●}{name|' + params.name + '}{value|' +
  125. this.formatNumber(params.value) + '}'
  126. )
  127. },
  128. padding: [0, -100, 25, -130],
  129. rich: {
  130. icon: {
  131. fontSize: 12
  132. },
  133. name: {
  134. fontSize: 14,
  135. padding: [0, 10, 0, 4],
  136. color: '#666666'
  137. },
  138. value: {
  139. fontSize: 16,
  140. fontWeight: 'bold',
  141. color: '#333333'
  142. }
  143. }
  144. }
  145. },
  146. labelLine: {
  147. normal: {
  148. length: 20,
  149. length2: 120,
  150. lineStyle: {
  151. color: '#e6e6e6'
  152. }
  153. }
  154. },
  155. data: this.value,
  156. itemStyle: {
  157. emphasis: {
  158. shadowBlur: 10,
  159. shadowOffsetX: 0,
  160. shadowColor: 'rgba(255, 170, 0, 0.5)'
  161. },
  162. normal: {
  163. borderColor: '#fff',
  164. borderWidth: 2
  165. }
  166. }
  167. }
  168. ]
  169. }
  170. this.dom = echarts.init(this.$refs.dom, 'tdTheme')
  171. console.log(option, 'option')
  172. this.dom.setOption(option)
  173. this.dom.resize()
  174. on(window, 'resize', this.resize)
  175. })
  176. },
  177. // 格式化金额
  178. formatNumber (num) {
  179. const reg = /(?=(\B)(\d{3})+$)/g
  180. return num.toString().replace(reg, ',')
  181. }
  182. },
  183. mounted () {
  184. this.pageInit()
  185. },
  186. beforeDestroy () {
  187. off(window, 'resize', this.resize)
  188. }
  189. }
  190. </script>