LineChart.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  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. export default {
  9. mixins: [resize],
  10. props: {
  11. className: {
  12. type: String,
  13. default: 'chart'
  14. },
  15. width: {
  16. type: String,
  17. default: '100%'
  18. },
  19. height: {
  20. type: String,
  21. default: '350px'
  22. },
  23. autoResize: {
  24. type: Boolean,
  25. default: true
  26. },
  27. chartData: {
  28. type: Object,
  29. required: true
  30. }
  31. },
  32. data() {
  33. return {
  34. chart: null
  35. }
  36. },
  37. watch: {
  38. chartData: {
  39. deep: true,
  40. handler(val) {
  41. this.setOptions(val)
  42. }
  43. }
  44. },
  45. mounted() {
  46. this.$nextTick(() => {
  47. this.initChart()
  48. })
  49. },
  50. beforeDestroy() {
  51. if (!this.chart) {
  52. return
  53. }
  54. this.chart.dispose()
  55. this.chart = null
  56. },
  57. methods: {
  58. initChart() {
  59. this.chart = echarts.init(this.$el, 'macarons')
  60. this.setOptions(this.chartData)
  61. console.log(this.chartData,8765)
  62. },
  63. setOptions({ x, inspectNumDate,reportDetailNumDate,columnNewsNumDate,reportQueryLogNumDate } = {}) {
  64. console.log(x,45)
  65. this.chart.setOption({
  66. xAxis: {
  67. data: x,
  68. boundaryGap: false,
  69. axisTick: {
  70. show: false
  71. }
  72. },
  73. grid: {
  74. left: 10,
  75. right: 10,
  76. bottom: 20,
  77. top: 30,
  78. containLabel: true
  79. },
  80. tooltip: {
  81. trigger: 'axis',
  82. axisPointer: {
  83. type: 'cross'
  84. },
  85. padding: [5, 10]
  86. },
  87. yAxis: {
  88. axisTick: {
  89. show: false
  90. }
  91. },
  92. legend: {
  93. data: ['送检次数','生成报告','发布文章','查询次数']
  94. },
  95. series: [
  96. {
  97. name: '送检次数',
  98. smooth: true,
  99. type: 'line',
  100. itemStyle: {
  101. normal: {
  102. color: '#459CF9',
  103. lineStyle: {
  104. color: '#459CF9',
  105. width: 2
  106. },
  107. areaStyle: {
  108. color: '#f3f8ff'
  109. }
  110. }
  111. },
  112. data: inspectNumDate,
  113. animationDuration: 2800,
  114. animationEasing: 'quadraticOut'
  115. },
  116. {
  117. name: '生成报告',
  118. smooth: true,
  119. type: 'line',
  120. itemStyle: {
  121. normal: {
  122. color: '#F53C49',
  123. lineStyle: {
  124. color: '#F53C49',
  125. width: 2
  126. },
  127. areaStyle: {
  128. color: '#f3f8ff'
  129. }
  130. }
  131. },
  132. data: reportDetailNumDate,
  133. animationDuration: 2800,
  134. animationEasing: 'quadraticOut'
  135. },
  136. {
  137. name: '发布文章',
  138. smooth: true,
  139. type: 'line',
  140. itemStyle: {
  141. normal: {
  142. color: '#FFBC3E',
  143. lineStyle: {
  144. color: '#FFBC3E',
  145. width: 2
  146. },
  147. areaStyle: {
  148. color: '#f3f8ff'
  149. }
  150. }
  151. },
  152. data: columnNewsNumDate,
  153. animationDuration: 2800,
  154. animationEasing: 'quadraticOut'
  155. },
  156. {
  157. name: '查询次数',
  158. smooth: true,
  159. type: 'line',
  160. itemStyle: {
  161. normal: {
  162. color: '#46D871',
  163. lineStyle: {
  164. color: '#46D871',
  165. width: 2
  166. },
  167. areaStyle: {
  168. color: '#f3f8ff'
  169. }
  170. }
  171. },
  172. data: reportQueryLogNumDate,
  173. animationDuration: 2800,
  174. animationEasing: 'quadraticOut'
  175. },
  176. ]
  177. })
  178. }
  179. }
  180. }
  181. </script>