LineBarChart.vue 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. <template>
  2. <div ref="chart" style="width:100%;height:385px;" />
  3. </template>
  4. <script>
  5. import echarts from 'echarts'
  6. import { GetDataByName } from '@/api/common'
  7. import draggable from 'vuedraggable'
  8. import Cookies from 'js-cookie'
  9. import { parseTime } from '@/utils/index.js'
  10. import Pagination from '@/components/Pagination'
  11. require('echarts/theme/macarons')
  12. export default {
  13. name: 'LineBarChart',
  14. props: {
  15. chartData: {
  16. type: Object,
  17. required: true
  18. },
  19. // chartOpt: {
  20. // type: Object,
  21. // required: false
  22. // },
  23. },
  24. data() {
  25. return {
  26. chart: null
  27. }
  28. },
  29. watch: {
  30. chartData: {
  31. deep: true,
  32. handler: function (chartData) {
  33. this.renderChart(chartData)
  34. }
  35. },
  36. // schema: {
  37. // deep: true,
  38. // handler: function () {
  39. // this.renderChart(this.data)
  40. // }
  41. // }
  42. },
  43. mounted() {
  44. this.renderChart(this.chartData)
  45. this.$on('resized', this.handleResize)
  46. window.addEventListener('resize', this.handleResize)
  47. },
  48. // created() {
  49. // this.renderChart(this.chartData)
  50. // },
  51. beforeDestroy() {
  52. if (this.chart) {
  53. this.chart.dispose()
  54. }
  55. window.removeEventListener('resize', this.handleResize)
  56. },
  57. methods: {
  58. handleResize() {
  59. if (this.chart) {
  60. this.chart.resize()
  61. }
  62. },
  63. renderChart(chartData) {
  64. var legendArrRe = chartData.legendArr1.concat(chartData.legendArr2)
  65. const option = {
  66. title: { text: 'Stacked Line' },
  67. tooltip: { trigger: 'axis' },
  68. legend: { data:legendArrRe, right: 10, show: true, type: 'scroll' },
  69. grid: { top: '15%', left: '8%', right: '8%', containLabel: true },
  70. xAxis: [{ type: 'category',data:chartData.xAxisArr }],
  71. yAxis: [
  72. {type: 'value', name: 'kg'},
  73. ],
  74. series: function (e) {
  75. var serie = [];
  76. for (var i = 0; i < chartData.xAxisArr.length; i++) {
  77. console.log(i)
  78. var item = {
  79. name: chartData.legendArr1[i],
  80. data: chartData.dataArr1[i],
  81. type: 'line',
  82. emphasis: { label: { show: true, position: 'inside' } },
  83. }
  84. serie.push(item);
  85. }
  86. for (var i = 0; i < chartData.xAxisArr.length; i++) {
  87. console.log(i)
  88. var item = {
  89. name: chartData.legendArr2[i],
  90. data: chartData.dataArr2[i],
  91. type: 'bar',
  92. emphasis: { label: { show: true, position: 'inside' } },
  93. }
  94. serie.push(item);
  95. }
  96. console.log(serie)
  97. return serie;
  98. }()
  99. }
  100. setTimeout(() => {
  101. if (!this.chart) {
  102. this.chart = echarts.init(this.$refs.chart, 'macarons')
  103. }
  104. this.chart.clear()
  105. this.chart.setOption(option)
  106. // if (this.chartOpt) {
  107. // this.chart.setOption(this.chartOpt)
  108. // }
  109. this.chart.setOption(this.chartOpt)
  110. }, 0)
  111. }
  112. }
  113. }
  114. </script>