LineBarChart.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. <template>
  2. <div :id="id" :class="className" :style="{ height:height,width:width }" />
  3. </template>
  4. <script>
  5. import echarts from 'echarts'
  6. import resize from './mixins/resize'
  7. export default {
  8. mixins: [resize],
  9. props: {
  10. className: {
  11. type: String,
  12. default: "chart"
  13. },
  14. id: {
  15. type: String,
  16. default: "chart"
  17. },
  18. width: {
  19. type: String,
  20. default: "100%"
  21. },
  22. height: {
  23. type: String,
  24. default: "400px"
  25. },
  26. data: {
  27. type: Object,
  28. default: {}
  29. },
  30. },
  31. data() {
  32. return {
  33. chart: null
  34. };
  35. },
  36. watch: {
  37. //观察option的变化
  38. data: {
  39. handler(newVal, oldVal) {
  40. if (newVal) {
  41. this.initChart();
  42. }
  43. },
  44. deep: true //对象内部属性的监听,关键。
  45. }
  46. },
  47. mounted() {
  48. this.$nextTick(() => {
  49. this.initChart();
  50. })
  51. },
  52. beforeDestroy() {
  53. if (!this.chart) {
  54. return;
  55. }
  56. this.chart.dispose();
  57. this.chart = null;
  58. },
  59. methods: {
  60. initChart() {
  61. let that = this;
  62. this.chart = echarts.init(document.getElementById(this.id));
  63. let option = {
  64. tooltip: {
  65. trigger: 'axis',
  66. },
  67. grid:{
  68. left:'20%',
  69. },
  70. // legend: {
  71. // textStyle:{
  72. // color:'#FFF',
  73. // },
  74. // data: ['蒸发量', '平均温度'],
  75. // },
  76. xAxis: [
  77. {
  78. type: 'category',
  79. data: that.data.xAxisData,
  80. axisPointer: {
  81. type: 'shadow'
  82. },
  83. axisLabel:{
  84. color:'#333',
  85. },
  86. axisLine:{
  87. lineStyle:{
  88. color:'#EDEDED',
  89. },
  90. },
  91. }
  92. ],
  93. yAxis: [
  94. {
  95. type: 'value',
  96. name: '',
  97. // interval: 50,
  98. // nameTextStyle:{
  99. // color:'#333',
  100. // },
  101. axisLabel: {
  102. // formatter: '{value} ml',
  103. // color:'#FFF'
  104. },
  105. axisLine:{
  106. show:false,
  107. },
  108. axisTick:{
  109. show:false,
  110. },
  111. },
  112. ],
  113. series: [
  114. {
  115. name: that.data.barData.name,
  116. type: 'bar',
  117. itemStyle:{
  118. color:'#1DCAF5'
  119. },
  120. data: that.data.barData.data
  121. },
  122. {
  123. name: that.data.lineData.name,
  124. type: 'line',
  125. itemStyle:{
  126. color:'#5AAFF9',
  127. borderColor:'#CFAF19'
  128. },
  129. data: that.data.lineData.data
  130. }
  131. ]
  132. };
  133. this.chart.setOption(option);
  134. }
  135. }
  136. };
  137. </script>