pie.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  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: ''
  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. unit: {
  56. type: String,
  57. default: ''
  58. }
  59. },
  60. watch: {
  61. total: {
  62. handler (nVal, oVal) {
  63. // console.log(nVal, 'total111111111')
  64. // 为防止当为0时不执行函数
  65. if (nVal !== '') {
  66. this.pageInit()
  67. }
  68. },
  69. deep: true,
  70. immediate: true // 代表如果在 wacth 里声明了 xAxisData 之后,就会立即先去执行里面的handler方法,如果为 false就跟我们以前的效果一样,不会在绑定的时候就执行
  71. }
  72. },
  73. data () {
  74. return {
  75. dom: null // echarts实例
  76. }
  77. },
  78. methods: {
  79. resize () {
  80. this.dom.resize()
  81. },
  82. pageInit () {
  83. this.$nextTick(() => {
  84. const legend = this.value.map(_ => _.name)
  85. const option = {
  86. color: this.color,
  87. title: [{
  88. text: '{name|' + this.title + '}\n{val|' + this.formatNumber(this.total) + '}',
  89. top: 'center',
  90. left: 'center',
  91. textStyle: {
  92. rich: {
  93. name: {
  94. fontSize: 14,
  95. fontWeight: 'normal',
  96. color: '#666666',
  97. padding: [10, 0]
  98. },
  99. val: {
  100. fontSize: 24,
  101. fontWeight: 'bold',
  102. color: '#333333'
  103. }
  104. }
  105. }
  106. }],
  107. tooltip: {
  108. trigger: 'item',
  109. formatter: `{b} : {c}${this.unit} ${this.unit == '%' ? '' : '({d}%)'}`
  110. },
  111. legend: {
  112. orient: 'horizontal',
  113. left: 'center',
  114. bottom: 'bottom',
  115. padding: 5,
  116. data: legend
  117. },
  118. series: [
  119. {
  120. type: 'pie',
  121. radius: ['35%', '50%'],
  122. center: ['50%', '50%'],
  123. avoidLabelOverlap: true, // 在标签拥挤重叠的情况下会挪动各个标签的位置,防止标签间的重叠
  124. hoverAnimation: false,
  125. label: {
  126. normal: {
  127. formatter: params => {
  128. return (
  129. '{icon|●}{name|' + params.name + '}{value|' +
  130. this.formatNumber(params.value) + this.unit + '}'
  131. )
  132. },
  133. padding: [0, -140, 25, -140],
  134. rich: {
  135. icon: {
  136. fontSize: 12
  137. },
  138. name: {
  139. fontSize: 14,
  140. padding: [0, 10, 0, 4],
  141. color: '#666666'
  142. },
  143. value: {
  144. fontSize: 16,
  145. fontWeight: 'bold',
  146. color: '#333333'
  147. }
  148. }
  149. }
  150. },
  151. labelLine: {
  152. normal: {
  153. length: 20,
  154. length2: 120,
  155. lineStyle: {
  156. color: '#e6e6e6'
  157. }
  158. }
  159. },
  160. data: this.value,
  161. itemStyle: {
  162. emphasis: {
  163. shadowBlur: 10,
  164. shadowOffsetX: 0,
  165. shadowColor: 'rgba(255, 170, 0, 0.5)'
  166. },
  167. normal: {
  168. borderColor: '#fff',
  169. borderWidth: 2
  170. }
  171. }
  172. }
  173. ]
  174. }
  175. // 已创建的先销毁
  176. if (this.dom) {
  177. this.dom.dispose()
  178. }
  179. this.dom = echarts.init(this.$refs.dom, 'tdTheme')
  180. console.log(option, 'option')
  181. this.dom.setOption(option)
  182. this.dom.resize()
  183. on(window, 'resize', this.resize)
  184. })
  185. },
  186. // 格式化金额
  187. formatNumber (num) {
  188. const reg = /(?=(\B)(\d{3})+$)/g
  189. return num.toString().replace(reg, ',')
  190. }
  191. },
  192. mounted () {
  193. this.pageInit()
  194. },
  195. beforeDestroy () {
  196. off(window, 'resize', this.resize)
  197. }
  198. }
  199. </script>